Permalink
Browse files

Initialization of the project

  • Loading branch information...
Gulix committed May 27, 2016
1 parent 39dd11c commit ec3e8d7e333bc95f15fe0d43145430fba2e5d8a9
View
@@ -0,0 +1,6 @@
Gulix Edits Cards with Knockout Open Source
Geckos Edit Cards Kos...
https://pixabay.com/fr/gecko-animal-de-sang-froid-l%C3%A9zard-151226/
https://commons.wikimedia.org/wiki/File:Reptile-305158.svg
View
@@ -0,0 +1,52 @@
body {
background-color: #820701;
}
#wrapper {
margin: 0 auto;
width: 982px;
}
.vspace {
height: 2em;
}
/* Top Main Menu */
.main-menu { display:table; float:right; margin: 1em 0 0.5em 0; font-size: 14px; font-weight: bold; }
.main-menu ul li { display: inline; }
.main-menu ul li a {
display: inline-block; padding: 0.4em 1.5em; text-decoration: none;
-moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em;
}
.main-menu ul li a, .main-menu ul li a:visited { color: white; }
.main-menu ul li a.active, .main-menu ul li a:hover { background-color: rgb(81, 29, 0); }
ul, ol, dir, menu {
list-style: none;
}
/* Blocks of information */
.sticker {
background-color: white; padding: 1.25em 1.45em 1.25em 1.55em; margin: 0.5em 0 3em 0; -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em;
opacity:0.9; -moz-box-shadow: 0 0 1.1em #666; -webkit-box-shadow: 0 0 1.1em #666; box-shadow: 0 0 1.1em #666;
}
.sticker .heading, .sticker h1 { color: #A71500; margin: 0.25em 0 0.25em 0; font-weight: bold; font-size: 1.2em; }
.stickerHeading {
background-color: rgb(229, 218, 214); height: 1.3em; margin: -2em -1.45em 1.25em -1.55em; padding: 0.4em 1em 1.1em 1.75em;
-moz-border-radius-topright: 1em; -moz-border-radius-topleft: 1em;
-webkit-border-top-right-radius: 1em; -webkit-border-top-left-radius: 1em;
border-top-right-radius: 1em; border-top-left-radius: 1em;
}
/* Left-Right columns */
.floatLeft {
float: left !important;
}
.floatRight {
float: right !important;
}
.clear {
clear: both;
}
View
@@ -0,0 +1,102 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/styles.css"></link>
</head>
<body>
<div id="wrapper">
<div class="vspace"></div>
<div class="main-menu">
<ul>
<li><a rel="documentation" href="#">Documentation</a></li>
<li><a href="#">Github Page</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="sticker fullWidth">
<div class="stickerHeading "><h1>Key concepts</h1></div>
<select size="3" data-bind="options: listCards, optionsText: 'cardName', value: editableCard">
<option>text1</option>
<option>text2</option>
<option>text3</option>
<option>text4</option>
<option>text5</option>
</select>
<div class="clear"></div>
</div>
<div class="floatLeft">
<div class="sticker" style="width: 380px" data-bind="with: editableCard">
<div class="stickerHeading"><h1>Card Details</h1></div>
Ici se trouvent les éléments définissant la carte
<div data-bind="foreach: fields">
<div>
<span data-bind="text: label"></span><input type="text" data-bind="value: textValue"></input>
</div>
</div>
</div>
</div>
<div class="sticker floatRight" style="width:494px">
<div class="stickerHeading"><h1>Key concepts</h1></div>
<canvas id="c" data-bind="fabric: generatedTemplate" ></canvas>
</div>
</div>
<script src="lib/fabric.min.js"></script>
<script src="lib/knockout-3.4.0.js"></script>
<script src="js/utils.js"></script>
<script src="js/fabricHandler.js"></script>
<!-- ViewModels -->
<script src="viewModels/cardTemplateVM.js"></script>
<script src="viewModels/cardVM.js"></script>
<script src="viewModels/editableFieldVM.js"></script>
<script src="viewModels/engineVM.js"></script>
<script>
var jsonTemplate = {
"fields": [
{ "name": "name", "label": "Name :", "default": "Captain Wolf"},
{ "name": "brawl", "label": "Brawl :", "default": "3d10"},
{ "name": "shoot", "label": "Shoot :", "default": "3d10"},
{ "name": "dodge", "label": "Dodge :", "default": "2d8"},
{ "name": "might", "label": "Might :", "default": "3d10"},
{ "name": "finesse", "label": "Finesse :", "default": "2d8"},
{ "name": "cunning", "label": "Cunning :", "default": "3d10"},
{ "name": "description", "label": "Description :", "default": "..."},
],
"canvasFields": [
{"type":"rect", "width": 350, "height":495, "fill":"#CAAB7F"},
{"type":"text","text":"Leader :", "fontSize": 22},
{"type":"text","text":"$name", "fontSize": 22, "fontWeight": "bold", "left": 80},
{"type":"rect", "width": 170, "height":106, "left":165, "top":37, "fill":"#E07B4F", "stroke":"#000000"},
{"type":"rect", "width": 170, "height":106, "left":165, "top":150, "fill":"#ACA497", "stroke":"#000000"},
{"type":"text","text":"Brawl", "fontSize": 22, "fontWeight": "bold", "left": 175, "top": 40},
{"type":"text","text":"Shoot", "fontSize": 22, "fontWeight": "bold", "left": 175, "top": 75},
{"type":"text","text":"Dodge", "fontSize": 22, "fontWeight": "bold", "left": 175, "top": 110},
{"type":"text","text":"Might", "fontSize": 22, "fontWeight": "bold", "left": 175, "top": 153},
{"type":"text","text":"Finesse", "fontSize": 22, "fontWeight": "bold", "left": 175, "top": 188},
{"type":"text","text":"Cunning", "fontSize": 22, "fontWeight": "bold", "left": 175, "top": 223},
{"type":"text","text":"$brawl", "fontSize": 22, "fontWeight": "bold", "left": 270, "top": 40},
{"type":"text","text":"$shoot", "fontSize": 22, "fontWeight": "bold", "left": 270, "top": 75},
{"type":"text","text":"$dodge", "fontSize": 22, "fontWeight": "bold", "left": 270, "top": 110},
{"type":"text","text":"$might", "fontSize": 22, "fontWeight": "bold", "left": 270, "top": 153},
{"type":"text","text":"$finesse", "fontSize": 22, "fontWeight": "bold", "left": 270, "top": 188},
{"type":"text","text":"$cunning", "fontSize": 22, "fontWeight": "bold", "left": 270, "top": 223}
],
"canvasBackground": "#CAAB7F",
"canvasWidth": 340,
"canvasHeight": 495
};
var template = new cardTemplateVM(jsonTemplate);
var engineVM = new engineVM(template);
ko.applyBindings(engineVM);
</script>
</body>
</html>
View
@@ -0,0 +1,9 @@
ko.bindingHandlers.fabric = {
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var viewModel = bindingContext.$data;
var jsonValue = viewModel.generatedTemplate();
var canvas = viewModel.canvas;
canvas.loadFromJSON(jsonValue, canvas.renderAll.bind(canvas));
}
};
View
@@ -0,0 +1 @@
function isNumber(obj) { return !isNaN(parseFloat(obj)) }
View

Large diffs are not rendered by default.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit ec3e8d7

Please sign in to comment.