Initial commit.

5 years ago · 530d3bffc5
commit 530d3bffc5
3 changed files with 158 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+node_modules
--- a/package.json
+++ b/package.json
@ -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"
+}
--- a/ricochet.html
+++ b/ricochet.html
@ -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>