From 5800574560a232de64b6c344d1b3aa059a2daf80 Mon Sep 17 00:00:00 2001
From: satr14 <admin@satr14.my.id>
Date: Sat, 25 Jul 2026 08:31:12 +0700
Subject: [PATCH] chess board

---
 src/routes/+layout.svelte |  5 +++--
 src/routes/+page.svelte   | 15 +++++++++++++--
 src/routes/layout.css     |  3 +++
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 705a7a5..0806ab6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,5 +6,6 @@
 </script>
 
 <svelte:head><link rel="icon" href={favicon} /></svelte:head>
-
-{@render children()}
+<div class="flex justify-center items-center min-h-full">
+  {@render children()}
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cc88df0..5a17237 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,13 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script lang="ts">
+  const board = new Array(8**2);
+</script>
+
+<div class="grid grid-cols-8 gap-0 border-2">
+  {#each board as info, index}
+    <div class="h-20 aspect-square flex justify-center items-center
+      {index % 2 === Math.floor(index / 8) % 2 ? 'bg-stone-200 text-stone-800' : 'bg-stone-800 text-stone-200'}
+    ">
+      {index}
+    </div>
+  {/each}
+</div>
\ No newline at end of file
diff --git a/src/routes/layout.css b/src/routes/layout.css
index d4b5078..e9704fd 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -1 +1,4 @@
 @import 'tailwindcss';
+
+html, body { @apply h-full; }
+body { @apply bg-gray-900 text-gray-100; }