Start designing a proper toolbox

css/colors.css

@@ -0,0 +1,31 @@
+.color0 {
+	background: #d9c7b0;
+}
+
+.color1 {
+	background: #d5d5fb;
+}
+
+.color2 {
+	background: #ffe6c0;
+}
+
+.color3 {
+	background: #edffd3;
+}
+
+.color4 {
+	background: #ffd0d0;
+}
+
+.color5 {
+	background: #fcf;
+}
+
+.color6 {
+	background: #adf;
+}
+
+.color7 {
+	background: #fff89e;
+}

css/grid.css

@@ -1,48 +1,19 @@
-#grid td {
+#grid {
+	border-collapse: collapse;
 	background: #ddd;
 }
 
-#grid td, #grid th {
+#grid td {
 	width: 2em;
 	height: 2em;
 }
 
-#grid tbody.ready td, #grid th {
+#grid td {
 	cursor: pointer;
+	padding: 1px;
 }
 
-#grid .color0 {
-	background: #d9c7b0;
-}
-
-#grid .color1 {
-	background: #d5d5fb;
-}
-
-#grid .color2 {
-	background: #ffe6c0;
-}
-
-#grid .color3 {
-	background: #edffd3;
-}
-
-#grid .color4 {
-	background: #ffd0d0;
-}
-
-#grid .color5 {
-	background: #fcf;
-}
-
-#grid .color6 {
-	background: #adf;
-}
-
-#grid .color7 {
-	background: #fff89e;
-}
-
-#grid th.current {
-	border: 2px dashed #777;
+#grid td:hover {
+	padding: 0;
+	border: 1px dashed #aaa;
 }

css/main.css

@@ -1,3 +1,7 @@
 #mode {
 	list-style: none;
 }
+
+body {
+	cursor: default;
+}

css/toolbox.css

@@ -0,0 +1,28 @@
+#toolbox, #colors {
+	list-style: none;
+	padding: 0;
+}
+
+#colors, #colors * {
+	width: 2em;
+	height: 2em;
+}
+
+#colors * {
+	padding: 2px;
+	display: none;
+}
+
+#colors.open *, #colors .current {
+	display: block;
+}
+
+#colors.open li:hover {
+	border: 2px dashed #777;
+	padding: 0;
+}
+
+#colors {
+	cursor: pointer;
+	display: inline-block;
+}

index.html

@@ -11,7 +11,20 @@
 			<li id="edit">Édition</li>
 		</ul>
 		<div id="playground">
-			<table id="grid"></table>
+			<ul id="toolbox">
+				<li id="toolpicker">
+					<span>Tool</span>
+					<select id="tool">
+						<option>Toggle</option>
+						<option>Surface</option>
+					</select>
+				</li>
+				<li id="palette">
+					<span>Color</span>
+					<ul id="colors"></ul>
+				</li>
+			</ul>
+			<table id="grid"/>
 		</div>
 	</body>
 </html>

js/Grid.js

@@ -1,54 +1,38 @@
 import * as Dom from UnitJS.Dom;
+import currentColor from Toolbox;
 
-var size = 8;
-var currentColor = null;
-var tBody = Dom.make('tbody');
+var grid = {
+	element: null,
+	data: {}
+};
 
 return {
 	init: init
-}
+};
 
-function init(elementId) {
-	var gridElement = document.getElementById(elementId || 'grid');
-	gridElement.appendChild(Dom.make('thead', {}, [
-		makeRow({tag: 'th', attributes: headerAttributes})
-	]));
+function init(size, elementId) {
+	grid.element = document.getElementById(elementId || 'grid');
 	for(var row = 0; row < size; row++) {
-		tBody.appendChild(makeRow({tag: 'td', attributes: bodyAttributes}));
+		grid.element.appendChild(
+			makeRow({tag: 'td', attributes: bodyAttributes, row: row, size: size})
+		);
+		grid.data[row] = {};
 	}
-	gridElement.appendChild(tBody);
 }
 
 function makeRow(config) {
 	var cells = [];
-	for(var column = 0; column < size; column++) {
-		cells.push(Dom.make(config.tag, config.attributes(column)));
+	for(var column = 0; column < config.size; column++) {
+		cells.push(Dom.make(config.tag, config.attributes(config.row, column)));
 	}
 	return Dom.make('tr', {}, cells);
 }
 
-function headerAttributes(i) {
+function bodyAttributes(i, j) {
 	return {
-		class: 'color' + i,
 		onClick: function(e) {
-			if(currentColor != undefined) {
-				currentColor.classList.remove('current');
-			}
-			currentColor = e.target;
-			currentColor.classList.add('current');
-			tBody.classList.add('ready');
-		}
-	};
-}
-
-function bodyAttributes(i) {
-	return {
-		onClick: function(e) {
-			if(currentColor != null) {
-				e.target.classList.toggle(
-					currentColor.className.replace(/.*(color\d).*/, '$1')
-				);
-			}
+			grid.data[i][j] = currentColor();
+			e.target.className = 'color' + grid.data[i][j];
 		}
 	};
 }

js/Main.js

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

js/Toolbox.js

@@ -0,0 +1,40 @@
+import * as Dom from UnitJS.Dom;
+
+var tool = 'toggle';
+var colorPicker = {
+	element: null,
+	current: 0
+};
+
+return {
+	init: init,
+	currentColor: currentColor
+};
+
+function init(size, elementId) {
+	colorPicker.element = document.getElementById(elementId || 'colors');
+	for(var color = 0; color < size; color++) {
+		colorPicker.element.appendChild(Dom.make('li', colorBox(color)));
+	}
+	colorPicker.element.addEventListener('click', function() {
+		colorPicker.element.classList.toggle('open');
+	});
+	colorPicker.element.children[0].classList.add('current');
+}
+
+function colorBox(i) {
+	return {
+		class: 'color' + i,
+		onClick: function(e) {
+			if(colorPicker.element.classList.contains('open')) {
+				colorPicker.element.children[colorPicker.current].classList.remove('current');
+				colorPicker.current = i;
+				colorPicker.element.children[colorPicker.current].classList.add('current');
+			}
+		}
+	};
+}
+
+function currentColor() {
+	return colorPicker.current;
+}