feat: update styling

src/components/IconFactory.vue

@@ -1,8 +1,8 @@
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="32"
-    height="32"
+    height="24"
+    width="24"
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"

src/views/GeneratorView.vue

@@ -1,22 +1,43 @@
 <script setup lang="ts">
-import { GameMap } from '@/game/gameMap'
+import { GameMap, Tile } from '@/game/gameMap'
 import IconFactory from '@/components/IconFactory.vue'
 const map = new GameMap(8)
+function tileClass(isInDistrict: boolean, x: number, y: number) {
+  if (!isInDistrict) {
+    return ''
+  }
+  const mod = (x % 3) * 10 + (y % 3)
+  if (mod === 0) {
+    return 'border-t-2 border-l-2 border-dashed'
+  }
+  if (mod === 1) {
+    return 'border-t-2 border-r-2 border-dashed'
+  }
+  if (mod === 11) {
+    return 'border-b-2 border-r-2 border-dashed'
+  }
+  if (mod === 10) {
+    return 'border-b-2 border-l-2 border-dashed'
+  }
+  console.error(`could not find border for tile at ${x}, ${y}`)
+}
 </script>
 <template>
   <h2 class="text-center">board generator</h2>
-  <table class="checked-board mx-auto mt-16">
-    <tr v-for="(row, x) in map.tiles" :key="x" class="">
-      <td
-        v-for="(tile, y) in row"
-        :key="y"
-        class="w-16 h-16 inline-flex items-center justify-center"
-        :class="{ 'brightness-75': tile.isInDistrict }"
-      >
-        <IconFactory v-if="tile.isFactory" />
-      </td>
-    </tr>
-  </table>
+  <div class="border-2 border-black p-4 mx-auto mt-16 w-fit rounded-xl bg-gray-200">
+    <table class="checked-board whitespace-nowrap">
+      <tr v-for="(row, x) in map.tiles" :key="x" class="">
+        <td
+          v-for="(tile, y) in row"
+          :key="y"
+          class="w-8 h-8 md:w-16 md:h-16 inline-flex items-center justify-center border-black"
+          :class="tileClass(tile.isInDistrict, x, y)"
+        >
+          <IconFactory v-if="tile.isFactory" />
+        </td>
+      </tr>
+    </table>
+  </div>
 </template>
 <style scoped>
 .checked-board > tr:nth-child(odd) > td:nth-child(odd),