mirror of
https://github.com/lovasoa/whitebophir
synced 2024-11-10 06:24:17 +00:00
Improve UI. Add GUI logic to board.js.
This commit is contained in:
Ophir LOJKINE
parent
8ac5131f10
commit
350a91939b
6 changed files with 85 additions and 25 deletions
|
|
@ -4,20 +4,27 @@ html, body, svg {
|
|||
}
|
||||
|
||||
#menu {
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
color:#EEE;
|
||||
background-color:rgba(0,0,255,0.4);
|
||||
width:20px;
|
||||
height:100%;
|
||||
border-radius:3px;
|
||||
font-family:"Segoe UI","Roboto","Ubuntu";
|
||||
position:fixed;
|
||||
left:10px;
|
||||
top:10px;
|
||||
background-color:rgba(100,200,255,0.7);
|
||||
width:100px;
|
||||
height:2em;
|
||||
overflow:hidden;
|
||||
box-shadow: 0px 0px 9px black;
|
||||
transition-duration:1s;
|
||||
}
|
||||
|
||||
#menu:hover {
|
||||
background-color:rgba(0,0,0,0.8);
|
||||
border-radius:0;
|
||||
left:0;
|
||||
top:0;
|
||||
color:black;
|
||||
background-color:rgba(0,100,255,0.9);
|
||||
width:200px;
|
||||
height:1000px;
|
||||
height:100%;
|
||||
transition-duration:1s;
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +37,10 @@ html, body, svg {
|
|||
}
|
||||
|
||||
#menu h2{ /*Menu title ("Menu")*/
|
||||
font-size:1em;
|
||||
font-size:22px;
|
||||
font-family:monospace;
|
||||
letter-spacing:5px;
|
||||
text-shadow: 0px 0px 9px white;
|
||||
color:black;
|
||||
text-align:center;
|
||||
word-wrap:break-word;
|
||||
|
|
@ -39,16 +49,21 @@ html, body, svg {
|
|||
}
|
||||
|
||||
#menu:hover h2{
|
||||
color:#EEE;
|
||||
text-shadow: 0px 0px 3px white;
|
||||
word-wrap:normal;
|
||||
font-size:2em;
|
||||
}
|
||||
|
||||
#menu li {
|
||||
width:150px;
|
||||
color:#999;
|
||||
}
|
||||
|
||||
#menu li:hover {
|
||||
color:white;
|
||||
#menu li a {
|
||||
color:#111;
|
||||
border:0;
|
||||
}
|
||||
|
||||
|
||||
#menu li:hover {
|
||||
text-shadow: 0px 0px 3px white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" type="text/css" href="board.css">
|
||||
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
|
||||
</head>
|
||||
|
|
@ -15,7 +17,9 @@
|
|||
<div id="menuItems">
|
||||
<h3>Tools</h3>
|
||||
<ul id="tools">
|
||||
<li class="tool">Tool template</li>
|
||||
<li class="tool">
|
||||
<a href="#">Tool template</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Configuration</h3>
|
||||
|
|
@ -35,6 +39,7 @@
|
|||
]]></style>
|
||||
</defs>
|
||||
</svg>
|
||||
<script type="text/javascript" src="js/minitpl.js"></script>
|
||||
<script type="text/javascript" src="js/board.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,21 @@
|
|||
var Tools = {};
|
||||
Tools.svg = document.getElementById("canvas");
|
||||
Tools.socket = io.connect('');
|
||||
Tools.HTML = {
|
||||
template : new Minitpl("#tools > .tool"),
|
||||
addTool : function(toolName) {
|
||||
var callback = function () {
|
||||
Tools.change(toolName);
|
||||
};
|
||||
return this.template.add({
|
||||
"a" : function (elem) {
|
||||
elem.addEventListener("click", callback);
|
||||
elem.id = "toolID-"+toolName;
|
||||
return toolName;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Tools.list = {}; // An array of all known tools. {"toolName" : {toolObject}}
|
||||
|
||||
Tools.add = function (newTool) {
|
||||
|
|
@ -10,23 +25,35 @@ Tools.add = function (newTool) {
|
|||
}
|
||||
//Add the tool to the list
|
||||
Tools.list[newTool.name] = newTool;
|
||||
|
||||
//Add the tool to the GUI
|
||||
Tools.HTML.addTool(newTool.name);
|
||||
}
|
||||
|
||||
Tools.change = function (toolName){
|
||||
if (! (toolName in Tools.list)) {
|
||||
throw "Trying to select a tool that has never been added!";
|
||||
}
|
||||
var newtool = Tools.list[toolName];
|
||||
|
||||
//There is not necessarily already a curTool
|
||||
if (Tools.curTool) {
|
||||
//It's useless to do anything if the new tool is already selected
|
||||
if (newtool === curTool) return;
|
||||
|
||||
//Remove the old event listeners
|
||||
for (var event in Tools.curTool.listeners) {
|
||||
var listener = Tools.curTool.listeners[event];
|
||||
Tools.svg.removeEventListener(event, listener);
|
||||
}
|
||||
}
|
||||
|
||||
//Add the new event listeners
|
||||
for (var event in newtool.listeners) {
|
||||
var listener = newtool.listeners[event];
|
||||
Tools.svg.addEventListener(event, listener);
|
||||
}
|
||||
Tools.curTool = Tools.list[toolName];
|
||||
Tools.curTool = newtool;
|
||||
}
|
||||
|
||||
Tools.drawAndSend = function (data) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
function Minitpl(elem, data) {
|
||||
this.elem = (typeof(elem)==="string") ? document.querySelector(elem) : elem;
|
||||
if (!elem) {
|
||||
throw "Invalid element!";
|
||||
}
|
||||
this.parent = this.elem.parentNode;
|
||||
this.parent.removeChild(this.elem);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@
|
|||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="210mm"
|
||||
height="297mm"
|
||||
width="274.99377"
|
||||
height="226.93753"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
sodipodi:docname="icon.svg">
|
||||
sodipodi:docname="apple-touch-icon.png">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
|
|
@ -25,8 +25,8 @@
|
|||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="1.979899"
|
||||
inkscape:cx="389.11966"
|
||||
inkscape:cy="428.2751"
|
||||
inkscape:cx="137.69467"
|
||||
inkscape:cy="98.49419"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
|
|
@ -34,7 +34,11 @@
|
|||
inkscape:window-height="876"
|
||||
inkscape:window-x="65"
|
||||
inkscape:window-y="24"
|
||||
inkscape:window-maximized="1" />
|
||||
inkscape:window-maximized="1"
|
||||
fit-margin-top="0.2"
|
||||
fit-margin-right="0.2"
|
||||
fit-margin-left="0.2"
|
||||
fit-margin-bottom="0.3" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
|
|
@ -50,7 +54,8 @@
|
|||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
id="layer1"
|
||||
transform="translate(-251.42499,-495.64374)">
|
||||
<g
|
||||
id="g3770">
|
||||
<rect
|
||||
|
|
@ -77,7 +82,7 @@
|
|||
</g>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
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"
|
||||
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"
|
||||
x="265.4231"
|
||||
y="634.68677"
|
||||
id="text3775"
|
||||
|
|
@ -87,6 +92,6 @@
|
|||
id="tspan3777"
|
||||
x="265.4231"
|
||||
y="634.68677"
|
||||
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>
|
||||
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>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.4 KiB |
|
|
@ -2416,3 +2416,8 @@
|
|||
{"type":"point","line":"line1prny9qn4p69s","x":1301,"y":1436}
|
||||
{"type":"point","line":"line1prny9qn4p69s","x":1299,"y":1435}
|
||||
{"type":"point","line":"line1prny9qn4p69s","x":1299,"y":1435}
|
||||
{"type":"newLine","id":"linel5g0ktkg66f4"}
|
||||
{"type":"newLine","id":"linea02p3znygsg0"}
|
||||
{"type":"newLine","id":"linei9jb5lvcsum8"}
|
||||
{"type":"newLine","id":"line66q0z3uuescg"}
|
||||
{"type":"newLine","id":"linejt1atr87rf48"}
|
||||
|
|
|
|||
Loading…
Reference in a new issue