oxaliq/browser-go-proto
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add render and stub up event listener

Browse source
This commit is contained in:
jim-clark 2019-07-26 13:58:18 -07:00
parent c0c81275fa
commit 26002d06c3
3 changed files with 50 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
css/main.css
View file

@ -11,14 +11,31 @@ body {
align-items: center; 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; display: grid;
grid-template-columns: repeat(7, 10vmin); grid-template-columns: repeat(7, 10vmin);
grid-template-rows: repeat(6, 10vmin); grid-template-rows: repeat(6, 10vmin);
grid-gap: 1vmin; grid-gap: 1vmin;
} }
section div { section.board div {
border-radius: 50%; border-radius: 50%;
border: 1px solid grey; border: 1px solid grey;
} }

11
index.html
View file

@ -11,7 +11,16 @@
<body> <body>
<h1>CONNECT FOUR</h1> <h1>CONNECT FOUR</h1>
<h2 id="msg"></h2> <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="c0r5"></div>
<div id="c1r5"></div> <div id="c1r5"></div>
<div id="c2r5"></div> <div id="c2r5"></div>

22
js/main.js
View file

@ -12,9 +12,11 @@ let board, turn, winner;
/*----- event listeners -----*/ /*----- event listeners -----*/
document.querySelector('section.markers')
.addEventListener('click', handleClick);
/*----- functions -----*/ /*----- functions -----*/
init();
function init() { function init() {
board = [ board = [
@ -28,4 +30,22 @@ function init() {
]; ];
turn = 1; turn = 1;
winner = null; // 1, -1, null (no winner), 'T' (tie) 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;
} }