Files
onTheSpectrum/src/routes/play/+page.svelte

66 lines
1.8 KiB
Svelte

<script>
import { xAxes, yAxes } from '$lib';
import ChartDisplay from '$components/chartDisplay.svelte';
import DiceRoller from '$components/diceRoller.svelte';
let adultMode = $state(false);
let currentChart = $state({ x: [''], y: [''] });
let diceRoll = $state({ x: 0, y: 0 });
function generateChart() {
const availableXAxes = adultMode ? xAxes : xAxes.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)];
currentChart = {
x: randomX.values,
y: randomY.values
};
}
function rollDice() {
diceRoll = {
x: Math.floor(Math.random() * 10) + 1,
y: Math.floor(Math.random() * 10) + 1
};
}
</script>
<div class="container theme-{currentTheme}">
<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>Theme Selector</legend>
<ThemeSelector bind:currentTheme />
</fieldset>
<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>
</div>
</fieldset>
<fieldset>
<legend>Position Roller</legend>
<DiceRoller roll={diceRoll} />
<div class="button-row">
<button on:click={rollDice}>Roll Dice</button>
</div>
</fieldset>
</div>
</div>
</div>