Add more logic to draw the grid and colorize it

This commit is contained in:
Tissevert 2022-07-23 22:39:59 +02:00
parent e64928a58c
commit f59c379599
2 changed files with 83 additions and 5 deletions

View File

@ -1,6 +1,48 @@
#grid td {
background: #ddd;
}
#grid td, #grid th {
width: 2em;
height: 2em;
}
#grid tbody.ready td, #grid th {
cursor: pointer;
}
#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;
}

View File

@ -1,6 +1,8 @@
import * as Dom from UnitJS.Dom;
var size = 8;
var currentColor = null;
var tBody = Dom.make('tbody');
return {
init: init
@ -8,11 +10,45 @@ return {
function init(elementId) {
var gridElement = document.getElementById(elementId || 'grid');
gridElement.appendChild(Dom.make('thead', {}, [
makeRow({tag: 'th', attributes: headerAttributes})
]));
for(var row = 0; row < size; row++) {
var cells = [];
for(var column = 0; column < size; column++) {
cells.push(Dom.make('td'));
}
gridElement.appendChild(Dom.make('tr', {}, cells));
tBody.appendChild(makeRow({tag: 'td', attributes: bodyAttributes}));
}
gridElement.appendChild(tBody);
}
function makeRow(config) {
var cells = [];
for(var column = 0; column < size; column++) {
cells.push(Dom.make(config.tag, config.attributes(column)));
}
return Dom.make('tr', {}, cells);
}
function headerAttributes(i) {
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')
);
}
}
};
}