From 06c157d4af13130af157bdf81d8fb09dee401e97 Mon Sep 17 00:00:00 2001
From: Will Stensvold <will@sludge.link>
Date: Mon, 8 Dec 2025 23:36:32 -0600
Subject: [PATCH] Updated the css themes to remove specific stuff from
 chartDisplay

added $components alias to svelte.config.js
---
 src/lib/components/chartDisplay.svelte  | 105 +++++++++---------------
 src/lib/components/index.ts             |   4 -
 src/lib/components/themeSelector.svelte |   3 +-
 src/lib/styles/cyberpunk.css            |   5 ++
 src/lib/styles/nightmare.css            |   6 ++
 src/lib/styles/nintendo.css             |   7 +-
 src/lib/styles/typewriter.css           |   5 ++
 src/lib/styles/vaporwave.css            |   4 +
 src/lib/styles/win95.css                |   5 ++
 src/routes/+layout.svelte               |  10 ++-
 src/routes/play/+page.server.ts         |   3 -
 src/routes/play/+page.svelte            |  40 ++-------
 svelte.config.js                        |  24 +++---
 13 files changed, 100 insertions(+), 121 deletions(-)
 delete mode 100644 src/lib/components/index.ts
 delete mode 100644 src/routes/play/+page.server.ts

diff --git a/src/lib/components/chartDisplay.svelte b/src/lib/components/chartDisplay.svelte
index f28e420..cbbb926 100644
--- a/src/lib/components/chartDisplay.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
deleted file mode 100644
index bc33f4a..0000000
--- a/src/lib/components/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './chartDisplay.svelte'
-export * from './diceRoller.svelte'
-export * from './themeSelector.svelte'
-export * from './toggle.svelte'
diff --git a/src/lib/components/themeSelector.svelte b/src/lib/components/themeSelector.svelte
index 9f4bd4e..0449331 100644
--- a/src/lib/components/themeSelector.svelte
+++ b/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>
-
diff --git a/src/lib/styles/cyberpunk.css b/src/lib/styles/cyberpunk.css
index de8a6c9..c8d856c 100644
--- a/src/lib/styles/cyberpunk.css
+++ b/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;
+  }
+
diff --git a/src/lib/styles/nightmare.css b/src/lib/styles/nightmare.css
index 7a28406..188b533 100644
--- a/src/lib/styles/nightmare.css
+++ b/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;
+	}
+
diff --git a/src/lib/styles/nintendo.css b/src/lib/styles/nintendo.css
index 28bd4aa..04317d6 100644
--- a/src/lib/styles/nintendo.css
+++ b/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;
+	}
diff --git a/src/lib/styles/typewriter.css b/src/lib/styles/typewriter.css
index a5df61c..5a46776 100644
--- a/src/lib/styles/typewriter.css
+++ b/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;
+  }
+
diff --git a/src/lib/styles/vaporwave.css b/src/lib/styles/vaporwave.css
index 1257289..b27be9a 100644
--- a/src/lib/styles/vaporwave.css
+++ b/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;
+	}
 
diff --git a/src/lib/styles/win95.css b/src/lib/styles/win95.css
index 83638d1..31f047a 100644
--- a/src/lib/styles/win95.css
+++ b/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;
+  }
+
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index aed4999..31f7732 100644
--- a/src/routes/+layout.svelte
+++ b/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>
 
diff --git a/src/routes/play/+page.server.ts b/src/routes/play/+page.server.ts
deleted file mode 100644
index b28b04f..0000000
--- a/src/routes/play/+page.server.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/src/routes/play/+page.svelte b/src/routes/play/+page.svelte
index d4591d8..04e105a 100644
--- a/src/routes/play/+page.svelte
+++ b/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>
diff --git a/svelte.config.js b/svelte.config.js
index afdb4e9..a16692d 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,18 +1,22 @@
 import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import path from 'path'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	// Consult https://svelte.dev/docs/kit/integrations
-	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+  // Consult https://svelte.dev/docs/kit/integrations
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
 
-	kit: {
-		// 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()
-	}
+  kit: {
+    // 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(),
+    alias: {
+      $components: path.resolve('./src/lib/components'),
+    }
+  }
 };
 
-export default config;
\ No newline at end of file
+export default config;