updated some stuff to work on my PC.

deleteed the emoji from the rules.
moved the titlebar and stuff out from the pages to the layout so it gets
applied everywere. will need to work on the title changing but that
should be easy.

src/lib/components/chartDisplay.svelte

@@ -1,9 +1,10 @@
 <script>
 	export let chart;
+	console.log(chart, chart.x != [''], chart.x);
 </script>
 
 <div class="chart-display">
-  {#if chart && chart.x && chart.y}
+	{#if chart.x.length > 1}
 		<div class="axis">
 			<div class="axis-label">X-Axis (Horizontal)</div>
 			<div>{chart.x[0]} ↔ {chart.x[1]}</div>
@@ -16,3 +17,4 @@
 		<div class="empty-state">Click Generate!</div>
 	{/if}
 </div>
+

src/lib/components/themeSelector.svelte

@@ -5,10 +5,7 @@
 
 <div class="button-row">
 	{#each themeNames as theme}
-    <button 
+		<button on:click={() => (currentTheme = theme)} class:active={currentTheme === theme}>
-      on:click={() => currentTheme = theme}
-      class:active={currentTheme === theme}
-    >
 			{themeDisplayNames[theme]}
 		</button>
 	{/each}
@@ -17,9 +14,12 @@
 <style>
 	.button-row {
 		display: flex;
-    gap: 10px;
+		gap: 1rem;
 		justify-content: center;
 		flex-wrap: wrap;
-    margin-top: 10px;
+		button {
+			max-width: 33%;
+		}
 	}
 </style>
+

src/lib/styles/general.css

@@ -1,7 +1,6 @@
 /* Base styles that apply to all themes */
 .container {
-  padding: 20px;
+  padding: 2rem;
-  min-height: 100vh;
 }
 
 .window {
@@ -17,6 +16,9 @@
   display: flex;
   align-items: center;
   gap: 15px;
+  span{
+    margin: 0 auto;
+  }
 }
 
 .home-button {
@@ -81,6 +83,5 @@ button {
 .empty-state {
   font-style: italic;
   text-align: center;
-  padding: 20px;
   opacity: 0.7;
 }

src/routes/+layout.svelte

@@ -8,22 +8,57 @@
 	setContext('theme', theme);
 
 	let currentTheme;
-  theme.subscribe(value => {
+	theme.subscribe((value) => {
 		currentTheme = value;
 	});
 </script>
 
 <div class="app-container theme-{currentTheme}">
+	<div class="wrapper">
+		<div class="container">
+			<div class="window">
+				<div class="title-bar">
+					<a href="/" class="back-button">←Back</a>
+					<span>A Sludge & Friends game</span>
+				</div>
 				<slot />
 			</div>
+		</div>
+	</div>
+</div>
 
 <style>
 	:global(body) {
 		margin: 0;
 		padding: 0;
 	}
+	.back-button {
+		padding: 5px 15px;
+		cursor: pointer;
+		border-radius: 4px;
+		text-decoration: none;
+		color: inherit;
+		font-weight: bold;
+		transition: all 0.2s;
+	}
+	.wrapper {
+		min-height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 20px;
+	}
 
+	.container {
+		width: 100%;
+		max-width: 700px;
+	}
+
+	.window {
+		width: 100%;
+	}
 	.app-container {
 		min-height: 100vh;
 	}
 </style>
+

src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { getContext } from 'svelte';
-  import ThemeSelector from '$lib/components/ThemeSelector.svelte';
+	import ThemeSelector from '$components/themeSelector.svelte';
 
 	const themeStore = getContext('theme');
 	let currentTheme = $themeStore;
@@ -8,23 +8,18 @@
 	$: themeStore.set(currentTheme);
 </script>
 
-<div class="home-wrapper">
-  <div class="home-container">
-    <div class="home-window">
-      <div class="home-title-bar">
-        <span>A Sludge & Friends game</span>
-      </div>
-      
 <div class="home-content">
 	<h1 class="title">On the Spectrum!</h1>
 	<p class="subtitle">Well.. are ya?</p>
 
 	<div class="tabs">
 		<a href="/play" class="tab-button">
-            <span class="tab-icon">Play</span>
+			<span class="tab-icon">🎮</span>
+			<span>Play</span>
 		</a>
 		<a href="/rules" class="tab-button">
-            <span class="tab-icon">Rules</span>
+			<span class="tab-icon">📖</span>
+			<span>Rules</span>
 		</a>
 	</div>
 
@@ -35,28 +30,8 @@
 		</fieldset>
 	</div>
 </div>
-    </div>
-  </div>
-</div>
 
 <style>
-  .home-wrapper {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-  }
-
-  .home-container {
-    width: 100%;
-    max-width: 700px;
-  }
-
-  .home-window {
-    width: 100%;
-  }
-
 	.home-content {
 		padding: 40px;
 		text-align: center;

src/routes/play/+page.svelte

@@ -1,25 +1,15 @@
 <script>
-  import { getContext } from 'svelte';
+	import { xAxes, yAxes } from '$lib';
-  import xAxes from '$lib/data/xAxes.js';
+	import ChartDisplay from '$components/chartDisplay.svelte';
-  import yAxes from '$lib/data/yAxes.js';
+	import DiceRoller from '$components/diceRoller.svelte';
-  import ChartDisplay from '$components/ChartDisplay.svelte';
-  import DiceRoller from '$components/DiceRoller.svelte';
-  import ThemeSelector from '$components/ThemeSelector.svelte';
-  import Toggle from '$components/Toggle.svelte';
 
-  const theme = getContext('theme');
+	let adultMode = $state(false);
-  let currentTheme;
+	let currentChart = $state({ x: [''], y: [''] });
-  theme.subscribe(value => {
+	let diceRoll = $state({ x: 0, y: 0 });
-    currentTheme = value;
-  });
-
-  let adultMode = false;
-  let currentChart = null;
-  let diceRoll = null;
 
 	function generateChart() {
-    const availableXAxes = adultMode ? xAxes : xAxes.filter(axis => !axis.adult);
+		const availableXAxes = adultMode ? xAxes : xAxes.filter((axis) => !axis.adult);
-    const availableYAxes = adultMode ? yAxes : yAxes.filter(axis => !axis.adult);
+		const availableYAxes = adultMode ? yAxes : yAxes.filter((axis) => !axis.adult);
 
 		const randomX = availableXAxes[Math.floor(Math.random() * availableXAxes.length)];
 		const randomY = availableYAxes[Math.floor(Math.random() * availableYAxes.length)];
@@ -40,37 +30,55 @@
 
 <div class="container">
 	<div class="window">
-    <div class="title-bar">
-      <a href="/" class="home-button">← Home</a>
-      <span>On the Spectrum - Party Game</span>
-    </div>
-    
-    <div class="window-body">
-<!--       <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>
 
 		<fieldset>
 			<legend>Position Roller</legend>
-        <DiceRoller roll={diceRoll} />
+			<DiceRoller {diceRoll} />
 			<div class="button-row">
-          <button on:click={rollDice}>Roll Dice</button>
+				<button onclick={rollDice}>Roll Dice</button>
 			</div>
 		</fieldset>
+	</div>
+</div>
+
+<style>
+	.window {
+		max-width: 60rem;
+		margin: 0 auto;
+		padding: 1.5rem;
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	fieldset {
+		padding: 1.25rem;
+		margin: 0;
+	}
+
+	legend {
+		font-weight: bold;
+		padding: 0 0.5rem;
+	}
+
+	.button-row {
+		display: flex;
+		gap: 10px;
+		justify-content: center;
+		margin-top: 10px;
+	}
+
+	button {
+		padding: 0.5rem 1.75rem;
+		cursor: pointer;
+		font-weight: bold;
+	}
+</style>
 
-      <fieldset>
-        <legend>Theme Selector</legend>
-        <ThemeSelector bind:currentTheme={$theme} />
-      </fieldset>
-    </div>
-  </div>
-</div>

src/routes/rules/+page.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { getContext } from 'svelte';
-  import ThemeSelector from '$lib/components/ThemeSelector.svelte';
+	import ThemeSelector from '$components/themeSelector.svelte';
 
 	const themeStore = getContext('theme');
 	let currentTheme = $themeStore;
@@ -8,14 +8,6 @@
 	$: themeStore.set(currentTheme);
 </script>
 
-<div class="rules-wrapper">
-  <div class="rules-container">
-    <div class="window">
-      <div class="title-bar">
-        <a href="/" class="back-button">← Back</a>
-        <span>Rules</span>
-      </div>
-      
 <div class="window-body">
 	<fieldset>
 		<legend>Theme Selector</legend>
@@ -28,8 +20,15 @@
 		<section>
 			<h2>Basic Gameplay</h2>
 			<ol>
-              <li><strong>Generate:</strong> Click "Generate" to create a random 2D spectrum with X and Y axes</li>
+				<li>
-              <li><strong>Play:</strong>Have the clue-giver roll 2d10 with one d10 being X and the other d10 being Y (The axes run 1-10 with 5 being the centerline on each). Try to select a phrase-person-vibe that fits the X,Y coordinates you just rolled and inform the other players.</li>
+					<strong>Generate:</strong> Click "Generate" to create a random 2D spectrum with X and Y axes
+				</li>
+				<li>
+					<strong>Play:</strong>Have the clue-giver roll 2d10 with one d10 being X and the other d10
+					being Y (The axes run 1-10 with 5 being the centerline on each). Try to select a
+					phrase-person-vibe that fits the X,Y coordinates you just rolled and inform the other
+					players.
+				</li>
 				<li><strong>Repeat:</strong> Generate a new spectrum and keep playing!</li>
 			</ol>
 		</section>
@@ -75,54 +74,30 @@
 
 		<section>
 			<h2>FAQ</h2>
-            <p><strong>Can I play solo?</strong><br>
+			<p>
-            While designed for groups, you can use it for self-reflection or to prep for game night!</p>
+				<strong>Can I play solo?</strong><br />
+				While designed for groups, you can use it for self-reflection or to prep for game night!
+			</p>
 
-            <p><strong>How many spectrums are there?</strong><br>
+			<p>
-            Hundreds! The X and Y axes are randomly combined, creating thousands of possible spectrums.</p>
+				<strong>How many spectrums are there?</strong><br />
+				Hundreds! The X and Y axes are randomly combined, creating thousands of possible spectrums.
+			</p>
 
-            <p><strong>What if I'm perfectly neutral?</strong><br>
+			<p>
-            Mark yourself at 5 or 6 on that axis. True neutrality is rare and interesting!</p>
+				<strong>What if I'm perfectly neutral?</strong><br />
+				Mark yourself at 5 or 6 on that axis. True neutrality is rare and interesting!
+			</p>
 
-            <p><strong>Can we make our own rules?</strong><br>
+			<p>
-            Absolutely! These are guidelines. House rules are encouraged!</p>
+				<strong>Can we make our own rules?</strong><br />
+				Absolutely! These are guidelines. House rules are encouraged!
+			</p>
 		</section>
 	</div>
 </div>
-    </div>
-  </div>
-</div>
 
 <style>
-  .rules-wrapper {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 40px 20px;
-  }
-
-  .rules-container {
-    width: 100%;
-    max-width: 900px;
-  }
-
-  .title-bar {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-  }
-
-  .back-button {
-    padding: 5px 15px;
-    cursor: pointer;
-    border-radius: 4px;
-    text-decoration: none;
-    color: inherit;
-    font-weight: bold;
-    transition: all 0.2s;
-  }
-
 	.rules-content {
 		padding: 20px 0;
 	}
@@ -139,12 +114,6 @@
 		margin-bottom: 15px;
 	}
 
-  h3 {
-    font-size: 1.3rem;
-    margin-top: 20px;
-    margin-bottom: 10px;
-  }
-
 	section {
 		margin-bottom: 30px;
 	}
@@ -154,7 +123,8 @@
 		margin-bottom: 10px;
 	}
 
-  ol, ul {
+	ol,
+	ul {
 		line-height: 1.8;
 		padding-left: 25px;
 	}
@@ -167,15 +137,7 @@
 		font-weight: bold;
 	}
 
-  em {
-    font-style: italic;
-  }
-
 	@media (max-width: 768px) {
-    .rules-wrapper {
-      padding: 20px;
-    }
-
 		h1 {
 			font-size: 2rem;
 		}