jfinn
/
wbo1
Volgen 1
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

Improve UI. Add GUI logic to board.js.

dev_h
Ophir LOJKINE 11 jaren geleden
bovenliggende
8ac5131f10
commit
350a91939b
6 gewijzigde bestanden met toevoegingen van 84 en 24 verwijderingen
Gecombineerde weergave Toon Diff Stats
  1. 28
    13
      client-data/board.css
  2. 6
    1
      client-data/board.html
  3. 28
    1
      client-data/js/board.js
  4. 3
    0
      client-data/js/minitpl.js
  5. 14
    9
      other-data/icon.svg
  6. 5
    0
      server-data/history.txt

+ 28
- 13
client-data/board.css Bestand weergeven

4 
 }
 4 
 }
5
5
6 
 #menu {
 6 
 #menu {
7 
-	position:absolute;
8 
-	left:0;
9 
-	top:0;
10 
-	color:#EEE;
11 
-	background-color:rgba(0,0,255,0.4);
12 
-	width:20px;
13 
-	height:100%;
7 
+	border-radius:3px;
8 
+	font-family:"Segoe UI","Roboto","Ubuntu";
9 
+	position:fixed;
10 
+	left:10px;
11 
+	top:10px;
12 
+	background-color:rgba(100,200,255,0.7);
13 
+	width:100px;
14 
+	height:2em;
14 
 	overflow:hidden;
 15 
 	overflow:hidden;
16 
+	box-shadow: 0px 0px 9px black;
17 
+	transition-duration:1s;
15 
 }
 18 
 }
16
19
17 
 #menu:hover {
 20 
 #menu:hover {
18 
-	background-color:rgba(0,0,0,0.8);
21 
+	border-radius:0;
22 
+	left:0;
23 
+	top:0;
24 
+	color:black;
25 
+	background-color:rgba(0,100,255,0.9);
19 
 	width:200px;
 26 
 	width:200px;
20 
-	height:1000px;
27 
+	height:100%;
21 
 	transition-duration:1s;
 28 
 	transition-duration:1s;
22 
 }
 29 
 }
23
30
30 
 }
 37 
 }
31
38
32 
 #menu h2{ /*Menu title ("Menu")*/
 39 
 #menu h2{ /*Menu title ("Menu")*/
33 
-	font-size:1em;
40 
+	font-size:22px;
41 
+	font-family:monospace;
42 
+	letter-spacing:5px;
43 
+	text-shadow: 0px 0px 9px white;
34 
 	color:black;
 44 
 	color:black;
35 
 	text-align:center;
 45 
 	text-align:center;
36 
 	word-wrap:break-word;
 46 
 	word-wrap:break-word;
39 
 }
 49 
 }
40
50
41 
 #menu:hover h2{
 51 
 #menu:hover h2{
42 
-	color:#EEE;
52 
+	text-shadow: 0px 0px 3px white;
43 
 	word-wrap:normal;
 53 
 	word-wrap:normal;
44 
 	font-size:2em;
 54 
 	font-size:2em;
45 
 }
 55 
 }
46
56
47 
 #menu li {
 57 
 #menu li {
48 
 	width:150px;
 58 
 	width:150px;
49 
-	color:#999;
50 
 }
 59 
 }
51
60
61 
+#menu li a {
62 
+	color:#111;
63 
+	border:0;
64 
+}
65 
+
66 
+
52 
 #menu li:hover {
 67 
 #menu li:hover {
53 
-	color:white;
68 
+	text-shadow: 0px 0px 3px white;
54 
 }
 69 
 }

+ 6
- 1
client-data/board.html Bestand weergeven

3
3
4 
 <head>
 4 
 <head>
5 
 	<meta charset="utf-8" />
 5 
 	<meta charset="utf-8" />
6 
+	<link rel="icon" type="image/png" href="favicon.png" />
7 
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
6 
 	<link rel="stylesheet" type="text/css" href="board.css">
 8 
 	<link rel="stylesheet" type="text/css" href="board.css">
7 
 	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
 9 
 	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
8 
 </head>
 10 
 </head>
15 
 	<div id="menuItems">
 17 
 	<div id="menuItems">
16 
 		<h3>Tools</h3>
 18 
 		<h3>Tools</h3>
17 
 		<ul id="tools">
 19 
 		<ul id="tools">
18 
-			<li class="tool">Tool template</li>
20 
+			<li class="tool">
21 
+				<a href="#">Tool template</a>
22 
+			</li>
19 
 		</ul>
 23 
 		</ul>
20
24
21 
 		<h3>Configuration</h3>
 25 
 		<h3>Configuration</h3>
35 
     ]]></style>
 39 
     ]]></style>
36 
     </defs>
 40 
     </defs>
