Style circles and initialize state

This commit is contained in:
jim-clark 2019-07-26 11:02:30 -07:00
parent ad4b748239
commit c0c81275fa
2 changed files with 45 additions and 3 deletions

View file

@ -0,0 +1,24 @@
*, *::before, *::after {
box-sizing: border-box;
}
body {
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
section {
display: grid;
grid-template-columns: repeat(7, 10vmin);
grid-template-rows: repeat(6, 10vmin);
grid-gap: 1vmin;
}
section div {
border-radius: 50%;
border: 1px solid grey;
}

View file

@ -1,8 +1,12 @@
/*----- constants -----*/
const COLORS = {
'0': 'white',
'1': 'purple',
'-1': 'lime'
};
/*----- app's state (variables) -----*/
let board, turn, winner;
/*----- cached element references -----*/
@ -11,3 +15,17 @@
/*----- functions -----*/
function init() {
board = [
[0, 0, 0, 0, 0, 0], // column 1 (index 0)
[0, 0, 0, 0, 0, 0], // column 2 (index 1)
[0, 0, 0, 0, 0, 0], // column 3 (index 2)
[0, 0, 0, 0, 0, 0], // column 4 (index 3)
[0, 0, 0, 0, 0, 0], // column 5 (index 4)
[0, 0, 0, 0, 0, 0], // column 6 (index 5)
[0, 0, 0, 0, 0, 0], // column 7 (index 6)
];
turn = 1;
winner = null; // 1, -1, null (no winner), 'T' (tie)
}