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

18
web/src/App.vue
View file

@ -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>