justinzeus/spreadlab
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web: world controls, slice 6 of M3

Browse source 
The lower grid completes: reach chart left, World card right. Two
headline levers (chance to forward, education budget as count plus
share) move instantly and rerun through the store's debounce; the
advanced disclosure holds students, friends per student, clique
tendency, first poster, and the three named seeds, each seed with a
dice reroll plus a Reroll world button (one coalesced run).

Engine 400s render inline under the card header in rose with the
offending field marked by name match; network failures keep using the
banner with retry. A graph-seed reroll remounts the network svg keyed
by graph hash, fading the new layout in over 200 ms.
This commit is contained in:
Justin Visser 2026-06-10 17:45:29 +02:00
parent da1d86aba7
commit fdc28ac686
6 changed files with 520 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

248
web/src/components/AdvancedFields.vue Normal file
View file

@ -0,0 +1,248 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useSimStore } from '@/composables/useSimStore'
import type { Config } from '@/types/engine'
// The collapsible advanced grid (spec section 4): world-shaping numbers
// plus the three seeds, each seed with a dice reroll (spec 5.3). "Reroll
// world" rerolls all three at once; the debounced run coalesces them.
const store = useSimStore()
interface NumberFieldDef {
field: keyof Config
label: string
min: number
step: number
}
const numberFields: NumberFieldDef[] = [
{ field: 'numStudents', label: 'Students', min: 2, step: 1 },
{ field: 'edgesPerNode', label: 'Friends per student', min: 1, step: 1 },
{ field: 'triangleProb', label: 'Clique tendency', min: 0, step: 0.05 },
{ field: 'origin', label: 'First poster', min: 0, step: 1 },
]
interface SeedFieldDef {
field: keyof Config
label: string
}
const seedFields: SeedFieldDef[] = [
{ field: 'graphSeed', label: 'Friendship network' },
{ field: 'thresholdSeed', label: 'Who resists' },
{ field: 'educationSeed', label: 'Random picks' },
]
// The engine's 400 message names the offending Go/JSON field; mark it.
const offendingField = computed(() => {
const validationError = store.state.validationError
if (!validationError) return null
const allFields = [...numberFields, ...seedFields].map(({ field }) => field)
return allFields.find((field) => validationError.includes(field)) ?? null
})
function setField(field: keyof Config, event: Event) {
const nextValue = (event.target as HTMLInputElement).valueAsNumber
if (Number.isFinite(nextValue)) store.setBaseField(field, nextValue)
}
function freshSeed(): number {
const buffer = new Uint32Array(1)
crypto.getRandomValues(buffer)
return buffer[0] ?? 0
}
function reroll(field: keyof Config) {
store.setBaseField(field, freshSeed())
}
function rerollWorld() {
for (const { field } of seedFields) store.setBaseField(field, freshSeed())
}
</script>
<template>
<details class="adv" open>
<summary>
<svg class="ic chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6" /></svg>
Advanced
</summary>
<div class="grid">
<label
v-for="def in numberFields"
:key="def.field"
class="field"
:class="{ invalid: offendingField === def.field }"
>
<span class="fl">{{ def.label }}</span>
<input
type="number"
:min="def.min"
:step="def.step"
:value="store.state.base[def.field]"
:aria-invalid="offendingField === def.field || undefined"
@change="setField(def.field, $event)"
/>
</label>
<span
v-for="def in seedFields"
:key="def.field"
class="field"
:class="{ invalid: offendingField === def.field }"
>
<label class="seed">
<span class="fl">{{ def.label }}</span>
<input
type="number"
min="0"
step="1"
:value="store.state.base[def.field]"
:aria-invalid="offendingField === def.field || undefined"
@change="setField(def.field, $event)"
/>
</label>
<button
class="dice"
type="button"
:aria-label="`Reroll ${def.label}`"
@click="reroll(def.field)"
>
<svg class="ic" viewBox="0 0 24 24">
<rect x="4" y="4" width="16" height="16" rx="3" />
<path d="M9 9h.01M15 15h.01M15 9h.01M9 15h.01" />
</svg>
</button>
</span>
</div>
<button class="reroll-world" type="button" @click="rerollWorld()">Reroll world</button>
</details>
</template>
<style scoped>
.adv {
margin-top: 20px;
border-top: 1px solid var(--border-soft);
padding-top: 14px;
}
summary {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--ink-3);
cursor: pointer;
list-style: none;
border-radius: 8px;
padding: 2px 4px;
}
summary::-webkit-details-marker {
display: none;
}
.chevron {
width: 14px;
height: 14px;
transition: transform 0.15s;
}
details[open] .chevron {
transform: rotate(90deg);
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 14px;
margin-top: 12px;
}
.field {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border: 1px solid var(--border-soft);
background: var(--bg);
border-radius: 10px;
padding: 7px 11px;
font-size: 13px;
}
.field.invalid {
border-color: var(--spread);
}
.fl {
color: var(--ink-3);
font-weight: 500;
white-space: nowrap;
}
.seed {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex: 1;
min-width: 0;
}
input[type='number'] {
width: 72px;
font: 600 13px/1.4 inherit;
font-family: inherit;
color: var(--ink-2);
background: none;
border: none;
text-align: right;
padding: 0;
}
.dice {
border: none;
background: none;
padding: 2px;
border-radius: 6px;
color: var(--ink-4);
display: grid;
place-items: center;
cursor: pointer;
flex: none;
}
.dice:hover {
color: var(--ink);
}
.dice svg.ic {
width: 14px;
height: 14px;
}
.reroll-world {
margin-top: 12px;
font-size: 12.5px;
font-weight: 600;
color: var(--ink-3);
background: none;
border: 1px solid var(--border);
border-radius: 8px;
padding: 5px 12px;
cursor: pointer;
}
.reroll-world:hover {
border-color: var(--ink-4);
color: var(--ink);
}
@media (max-width: 760px) {
.grid {
grid-template-columns: 1fr;
}
}
</style>