Style circles and initialize state
This commit is contained in:
parent
ad4b748239
commit
c0c81275fa
2 changed files with 45 additions and 3 deletions
24
css/main.css
24
css/main.css
|
@ -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;
|
||||
}
|
24
js/main.js
24
js/main.js
|
@ -1,8 +1,12 @@
|
|||
/*----- constants -----*/
|
||||
|
||||
const COLORS = {
|
||||
'0': 'white',
|
||||
'1': 'purple',
|
||||
'-1': 'lime'
|
||||
};
|
||||
|
||||
/*----- app's state (variables) -----*/
|
||||
|
||||
let board, turn, winner;
|
||||
|
||||
/*----- cached element references -----*/
|
||||
|
||||
|
@ -10,4 +14,18 @@
|
|||
/*----- event listeners -----*/
|
||||
|
||||
|
||||
/*----- functions -----*/
|
||||
/*----- 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)
|
||||
}
|
Loading…
Reference in a new issue