Sludge-Games/onTheSpectrum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed chart to use 2d10

Browse Source
This commit is contained in:
Giac
2025-12-09 13:51:30 -06:00
parent e8a2b828b8
commit 427d58d61d
2 changed files with 30 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/lib/components/diceRoller.svelte
View File

@@ -7,33 +7,33 @@
<div class="dice-result">X: {roll.x} | Y: {roll.y}</div> <div class="dice-result">X: {roll.x} | Y: {roll.y}</div>
<div class="chart-container"> <div class="chart-container">
<svg viewBox="0 0 240 240"> <svg viewBox="0 20 200 240">
<!-- Grid --> <!-- Grid -->
{#each {length: 11} as _, i} {#each {length: 10} 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 + 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 * 20} x2="220" y2={20 + i * 20} 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} {/each}
<!-- Axes --> <!-- Axes -->
<line x1="20" y1="220" x2="220" 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="20" x2="20" y2="220" stroke="currentColor" stroke-width="2" /> <line x1="20" y1="40" x2="20" y2="220" stroke="currentColor" stroke-width="2" />
<!-- Quadrent lines --> <!-- Quadrent lines -->
<line x1="20" y1="120" x2="220" y2="120" stroke="currentColor" stroke-width="2" /> <line x1="20" y1="130" x2="200" y2="130" stroke="currentColor" stroke-width="2" />
<line x1="120" y1="20" x2="120" y2="220" stroke="currentColor" stroke-width="2" /> <line x1="110" y1="40" x2="110" y2="220" stroke="currentColor" stroke-width="2" />
<!-- Numbers --> <!-- Numbers -->
{#each {length: 11} as _, i} {#each {length: 10} as _, i}
<text x={20 + i * 20} y="235" text-anchor="middle" font-size="10" fill="currentColor">{i}</text> <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="end" font-size="10" fill="currentColor">{i}</text> <text x="8" y={225 - i * 20} text-anchor="middle" font-size="10" fill="currentColor">{i+1}</text>
{/each} {/each}
<!-- Crosshairs --> <!-- Crosshairs -->
<line <line
x1={20 + roll.x * 20} x1={roll.x * 20}
y1="20" y1="40"
x2={20 + roll.x * 20} x2={roll.x * 20}
y2="220" y2="240"
stroke="currentColor" stroke="currentColor"
stroke-width="1" stroke-width="1"
stroke-dasharray="3,3" stroke-dasharray="3,3"
@@ -41,9 +41,9 @@
/> />
<line <line
x1="20" x1="20"
y1={220 - roll.y * 20} y1={240 - roll.y * 20}
x2="220" x2="200"
y2={220 - roll.y * 20} y2={240 - roll.y * 20}
stroke="currentColor" stroke="currentColor"
stroke-width="1" stroke-width="1"
stroke-dasharray="3,3" stroke-dasharray="3,3"
@@ -52,8 +52,8 @@
<!-- Point --> <!-- Point -->
<circle <circle
cx={20 + roll.x * 20} cx={roll.x * 20}
cy={220 - roll.y * 20} cy={240 - roll.y * 20}
r="6" r="6"
class="point" class="point"
/> />
@@ -70,18 +70,18 @@
font-weight: bold; font-weight: bold;
margin-top: 10px; margin-top: 10px;
text-align: center; text-align: center;
margin-bottom: 20px;
} }
.chart-container { .chart-container {
display: flex; display: flex;
justify-content:center; justify-content:center;
margin-top: 20px; margin-top: 0px;
} }
svg { svg {
width: 100%; display: flex;
max-width: 300px; justify-content: center;
max-width: 75%;
height: auto; height: auto;
} }

11
src/routes/rules/+page.svelte
View File

@@ -9,11 +9,6 @@
</script> </script>
<div class="window-body"> <div class="window-body">
<fieldset>
<legend>Theme Selector</legend>
<ThemeSelector bind:currentTheme />
</fieldset>
<div class="rules-content"> <div class="rules-content">
<h1>How to Play</h1> <h1>How to Play</h1>
@@ -94,12 +89,16 @@
Absolutely! These are guidelines. House rules are encouraged! Absolutely! These are guidelines. House rules are encouraged!
</p> </p>
</section> </section>
<fieldset>
<legend>Theme Selector</legend>
<ThemeSelector bind:currentTheme />
</fieldset>
</div> </div>
</div> </div>
<style> <style>
.rules-content { .rules-content {
padding: 20px 0; padding: 0px 0;
} }
h1 { h1 {