From 427d58d61d09f1aa96968c9bf61be8615c1429e2 Mon Sep 17 00:00:00 2001
From: Giac <giac@sludge.link>
Date: Tue, 9 Dec 2025 13:51:30 -0600
Subject: [PATCH] Fixed chart to use 2d10

---
 src/lib/components/diceRoller.svelte | 50 ++++++++++++++--------------
 src/routes/rules/+page.svelte        | 11 +++---
 2 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/src/lib/components/diceRoller.svelte b/src/lib/components/diceRoller.svelte
index 7580dbc..42f62a4 100644
--- a/src/lib/components/diceRoller.svelte
+++ b/src/lib/components/diceRoller.svelte
@@ -7,33 +7,33 @@
     <div class="dice-result">X: {roll.x} | Y: {roll.y}</div>
     
     <div class="chart-container">
-      <svg viewBox="0 0 240 240">
+      <svg viewBox="0 20 200 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 {length: 10} as _, i}
+          <line x1={20 + i * 20} y1="40" x2={20 + i * 20} y2="220" stroke="currentColor" stroke-width="0.5" opacity="0.2" />
+          <line x1="20" y1={20 + (i+1) * 20} x2="200" y2={20 + (i+1) * 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" />
+        <line x1="20" y1="220" x2="200" y2="220" stroke="currentColor" stroke-width="2" />
+        <line x1="20" y1="40" 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" />
+        <line x1="20" y1="130" x2="200" y2="130" stroke="currentColor" stroke-width="2" />
+        <line x1="110" y1="40" x2="110" 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}</text>
-          <text x="8" y={225 - i * 20} text-anchor="end" font-size="10" fill="currentColor">{i}</text>
+        {#each {length: 10} as _, i}
+          <text x={20 + i * 20} y="235" text-anchor="end" font-size="10" fill="currentColor">{i+1}</text>
+          <text x="8" y={225 - i * 20} text-anchor="middle" font-size="10" fill="currentColor">{i+1}</text>
         {/each}
         
         <!-- Crosshairs -->
         <line 
-          x1={20 + roll.x * 20} 
-          y1="20" 
-          x2={20 + roll.x * 20} 
-          y2="220" 
+          x1={roll.x * 20} 
+          y1="40" 
+          x2={roll.x * 20} 
+          y2="240" 
           stroke="currentColor" 
           stroke-width="1" 
           stroke-dasharray="3,3" 
@@ -41,9 +41,9 @@
         />
         <line 
           x1="20" 
-          y1={220 - roll.y * 20} 
-          x2="220" 
-          y2={220 - roll.y * 20} 
+          y1={240 - roll.y * 20} 
+          x2="200" 
+          y2={240 - roll.y * 20} 
           stroke="currentColor" 
           stroke-width="1" 
           stroke-dasharray="3,3" 
@@ -52,8 +52,8 @@
         
         <!-- Point -->
         <circle 
-          cx={20 + roll.x * 20} 
-          cy={220 - roll.y * 20} 
+          cx={roll.x * 20} 
+          cy={240 - roll.y * 20} 
           r="6" 
           class="point"
         />
@@ -70,18 +70,18 @@
     font-weight: bold;
     margin-top: 10px;
     text-align: center;
-    margin-bottom: 20px;
   }
 
   .chart-container {
     display: flex;
-    justify-content: center;
-    margin-top: 20px;
+    justify-content:center;
+    margin-top: 0px;
   }
 
   svg {
-    width: 100%;
-    max-width: 300px;
+    display: flex;
+    justify-content: center;
+    max-width: 75%;
     height: auto;
   }
 
diff --git a/src/routes/rules/+page.svelte b/src/routes/rules/+page.svelte
index c3f49cc..af1b0b7 100644
--- a/src/routes/rules/+page.svelte
+++ b/src/routes/rules/+page.svelte
@@ -9,11 +9,6 @@
 </script>
 
 <div class="window-body">
-	<fieldset>
-		<legend>Theme Selector</legend>
-		<ThemeSelector bind:currentTheme />
-	</fieldset>
-
 	<div class="rules-content">
 		<h1>How to Play</h1>
 
@@ -94,12 +89,16 @@
 				Absolutely! These are guidelines. House rules are encouraged!
 			</p>
 		</section>
+	<fieldset>
+		<legend>Theme Selector</legend>
+		<ThemeSelector bind:currentTheme />
+	</fieldset>
 	</div>
 </div>
 
 <style>
 	.rules-content {
-		padding: 20px 0;
+		padding: 0px 0;
 	}
 
 	h1 {