Updated the css themes to remove specific stuff from chartDisplay

added $components alias to svelte.config.js

src/lib/components/chartDisplay.svelte

@@ -24,38 +24,6 @@
 		margin: 15px 0;
 	}
 
-  :global(.theme-win95) .chart-display {
-    background: white;
-    border: 2px inset #808080;
-  }
-
-  :global(.theme-cyberpunk) .chart-display {
-    background: rgba(0, 255, 255, 0.05);
-    border: 1px solid #00ffff;
-  }
-
-  :global(.theme-typewriter) .chart-display {
-    background: #fffef7;
-    border: 1px solid #2c2416;
-  }
-
-  :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;
@@ -77,3 +45,4 @@
 		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 ChartDisplay from '$components/chartDisplay.svelte';
-	import DiceRoller from '$lib/components/diceRoller.svelte';
+	import DiceRoller from '$components/diceRoller.svelte';
-	import ThemeSelector from '$lib/components/themeSelector.svelte';
-	import Toggle from '$lib/components/toggle.svelte';
 
-	let currentTheme = 'win95';
+	let { data } = $props();
-	let adultMode = false;
+	let adultMode = $state(false);
-	let currentChart = null;
+	let currentChart = $state({ x: [''], y: [''] });
-	let diceRoll = null;
+	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>

svelte.config.js

@@ -1,5 +1,6 @@
 import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import path from 'path'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -11,7 +12,10 @@ const config = {
     // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
     // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
     // See https://svelte.dev/docs/kit/adapters for more information about adapters.
-		adapter: adapter()
+    adapter: adapter(),
+    alias: {
+      $components: path.resolve('./src/lib/components'),
+    }
   }
 };