Add render and stub up event listener
This commit is contained in:
parent
c0c81275fa
commit
26002d06c3
3 changed files with 50 additions and 4 deletions
21
css/main.css
21
css/main.css
|
@ -11,14 +11,31 @@ body {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
section {
|
||||
section.markers {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 10vmin);
|
||||
grid-gap: 1vmin;
|
||||
margin-bottom: 1vmin;
|
||||
}
|
||||
|
||||
section.markers div {
|
||||
border-top: 5vmin solid lightgrey;
|
||||
border-left: 5vmin solid transparent;
|
||||
border-right: 5vmin solid transparent;
|
||||
}
|
||||
|
||||
section.markers div:hover {
|
||||
border-top-color: grey;
|
||||
}
|
||||
|
||||
section.board {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 10vmin);
|
||||
grid-template-rows: repeat(6, 10vmin);
|
||||
grid-gap: 1vmin;
|
||||
}
|
||||
|
||||
section div {
|
||||
section.board div {
|
||||
border-radius: 50%;
|
||||
border: 1px solid grey;
|
||||
}
|
11
index.html
11
index.html
|
@ -11,7 +11,16 @@
|
|||
<body>
|
||||
<h1>CONNECT FOUR</h1>
|
||||
<h2 id="msg"></h2>
|
||||
<section>
|
||||
<section class="markers">
|
||||
<div id="col0"></div>
|
||||
<div id="col1"></div>
|
||||
<div id="col2"></div>
|
||||
<div id="col3"></div>
|
||||
<div id="col4"></div>
|
||||
<div id="col5"></div>
|
||||
<div id="col6"></div>
|
||||
</section>
|
||||
<section class="board">
|
||||
<div id="c0r5"></div>
|
||||
<div id="c1r5"></div>
|
||||
<div id="c2r5"></div>
|
||||
|
|
22
js/main.js
22
js/main.js
|
@ -12,9 +12,11 @@ let board, turn, winner;
|
|||
|
||||
|
||||
/*----- event listeners -----*/
|
||||
|
||||
document.querySelector('section.markers')
|
||||
.addEventListener('click', handleClick);
|
||||
|
||||
/*----- functions -----*/
|
||||
init();
|
||||
|
||||
function init() {
|
||||
board = [
|
||||
|
@ -28,4 +30,22 @@ function init() {
|
|||
];
|
||||
turn = 1;
|
||||
winner = null; // 1, -1, null (no winner), 'T' (tie)
|
||||
render();
|
||||
}
|
||||
|
||||
function render() {
|
||||
// Render the board
|
||||
board.forEach(function(colArr, colIdx) {
|
||||
colArr.forEach(function(cell, rowIdx) {
|
||||
let div = document.getElementById(`c${colIdx}r${rowIdx}`);
|
||||
div.style.backgroundColor = COLORS[cell];
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function handleClick(evt) {
|
||||
let idx = parseInt(evt.target.id.replace('col', ''));
|
||||
if (isNaN(idx) || winner) return;
|
||||
|
||||
|
||||
}
|
Loading…
Reference in a new issue