feat: unique identifiers to divs

pilksoc · May 5, 2024 · 449d6ce · 449d6ce
1 parent 83f2ed9
commit 449d6ce
Showing 1 changed file with 20 additions and 14 deletions.
diff --git a/game-source-redux/src/App.svelte b/game-source-redux/src/App.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
-  import svelteLogo from "./assets/svelte.svg";
-  import viteLogo from "/vite.svg";
-  import Counter from "./lib/Counter.svelte";
   import KubeWebSocket from "./lib/websockets";
-	import { onMount } from 'svelte';
-  import { v4 } from 'uuid';
+  import { onMount } from "svelte";
+  import { v4 } from "uuid";
 
   const width = 16;
   const height = 16;
@@ -25,17 +22,26 @@
 
 <main>
   {#each { length: height } as _, j}
-    <div
-      style={`width: ${cube_size}px; height: ${cube_size}px; position: absolute; top: ${cube_size * j}px;`}
-    >
-      {#each { length: width } as _, i}
-        <div
-          style={`width: ${cube_size}px; height: ${cube_size}px; position: absolute; left: ${cube_size * i}px;`}
-        ></div>
-      {/each}
-    </div>
+    {#each { length: width } as _, i}
+      <div
+        id={`tile-${j}-${i}`}
+        class={`tile ${(i + j) % 2 == 0 ? "tile-even" : "tile-odd"}`}
+        style={`width: ${cube_size}px; height: ${cube_size}px; position: absolute; top: ${cube_size * j}px; left: ${cube_size * i}px;`}
+      ></div>
+    {/each}
   {/each}
 </main>
 
 <style>
+  .tile {
+    border-style: solid;
+    border-width: thin;
+  }
+  .tile-even {
+    background-color: magenta;
+  }
+
+  .tile-odd {
+    background-color: black;
+  }
 </style>