76 lines
2.1 KiB
Svelte
76 lines
2.1 KiB
Svelte
<script>
|
|
import { getContext } from 'svelte';
|
|
import xAxes from '$lib/data/xAxes.js';
|
|
import yAxes from '$lib/data/yAxes.js';
|
|
import ChartDisplay from '$components/ChartDisplay.svelte';
|
|
import DiceRoller from '$components/DiceRoller.svelte';
|
|
import ThemeSelector from '$components/ThemeSelector.svelte';
|
|
import Toggle from '$components/Toggle.svelte';
|
|
|
|
const theme = getContext('theme');
|
|
let currentTheme;
|
|
theme.subscribe(value => {
|
|
currentTheme = value;
|
|
});
|
|
|
|
let adultMode = false;
|
|
let currentChart = null;
|
|
let diceRoll = null;
|
|
|
|
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">
|
|
<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>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>
|
|
|
|
<fieldset>
|
|
<legend>Theme Selector</legend>
|
|
<ThemeSelector bind:currentTheme={$theme} />
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div> |