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

More charts, and dice graphic

Browse Source
This commit is contained in:
Giac
2025-12-09 10:31:08 -06:00
parent 640944ecc2
commit 0a986b2b06
6 changed files with 274 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,60 @@
<script>
export let diceRoll;
export let roll;
</script>
<div class="dice-display">
{#if diceRoll}
<div class="dice-emoji">🎲 🎲</div>
<div class="dice-result">X: {diceRoll.x} | Y: {diceRoll.y}</div>
{#if roll && roll.x && roll.y}
<div class="dice-result">X: {roll.x} | Y: {roll.y}</div>
<div class="chart-container">
<svg viewBox="0 0 240 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}
<!-- 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" />
<!-- 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}
<!-- Crosshairs -->
<line
x1={20 + roll.x * 20}
y1="20"
x2={20 + roll.x * 20}
y2="220"
stroke="currentColor"
stroke-width="1"
stroke-dasharray="3,3"
opacity="0.4"
/>
<line
x1="20"
y1={220 - roll.y * 20}
x2="220"
y2={220 - roll.y * 20}
stroke="currentColor"
stroke-width="1"
stroke-dasharray="3,3"
opacity="0.4"
/>
<!-- Point -->
<circle
cx={20 + roll.x * 20}
cy={220 - roll.y * 20}
r="6"
class="point"
/>
</svg>
</div>
{:else}
<div class="empty-state">Click Roll!</div>
{/if}
@@ -22,5 +71,33 @@
font-weight: bold;
margin-top: 10px;
text-align: center;
margin-bottom: 20px;
}
.chart-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
svg {
width: 100%;
max-width: 300px;
height: auto;
}
.point {
fill: currentColor;
stroke: none;
}
:global(.theme-cyberpunk) .point {
fill: #ff00ff;
filter: drop-shadow(0 0 8px #ff00ff);
}
:global(.theme-nightmare) .point {
fill: #ff0000;
filter: drop-shadow(0 0 10px #ff0000);
}
</style>

95
src/lib/data/xAxes.js
View File

@@ -1,14 +1,89 @@
// Attribute/Charasteric
const xAxes = [
{ values: ["Traditional", "Experimental"], adult: false },
{ values: ["Budget", "Luxury"], adult: false },
{ values: ["Old", "New"], adult: false },
{ values: ["Simple", "Complex"], adult: false },
{ values: ["Minimal", "Maximal"], adult: false },
// Adult axes
{ values: ["Beer", "Cocktails"], adult: false },
{ values: ["Casual", "Serious"], adult: false },
{ values: ["Colorful", "Colorless"], "adult": false},
{ values: ["High calorie", "Low calorie"], "adult": false},
{ values: ["Common", "Rare"], "adult": false},
{ values: ["Hard subject", "Easy subject"], "adult": false},
{ values: ["Famous", "Unknown"], "adult": false},
{ values: ["Easy to use", "Difficult to use"], "adult": false},
{ values: ["Clean", "Dirty"], "adult": false},
{ values: ["Requires skill", "Requires luck"], "adult": false},
{ values: ["Flavorful", "Flavorless"], "adult": false},
{ values: ["Hipster", "Basic"], "adult": false},
{ values: ["Safe job", "Dangerous job"], "adult": false},
{ values: ["Sci-Fi", "Fantasy"], "adult": false},
{ values: ["Formal", "Casual"], "adult": false},
{ values: ["Wet", "Dry"], "adult": false},
{ values: ["Happy song", "Sad song"], "adult": false},
{ values: ["Durable", "Fragile"], "adult": false},
{ values: ["Dork", "Geek"], "adult": false},
{ values: ["Light", "Dark"], "adult": false},
{ values: ["Easy to find", "Hard to find"], "adult": false},
{ values: ["Easy to remember", "Hard to remember"], "adult": false},
{ values: ["Highbrow", "Lowbrow"], "adult": false},
{ values: ["Hairy", "Hairless"], "adult": false},
{ values: ["Flexible", "Inflexible"], "adult": false},
{ values: ["Exotic pet", "Normal pet"], "adult": false},
{ values: ["Extrovert", "Introvert"], "adult": false},
{ values: ["Happens suddenly", "Happens slowly"], "adult": false},
{ values: ["Career", "Job"], "adult": false},
{ values: ["Dog person", "Cat person"], "adult": false},
{ values: ["Sexy", "Unsexy"], "adult": false},
{ values: ["Wired", "Tired"], "adult": false},
{ values: ["Believable", "Unbelievable"], "adult": false},
{ values: ["Permanent", "Temporary"], "adult": false},
{ values: ["Doesn't look like a person", "Looks like a person"], "adult": false},
{ values: ["Game", "Sport"], "adult": false},
{ values: ["Mobile", "Stationary"], "adult": false},
{ values: ["Pointy animal", "Round animal"], "adult": false},
{ values: ["Traditionally feminine", "Traditionally masculine"], "adult": false},
{ values: ["Conservative", "Liberal"], "adult": false},
{ values: ["For adults", "For kids"], "adult": false},
{ values: ["Hard to do", "Easy to do"], "adult": false},
{ values: ["Democracy", "Dictatorship"], "adult": false},
{ values: ["Cat name", "Dog name"], "adult": false},
{ values: ["Partisan", "Non-partisan"], "adult": false},
{ values: ["Infinite", "Limited"], "adult": false},
{ values: ["Formal event", "Casual event"], "adult": false},
{ values: ["Heavy topic", "Small talk"], "adult": false},
{ values: ["Spicy", "Mild"], "adult": false},
{ values: ["Loud", "Quiet"], "adult": false},
{ values: ["Public knowledge", "Secret"], "adult": false},
{ values: ["Too big", "Too small"], "adult": false},
{ values: ["Long", "Short"], "adult": false},
{ values: ["Capitalist", "Socialist"], "adult": false},
{ values: ["Well known fact", "Little known fact"], "adult": false},
{ values: ["Global issue", "Local issue"], "adult": false},
{ values: ["Skill", "Talent"], "adult": false},
{ values: ["Large number", "Small number"], "adult": false},
{ values: ["False", "True"], "adult": false},
{ values: ["Avant garde", "Old fashioned"], "adult": false},
{ values: ["Tiny", "Small"], "adult": false},
{ values: ["Natural", "Unnatural"], "adult": false},
{ values: ["Original", "Derivative"], "adult": false},
{ values: ["Vapes", "Doesn't vape"], "adult": false},
{ values: ["Vegetable", "Fruit"], "adult": false},
{ values: ["Pseudoscience", "Science"], "adult": false},
{ values: ["Serious topic", "Funny topic"], "adult": false},
{ values: ["Firm", "Limp"], "adult": false},
{ values: ["News", "Gossip"], "adult": false},
{ values: ["Easy to sit on", "Hard to sit on"], "adult": false},
{ values: ["Too much", "Not enough"], "adult": false},
{ values: ["Vertical", "Horizontal"], "adult": false},
{ values: ["Scented", "Unscented"], "adult": false},
{ values: ["Not huggable", "Huggable"], "adult": false},
{ values: ["Homogenous", "Heterogeneous"], "adult": false},
{ values: ["Exclusive", "Inclusive"], "adult": false},
{ values: ["Commerce", "Art"], "adult": false},
{ values: ["Radical", "Traditional"], "adult": false},
{ values: ["Legal", "Illegal"], "adult": false},
{ values: ["Always on time", "Never on time"], "adult": false},
{ values: ["Strange", "Weird"], "adult": false},
{ values: ["Infamous", "Famous"], "adult": false},
{ values: ["Overpopulated species", "Endangered species"], "adult": false},
{ values: ["Terrifying", "Thrilling"], "adult": false},
{ values: ["Unexpected", "Expected"], "adult": false},
{ values: ["Jock", "Nerd"], "adult": false}
// Add more X axes here...
// Format: { values: ["Left extreme", "Right extreme"], adult: true/false }
];

114
src/lib/data/yAxes.js
View File

@@ -1,15 +1,107 @@
//Judgement/Evaluation
const yAxes = [
{ values: ["Thin", "Thick"], adult: false },
{ values: ["Planned", "Spontaneous"], adult: false },
{ values: ["Calm", "Upbeat"], adult: false },
{ values: ["Indoor", "Outdoor"], adult: false },
{ values: ["Solo", "Group"], adult: false },
// Adult axes
{ values: ["Occasional", "Frequent"], adult: false },
{ values: ["Hookups", "Relationships"], adult: false },
{ values: ["Private", "Public"], adult: false },
{ values: ["Highly addictive", "Mildly addictive"], "adult": false},
{ values: ["Weird", "Normal"], "adult": false},
{ values: ["Feels good", "Feels bad"], "adult": false},
{ values: ["Essential", "Inessential"], "adult": false},
{ values: ["Expensive", "Cheap"], "adult": false},
{ values: ["Overrated weapon", "Underrated weapon"], "adult": false},
{ values: ["Fascinating topic", "Boring topic"], "adult": false},
{ values: ["Good actor", "Bad actor"], "adult": false},
{ values: ["Overpaid", "Underpaid"], "adult": false},
{ values: ["Overrated skill", "Underrated skill"], "adult": false},
{ values: ["Encouraged", "Forbidden"], "adult": false},
{ values: ["Evil", "Good"], "adult": false},
{ values: ["Best day of the year", "Worst day of the year"], "adult": false},
{ values: ["Good habit", "Bad habit"], "adult": false},
{ values: ["Openly love", "Guilty pleasure"], "adult": false},
{ values: ["Talented", "Untalented"], "adult": false},
{ values: ["Beautiful man", "Ugly man"], "adult": false},
{ values: ["Healthy", "Unhealthy"], "adult": false},
{ values: ["Good man", "Bad man"], "adult": false},
{ values: ["Historically irrelevant", "Historically important"], "adult": false},
{ values: ["Movie was better", "Book was better"], "adult": false},
{ values: ["Good movie", "Bad movie"], "adult": false},
{ values: ["Beautiful", "Ugly"], "adult": false},
{ values: ["Hated", "Loved"], "adult": false},
{ values: ["The Dark Side of the Force", "The Light Side of the Force"], "adult": false},
{ values: ["Good pizza topping", "Bad pizza topping"], "adult": false},
{ values: ["Utopia", "Dystopia"], "adult": false},
{ values: ["Immature person", "Mature person"], "adult": false},
{ values: ["Overrated thing to own", "Underrated thing to own"], "adult": false},
{ values: ["Nice person", "Mean person"], "adult": false},
{ values: ["Good", "Bad"], "adult": false},
{ values: ["Overrated", "Underrated"], "adult": false},
{ values: ["Classy", "Trashy"], "adult": false},
{ values: ["Tastes good", "Tastes bad"], "adult": false},
{ values: ["Cool", "Uncool"], "adult": false},
{ values: ["Greatest living person", "Worst living person"], "adult": false},
{ values: ["Clean food", "Messy food"], "adult": false},
{ values: ["Ethical", "Unethical"], "adult": false},
{ values: ["Good gift", "Bad gift"], "adult": false},
{ values: ["Fashionable", "Unfashionable"], "adult": false},
{ values: ["Terrorist", "Freedom fighter"], "adult": false},
{ values: ["Forgiveable", "Unforgiveable"], "adult": false},
{ values: ["Harmful", "Harmless"], "adult": false},
{ values: ["Hygienic", "Unhygienic"], "adult": false},
{ values: ["Good music", "Bad music"], "adult": false},
{ values: ["Useful", "Useless"], "adult": false},
{ values: ["Important", "Unimportant"], "adult": false},
{ values: ["Hard to spell", "Easy to spell"], "adult": false},
{ values: ["Virtue", "Vice"], "adult": false},
{ values: ["Overrated musician", "Underrated musician"], "adult": false},
{ values: ["Popular activity", "Unpopular activity"], "adult": false},
{ values: ["Whole", "Divided"], "adult": false},
{ values: ["Reliable", "Unreliable"], "adult": false},
{ values: ["Hard to kill", "Easy to kill"], "adult": false},
{ values: ["Stable", "Unstable"], "adult": false},
{ values: ["Good TV show", "Bad TV show"], "adult": false},
{ values: ["Useful body part", "Useless body part"], "adult": false},
{ values: ["Classic", "Fad"], "adult": false},
{ values: ["Brilliant", "Stupid"], "adult": false},
{ values: ["Strong", "Weak"], "adult": false},
{ values: ["Useful invention", "Useless invention"], "adult": false},
{ values: ["Popular", "Unpopular"], "adult": false},
{ values: ["Enemy", "Friend"], "adult": false},
{ values: ["Exciting", "Boring"], "adult": false},
{ values: ["Smelly in a good way", "Smelly in a bad way"], "adult": false},
{ values: ["Hero", "Villain"], "adult": false},
{ values: ["Overrated thing to do", "Underrated thing to do"], "adult": false},
{ values: ["Useful in an emergency", "Useless in an emergency"], "adult": false},
{ values: ["Priceless", "Worthless"], "adult": false},
{ values: ["Nurture", "Nature"], "adult": false},
{ values: ["Weird greeting", "Normal greeting"], "adult": false},
{ values: ["Good investment", "Bad investment"], "adult": false},
{ values: ["Sacrilegious", "Religious"], "adult": false},
{ values: ["Art", "Not art"], "adult": false},
{ values: ["Elitist", "Popular"], "adult": false},
{ values: ["In control", "Out of control"], "adult": false},
{ values: ["Best year in history", "Worst year in history"], "adult": false},
{ values: ["Best era to time travel", "Worst era to time travel"], "adult": false},
{ values: ["The best", "The worst"], "adult": false},
{ values: ["Beautiful word", "Ugly word"], "adult": false},
{ values: ["Phony person", "Genuine person"], "adult": false},
{ values: ["Sexy color", "Unsexy color"], "adult": false},
{ values: ["Benefits everyone", "Benefits you"], "adult": false},
{ values: ["Powerful", "Powerless"], "adult": false},
{ values: ["Good dog breed", "Bad dog breed"], "adult": false},
{ values: ["Pop icon", "One hit wonder"], "adult": false},
{ values: ["Good advice", "Bad advice"], "adult": false},
{ values: ["Good candy", "Bad candy"], "adult": false},
{ values: ["Good mouthfeel", "Bad mouthfeel"], "adult": false},
{ values: ["Shallow thought", "Deep thought"], "adult": false},
{ values: ["Good school", "Bad school"], "adult": false},
{ values: ["Will live to 100", "Won't live to 100"], "adult": false},
{ values: ["Good Disney character", "Bad Disney character"], "adult": false},
{ values: ["Good president", "Bad president"], "adult": false},
{ values: ["Most powerful god", "Least powerful god"], "adult": false},
{ values: ["Fun person", "Boring person"], "adult": false},
{ values: ["Overrated book", "Underrated book"], "adult": false},
{ values: ["Best chore", "Worst chore"], "adult": false},
{ values: ["Person who'd beat you up", "Person you could beat up"], "adult": false},
{ values: ["Overrated game", "Underrated game"], "adult": false},
{ values: ["You don't want your parents to watch you do it", "You want your parents to watch you do it"], "adult": false},
{ values: ["Evil people", "Good people"], "adult": false}
// Add more Y axes here...
// Format: { values: ["Bottom extreme", "Top extreme"], adult: true/false }
];

6
src/routes/+page.svelte
View File

@@ -12,12 +12,12 @@
<div class="home-container">
<div class="home-window">
<div class="home-title-bar">
<span>On the Spectrum</span>
<span>A Sludge & Friends game</span>
</div>
<div class="home-content">
<h1 class="title">Are you on the Spectrum?</h1>
<p class="subtitle">A party game about preferences</p>
<h1 class="title">On the Spectrum!</h1>
<p class="subtitle">Well.. are ya?</p>
<div class="tabs">
<a href="/play" class="tab-button">

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

@@ -61,7 +61,7 @@
<fieldset>
<legend>Position Roller</legend>
<DiceRoller diceRoll={diceRoll} />
<DiceRoller roll={diceRoll} />
<div class="button-row">
<button on:click={rollDice}>Roll Dice</button>
</div>

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

@@ -29,9 +29,7 @@
<h2>📊 Basic Gameplay</h2>
<ol>
<li><strong>Generate:</strong> Click "Generate" to create a random 2D spectrum with X and Y axes</li>
<li><strong>Plot:</strong> Each player marks where they fall on the spectrum (1-10 on each axis)</li>
<li><strong>Reveal:</strong> Players show their positions simultaneously</li>
<li><strong>Discuss:</strong> Talk about why you're positioned where you are</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>