JSFiddle - React, Tailwind, and code Playground
HTML
<div id="holder"></div>
<svg xmlns="http://www.w3.org/2000/svg" id="board" version="1.1" viewBox="0 0 500 500" width="500" height="500" id="starter_svg"></svg>
CSS
* {
margin: 0;
padding: 0;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
align-content: center;
}
.square {
display: flex;
flex-grow: 1;
text-align: center;
height: 4em;
}
.square.active {
background:lime;
}
JavaScript
var config = {
width: 5,
height: 5,
players: 1
}
var toArray = function (nl) {
return Array.prototype.slice.call(nl);
}
var gameState = (function () {
//Create array of empty arrays
var players = Array.apply(null, Array(config.players))
.map(function (v, i) {
return {
index: i,
segments: []
};
})
return {
setSegment: function (player, seg) {
players[player].segments.push(seg);
},
players: players
}
})();
var board = (function () {
var svg = document.getElementById('board');
function drawSegments() {
gameState.players.forEach(function (player) {
player.segments.forEach(function(seg){
var line = document.createElementNS('http://www.w3.org/2000/svg',"line");
line.setAttribute('x1', 0);
line.setAttribute('x2', 0);
line.setAttribute('y1', 100);
line.setAttribute('y2', 100);
svg.appendChild(line);
})
});
}
return {
drawFront: function () {
drawSegments();
}
}
})();
var inputs = (function () {
var holder = document.getElementById('holder');
var callAll = function (hfunc, wfunc, args) {
if (hfunc == null) {
hfunc = function () {
return this;
};
}
for (var h = 0; h < config.height; h++) {
var me = args || {};
me.h = h;
me = hfunc.apply(me);
for (var w = 0; w < config.width; w++) {
me.w = w;
wfunc.apply(me);
}
}
}
var getButton = function (x, y) {
return document.getElementById('b_' + y + '_' + x);
};
var resetButton = function (b) {
b.removeAttribute('disabled');
b.removeEventListener('click', removeStart);
b.addEventListener('click', setStart);
b.classList.remove('active');
...