commit
530d3bffc5
3 changed files with 158 additions and 0 deletions
@ -0,0 +1 @@ |
|||||||
|
node_modules |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
{ |
||||||
|
"name": "ricochet", |
||||||
|
"version": "1.0.0", |
||||||
|
"description": "", |
||||||
|
"main": "index.js", |
||||||
|
"scripts": { |
||||||
|
"test": "echo \"Error: no test specified\" && exit 1" |
||||||
|
}, |
||||||
|
"author": "", |
||||||
|
"license": "ISC" |
||||||
|
} |
||||||
@ -0,0 +1,146 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<title>Document</title> |
||||||
|
|
||||||
|
<style> |
||||||
|
* { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
.board-container { |
||||||
|
background: seagreen; |
||||||
|
bottom: 0; |
||||||
|
left: 300px; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.controls-container { |
||||||
|
background: coral; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
position: absolute; |
||||||
|
right: 300px; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
#board { |
||||||
|
border-color: #aaa; |
||||||
|
border-style: solid; |
||||||
|
border-width: 1px 0 0 1px; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
.square{ |
||||||
|
background: #ddd; |
||||||
|
border-style: solid; |
||||||
|
border-color: #aaa; |
||||||
|
border-width: 0 1px 1px 0; |
||||||
|
float: left; |
||||||
|
height: 40px; |
||||||
|
width: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.moves { |
||||||
|
background: salmon; |
||||||
|
} |
||||||
|
|
||||||
|
.move-count { |
||||||
|
background: yellow; |
||||||
|
border-radius: 8px; |
||||||
|
float: left; |
||||||
|
font-size: 12px; |
||||||
|
height: 16px; |
||||||
|
line-height: 16px; |
||||||
|
margin: 4px; |
||||||
|
text-align: center; |
||||||
|
width: 16px; |
||||||
|
} |
||||||
|
</style> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="controls-container"> |
||||||
|
|
||||||
|
<div class="rounds"> |
||||||
|
<button type='button'>Start New Round</button> |
||||||
|
<div class="timer">0:42</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="players"> |
||||||
|
<div class="player">Grendel</div> |
||||||
|
<div class="player">Barbarossa</div> |
||||||
|
<div class="player">Pi</div> |
||||||
|
<div class="player">Wendy</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<div class="moves"> |
||||||
|
<div class="move-count">1</div> |
||||||
|
<div class="move-count">2</div> |
||||||
|
<div class="move-count">3</div> |
||||||
|
<div class="move-count">4</div> |
||||||
|
<div class="move-count">5</div> |
||||||
|
<div class="move-count">6</div> |
||||||
|
<div class="move-count">7</div> |
||||||
|
<div class="move-count">8</div> |
||||||
|
<div class="move-count">9</div> |
||||||
|
<div class="move-count">10</div> |
||||||
|
<br> |
||||||
|
<div class="move-count">11</div> |
||||||
|
<div class="move-count">12</div> |
||||||
|
<div class="move-count">13</div> |
||||||
|
<div class="move-count">14</div> |
||||||
|
<div class="move-count">15</div> |
||||||
|
<div class="move-count">16</div> |
||||||
|
<div class="move-count">17</div> |
||||||
|
<div class="move-count">18</div> |
||||||
|
<div class="move-count">19</div> |
||||||
|
<div class="move-count">20</div> |
||||||
|
<br> |
||||||
|
<div class="move-count">21</div> |
||||||
|
<div class="move-count">22</div> |
||||||
|
<div class="move-count">23</div> |
||||||
|
<div class="move-count">24</div> |
||||||
|
<div class="move-count">25</div> |
||||||
|
<div class="move-count">26</div> |
||||||
|
<div class="move-count">27</div> |
||||||
|
<div class="move-count">28</div> |
||||||
|
<div class="move-count">29</div> |
||||||
|
<div class="move-count">30</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="board-container"> |
||||||
|
<div id="board"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<script> |
||||||
|
// TODO dynamic sizing of squares based on available height |
||||||
|
// TODO dynamic move population |
||||||
|
|
||||||
|
const board = document.getElementById('board'); |
||||||
|
const squaresPerSide = 20; |
||||||
|
const squareSize = 40; |
||||||
|
|
||||||
|
board.style.width = (squaresPerSide * squareSize + 1) + 'px'; |
||||||
|
board.style.height = (squaresPerSide * squareSize + 1) + 'px'; |
||||||
|
|
||||||
|
while (board.hasChildElements) { |
||||||
|
board.removeChild(board.firstChild); |
||||||
|
} |
||||||
|
|
||||||
|
for (let i = 0; i < squaresPerSide; i++) { |
||||||
|
for (let j = 0; j < squaresPerSide; j++) { |
||||||
|
const square = document.createElement('div'); |
||||||
|
square.className = 'square'; |
||||||
|
|
||||||
|
board.appendChild(square); |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
Loading…
Reference in new issue