From 449d6ce90234b910bdd7f1ebacc7601b5b5ac897 Mon Sep 17 00:00:00 2001
From: Leo Durrant <poweredbykurisu@hotmail.com>
Date: Sun, 5 May 2024 22:05:43 +0100
Subject: [PATCH] feat: unique identifiers to divs

---
 game-source-redux/src/App.svelte | 34 +++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/game-source-redux/src/App.svelte b/game-source-redux/src/App.svelte
index d31f4a5..4fdc5a6 100644
--- 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>