3 files changed, 91 insertions, 8 deletions
diff --git a/public/css/fia.css b/public/css/fia.css
new file mode 100644
index 0000000..fc660aa
--- /dev/null
+++ b/public/css/fia.css
@@ -0,0 +1,77 @@
+.game-table {
+  width: 660px;
+  height: 660px;
+  margin: 0 auto;
+  background-image: url("https://jopek.eu/maks/szkola/apkKli/fiaFiles/fia.png");
+  background-size: contain;
+  border-collapse: separate;
+  padding: 0;
+  border-spacing: 0;
+}
+.game-table tr {
+  padding: 0;
+  margin: 0;
+}
+.game-table td {
+  margin: 0;
+  padding: 0;
+  width: 60px;
+  height: 60px;
+  border-collapse: separate;
+}
+#timer {
+  height: 80px;
+  width: 160px;
+  border: 2px solid red;
+}
+#dice {
+  margin: 50px auto;
+  height: 100px;
+  width: 100px;
+  border: 2px solid blue;
+  background-size: contain;
+}
+.dice-1 {
+  background-image: url("https://jopek.eu/maks/szkola/apkKli/fiaFiles/dice-1.png");
+}
+.dice-2 {
+  background-image: url("https://jopek.eu/maks/szkola/apkKli/fiaFiles/dice-2.png");
+}
+.dice-3 {
+  background-image: url("https://jopek.eu/maks/szkola/apkKli/fiaFiles/dice-3.png");
+}
+.dice-4 {
+  background-image: url("https://jopek.eu/maks/szkola/apkKli/fiaFiles/dice-4.png");
+}
+.dice-5 {
+  background-image: url("https://jopek.eu/maks/szkola/apkKli/fiaFiles/dice-5.png");
+}
+.dice-6 {
+  background-image: url("https://jopek.eu/maks/szkola/apkKli/fiaFiles/dice-6.png");
+}
+
+.player-name :nth-child(even) {
+  float: right;
+}
+
+.chequer {
+  background-size: contain;
+  border-radius: 50%;
+  color: palevioletred;
+}
+.chequer-red {
+  background-image: url("https://jopek.eu/maks/szkola/apkKli/fiaFiles/chequer-red.png");
+  border: 4px solid black;
+}
+.chequer-blue {
+  background-image: url("https://jopek.eu/maks/szkola/apkKli/fiaFiles/chequer-blue.png");
+  border: 4px solid black;
+}
+.chequer-green {
+  background-image: url("https://jopek.eu/maks/szkola/apkKli/fiaFiles/chequer-green.png");
+  border: 4px solid black;
+}
+.chequer-yellow {
+  background-image: url("https://jopek.eu/maks/szkola/apkKli/fiaFiles/chequer-yellow.png");
+  border: 4px solid black;
+}
diff --git a/public/index.html b/public/index.html
index d7ea523..a5b174a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Fia</title>
   <link rel="stylesheet" href="css/bootstrap.min.css">
+  <link rel="stylesheet" href="css/fia.css">
 </head>
 
 <body class="bg-dark text-white">
diff --git a/public/map.html b/public/map.html
index 23ef7de..980cebe 100644
--- a/public/map.html
+++ b/public/map.html
@@ -2,13 +2,13 @@
   <table class="table table-dark table-sm">
     <tbody>
       <tr>
-        <td class="player-name rounded-pill text-center"></td>
+        <td class="player-name rounded-pill text-center"><span></span><span id="0-player-time"></span></td>
         <td></td>
-        <td class="player-name rounded-pill text-center"></td>
+        <td class="player-name rounded-pill text-center"><span></span><span id="1-player-time"></span></td>
         <td></td>
-        <td class="player-name rounded-pill text-center"></td>
+        <td class="player-name rounded-pill text-center"><span></span><span id="2-player-time"></span></td>
         <td></td>
-        <td class="player-name rounded-pill text-center"></td>
+        <td class="player-name rounded-pill text-center"><span></span><span id="3-player-time"></span></td>
         <td></td>
         <td class="text-center rounded-pill">
           <input class="form-check-input" type="checkbox" />
@@ -18,9 +18,14 @@
     </tbody>
   </table>
   <div class="container-flex text-center">
-    <canvas id="map" width="660" height="660ZZZZ" class="border border-danger">
-      Din webbläsare stöder inte canvas, vilket betyder att du inte kan spela
-      fia
-    </canvas>
+    <div class="row">
+      <div class="col-8">
+        <table class="game-table" id="map"></table>
+      </div>
+      <div class="col-2">
+        <div id="dice"></div>
+        <button type="button" class="btn btn-light" style="display: none;">Kasta tärning</button>
+      </div>
+    </div>
   </div>
 </div>