Adding themes to the selector, there might be a way to do this without

duplicating buttons but i couldnt figure out the cascade

Also added a favicon this should be able to be themed i haven't tried

removed chartDisplay and diceRoller as they are not used anymore

renamed generator to gameboard

updated the logic in the gameboard to use .empty instead of the numbers
it is easier to read

src/lib/assets/favicon.svg

@@ -1 +1,47 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
+<svg width="400" height="400" viewbox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+
+			<!-- Axes -->
+			<line x1="50" y1="350" x2="350" y2="350" stroke="black" stroke-width="8" />
+			<!-- X-axis -->
+			<line x1="50" y1="350" x2="50" y2="50" stroke="black" stroke-width="8" />
+			<!-- Y-axis -->
+
+			<!-- Axis Labels -->
+			<text x="340" y="370" font-size="16" fill="black">x</text>
+			<text x="35" y="60" font-size="16" fill="black">y</text>
+
+			<!-- Tick Marks and Labels -->
+			<g font-size="12" fill="black">
+				<!-- X-axis ticks -->
+				<line x1="100" y1="345" x2="100" y2="355" stroke="black" />
+				<text x="95" y="370">1</text>
+
+				<line x1="150" y1="345" x2="150" y2="355" stroke="black" />
+				<text x="145" y="370">2</text>
+
+				<line x1="200" y1="345" x2="200" y2="355" stroke="black" />
+				<text x="195" y="370">3</text>
+
+				<line x1="250" y1="345" x2="250" y2="355" stroke="black" />
+				<text x="245" y="370">4</text>
+
+				<line x1="300" y1="345" x2="300" y2="355" stroke="black" />
+				<text x="295" y="370">5</text>
+
+				<!-- Y-axis ticks -->
+				<line x1="45" y1="300" x2="55" y2="300" stroke="black" />
+				<text x="60" y="305">1</text>
+
+				<line x1="45" y1="250" x2="55" y2="250" stroke="black" />
+				<text x="60" y="255">2</text>
+
+				<line x1="45" y1="200" x2="55" y2="200" stroke="black" />
+				<text x="60" y="205">3</text>
+
+				<line x1="45" y1="150" x2="55" y2="150" stroke="black" />
+				<text x="60" y="155">4</text>
+
+				<line x1="45" y1="100" x2="55" y2="100" stroke="black" />
+				<text x="60" y="105">5</text>
+			</g>
+		</svg>

src/lib/components/chartDisplay.svelte

