Updated the css themes to remove specific stuff from chartDisplay

added $components alias to svelte.config.js

src/lib/components/chartDisplay.svelte

@@ -1,79 +1,48 @@
 <script>
-  export let chart;
+	export let chart;
 </script>
 
 <div class="chart-display">
-  {#if chart}
-    <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}
+	{#if chart}
+		<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>
-  .chart-display {
-    padding: 20px;
-    min-height: 120px;
-    margin: 15px 0;
-  }
+	.chart-display {
+		padding: 20px;
+		min-height: 120px;
+		margin: 15px 0;
+	}
 
-  :global(.theme-win95) .chart-display {
-    background: white;
-    border: 2px inset #808080;
-  }
+	.axis {
+		margin: 10px 0;
+		padding: 10px;
+		border: 1px solid currentColor;
+		opacity: 0.9;
+	}
 
-  :global(.theme-cyberpunk) .chart-display {
-    background: rgba(0, 255, 255, 0.05);
-    border: 1px solid #00ffff;
-  }
+	.axis-label {
+		font-weight: bold;
+		margin-bottom: 5px;
+		font-size: 11px;
+		text-transform: uppercase;
+	}
 
-  :global(.theme-typewriter) .chart-display {
-    background: #fffef7;
-    border: 1px solid #2c2416;
-  }
+	.empty-state {
+		font-style: italic;
+		text-align: center;
+		padding: 20px;
+		opacity: 0.7;
+	}
+</style>
 
-  :global(.theme-nightmare) .chart-display {
-    background: #000000;
-    border: 2px solid #8b0000;
-  }
-
-  :global(.theme-vaporwave) .chart-display {
-    background: rgba(255, 255, 255, 0.15);
-    border: 2px solid #ff6ad5;
-  }
-
-  :global(.theme-nintendo) .chart-display {
-    background: #fff;
-    border: 3px solid #00a3e0;
-    border-radius: 10px;
-    color: #484848;
-  }
-
-  .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;
-  }
-
-  .empty-state {
-    font-style: italic;
-    text-align: center;
-    padding: 20px;
-    opacity: 0.7;
-  }
-</style>

src/lib/components/index.ts

@@ -1,4 +0,0 @@
-export * from './chartDisplay.svelte'
-export * from './diceRoller.svelte'
-export * from './themeSelector.svelte'
-export * from './toggle.svelte'

src/lib/components/themeSelector.svelte

@@ -7,7 +7,7 @@
 <div class="button-row">
 	{#each themes as theme}
 		<button on:click={() => (currentTheme = theme)} class:active={currentTheme === theme}>
-			{theme.charAt(0).toUpperCase() + theme.slice(1)}
+			{theme.charAt(0).toUpperCase()}
 		</button>
 	{/each}
 </div>
@@ -21,4 +21,3 @@
 		margin-top: 10px;
 	}
 </style>
-

src/lib/styles/cyberpunk.css

@@ -41,3 +41,8 @@
   background: #ff00ff;
   color: #000;
 }
+:global(.theme-cyberpunk .chart-display) {
+    background: rgba(0, 255, 255, 0.05);
+    border: 1px solid #00ffff;
+  }
+

src/lib/styles/nightmare.css

@@ -42,3 +42,9 @@
 :global(.theme-nightmare button:hover) {
   background: #8b0000;
 }
+
+:global(.theme-nightmare .chart-display) {
+		background: #000000;
+		border: 2px solid #8b0000;
+	}
+

src/lib/styles/nintendo.css

@@ -55,4 +55,9 @@
   box-shadow: 0 2px 0 #a00009;
   transform: translateY(2px);
 }
-
+:global(.theme-nintendo .chart-display ){
+		background: #fff;
+		border: 3px solid #00a3e0;
+		border-radius: 10px;
+		color: #484848;
+	}

src/lib/styles/typewriter.css

@@ -30,3 +30,8 @@
   color: #f4e8d0;
   font-family: 'Courier', monospace;
 }
+:global(.theme-typewriter) .chart-display {
+    background: #fffef7;
+    border: 1px solid #2c2416;
+  }
+

