Add an image for each building.

src/board/BuildingTile.svelte

@@ -18,28 +18,57 @@
     }
 </script>
 
-<div>
+<div class="building">
-    <p>{ building.name }</p>
+    <div class="illustration">
-    <p>
+        <img src="/img/buildings/{ building.type }.png" alt="">
-        <button
+    </div>
-            class="level"
+    <div class="content">
-            class:can-upgrade={ canUpgrade }
+        <!-- <p>{ building.name }</p> -->
-            class:is-upgrading={ isUpgrading }
+        <div class="level">
-            class:max-level={ maxLevelReached }
+            <button
-            on:click|stopPropagation={ upgradeBuilding }
+                class:can-upgrade={ canUpgrade }
-        >
+                class:is-upgrading={ isUpgrading }
-            { building.level }
+                class:max-level={ maxLevelReached }
-            { #if building.state.upgrade.isUpgrading }
+                on:click|stopPropagation={ upgradeBuilding }
-            <span>
+            >
-                ({ Math.ceil(building.state.upgrade.remainingTime / 1000) }’)
+                { building.level }
-            </span>
+                { #if building.state.upgrade.isUpgrading }
-            { /if }
+                <span>
-        </button>
+                    ({ Math.ceil(building.state.upgrade.remainingTime / 1000) }’)
-    </p>
+                </span>
+                { /if }
+            </button>
+        </div>
+    </div>
 </div>
 
 <style>
+    .building {
+        position: relative;
+        height: 100%;
+    }
+
+    .building .illustration,
+    .building .illustration img {
+        width: 100%;
+    }
+
+    .building .content {
+        left: 0;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+
     .level {
+        bottom: -0.4em;
+        left: 50%;
+        position: absolute;
+        translate: -50%;
+    }
+
+    .level button {
         aspect-ratio: 1;
         background-color: hsl(208, 100%, 97%);
         border: 0.4em solid hsl(0, 0%, 45%);
@@ -48,21 +77,26 @@
         box-shadow: 0 0 0.2em black;
         color: hsl(0, 0%, 10%);
         font-size: 1.2em;
+        transition: all 100ms ease-in-out;
     }
 
-    .level span {
+    .level button span {
         font-size: 0.9em;
     }
 
-    .level.can-upgrade {
+    .level button.can-upgrade {
         border-color: hsl(90, 99%, 36%);
     }
 
-    .level.is-upgrading {
+    .level button.is-upgrading {
         border-color: hsl(56, 99%, 43%);
     }
 
-    .level.max-level {
+    .level button.max-level {
         border-color: hsl(209, 70%, 52%);
     }
+
+    .level button:hover {
+        scale: 1.1;
+    }
 </style>

src/board/Tile.svelte

@@ -16,8 +16,10 @@
 <style>
     .hexagon {
         aspect-ratio: 1;
-        background-color: hsl(220, 75%, 75%);
+        border: 0.2em solid;
+        border-color: hsl(220, 75%, 75%);
         border-radius: 100%;
+        box-sizing: border-box;
         cursor: pointer;
         font-size: 1.2vmin;
         height: 12em;
@@ -27,11 +29,11 @@
     }
 
     .hexagon:hover {
-        background-color: hsl(60, 75%, 75%);
+        border-color: hsl(60, 75%, 75%);
     }
 
     .hexagon:active {
-        background-color: hsl(60, 75%, 50%);
+        border-color: hsl(60, 75%, 50%);
     }
 
     .hexagon .content {