37 
 </svg>
 41 
 </svg>
42 
+<script type="text/javascript" src="js/minitpl.js"></script>
38 
 <script type="text/javascript" src="js/board.js"></script>
 43 
 <script type="text/javascript" src="js/board.js"></script>
39 
 </body>
 44 
 </body>
40 
 </html>
 45 
 </html>

+ 28
- 1
client-data/js/board.js Bestand weergeven

1 
 var Tools = {};
 1 
 var Tools = {};
2 
 Tools.svg = document.getElementById("canvas");
 2 
 Tools.svg = document.getElementById("canvas");
3 
 Tools.socket = io.connect('');
 3 
 Tools.socket = io.connect('');
4 
+Tools.HTML = {
5 
+	template : new Minitpl("#tools > .tool"),
6 
+	addTool : function(toolName) {
7 
+		var callback = function () {
8 
+			Tools.change(toolName);
9 
+		};
10 
+		return this.template.add({
11 
+			"a" : function (elem) {
12 
+				elem.addEventListener("click", callback);
13 
+				elem.id = "toolID-"+toolName;
14 
+				return toolName;
15 
+			}
16 
+		});
17 
+	}
18 
+}
4 
 Tools.list = {}; // An array of all known tools. {"toolName" : {toolObject}}
 19 
 Tools.list = {}; // An array of all known tools. {"toolName" : {toolObject}}
5
20
6 
 Tools.add = function (newTool) {
 21 
 Tools.add = function (newTool) {
10 
 	}
 25 
 	}
11 
 	//Add the tool to the list
 26 
 	//Add the tool to the list
12 
 	Tools.list[newTool.name] = newTool;
 27 
 	Tools.list[newTool.name] = newTool;
28 
+
29 
+	//Add the tool to the GUI
30 
+	Tools.HTML.addTool(newTool.name);
13 
 }
 31 
 }
14
32
15 
 Tools.change = function (toolName){
 33 
 Tools.change = function (toolName){
34 
+	if (! (toolName in Tools.list)) {
35 
+		throw "Trying to select a tool that has never been added!";
36 
+	}
37 
+	var newtool = Tools.list[toolName];
38 
+
16 
 	//There is not necessarily already a curTool
 39 
 	//There is not necessarily already a curTool
17 
 	if (Tools.curTool) {
 40 
 	if (Tools.curTool) {
41 
+		//It's useless to do anything if the new tool is already selected
42 
+		if (newtool === curTool) return;
43 
+
18 
 		//Remove the old event listeners
 44 
 		//Remove the old event listeners
19 
 		for (var event in Tools.curTool.listeners) {
 45 
 		for (var event in Tools.curTool.listeners) {
20 
 			var listener = Tools.curTool.listeners[event];
 46 
 			var listener = Tools.curTool.listeners[event];
21 
 			Tools.svg.removeEventListener(event, listener);
 47 
 			Tools.svg.removeEventListener(event, listener);
22 
 		}
 48 
 		}
23 
 	}
 49 
 	}
50 
+
24 
 	//Add the new event listeners
 51 
 	//Add the new event listeners
25 
 	for (var event in newtool.listeners) {
 52 
 	for (var event in newtool.listeners) {
26 
 		var listener = newtool.listeners[event];
 53 
 		var listener = newtool.listeners[event];
27 
 		Tools.svg.addEventListener(event, listener);
 54 
 		Tools.svg.addEventListener(event, listener);
28 
 	}
 55 
 	}
29 
-	Tools.curTool = Tools.list[toolName];
56 
+	Tools.curTool = newtool;
30 
 }
 57 
 }