src/lib/styles/vaporwave.css

@@ -39,4 +39,8 @@
   text-transform: uppercase;
   padding: 12px 30px;
 }
+	:global(.theme-vaporwave .chart-display ){
+		background: rgba(255, 255, 255, 0.15);
+		border: 2px solid #ff6ad5;
+	}
 

src/lib/styles/win95.css

@@ -32,3 +32,8 @@
 :global(.theme-win95 button:active) {
   border-color: #000000 #ffffff #ffffff #000000;
 }
+:global(.theme-win95 .chart-display) {
+    background: white;
+    border: 2px inset #808080;
+  }
+

src/routes/+layout.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import favicon from '$lib/assets/favicon.svg';
+	import ThemeSelector from '$components/themeSelector.svelte';
 
+	let currentTheme = $state('win95');
 	let { children } = $props();
 </script>
 
@@ -8,16 +10,20 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
-<nav>
+<nav class="titlebar theme-{currentTheme}">
 	<h1><a href="/">On the Spectrum</a></h1>
 	<ul>
 		<li><a href="play">Play</a></li>
 		<li><a href="rules">Rules</a></li>
 		<li><a href="submit">Submit</a></li>
 	</ul>
+	<fieldset>
+		<legend>Theme Selector</legend>
+		<ThemeSelector bind:currentTheme />
+	</fieldset>
 </nav>
 
-<section>
+<section class="theme-{currentTheme}">
 	{@render children()}
 </section>
 

src/routes/play/+page.server.ts

@@ -1,3 +0,0 @@
-
-
-

src/routes/play/+page.svelte

@@ -1,15 +1,12 @@
 <script>
-	import { goto } from '$app/navigation';
 	import { xAxes, yAxes } from '$lib';
-	import ChartDisplay from '$lib/components/chartDisplay.svelte';
-	import DiceRoller from '$lib/components/diceRoller.svelte';
-	import ThemeSelector from '$lib/components/themeSelector.svelte';
-	import Toggle from '$lib/components/toggle.svelte';
+	import ChartDisplay from '$components/chartDisplay.svelte';
+	import DiceRoller from '$components/diceRoller.svelte';
 
-	let currentTheme = 'win95';
-	let adultMode = false;
-	let currentChart = null;
-	let diceRoll = null;
+	let { data } = $props();
+	let adultMode = $state(false);
+	let currentChart = $state({ x: [''], y: [''] });
+	let diceRoll = $state({ x: 0, y: 0 });
 
 	function generateChart() {
 		const availableXAxes = adultMode ? xAxes : xAxes.filter((axis) => !axis.adult);
@@ -30,35 +27,16 @@
 			y: Math.floor(Math.random() * 10) + 1
 		};
 	}
-
-	function goHome() {
-		goto('/');
-	}
 </script>
 
-<div class="container theme-{currentTheme}">
+<div class="container theme-{data.currentTheme}">
 	<div class="window">
-		<div class="title-bar">
-			<button class="home-button" on:click={goHome}>← Home</button>
-			<span>On the Spectrum - Party Game</span>
-		</div>
-
 		<div class="window-body">
-			<fieldset>
-				<legend>Theme Selector</legend>
-				<ThemeSelector bind:currentTheme />
-			</fieldset>
-
-			<fieldset>
-				<legend>Adult Mode (18+)</legend>
-				<Toggle bind:checked={adultMode} />
-			</fieldset>
-
 			<fieldset>
 				<legend>Chart Generator</legend>
 				<ChartDisplay chart={currentChart} />
 				<div class="button-row">
-					<button on:click={generateChart}>Generate</button>
+					<button onclick={generateChart}>Generate</button>
 				</div>
 			</fieldset>
 
@@ -66,7 +44,7 @@
 				<legend>Position Roller</legend>
 				<DiceRoller roll={diceRoll} />
 				<div class="button-row">
-					<button on:click={rollDice}>Roll Dice</button>
+					<button onclick={rollDice}>Roll Dice</button>
 				</div>
 			</fieldset>
 		</div>