web: world controls, slice 6 of M3
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:
parent
da1d86aba7
commit
fdc28ac686
6 changed files with 520 additions and 6 deletions
|
|
@ -1,6 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import AppBar from '@/components/AppBar.vue'
|
||||
import ControlsCard from '@/components/ControlsCard.vue'
|
||||
import ErrorBanner from '@/components/ErrorBanner.vue'
|
||||
import FooterDisclaimer from '@/components/FooterDisclaimer.vue'
|
||||
import HeroHeadline from '@/components/HeroHeadline.vue'
|
||||
|
|
@ -33,7 +34,10 @@ onMounted(async () => {
|
|||
<PanelGrid />
|
||||
<LegendRow />
|
||||
<PlayerBar />
|
||||
<ReachChart />
|
||||
<div class="lower">
|
||||
<ReachChart />
|
||||
<ControlsCard />
|
||||
</div>
|
||||
<ResultsTable
|
||||
:panels="store.state.panels"
|
||||
:results-by-panel-id="store.state.resultsByPanelId"
|
||||
|
|
@ -51,9 +55,21 @@ onMounted(async () => {
|
|||
padding: 36px 28px 30px;
|
||||
}
|
||||
|
||||
.lower {
|
||||
display: grid;
|
||||
grid-template-columns: 7fr 5fr;
|
||||
gap: 18px;
|
||||
margin-top: 26px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.page {
|
||||
padding: 22px 16px;
|
||||
}
|
||||
|
||||
.lower {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
248
web/src/components/AdvancedFields.vue
Normal file
248
web/src/components/AdvancedFields.vue
Normal 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>
|
||||
84
web/src/components/ControlsCard.vue
Normal file
84
web/src/components/ControlsCard.vue
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import AdvancedFields from './AdvancedFields.vue'
|
||||
import LeverSlider from './LeverSlider.vue'
|
||||
import { useSimStore } from '@/composables/useSimStore'
|
||||
import { formatPct } from '@/lib/format'
|
||||
|
||||
// The world card (spec slice 6): two headline levers, the advanced grid,
|
||||
// and the inline spot for engine 400s. Lever changes hit the store
|
||||
// immediately and rerun every panel after the shared debounce.
|
||||
|
||||
const store = useSimStore()
|
||||
|
||||
const base = computed(() => store.state.base)
|
||||
|
||||
const educationDisplay = computed(() => {
|
||||
const share = (base.value.numEducated / Math.max(base.value.numStudents, 1)) * 100
|
||||
return `${base.value.numEducated} · ${formatPct(share)}`
|
||||
})
|
||||
|
||||
const offendsForwardProb = computed(
|
||||
() => store.state.validationError?.includes('forwardProb') ?? false,
|
||||
)
|
||||
const offendsNumEducated = computed(
|
||||
() => store.state.validationError?.includes('numEducated') ?? false,
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="card ctl" aria-label="World settings">
|
||||
<h3>World</h3>
|
||||
<p v-if="store.state.validationError" class="invalid-note" role="alert">
|
||||
{{ store.state.validationError }}
|
||||
</p>
|
||||
<LeverSlider
|
||||
label="Chance to forward"
|
||||
hint="per friendship, per round"
|
||||
:value="base.forwardProb"
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.01"
|
||||
:display-value="formatPct(base.forwardProb * 100)"
|
||||
:invalid="offendsForwardProb"
|
||||
@update="(value) => store.setBaseField('forwardProb', value)"
|
||||
/>
|
||||
<LeverSlider
|
||||
label="Education budget"
|
||||
hint="students the program reaches"
|
||||
:value="base.numEducated"
|
||||
:min="0"
|
||||
:max="base.numStudents"
|
||||
:step="1"
|
||||
:display-value="educationDisplay"
|
||||
:invalid="offendsNumEducated"
|
||||
@update="(value) => store.setBaseField('numEducated', value)"
|
||||
/>
|
||||
<AdvancedFields />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 20px 22px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-4);
|
||||
}
|
||||
|
||||
.invalid-note {
|
||||
margin-top: 8px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
color: var(--spread);
|
||||
}
|
||||
</style>
|
||||
154
web/src/components/LeverSlider.vue
Normal file
154
web/src/components/LeverSlider.vue
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, useId } from 'vue'
|
||||
|
||||
// One labelled lever (spec 5.2): the thumb moves immediately on input,
|
||||
// the store debounces the actual rerun. Teal accent per the token table.
|
||||
|
||||
const props = defineProps<{
|
||||
label: string
|
||||
hint: string
|
||||
value: number
|
||||
min: number
|
||||
max: number
|
||||
step: number
|
||||
displayValue: string
|
||||
invalid?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{ update: [value: number] }>()
|
||||
|
||||
const inputId = useId()
|
||||
|
||||
const progressPct = computed(() =>
|
||||
props.max > props.min ? ((props.value - props.min) / (props.max - props.min)) * 100 : 0,
|
||||
)
|
||||
|
||||
function onInput(event: Event) {
|
||||
const nextValue = (event.target as HTMLInputElement).valueAsNumber
|
||||
if (Number.isFinite(nextValue)) emit('update', nextValue)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row" :class="{ invalid }">
|
||||
<label :for="inputId">
|
||||
{{ label }}
|
||||
<span class="hint">{{ hint }}</span>
|
||||
</label>
|
||||
<input
|
||||
:id="inputId"
|
||||
type="range"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="step"
|
||||
:value="value"
|
||||
:style="{ '--progress': `${progressPct}%` }"
|
||||
:aria-valuetext="displayValue"
|
||||
:aria-invalid="invalid || undefined"
|
||||
@input="onInput"
|
||||
/>
|
||||
<span class="val">{{ displayValue }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 150px 1fr 78px;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 14px;
|
||||
font-weight: 550;
|
||||
color: var(--ink-2);
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--ink-4);
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.val {
|
||||
justify-self: end;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--ink-2);
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: 8px;
|
||||
padding: 3px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.row.invalid .val {
|
||||
border-color: var(--spread);
|
||||
color: var(--spread);
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-runnable-track {
|
||||
height: 3px;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--edu) var(--progress, 0%),
|
||||
var(--border) var(--progress, 0%)
|
||||
);
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-top: -6px;
|
||||
border-radius: 50%;
|
||||
background: var(--surface);
|
||||
border: 2px solid var(--edu);
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-track {
|
||||
height: 3px;
|
||||
border-radius: 3px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-progress {
|
||||
height: 3px;
|
||||
border-radius: 3px;
|
||||
background: var(--edu);
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-thumb {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 50%;
|
||||
background: var(--surface);
|
||||
border: 2px solid var(--edu);
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.row {
|
||||
grid-template-columns: 1fr 78px;
|
||||
}
|
||||
|
||||
label {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,7 +16,8 @@ const props = defineProps<{ panel: PanelSpec }>()
|
|||
const store = useSimStore()
|
||||
|
||||
const effectiveConfig = computed(() => store.effectiveConfig(props.panel))
|
||||
const edges = computed(() => store.state.edgesByGraphHash[graphKey(effectiveConfig.value)] ?? [])
|
||||
const panelGraphKey = computed(() => graphKey(effectiveConfig.value))
|
||||
const edges = computed(() => store.state.edgesByGraphHash[panelGraphKey.value] ?? [])
|
||||
const result = computed(() => store.state.resultsByPanelId[props.panel.id])
|
||||
const layout = computed(() => layoutForGraph(effectiveConfig.value, edges.value))
|
||||
|
||||
|
|
@ -64,6 +65,7 @@ function popDelay(nodeIndex: number): string {
|
|||
|
||||
<template>
|
||||
<svg
|
||||
:key="panelGraphKey"
|
||||
class="net"
|
||||
:viewBox="`0 0 ${NETWORK_VIEW_WIDTH} ${NETWORK_VIEW_HEIGHT}`"
|
||||
:style="{ '--pop-ms': `${popDurationMs}ms` }"
|
||||
|
|
@ -123,6 +125,19 @@ function popDelay(nodeIndex: number): string {
|
|||
height: auto;
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
/* A graph-seed reroll remounts the svg (keyed by graph hash); the new
|
||||
layout fades in (spec 5.3). Skipped under reduced motion globally. */
|
||||
animation: layout-fade 200ms ease-out;
|
||||
}
|
||||
|
||||
@keyframes layout-fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Nodes reached this round fade and scale in across the full round
|
||||
|
|
|
|||
|
|
@ -65,9 +65,7 @@ const curves = computed<ChartCurve[]>(() =>
|
|||
}),
|
||||
)
|
||||
|
||||
const gridLines = computed(() =>
|
||||
[0, 25, 50, 75, 100].map((pct) => ({ pct, y: pctToY(pct) })),
|
||||
)
|
||||
const gridLines = computed(() => [0, 25, 50, 75, 100].map((pct) => ({ pct, y: pctToY(pct) })))
|
||||
|
||||
// Label every round while they fit; thin out for long runs.
|
||||
const roundLabels = computed(() => {
|
||||
|
|
@ -159,7 +157,6 @@ const playheadX = computed(() => roundToX(store.state.round))
|
|||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 20px 22px;
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue