jfinn
/
wbo1
Слідкувати 1
В обрані 0
Форк 0
Код Проблеми 0 Запити на злиття 0 Релізи 0 Вікі Активність
Переглянути джерело

Improve UI. Add GUI logic to board.js.

dev_h
Ophir LOJKINE 11 роки тому
джерело
8ac5131f10
коміт
350a91939b
6 змінених файлів з 84 додано та 24 видалено
Розділений перегляд Показати статистику Diff
  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 Переглянути файл 

@@ -4,20 +4,27 @@ html, body, svg {
4 4 
 }
5 5
6 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 15 
 	overflow:hidden;
16 
+	box-shadow: 0px 0px 9px black;
17 
+	transition-duration:1s;
15 18 
 }
16 19
17 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 26 
 	width:200px;
20 
-	height:1000px;
27 
+	height:100%;
21 28 
 	transition-duration:1s;
22 29 
 }
23 30 
 
@@ -30,7 +37,10 @@ html, body, svg {
30 37 
 }
31 38
32 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 44 
 	color:black;
35 45 
 	text-align:center;
36 46 
 	word-wrap:break-word;
 
@@ -39,16 +49,21 @@ html, body, svg {
39 49 
 }
40 50
41 51 
 #menu:hover h2{
42 
-	color:#EEE;
52 
+	text-shadow: 0px 0px 3px white;
43 53 
 	word-wrap:normal;
44 54 
 	font-size:2em;
45 55 
 }
46 56
47 57 
 #menu li {
48 58 
 	width:150px;
49 
-	color:#999;
50 59 
 }
51 60
61 
+#menu li a {
62 
+	color:#111;
63 
+	border:0;
64 
+}
65 
+
66 
+
52 67 
 #menu li:hover {
53 
-	color:white;
68 
+	text-shadow: 0px 0px 3px white;
54 69 
 }

+ 6
- 1
client-data/board.html Переглянути файл 

@@ -3,6 +3,8 @@
3 3
4 4 
 <head>
5 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 8 
 	<link rel="stylesheet" type="text/css" href="board.css">
7 9 
 	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
8 10 
 </head>
 
@@ -15,7 +17,9 @@
15 17 
 	<div id="menuItems">
16 18 
 		<h3>Tools</h3>
17 19 
 		<ul id="tools">
18 
-			<li class="tool">Tool template</li>
20 
+			<li class="tool">
21 
+				<a href="#">Tool template</a>
22 
+			</li>
19 23 
 		</ul>
20 24
21 25 
 		<h3>Configuration</h3>
 
@@ -35,6 +39,7 @@
35 39 
     ]]></style>
36 40 
     </defs>
37 41 
 </svg>
42 
+<script type="text/javascript" src="js/minitpl.js"></script>
38 43 
 <script type="text/javascript" src="js/board.js"></script>
39 44 
 </body>
40 45 
 </html>

+ 28
- 1
client-data/js/board.js Переглянути файл 

@@ -1,6 +1,21 @@
1 1 
 var Tools = {};
2 2 
 Tools.svg = document.getElementById("canvas");
3 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 19 
 Tools.list = {}; // An array of all known tools. {"toolName" : {toolObject}}
5 20
6 21 
 Tools.add = function (newTool) {
 
@@ -10,23 +25,35 @@ Tools.add = function (newTool) {
10 25 
 	}
11 26 
 	//Add the tool to the list
12 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 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 39 
 	//There is not necessarily already a curTool
17 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 44 
 		//Remove the old event listeners
19 45 
 		for (var event in Tools.curTool.listeners) {
20 46 
 			var listener = Tools.curTool.listeners[event];
21 47 
 			Tools.svg.removeEventListener(event, listener);
22 48 
 		}
23 49 
 	}
50 
+
24 51 
 	//Add the new event listeners
25 52 
 	for (var event in newtool.listeners) {
26 53 
 		var listener = newtool.listeners[event];
27 54 
 		Tools.svg.addEventListener(event, listener);
28 55 
 	}
29 
-	Tools.curTool = Tools.list[toolName];
56 
+	Tools.curTool = newtool;
30 57 
 }
31 58
32 59 
 Tools.drawAndSend = function (data) {

+ 3
- 0
client-data/js/minitpl.js Переглянути файл 

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

+ 14
- 9
other-data/icon.svg Переглянути файл 

@@ -9,12 +9,12 @@
9 9 
    xmlns="http://www.w3.org/2000/svg"
10 10 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
11 11 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
12 
-   width="210mm"
13 
-   height="297mm"
12 
+   width="274.99377"
13 
+   height="226.93753"
14 14 
    id="svg2"
15 15 
    version="1.1"
16 16 
    inkscape:version="0.48.4 r9939"
17 
-   sodipodi:docname="icon.svg">
17 
+   sodipodi:docname="apple-touch-icon.png">
18 18 
   <defs
19 19 
      id="defs4" />
20 20 
   <sodipodi:namedview
 
@@ -25,8 +25,8 @@
25 25 
      inkscape:pageopacity="0.0"
26 26 
      inkscape:pageshadow="2"
27 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 30 
      inkscape:document-units="px"
31 31 
      inkscape:current-layer="layer1"
32 32 
      showgrid="false"
 
@@ -34,7 +34,11 @@
34 34 
      inkscape:window-height="876"
35 35 
      inkscape:window-x="65"
36 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 42 
   <metadata
39 43 
      id="metadata7">
40 44 
     <rdf:RDF>
 
@@ -50,7 +54,8 @@
50 54 
   <g
51 55 
      inkscape:label="Calque 1"
52 56 
      inkscape:groupmode="layer"
53 
-     id="layer1">
57 
+     id="layer1"
58 
+     transform="translate(-251.42499,-495.64374)">
54 59 
     <g
55 60 
        id="g3770">
56 61 
       <rect
 
@@ -77,7 +82,7 @@
77 82 
     </g>
78 83 
     <text
79 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 86 
        x="265.4231"
82 87 
        y="634.68677"
83 88 
        id="text3775"
 
@@ -87,6 +92,6 @@
87 92 
          id="tspan3777"
88 93 
          x="265.4231"
89 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 96 
   </g>
92 97 
 </svg>

+ 5
- 0
server-data/history.txt Переглянути файл 

@@ -2416,3 +2416,8 @@
2416 2416 
 {"type":"point","line":"line1prny9qn4p69s","x":1301,"y":1436}
2417 2417 
 {"type":"point","line":"line1prny9qn4p69s","x":1299,"y":1435}
2418 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"}

Писати Попередній перегляд
Завантаження…
Відмінити
Зберегти