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

web: node tooltip with cross-panel echo, slice 9 of M3

Browse source 
Each node carries a transparent 12 px hit halo. Hovering shows the
single tooltip instance near the pointer: student number, state in that
panel at the current round (origin / forwarded in round n / educated,
refused / not reached), and the student's friend count from the real
edges. The same student simultaneously gets a 2 px ink echo ring in
every panel: the same kid, reached in one world, safe in another.

Dismissal via pointerleave, tap elsewhere, or Esc. A touch tap on a
node shows the tooltip without opening the focus modal; a mouse click
still falls through to the zoom button.
This commit is contained in:
Justin Visser 2026-06-10 18:03:42 +02:00
parent 8929eeddb0
commit e0ecc5c6ba
4 changed files with 178 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/src/App.vue
View file

@ -7,6 +7,7 @@ import FocusModal from '@/components/FocusModal.vue'
import FooterDisclaimer from '@/components/FooterDisclaimer.vue'
import HeroHeadline from '@/components/HeroHeadline.vue'
import LegendRow from '@/components/LegendRow.vue'
import NodeTooltip from '@/components/NodeTooltip.vue'
import PanelGrid from '@/components/PanelGrid.vue'
import PlayerBar from '@/components/PlayerBar.vue'
import ReachChart from '@/components/ReachChart.vue'
@ -47,6 +48,7 @@ onMounted(async () => {
</main>
<FooterDisclaimer />
<FocusModal v-if="store.state.focusPanelId" />
<NodeTooltip />
<div class="visually-hidden" aria-live="polite">{{ store.state.announcement }}</div>
</template>