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

-5 to 5

Browse Source
This commit is contained in:
Giac
2025-12-09 15:03:11 -06:00
parent a95e085b23
commit 4aa3f27131
2 changed files with 59 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,36 +3,35 @@
</script>
<div class="dice-display">
{#if roll && roll.x && roll.y}
<div class="dice-result">X: {roll.x} | Y: {roll.y}</div>
<div class="chart-container">
<svg viewBox="0 20 200 240">
<svg viewBox="0 0 240 240">
<!-- Grid -->
{#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 {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}
<!-- Axes -->
<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" />
<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" />
<!-- Quadrent lines -->
<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" />
<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" />
<!-- Numbers -->
{#each {length: 10} as _, i}
<text x={20 + i * 20} y="235" text-anchor="middle" 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 {length: 11} as _, i}
<text x={20 + i * 20} y="235" text-anchor="middle" font-size="10" fill="currentColor">{i-5}</text>
<text x="8" y={225 - i * 20} text-anchor="end" font-size="10" fill="currentColor">{i-5}</text>
{/each}
<!-- Crosshairs -->
<line
x1={roll.x * 20}
y1="40"
x2={roll.x * 20}
x1={120 + roll.x * 20}
y1="20"
x2={120 + roll.x * 20}
y2="220"
stroke="currentColor"
stroke-width="1"
@@ -41,9 +40,9 @@
/>
<line
x1="20"
y1={240 - roll.y * 20}
x2="200"
y2={240 - roll.y * 20}
y1={120 - roll.y * 20}
x2="220"
y2={120 - roll.y * 20}
stroke="currentColor"
stroke-width="1"
stroke-dasharray="3,3"
@@ -52,16 +51,13 @@
<!-- Point -->
<circle
cx={roll.x * 20}
cy={240 - roll.y * 20}
cx={120 + roll.x * 20}
cy={120 - roll.y * 20}
r="6"
class="point"
/>
</svg>
</div>
{:else}
<div class="empty-state">Click Roll!</div>
{/if}
</div>
<style>
@@ -70,12 +66,13 @@
font-weight: bold;
margin-top: 10px;
text-align: center;
margin-bottom: 20px;
}
.chart-container {
display: flex;
justify-content:center;
margin-top: 0px;
justify-content: center;
margin-top: 20px;
}
svg {

4
src/routes/play/+page.svelte
View File

@@ -22,8 +22,8 @@
function rollDice() {
diceRoll = {
x: Math.floor(Math.random() * 10) + 1,
y: Math.floor(Math.random() * 10) + 1
x: Math.floor(Math.random() * 11) - 5,
y: Math.floor(Math.random() * 11) - 5
};
}
</script>