updated some stuff to work on my PC.
deleteed the emoji from the rules. moved the titlebar and stuff out from the pages to the layout so it gets applied everywere. will need to work on the title changing but that should be easy.
This commit is contained in:
@@ -1,18 +1,20 @@
|
|||||||
<script>
|
<script>
|
||||||
export let chart;
|
export let chart;
|
||||||
|
console.log(chart, chart.x != [''], chart.x);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="chart-display">
|
<div class="chart-display">
|
||||||
{#if chart && chart.x && chart.y}
|
{#if chart.x.length > 1}
|
||||||
<div class="axis">
|
<div class="axis">
|
||||||
<div class="axis-label">X-Axis (Horizontal)</div>
|
<div class="axis-label">X-Axis (Horizontal)</div>
|
||||||
<div>{chart.x[0]} ↔ {chart.x[1]}</div>
|
<div>{chart.x[0]} ↔ {chart.x[1]}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="axis">
|
<div class="axis">
|
||||||
<div class="axis-label">Y-Axis (Vertical)</div>
|
<div class="axis-label">Y-Axis (Vertical)</div>
|
||||||
<div>{chart.y[0]} ↔ {chart.y[1]}</div>
|
<div>{chart.y[0]} ↔ {chart.y[1]}</div>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="empty-state">Click Generate!</div>
|
<div class="empty-state">Click Generate!</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,25 +1,25 @@
|
|||||||
<script>
|
<script>
|
||||||
import { themeNames, themeDisplayNames } from '$lib/styles/themes.js';
|
import { themeNames, themeDisplayNames } from '$lib/styles/themes.js';
|
||||||
export let currentTheme;
|
export let currentTheme;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="button-row">
|
<div class="button-row">
|
||||||
{#each themeNames as theme}
|
{#each themeNames as theme}
|
||||||
<button
|
<button on:click={() => (currentTheme = theme)} class:active={currentTheme === theme}>
|
||||||
on:click={() => currentTheme = theme}
|
{themeDisplayNames[theme]}
|
||||||
class:active={currentTheme === theme}
|
</button>
|
||||||
>
|
{/each}
|
||||||
{themeDisplayNames[theme]}
|
|
||||||
</button>
|
|
||||||
{/each}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.button-row {
|
.button-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 1rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-top: 10px;
|
button {
|
||||||
}
|
max-width: 33%;
|
||||||
</style>
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
/* Base styles that apply to all themes */
|
/* Base styles that apply to all themes */
|
||||||
.container {
|
.container {
|
||||||
padding: 20px;
|
padding: 2rem;
|
||||||
min-height: 100vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.window {
|
.window {
|
||||||
@@ -17,6 +16,9 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
|
span{
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-button {
|
.home-button {
|
||||||
@@ -81,6 +83,5 @@ button {
|
|||||||
.empty-state {
|
.empty-state {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 20px;
|
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,29 +1,64 @@
|
|||||||
<script>
|
<script>
|
||||||
import '$lib/styles/themes.js';
|
import '$lib/styles/themes.js';
|
||||||
import { writable } from 'svelte/store';
|
import { writable } from 'svelte/store';
|
||||||
import { setContext } from 'svelte';
|
import { setContext } from 'svelte';
|
||||||
|
|
||||||
// Create a theme store that persists across pages
|
// Create a theme store that persists across pages
|
||||||
const theme = writable('win95');
|
const theme = writable('win95');
|
||||||
setContext('theme', theme);
|
setContext('theme', theme);
|
||||||
|
|
||||||
let currentTheme;
|
let currentTheme;
|
||||||
theme.subscribe(value => {
|
theme.subscribe((value) => {
|
||||||
currentTheme = value;
|
currentTheme = value;
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="app-container theme-{currentTheme}">
|
<div class="app-container theme-{currentTheme}">
|
||||||
<slot />
|
<div class="wrapper">
|
||||||
|
<div class="container">
|
||||||
|
<div class="window">
|
||||||
|
<div class="title-bar">
|
||||||
|
<a href="/" class="back-button">←Back</a>
|
||||||
|
<span>A Sludge & Friends game</span>
|
||||||
|
</div>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:global(body) {
|
:global(body) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
.back-button {
|
||||||
|
padding: 5px 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.wrapper {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.app-container {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
.app-container {
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,142 +1,117 @@
|
|||||||
<script>
|
<script>
|
||||||
import { getContext } from 'svelte';
|
import { getContext } from 'svelte';
|
||||||
import ThemeSelector from '$lib/components/ThemeSelector.svelte';
|
import ThemeSelector from '$components/themeSelector.svelte';
|
||||||
|
|
||||||
const themeStore = getContext('theme');
|
const themeStore = getContext('theme');
|
||||||
let currentTheme = $themeStore;
|
let currentTheme = $themeStore;
|
||||||
|
|
||||||
$: themeStore.set(currentTheme);
|
$: themeStore.set(currentTheme);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="home-wrapper">
|
<div class="home-content">
|
||||||
<div class="home-container">
|
<h1 class="title">On the Spectrum!</h1>
|
||||||
<div class="home-window">
|
<p class="subtitle">Well.. are ya?</p>
|
||||||
<div class="home-title-bar">
|
|
||||||
<span>A Sludge & Friends game</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="home-content">
|
|
||||||
<h1 class="title">On the Spectrum!</h1>
|
|
||||||
<p class="subtitle">Well.. are ya?</p>
|
|
||||||
|
|
||||||
<div class="tabs">
|
|
||||||
<a href="/play" class="tab-button">
|
|
||||||
<span class="tab-icon">Play</span>
|
|
||||||
</a>
|
|
||||||
<a href="/rules" class="tab-button">
|
|
||||||
<span class="tab-icon">Rules</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="theme-selector-container">
|
<div class="tabs">
|
||||||
<fieldset>
|
<a href="/play" class="tab-button">
|
||||||
<legend>Theme Selector</legend>
|
<span class="tab-icon">🎮</span>
|
||||||
<ThemeSelector bind:currentTheme />
|
<span>Play</span>
|
||||||
</fieldset>
|
</a>
|
||||||
</div>
|
<a href="/rules" class="tab-button">
|
||||||
</div>
|
<span class="tab-icon">📖</span>
|
||||||
</div>
|
<span>Rules</span>
|
||||||
</div>
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="theme-selector-container">
|
||||||
|
<fieldset>
|
||||||
|
<legend>Theme Selector</legend>
|
||||||
|
<ThemeSelector bind:currentTheme />
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.home-wrapper {
|
.home-content {
|
||||||
min-height: 100vh;
|
padding: 40px;
|
||||||
display: flex;
|
text-align: center;
|
||||||
align-items: center;
|
}
|
||||||
justify-content: center;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-container {
|
.title {
|
||||||
width: 100%;
|
font-size: 3rem;
|
||||||
max-width: 700px;
|
font-weight: bold;
|
||||||
}
|
margin-bottom: 1rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
.home-window {
|
.subtitle {
|
||||||
width: 100%;
|
font-size: 1.3rem;
|
||||||
}
|
margin-bottom: 2.5rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
.home-content {
|
.tabs {
|
||||||
padding: 40px;
|
display: flex;
|
||||||
text-align: center;
|
gap: 20px;
|
||||||
}
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.tab-button {
|
||||||
font-size: 3rem;
|
border: none;
|
||||||
font-weight: bold;
|
border-radius: 10px;
|
||||||
margin-bottom: 1rem;
|
padding: 25px 40px;
|
||||||
line-height: 1.2;
|
font-size: 1.3rem;
|
||||||
}
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
min-width: 180px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
.subtitle {
|
.tab-icon {
|
||||||
font-size: 1.3rem;
|
font-size: 2.5rem;
|
||||||
margin-bottom: 2.5rem;
|
}
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs {
|
.theme-selector-container {
|
||||||
display: flex;
|
margin-top: 2rem;
|
||||||
gap: 20px;
|
}
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-bottom: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-button {
|
.theme-selector-container fieldset {
|
||||||
border: none;
|
padding: 20px;
|
||||||
border-radius: 10px;
|
}
|
||||||
padding: 25px 40px;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
font-weight: bold;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
min-width: 180px;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-icon {
|
.theme-selector-container legend {
|
||||||
font-size: 2.5rem;
|
font-weight: bold;
|
||||||
}
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.theme-selector-container {
|
@media (max-width: 768px) {
|
||||||
margin-top: 2rem;
|
.title {
|
||||||
}
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.theme-selector-container fieldset {
|
.subtitle {
|
||||||
padding: 20px;
|
font-size: 1.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-selector-container legend {
|
.tab-button {
|
||||||
font-weight: bold;
|
padding: 20px 30px;
|
||||||
padding: 0 10px;
|
font-size: 1.1rem;
|
||||||
}
|
min-width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
.tab-icon {
|
||||||
.title {
|
font-size: 2rem;
|
||||||
font-size: 2rem;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
.home-content {
|
||||||
font-size: 1.1rem;
|
padding: 30px 20px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.tab-button {
|
</style>
|
||||||
padding: 20px 30px;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
min-width: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-icon {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-content {
|
|
||||||
padding: 30px 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,76 +1,84 @@
|
|||||||
<script>
|
<script>
|
||||||
import { getContext } from 'svelte';
|
import { xAxes, yAxes } from '$lib';
|
||||||
import xAxes from '$lib/data/xAxes.js';
|
import ChartDisplay from '$components/chartDisplay.svelte';
|
||||||
import yAxes from '$lib/data/yAxes.js';
|
import DiceRoller from '$components/diceRoller.svelte';
|
||||||
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 adultMode = $state(false);
|
||||||
let currentTheme;
|
let currentChart = $state({ x: [''], y: [''] });
|
||||||
theme.subscribe(value => {
|
let diceRoll = $state({ x: 0, y: 0 });
|
||||||
currentTheme = value;
|
|
||||||
});
|
|
||||||
|
|
||||||
let adultMode = false;
|
function generateChart() {
|
||||||
let currentChart = null;
|
const availableXAxes = adultMode ? xAxes : xAxes.filter((axis) => !axis.adult);
|
||||||
let diceRoll = null;
|
const availableYAxes = adultMode ? yAxes : yAxes.filter((axis) => !axis.adult);
|
||||||
|
|
||||||
function generateChart() {
|
const randomX = availableXAxes[Math.floor(Math.random() * availableXAxes.length)];
|
||||||
const availableXAxes = adultMode ? xAxes : xAxes.filter(axis => !axis.adult);
|
const randomY = availableYAxes[Math.floor(Math.random() * availableYAxes.length)];
|
||||||
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() {
|
currentChart = {
|
||||||
diceRoll = {
|
x: randomX.values,
|
||||||
x: Math.floor(Math.random() * 10) + 1,
|
y: randomY.values
|
||||||
y: Math.floor(Math.random() * 10) + 1
|
};
|
||||||
};
|
}
|
||||||
}
|
|
||||||
|
function rollDice() {
|
||||||
|
diceRoll = {
|
||||||
|
x: Math.floor(Math.random() * 10) + 1,
|
||||||
|
y: Math.floor(Math.random() * 10) + 1
|
||||||
|
};
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="window">
|
<div class="window">
|
||||||
<div class="title-bar">
|
<fieldset>
|
||||||
<a href="/" class="home-button">← Home</a>
|
<legend>Chart Generator</legend>
|
||||||
<span>On the Spectrum - Party Game</span>
|
<ChartDisplay chart={currentChart} />
|
||||||
</div>
|
<div class="button-row">
|
||||||
|
<button onclick={generateChart}>Generate</button>
|
||||||
<div class="window-body">
|
</div>
|
||||||
<!-- <fieldset>
|
</fieldset>
|
||||||
<legend>Adult Mode (18+)</legend>
|
|
||||||
<Toggle bind:checked={adultMode} />
|
|
||||||
</fieldset> -->
|
|
||||||
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Chart Generator</legend>
|
<legend>Position Roller</legend>
|
||||||
<ChartDisplay chart={currentChart} />
|
<DiceRoller {diceRoll} />
|
||||||
<div class="button-row">
|
<div class="button-row">
|
||||||
<button on:click={generateChart}>Generate</button>
|
<button onclick={rollDice}>Roll Dice</button>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.window {
|
||||||
|
max-width: 60rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
padding: 1.25rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 0.5rem 1.75rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<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>
|
|
||||||
@@ -1,187 +1,149 @@
|
|||||||
<script>
|
<script>
|
||||||
import { getContext } from 'svelte';
|
import { getContext } from 'svelte';
|
||||||
import ThemeSelector from '$lib/components/ThemeSelector.svelte';
|
import ThemeSelector from '$components/themeSelector.svelte';
|
||||||
|
|
||||||
const themeStore = getContext('theme');
|
const themeStore = getContext('theme');
|
||||||
let currentTheme = $themeStore;
|
let currentTheme = $themeStore;
|
||||||
|
|
||||||
$: themeStore.set(currentTheme);
|
$: themeStore.set(currentTheme);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="rules-wrapper">
|
<div class="window-body">
|
||||||
<div class="rules-container">
|
<fieldset>
|
||||||
<div class="window">
|
<legend>Theme Selector</legend>
|
||||||
<div class="title-bar">
|
<ThemeSelector bind:currentTheme />
|
||||||
<a href="/" class="back-button">← Back</a>
|
</fieldset>
|
||||||
<span>Rules</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Basic Gameplay</h2>
|
<h2>Basic Gameplay</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li><strong>Generate:</strong> Click "Generate" to create a random 2D spectrum with X and Y axes</li>
|
<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>
|
<strong>Generate:</strong> Click "Generate" to create a random 2D spectrum with X and Y axes
|
||||||
<li><strong>Repeat:</strong> Generate a new spectrum and keep playing!</li>
|
</li>
|
||||||
</ol>
|
<li>
|
||||||
</section>
|
<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>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Understanding the Scale</h2>
|
<h2>Understanding the Scale</h2>
|
||||||
<p>Each axis uses a 1-10 scale:</p>
|
<p>Each axis uses a 1-10 scale:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><strong>1-2:</strong> Strongly aligned with left/bottom option</li>
|
<li><strong>1-2:</strong> Strongly aligned with left/bottom option</li>
|
||||||
<li><strong>3-4:</strong> Prefer left/bottom, but not extremely</li>
|
<li><strong>3-4:</strong> Prefer left/bottom, but not extremely</li>
|
||||||
<li><strong>5-6:</strong> Slightly prefer right/top</li>
|
<li><strong>5-6:</strong> Slightly prefer right/top</li>
|
||||||
<li><strong>7-8:</strong> Prefer right/top, but not extremely</li>
|
<li><strong>7-8:</strong> Prefer right/top, but not extremely</li>
|
||||||
<li><strong>9-10:</strong> Strongly aligned with right/top option</li>
|
<li><strong>9-10:</strong> Strongly aligned with right/top option</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Scoring (Optional)</h2>
|
<h2>Scoring (Optional)</h2>
|
||||||
<p>Want to make it competitive? Try these scoring systems:</p>
|
<p>Want to make it competitive? Try these scoring systems:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><strong>5 Points:</strong> On the Spectrum!</li>
|
<li><strong>5 Points:</strong> On the Spectrum!</li>
|
||||||
<li><strong>4 Points:</strong> 1 away</li>
|
<li><strong>4 Points:</strong> 1 away</li>
|
||||||
<li><strong>3 Points:</strong> 2 away</li>
|
<li><strong>3 Points:</strong> 2 away</li>
|
||||||
<li><strong>2 Points:</strong> 3 away</li>
|
<li><strong>2 Points:</strong> 3 away</li>
|
||||||
<li><strong>1 Points:</strong> 4 away</li>
|
<li><strong>1 Points:</strong> 4 away</li>
|
||||||
<li><strong>0 Points:</strong> 5+ away</li>
|
<li><strong>0 Points:</strong> 5+ away</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>About Themes</h2>
|
<h2>About Themes</h2>
|
||||||
<p>Choose from six visual themes to customize your experience:</p>
|
<p>Choose from six visual themes to customize your experience:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><strong>Windows 95:</strong> Nostalgic retro computing vibes</li>
|
<li><strong>Windows 95:</strong> Nostalgic retro computing vibes</li>
|
||||||
<li><strong>Cyberpunk:</strong> Neon-soaked futuristic aesthetic</li>
|
<li><strong>Cyberpunk:</strong> Neon-soaked futuristic aesthetic</li>
|
||||||
<li><strong>Typewriter:</strong> Classic vintage paper look</li>
|
<li><strong>Typewriter:</strong> Classic vintage paper look</li>
|
||||||
<li><strong>Nightmare:</strong> Dark and spooky atmosphere</li>
|
<li><strong>Nightmare:</strong> Dark and spooky atmosphere</li>
|
||||||
<li><strong>Vaporwave:</strong> Dreamy 80s-90s nostalgia</li>
|
<li><strong>Vaporwave:</strong> Dreamy 80s-90s nostalgia</li>
|
||||||
<li><strong>Nintendo:</strong> Bold and playful gaming style</li>
|
<li><strong>Nintendo:</strong> Bold and playful gaming style</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>Themes are purely cosmetic—pick what speaks to your vibe!</p>
|
<p>Themes are purely cosmetic—pick what speaks to your vibe!</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>FAQ</h2>
|
<h2>FAQ</h2>
|
||||||
<p><strong>Can I play solo?</strong><br>
|
<p>
|
||||||
While designed for groups, you can use it for self-reflection or to prep for game night!</p>
|
<strong>Can I play solo?</strong><br />
|
||||||
|
While designed for groups, you can use it for self-reflection or to prep for game night!
|
||||||
<p><strong>How many spectrums are there?</strong><br>
|
</p>
|
||||||
Hundreds! The X and Y axes are randomly combined, creating thousands of possible spectrums.</p>
|
|
||||||
|
<p>
|
||||||
<p><strong>What if I'm perfectly neutral?</strong><br>
|
<strong>How many spectrums are there?</strong><br />
|
||||||
Mark yourself at 5 or 6 on that axis. True neutrality is rare and interesting!</p>
|
Hundreds! The X and Y axes are randomly combined, creating thousands of possible spectrums.
|
||||||
|
</p>
|
||||||
<p><strong>Can we make our own rules?</strong><br>
|
|
||||||
Absolutely! These are guidelines. House rules are encouraged!</p>
|
<p>
|
||||||
</section>
|
<strong>What if I'm perfectly neutral?</strong><br />
|
||||||
</div>
|
Mark yourself at 5 or 6 on that axis. True neutrality is rare and interesting!
|
||||||
</div>
|
</p>
|
||||||
</div>
|
|
||||||
</div>
|
<p>
|
||||||
|
<strong>Can we make our own rules?</strong><br />
|
||||||
|
Absolutely! These are guidelines. House rules are encouraged!
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.rules-wrapper {
|
.rules-content {
|
||||||
min-height: 100vh;
|
padding: 20px 0;
|
||||||
display: flex;
|
}
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 40px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rules-container {
|
h1 {
|
||||||
width: 100%;
|
font-size: 2.5rem;
|
||||||
max-width: 900px;
|
margin-bottom: 30px;
|
||||||
}
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.title-bar {
|
h2 {
|
||||||
display: flex;
|
font-size: 1.8rem;
|
||||||
align-items: center;
|
margin-top: 30px;
|
||||||
gap: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-button {
|
section {
|
||||||
padding: 5px 15px;
|
margin-bottom: 30px;
|
||||||
cursor: pointer;
|
}
|
||||||
border-radius: 4px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
font-weight: bold;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rules-content {
|
p {
|
||||||
padding: 20px 0;
|
line-height: 1.6;
|
||||||
}
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
h1 {
|
ol,
|
||||||
font-size: 2.5rem;
|
ul {
|
||||||
margin-bottom: 30px;
|
line-height: 1.8;
|
||||||
text-align: center;
|
padding-left: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
li {
|
||||||
font-size: 1.8rem;
|
margin-bottom: 10px;
|
||||||
margin-top: 30px;
|
}
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
strong {
|
||||||
font-size: 1.3rem;
|
font-weight: bold;
|
||||||
margin-top: 20px;
|
}
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
@media (max-width: 768px) {
|
||||||
margin-bottom: 30px;
|
h1 {
|
||||||
}
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
p {
|
h2 {
|
||||||
line-height: 1.6;
|
font-size: 1.5rem;
|
||||||
margin-bottom: 10px;
|
}
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
ol, ul {
|
|
||||||
line-height: 1.8;
|
|
||||||
padding-left: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
em {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.rules-wrapper {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user