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

Implement mode switching, rename project to 'Constellations'

Browse source
This commit is contained in:
Tissevert 2022-07-28 17:39:51 +02:00
parent ec5279127f
commit 6e62789c89
14 changed files with 383 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
css/grid.css
View file

@ -1,5 +1,10 @@
#grid { #grid {
border-collapse: collapse; border-collapse: collapse;
border: 1px solid #ddd;
}
#grid.active {
border: none;
background: #ddd; background: #ddd;
} }
@ -7,11 +12,16 @@
width: 2em; width: 2em;
height: 2em; height: 2em;
display: inline-block; display: inline-block;
cursor: pointer;
padding: 1px; padding: 1px;
text-align: center;
line-height: 2em;
} }
#grid td:hover { #grid.active td {
cursor: pointer;
}
#grid.active td:hover {
padding: 0; padding: 0;
border: 1px dashed #aaa; border: 1px dashed #aaa;
} }
@ -19,3 +29,15 @@
#grid td[class*="color"] { #grid td[class*="color"] {
padding: 0; padding: 0;
} }
#grid td.off {
filter: invert(1);
}
#save {
display: none;
}
#save.active {
display: initial;
}

4
guix.scm
View file

@ -10,7 +10,7 @@
(UnitJS (load "/home/Bureau/unitJS/guix.scm")) (UnitJS (load "/home/Bureau/unitJS/guix.scm"))
(WTK (load "/home/Bureau/WTK/guix.scm"))) (WTK (load "/home/Bureau/WTK/guix.scm")))
(package (package
(name "etoiles") (name "constellations")
(version "devel") (version "devel")
(source (source
(local-file %source-dir (local-file %source-dir
@ -29,7 +29,7 @@
(modify-phases %standard-phases (modify-phases %standard-phases
(delete 'configure) (delete 'configure)
(delete 'check)))) (delete 'check))))
(home-page "https://git.marvid.fr/Tissevert/Étoiles") (home-page "https://git.marvid.fr/Tissevert/Constellations")
(synopsis "A game webapp") (synopsis "A game webapp")
(description (description
"someday") "someday")

2
index.html
View file

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Étoiles</title> <title>Constellations</title>
<script src="main.js"></script> <script src="main.js"></script>
<link rel="stylesheet" href="style.css" type="text/css"/> <link rel="stylesheet" href="style.css" type="text/css"/>
</head> </head>

41
js/CellSet.js Normal file
View file

@ -0,0 +1,41 @@
function CellSet(definition) {
definition = definition || {};
this.cells = {};
if(definition.shape == 'rectangle') {
var xMax = definition.x + definition.width;
var yMax = definition.y + definition.height;
for(var i = definition.x; i < xMax; i++) {
for(var j = definition.y; j < yMax; j++) {
this.add(i, j);
}
}
} else if(definition.shape == 'points') {
for(var i = 0; i < definition.points.length; i++) {
this.cells[id(definition.points[i].i, definition.points[i].j)];
}
}
}
CellSet.prototype.add = function(i, j) {
this.cells[id(i, j)] = true;
}
CellSet.prototype.remove = function(i, j) {
delete this.cells[id(i, j)];
}
CellSet.prototype.contains = function(i, j) {
return !!this.cells[id(i, j)];
}
CellSet.prototype.isEmpty = function() {
return Object.keys(this.cells).length < 1;
}
return {
make: function(definition) {return new CellSet(definition);},
};
function id(i, j) {
return i + ':' + j;
}

16
js/GUI.js Normal file
View file

@ -0,0 +1,16 @@
return {
activate: activate,
mouse: {
left: 0,
right: 2
}
};
function activate(on, targets) {
if(!Array.isArray(targets)) {
targets = [targets]
}
targets.forEach(function(element) {
element.classList[on ? 'add' : 'remove']('active');
});
}

130
js/Grid.js
View file

@ -1,122 +1,66 @@
import * as File from WTK.File; import CellSet;
import * as Async from UnitJS.Async;
import compose from UnitJS.Fun;
import * as Dom from UnitJS.Dom; import * as Dom from UnitJS.Dom;
import Toolbox;
var grid = { var grid = {
element: null, element: document.getElementById('grid'),
data: null data: null,
missing: null,
size: null
}; };
var down = false;
var iter = generate; // alias for more intuitive use (discarding the result)
return { return {
init: init cell: cell,
clear: clear,
init: init,
get: get,
iter: iter,
}; };
function init(size, elementId) { function init(size, eventHandlers) {
grid.element = document.getElementById(elementId || 'grid'); grid.size = size;
for(var row = 0; row < size; row++) { for(var row = 0; row < size; row++) {
grid.element.appendChild( grid.element.appendChild(
makeRow({tag: 'td', attributes: bodyAttributes, row: row, size: size}) makeRow({tag: 'td', attributes: eventHandlers, row: row})
); );
} }
grid.data = emptyGrid(size); clear();
grid.element.addEventListener('mouseleave', function() {
down = false;
});
document.getElementById('load').addEventListener('click', load);
document.getElementById('save').addEventListener('click', save);
}
function emptyGrid(size) {
var result = {};
for(var row = 0; row < size; row++) {
result[row] = {};
}
return result;
} }
function makeRow(config) { function makeRow(config) {
var cells = []; var cells = [];
for(var column = 0; column < config.size; column++) { for(var column = 0; column < grid.size; column++) {
cells.push(Dom.make(config.tag, config.attributes(config.row, column))); cells.push(Dom.make(config.tag, config.attributes(config.row, column)));
} }
return Dom.make('tr', {}, cells); return Dom.make('tr', {}, cells);
} }
function bodyAttributes(row, column) { function clear() {
return { grid.data = generate(function() {return; });
onMousedown: function() { grid.missing = CellSet.make(
down = true; {shape: 'rectangle', x: 0, y: 0, width: 8, height: 8}
if(Toolbox.tool() == 'draw') {
colorize(row, column);
}
},
onMouseup: function() {
down = false;
if(Toolbox.tool() == 'paint') {
paint(row, column);
}
},
onMouseenter: function() {
if(down && Toolbox.tool() == 'draw') {
colorize(row, column);
}
}
};
}
function colorize(row, column, color) {
grid.data[row][column] = color || Toolbox.color();
grid.element.children[row].children[column].className = grid.data[row][column];
}
function paint(i0, j0) {
var originColor = grid.data[i0][j0];
var size = grid.element.children.length;
var done = emptyGrid(size);
var queue = [{i: i0, j: j0}];
while(queue.length > 0) {
var p0 = queue[0];
colorize(p0.i, p0.j);
done[p0.i][p0.j] = true;
for(var d = -1; d < 2; d += 2) {
[{i: p0.i + d, j: p0.j}, {i: p0.i, j: p0.j + d}].forEach(function(p1) {
if(p1.i >= 0 && p1.i < size && p1.j >= 0 && p1.j < size
&& !done[p1.i][p1.j]
&& grid.data[p1.i][p1.j] == originColor) {
queue.push(p1);
}
});
}
queue.shift();
}
}
function load() {
Async.run(
Async.bind(
File.pick({accept: 'text/json,.json'}),
function(input) {
return File.load(input.files[0]);
},
Async.map(compose(setGridData, JSON.parse))
)
); );
iter(function(row, column) {
cell(row, column).className = '';
});
} }
function setGridData(data) { function generate(f) {
if(data != undefined) { var result = {}
for(var row = 0; row < grid.element.children.length; row++) { for(var row = 0; row < grid.size; row++) {
for(var column = 0; column < grid.element.children[row].children.length; column++) { result[row] = {};
colorize(row, column, data[row][column]); for(var column = 0; column < grid.size; column++) {
} result[row][column] = f(row, column);
} }
} }
return result;
} }
function save() { function get() {
File.save('data:text/json,' + JSON.stringify(grid.data), "grid.json"); return grid;
}
function cell(row, column) {
return grid.element.children[row].children[column];
} }

42
js/Grid/Color.js Normal file
View file

@ -0,0 +1,42 @@
import CellSet;
import Grid;
import Toolbox;
return {
ize: colorize,
paint: paint
};
function colorize(row, column, color) {
var grid = Grid.get();
grid.data[row][column] = color || Toolbox.color();
Grid.cell(row, column).className = grid.data[row][column];
grid.missing.remove(row, column);
}
function paint(i0, j0) {
var originColor = Grid.get().data[i0][j0];
var done = CellSet.make();
var queue = [{i: i0, j: j0}];
while(queue.length > 0) {
var p0 = queue[0];
colorize(p0.i, p0.j);
done.add(p0.i, p0.j);
extend(p0, queue, done, originColor);
queue.shift();
}
}
function extend(p0, queue, done, originColor) {
var size = Grid.get().size;
for(var d = -1; d < 2; d += 2) {
[{i: p0.i + d, j: p0.j}, {i: p0.i, j: p0.j + d}].forEach(function(p1) {
if(p1.i >= 0 && p1.i < size && p1.j >= 0 && p1.j < size
&& !done.contains(p1.i, p1.j)
&& Grid.get().data[p1.i][p1.j] == originColor) {
queue.push(p1);
}
});
}
}

49
js/Grid/IO.js Normal file
View file

@ -0,0 +1,49 @@
import * as File from WTK.File;
import * as Async from UnitJS.Async;
import Grid;
import Grid.Color;
import Mode;
return {
init: init
}
function init() {
document.getElementById('load').addEventListener('click', load);
document.getElementById('save').addEventListener('click', save);
}
function load() {
Grid.clear();
Mode.setEnabled(false, ['play', 'solve']);
Async.run(
Async.bind(
File.pick({accept: 'text/json,.json'}),
function(input) {
return File.load(input.files[0]);
},
function(data) {
return Async.wrap(setGridData(JSON.parse(data)));
}
)
);
}
function setGridData(data) {
if(data != undefined) {
Grid.iter(function(row, column) {
if(data[row][column] != undefined) {
Grid.Color.ize(row, column, data[row][column]);
}
});
if(Grid.get().missing.isEmpty()) {
Mode.setEnabled(true, ['play', 'solve']);
} else {
Mode.set('edit');
}
}
}
function save() {
File.save('data:text/json,' + JSON.stringify(Grid.get().data), "grid.json");
}

13
js/Main.js
View file

@ -1,9 +1,18 @@
import Grid; import Grid;
import Grid.IO;
import Toolbox; import Toolbox;
import Mode; import Mode;
import * as Play from Mode.Play;
import * as Solve from Mode.Solve;
import * as Edit from Mode.Edit;
var size = 8; var size = 8;
Grid.init(size);
Toolbox.init(size); Toolbox.init(size);
Mode.init(); Mode.init({
play: Play,
solve: Solve,
edit: Edit
});
Grid.init(size, Mode.dispatch);
Grid.IO.init();

57
js/Mode.js
View file

@ -1,14 +1,57 @@
import Toolbox;
var mode; var mode;
var modes;
var mouseEvents = ['onClick', 'onMousedown', 'onMouseup', 'onMouseenter'];
var currentMode = 'play';
return { return {
init: init init: init,
dispatch: dispatch,
set: set,
setEnabled: setEnabled
} }
function init(elementId) { function init(chosenModes, elementId) {
mode = document.getElementById(elementId || 'mode'); mode = document.getElementById(elementId || 'mode');
mode.addEventListener('change', function() { mode.addEventListener('change', onChange);
Toolbox.activate(mode.value == 'edit'); modes = chosenModes;
}); }
function setEnabled(enabled, targets) {
if(!Array.isArray(targets)) {
targets = [targets];
}
for(var i = 0; i < mode.options.length; i++) {
var option = mode.options[i];
if(targets.indexOf(option.value) >= 0) {
option.disabled = !enabled;
}
}
}
function runEvent(eventName) {
var handler = modes[currentMode].events[eventName];
if(typeof handler == 'function') {
handler.apply(null, Array.prototype.slice.call(arguments, 1));
}
}
function onChange() {
runEvent('onLeave');
currentMode = mode.value;
runEvent('onEnter');
}
function set(newMode) {
if(modes[newMode]) {
mode.value = newMode;
onChange();
}
}
function dispatch(row, column) {
var handler = {};
mouseEvents.forEach(function(eventName) {
handler[eventName] = function(e) {runEvent(eventName, e, row, column);};
});
return handler;
} }

68
js/Mode/Edit.js Normal file
View file

@ -0,0 +1,68 @@
import GUI;
import Grid;
import Grid.Color;
import Mode;
import Toolbox;
var down = false;
Grid.get().element.addEventListener('mouseleave', function() {
down = false;
});
var save = document.getElementById('save');
return {
events: {
onEnter: onEnter,
onLeave: onLeave,
onMousedown: onMousedown,
onMouseup: onMouseup,
onMouseenter: onMouseenter
}
};
function onEnter() {
GUI.activate(true, [Grid.get().element, Toolbox.get(), save]);
if(!Grid.get().missing.isEmpty()) {
Mode.setEnabled(false, ['play', 'solve']);
}
}
function onLeave() {
GUI.activate(false, [Grid.get().element, Toolbox.get(), save]);
}
function onMousedown(e, row, column) {
if(e.button == GUI.mouse.left) {
down = true;
if(Toolbox.tool() == 'draw') {
colorCell(row, column);
}
}
}
function onMouseup(e, row, column) {
if(e.button == GUI.mouse.left) {
down = false;
if(Toolbox.tool() == 'paint') {
Grid.Color.paint(row, column);
checkCompleteness();
}
}
}
function onMouseenter(e, row, column) {
if(down && Toolbox.tool() == 'draw') {
colorCell(row, column);
}
}
function colorCell(row, column) {
Grid.Color.ize(row, column);
checkCompleteness();
}
function checkCompleteness() {
if(Grid.get().missing.isEmpty()) {
Mode.setEnabled(true, ['play', 'solve']);
}
}

27
js/Mode/Play.js Normal file
View file

@ -0,0 +1,27 @@
import Grid;
import GUI;
return {
events: {
onClick: onClick
}
};
function onClick(e, row, column) {
if(Grid.get().missing.isEmpty()) {
rotateState(Grid.cell(row, column));
}
}
function rotateState(cell) {
if(cell.classList.contains('off')) {
if(cell.textContent == '*') {
cell.classList.remove('off');
cell.textContent = '';
} else {
cell.textContent = '*';
}
} else {
cell.classList.add('off');
}
}

8
js/Mode/Solve.js Normal file
View file

@ -0,0 +1,8 @@
return {
events: {
onEnter: onEnter,
}
};
function onEnter() {
}

14
js/Toolbox.js
View file

@ -5,16 +5,12 @@ var tool;
var colors; var colors;
return { return {
activate: activate,
init: init, init: init,
tool: tool, get: get,
color: color color: color,
tool: tool
}; };
function activate(on) {
toolbox.classList[on ? 'add' : 'remove']('active');
}
function init(size, elementId) { function init(size, elementId) {
toolbox = document.getElementById(elementId || 'toolbox'); toolbox = document.getElementById(elementId || 'toolbox');
colors = toolbox.querySelector('#colors'); colors = toolbox.querySelector('#colors');
@ -27,6 +23,10 @@ function init(size, elementId) {
tool = toolbox.querySelector('#tool'); tool = toolbox.querySelector('#tool');
} }
function get() {
return toolbox;
}
function tool() { function tool() {
return tool.value; return tool.value;
} }