31
58
32 
 Tools.drawAndSend = function (data) {
 59 
 Tools.drawAndSend = function (data) {

+ 3
- 0
client-data/js/minitpl.js Bestand weergeven

1 
 function Minitpl(elem, data) {
 1 
 function Minitpl(elem, data) {
2 
 	this.elem = (typeof(elem)==="string") ? document.querySelector(elem) : elem;
 2 
 	this.elem = (typeof(elem)==="string") ? document.querySelector(elem) : elem;
3 
+	if (!elem) {
4 
+		throw "Invalid element!";
5 
+	}
3 
 	this.parent = this.elem.parentNode;
 6 
 	this.parent = this.elem.parentNode;
4 
 	this.parent.removeChild(this.elem);
 7 
 	this.parent.removeChild(this.elem);
5 
 }
 8 
 }

+ 14
- 9
other-data/icon.svg Bestand weergeven

9 
    xmlns="http://www.w3.org/2000/svg"
 9 
    xmlns="http://www.w3.org/2000/svg"
10 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 10 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
11 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 11 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
12 
-   width="210mm"
13 
-   height="297mm"
12 
+   width="274.99377"
13 
+   height="226.93753"
14 
    id="svg2"
 14 
    id="svg2"
15 
    version="1.1"
 15 
    version="1.1"
16 
    inkscape:version="0.48.4 r9939"
 16 
    inkscape:version="0.48.4 r9939"
17 
-   sodipodi:docname="icon.svg">
17 
+   sodipodi:docname="apple-touch-icon.png">
18 
   <defs
 18 
   <defs
19 
      id="defs4" />
 19 
      id="defs4" />
20 
   <sodipodi:namedview
 20 
   <sodipodi:namedview
25 
      inkscape:pageopacity="0.0"
 25 
      inkscape:pageopacity="0.0"
26 
      inkscape:pageshadow="2"
 26 
      inkscape:pageshadow="2"
27 
      inkscape:zoom="1.979899"
 27 
      inkscape:zoom="1.979899"
28 
-     inkscape:cx="389.11966"
29 
-     inkscape:cy="428.2751"
28 
+     inkscape:cx="137.69467"
29 
+     inkscape:cy="98.49419"
30 
      inkscape:document-units="px"
 30 
      inkscape:document-units="px"
31 
      inkscape:current-layer="layer1"
 31 
      inkscape:current-layer="layer1"
32 
      showgrid="false"
 32 
      showgrid="false"
34 
      inkscape:window-height="876"
 34 
      inkscape:window-height="876"
35 
      inkscape:window-x="65"
 35 
      inkscape:window-x="65"
36 
      inkscape:window-y="24"
 36 
      inkscape:window-y="24"
37 
-     inkscape:window-maximized="1" />
37 
+     inkscape:window-maximized="1"
38 
+     fit-margin-top="0.2"
39 
+     fit-margin-right="0.2"
40 
+     fit-margin-left="0.2"
41 
+     fit-margin-bottom="0.3" />
38 
   <metadata
 42 
   <metadata
39 
      id="metadata7">
 43 
      id="metadata7">
40 
     <rdf:RDF>
 44 
     <rdf:RDF>
50 
   <g
 54 
   <g
51 
      inkscape:label="Calque 1"
 55 
      inkscape:label="Calque 1"
52 
      inkscape:groupmode="layer"
 56 
      inkscape:groupmode="layer"
53 
-     id="layer1">
57 
+     id="layer1"
58 
+     transform="translate(-251.42499,-495.64374)">
54 
     <g
 59 
     <g
55 
        id="g3770">
 60 
        id="g3770">
56 
       <rect
 61 
       <rect
77 
     </g>
 82 
     </g>
78 
     <text
 83 
     <text
79 
        xml:space="preserve"
 84 
        xml:space="preserve"
80 
-       style="font-size:154.44700622999999950px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;font-family:Sans"
85 
+       style="font-size:154.44700623px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;font-family:Sans"
81 
        x="265.4231"
 86 
        x="265.4231"
82 
        y="634.68677"
 87 
        y="634.68677"
83 
        id="text3775"
 88 
        id="text3775"
87 
          id="tspan3777"
 92 
          id="tspan3777"
88 
          x="265.4231"
 93 
          x="265.4231"
89 
          y="634.68677"
 94 
          y="634.68677"
90 
-         style="font-size:154.44700622999999950px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Ubuntu-Title;-inkscape-font-specification:Ubuntu-Title;fill:#ff0000">WBO</tspan></text>
95 
+         style="font-size:154.44700623px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ff0000;font-family:Ubuntu-Title;-inkscape-font-specification:Ubuntu-Title">WBO</tspan></text>
91 
   </g>
 96 
   </g>
92 
 </svg>
 97 
 </svg>

+ 5
- 0
server-data/history.txt Bestand weergeven

2416 
 {"type":"point","line":"line1prny9qn4p69s","x":1301,"y":1436}
 2416 
 {"type":"point","line":"line1prny9qn4p69s","x":1301,"y":1436}
2417 
 {"type":"point","line":"line1prny9qn4p69s","x":1299,"y":1435}
 2417 
 {"type":"point","line":"line1prny9qn4p69s","x":1299,"y":1435}
2418 
 {"type":"point","line":"line1prny9qn4p69s","x":1299,"y":1435}
 2418 
 {"type":"point","line":"line1prny9qn4p69s","x":1299,"y":1435}
2419 
+{"type":"newLine","id":"linel5g0ktkg66f4"}
2420 
+{"type":"newLine","id":"linea02p3znygsg0"}
2421 
+{"type":"newLine","id":"linei9jb5lvcsum8"}
2422 
+{"type":"newLine","id":"line66q0z3uuescg"}
2423 
+{"type":"newLine","id":"linejt1atr87rf48"}

Schrijf Voorbeeld
Laden…
Annuleren
Opslaan