@@ -1,35 +0,0 @@
-<script>
-	export let chart;
-	console.log(chart, chart.x != [''], chart.x);
-</script>
-
-<div class="chart-display">
-	{#if chart.x.length > 1}
-		<div class="axis">
-			<div class="axis-label">X-Axis (Horizontal)</div>
-			<div>{chart.x[0]} ↔ {chart.x[1]}</div>
-		</div>
-		<div class="axis">
-			<div class="axis-label">Y-Axis (Vertical)</div>
-			<div>{chart.y[0]} ↔ {chart.y[1]}</div>
-		</div>
-	{:else}
-		<div class="empty-state">Click Generate!</div>
-	{/if}
-</div>
-
-<style>
-	.axis {
-		margin: 10px 0;
-		padding: 10px;
-		border: 1px solid currentColor;
-		opacity: 0.9;
-	}
-
-	.axis-label {
-		font-weight: bold;
-		margin-bottom: 5px;
-		font-size: 11px;
-		text-transform: uppercase;
-	}
-</style>

src/lib/components/diceRoller.svelte

@@ -1,90 +0,0 @@
-<script>
-  export let roll;
-</script>
-
-<div class="dice-display">
-  <div class="dice-result">X: {roll.x} | Y: {roll.y}</div>
-  
-  <div class="chart-container">
-    <svg viewBox="0 0 240 240">
-      <!-- Grid -->
-      {#each {length: 11} as _, i}
-        <line x1={20 + i * 20} y1="20" x2={20 + i * 20} y2="220" stroke="currentColor" stroke-width="0.5" opacity="0.2" />
-        <line x1="20" y1={20 + i * 20} x2="220" y2={20 + i * 20} stroke="currentColor" stroke-width="0.5" opacity="0.2" />
-      {/each}
-      
-      <!-- Axes -->
-      <line x1="20" y1="220" x2="220" y2="220" stroke="currentColor" stroke-width="2" />
-      <line x1="20" y1="20" x2="20" y2="220" stroke="currentColor" stroke-width="2" />
-
-      <!-- Quadrent lines -->
-      <line x1="20" y1="120" x2="220" y2="120" stroke="currentColor" stroke-width="2" />
-      <line x1="120" y1="20" x2="120" y2="220" stroke="currentColor" stroke-width="2" />
-      
-      <!-- Numbers -->
-      {#each {length: 11} as _, i}
-        <text x={20 + i * 20} y="235" text-anchor="middle" font-size="10" fill="currentColor">{i-5}</text>
-        <text x="8" y={225 - i * 20} text-anchor="end" font-size="10" fill="currentColor">{i-5}</text>
-      {/each}
-      
-      <!-- Crosshairs -->
-      <line 
-        x1={120 + roll.x * 20} 
-        y1="20" 
-        x2={120 + roll.x * 20} 
-        y2="220" 
-        stroke="currentColor" 
-        stroke-width="1" 
-        stroke-dasharray="3,3" 
-        opacity="0.4"
-      />
-      <line 
-        x1="20" 
-        y1={120 - roll.y * 20} 
-        x2="220" 
-        y2={120 - roll.y * 20} 
-        stroke="currentColor" 
-        stroke-width="1" 
-        stroke-dasharray="3,3" 
-        opacity="0.4"
-      />
-      
-      <!-- Point -->
-      <circle 
-        cx={120 + roll.x * 20} 
-        cy={120 - roll.y * 20} 
-        r="6" 
-        class="point"
-      />
-    </svg>
-  </div>
-</div>
-
-<style>
-  .dice-result {
-    font-size: 28px;
-    font-weight: bold;
-    margin-top: 10px;
-    text-align: center;
-    margin-bottom: 20px;
-  }
-
-  .chart-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 20px;
-  }
-
-  svg {
-    display: flex;
-    justify-content: center;
-    overflow: visible;
-    max-width: 75%;
-    height: auto;
-  }
-
-  .point {
-    fill: currentColor;
-    stroke: none;
-  }
-</style>

src/lib/components/gameboard.svelte

@@ -1,22 +1,23 @@
 <script>
 	export let chart;
 	export let roll;
+	console.log(chart);
 </script>
 
 <div class="unified-chart">
 	<div class="main-row">
 		<!-- Y-axis vertical on left -->
 		<div class="y-axis-container">
-			<div class="y-extreme" class:placeholder={chart.x.length === 1}>
+			<div class="y-extreme" class:placeholder={chart.empty}>
-				{#if chart.x.length > 1}
+				{#if !chart.empty}
 					{chart.y[1]}
 				{:else}
 					(Top Value)
 				{/if}
 			</div>
 			<div class="y-arrow">↕</div>
-			<div class="y-extreme" class:placeholder={chart.x.length === 1}>
+			<div class="y-extreme" class:placeholder={chart.empty}>
-				{#if chart.x.length > 1}
+				{#if !chart.empty}
 					{chart.y[0]}
 				{:else}
 					(Bottom Value)
@@ -54,8 +55,24 @@
 				<line x1="20" y1="40" x2="20" y2="220" stroke="currentColor" stroke-width="2" />
 
 				<!-- Center lines (between 5 and 6) -->
-				<line x1="20" y1="130" x2="200" y2="130" stroke="currentColor" stroke-width="20" opacity="0.2" />
+				<line
-				<line x1="110" y1="40" x2="110" y2="220" stroke="currentColor" stroke-width="20" opacity="0.2" />
+					x1="20"
+					y1="130"
+					x2="200"
+					y2="130"
+					stroke="currentColor"
+					stroke-width="20"
+					opacity="0.2"
+				/>
+				<line
+					x1="110"
+					y1="40"
+					x2="110"
+					y2="220"
+					stroke="currentColor"
+					stroke-width="20"
+					opacity="0.2"
+				/>
 
 				<!-- Axis Numbers (1-10) -->
 				{#each { length: 10 } as _, i}
@@ -78,7 +95,7 @@
 				{/each}
 
 				<!-- Crosshairs (only show when roll exists) -->
-				{#if roll.x !== 0 && roll.y !== 0}
+				{#if !roll.empty}
 					<line
 						x1={20 + (roll.x - 1) * 20}
 						y1="40"
@@ -109,16 +126,16 @@
 
 	<!-- X-axis horizontal below chart (always visible) -->
 	<div class="x-axis-container">
-		<div class="x-extreme" class:placeholder={chart.x.length === 1}>
+		<div class="x-extreme" class:placeholder={chart.empty}>
-			{#if chart.x.length > 1}
+			{#if !chart.empty}
 				{chart.x[0]}
 			{:else}
 				(Left Value)
 			{/if}
 		</div>
 		<div class="x-arrow">↔</div>
-		<div class="x-extreme" class:placeholder={chart.x.length === 1}>
+		<div class="x-extreme" class:placeholder={chart.empty}>
-			{#if chart.x.length > 1}
+			{#if !chart.empty}
 				{chart.x[1]}
 			{:else}
 				(Right Value)
@@ -127,8 +144,8 @@
 	</div>
 
 	<!-- Coordinates Display (always visible) -->
-	<div class="coordinates" class:placeholder={roll.x === 0 && roll.y === 0}>
+	<div class="coordinates" class:placeholder={roll.empty}>
-		{#if roll.x === 0 && roll.y === 0}
+		{#if roll.empty}
 			(X, Y)
 		{:else}
 			({roll.x}, {roll.y})
@@ -215,7 +232,7 @@
 	.chart-wrapper {
 		display: flex;
 		justify-content: center;
-		flex: .9;
+		flex: 0.9;
 	}
 
 	.chart-svg {
@@ -273,4 +290,5 @@
 			font-size: 20px;
 		}
 	}
-</style>
+</style>
+

src/lib/components/themeSelector.svelte

@@ -25,6 +25,39 @@
 			width: 45%;
 		}
 	}
+
+	.theme-chalkboard {
+		background: rgba(245, 245, 220, 0.15);
+		border-color: #f5f5dc;
+		color: #f5f5dc;
+		font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
+		text-transform: uppercase;
+		&:hover {
+			background: rgba(245, 245, 220, 0.25);
+			box-shadow: 0 0 10px rgba(245, 245, 220, 0.3);
+		}
+	}
+	.theme-classroom {
+		background: #f44336;
+		border-color: #d32f2f;
+		border-radius: 12px;
+		color: #fff;
+		font-family: 'Comic Sans MS', cursive;
+		text-transform: uppercase;
+		font-weight: bold;
+		box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
+
+		&:hover {
+			background: #e53935;
+			transform: translate(-2px, -2px);
+			box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.2);
+		}
+
+		&:active {
+			transform: translate(2px, 2px);
+			box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
+		}
+	}
 	.theme-cyberpunk {
 		background: transparent;
 		border: 2px solid #ff00ff;

src/lib/styles/classroom.css

@@ -131,4 +131,4 @@
     fill: #333;
     font-weight: bold;
   }
-}
+}

src/routes/+layout.svelte

@@ -1,5 +1,6 @@
 <script>
 	import '$lib/styles/themes.js';
+	import favicon from '$lib/assets/favicon.svg';
 	import { writable } from 'svelte/store';
 	import { setContext } from 'svelte';
 	import { page } from '$app/state';
@@ -13,6 +14,11 @@
 	});
 </script>
 
+<svelte:head>
+	<link rel="icon" href="$lib/assests/favicon.ico" sizes="any" />
+	<link rel="icon" href={favicon} type="image/svg+xml" />
+</svelte:head>
+
 <div class="theme-{currentTheme} app-container">
 	<div class="window">
 		<div class="title-bar">
@@ -67,7 +73,6 @@
 	}
 
 	@media screen and (min-width: 450px) {
-
 	}
 
 	:global {
@@ -137,4 +142,5 @@
 			opacity: 0.7;
 		}
 	}
-</style>
+</style>
+

src/routes/+page.svelte

@@ -11,6 +11,7 @@
 <svelte:head>
 	<title>On the Spectrum</title>
 </svelte:head>
+
 <div class="home-content">
 	<h1 class="title">On the Spectrum!</h1>
 	<p class="subtitle">Well.. are ya?</p>

src/routes/play/+page.svelte

@@ -1,10 +1,10 @@
 <script>
 	import { xAxes, yAxes } from '$lib';
-	import Generator from '$components/generator.svelte';
+	import Gameboard from '$components/gameboard.svelte';
 
 	let adultMode = $state(false);
-	let currentChart = $state({ x: [''], y: [''] });
+	let currentChart = $state({ x: [''], y: [''], empty: true });
-	let diceRoll = $state({ x: 0, y: 0 });
+	let diceRoll = $state({ x: 0, y: 0, empty: true });
 
 	function generateChart() {
 		const availableXAxes = adultMode ? xAxes : xAxes.filter((axis) => !axis.adult);
@@ -15,19 +15,22 @@
 
 		currentChart = {
 			x: randomX.values,
-			y: randomY.values
+			y: randomY.values,
+			empty: false
 		};
 
 		// Reset dice roll when generating new chart
-		diceRoll = { x: 0, y: 0 };
+		diceRoll = { x: 0, y: 0, empty: true };
 	}
 
 	function rollDice() {
 		diceRoll = {
 			x: Math.floor(Math.random() * 10) + 1,
-			y: Math.floor(Math.random() * 10) + 1
+			y: Math.floor(Math.random() * 10) + 1,
+			empty: false
 		};
 	}
+	// $inspect(currentChart, diceRoll);
 </script>
 
 <svelte:head>
@@ -37,10 +40,10 @@
 <div class="container">
 	<fieldset>
 		<legend>On The Spectrum</legend>
-		<Generator chart={currentChart} roll={diceRoll} />
+		<Gameboard chart={currentChart} roll={diceRoll} />
 		<div class="button-row">
 			<button onclick={generateChart}>Generate Axes</button>
-			<button onclick={rollDice} disabled={currentChart.x.length === 1}>Roll Dice</button>
+			<button onclick={rollDice} disabled={currentChart.empty}>Roll Dice</button>
 		</div>
 	</fieldset>
 </div>
@@ -80,4 +83,5 @@
 		opacity: 0.5;
 		cursor: not-allowed;
 	}
-</style>
+</style>
+