104 lines
2.4 KiB
Svelte
104 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import type { MouseEventHandler } from "svelte/elements";
|
|
|
|
let { data } = $props<{ html: string }>();
|
|
let people = $state(data.people);
|
|
let tents = $state(data.tents);
|
|
let cars = $state(data.cars);
|
|
|
|
const add: MouseEventHandler<HTMLButtonElement> = ({
|
|
currentTarget: {
|
|
dataset: { id },
|
|
},
|
|
}) => {
|
|
if (id == "people") people += 1;
|
|
if (id == "tents") tents += 1;
|
|
if (id == "cars") cars += 1;
|
|
};
|
|
const subtract: MouseEventHandler<HTMLButtonElement> = ({
|
|
currentTarget: {
|
|
dataset: { id },
|
|
},
|
|
}) => {
|
|
if (id == "people") people -= 1;
|
|
if (id == "tents") tents -= 1;
|
|
if (id == "cars") cars -= 1;
|
|
};
|
|
</script>
|
|
|
|
<section>
|
|
<h1>How many people are at Sludge Fest {data.year}?</h1>
|
|
<div>
|
|
<div>
|
|
<button data-id="people" onclick={add}>+</button>
|
|
<h3>~{people} people</h3>
|
|
<button data-id="people" onclick={subtract}>-</button>
|
|
</div>
|
|
<div>
|
|
<button data-id="tents" onclick={add}>+</button>
|
|
<h3>~{tents} tents</h3>
|
|
<button data-id="tents" onclick={subtract}>-</button>
|
|
</div>
|
|
<div>
|
|
<button data-id="cars" onclick={add}>+</button>
|
|
<h3>~{cars} cars</h3>
|
|
<button data-id="cars" onclick={subtract}>-</button>
|
|
</div>
|
|
</div>
|
|
<form method="POST">
|
|
<input hidden type="number" name="people" value={people} />
|
|
<input hidden type="number" name="cars" value={cars} />
|
|
<input hidden type="number" name="tents" value={tents} />
|
|
<button>Save</button>
|
|
</form>
|
|
</section>
|
|
|
|
<style lang="scss">
|
|
button {
|
|
background: var(--primary-5);
|
|
border-radius: 0.25rem;
|
|
font-size: 2rem;
|
|
border: none;
|
|
box-shadow: var(--bs);
|
|
&:hover {
|
|
background: var(--primary-7);
|
|
}
|
|
}
|
|
section {
|
|
max-width: 60rem;
|
|
margin: 1rem auto 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
div {
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
max-width: 30rem;
|
|
div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
h3 {
|
|
font-size: 1.75rem;
|
|
width: fit-content;
|
|
}
|
|
button {
|
|
flex-basis: 4rem;
|
|
}
|
|
}
|
|
}
|
|
form button {
|
|
margin: 1rem;
|
|
width: fit-content;
|
|
}
|
|
}
|
|
</style>
|