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 { #toolbox {
list-style: none; list-style: none;
padding: 0; padding: 0;
display: none;
}
#toolbox.active {
display: block;
} }
#colors { #colors {

8
index.html
View file

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

2
js/Main.js
View file

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