Tissevert/Constellations
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Enable mode switching

Browse source
This commit is contained in:
Tissevert 2022-07-26 19:39:06 +02:00
parent 6071977123
commit e86312b162
5 changed files with 35 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
css/toolbox.css
View file

@ -1,6 +1,11 @@
#toolbox {
list-style: none;
padding: 0;
display: none;
}
#toolbox.active {
display: block;
}
#colors {

8
index.html
View file

@ -7,9 +7,11 @@
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<ul id="mode">
<li id="edit">Edit</li>
</ul>
<select id="mode">
<option value="play">Play</option>
<option disabled value="solve">Solve</option>
<option value="edit">Edit</option>
</select>
<div id="playground">
<ul id="toolbox">
<li id="toolpicker">

2
js/Main.js
View file

@ -1,7 +1,9 @@
import Grid;
import Toolbox;
import Mode;
var size = 8;
Grid.init(size);
Toolbox.init(size);
Mode.init();

14
js/Mode.js Normal file
View file

@ -0,0 +1,14 @@
import Toolbox;
var mode;
return {
init: init
}
function init(elementId) {
mode = document.getElementById(elementId || 'mode');
mode.addEventListener('change', function() {
Toolbox.activate(mode.value == 'edit');
});
}

12
js/Toolbox.js
View file

@ -1,24 +1,30 @@
import * as Dom from UnitJS.Dom;
var toolbox;
var tool;
var colors;
return {
activate: activate,
init: init,
tool: tool,
color: color
};
function activate(on) {
toolbox.classList[on ? 'add' : 'remove']('active');
}
function init(size, elementId) {
root = document.getElementById(elementId || 'toolbox');
colors = root.querySelector('#colors');
toolbox = document.getElementById(elementId || 'toolbox');
colors = toolbox.querySelector('#colors');
for(var i = 0; i < size; i++) {
colors.appendChild(Dom.make('option', {class: 'color' + i}));
}
colors.addEventListener('change', function() {
colors.className = color();
});
tool = root.querySelector('#tool');
tool = toolbox.querySelector('#tool');
}
function tool() {