feat(codev): M4 - matching 3 modes + boutons UI + animation force

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jules Neny
2026-05-06 16:07:20 +02:00
parent 3347b3f859
commit d345d7f6f9
3 changed files with 279 additions and 22 deletions

View File

@@ -8,7 +8,21 @@
</div>
<!-- SVG D3 -->
<svg v-else ref="svgEl" class="codev-svg" />
<svg v-else ref="svgEl" class="codev-svg">
<defs>
<marker
id="arrow-solution"
viewBox="0 0 10 10"
refX="18"
refY="5"
markerWidth="6"
markerHeight="6"
orient="auto-start-reverse"
>
<path d="M 0 0 L 10 5 L 0 10 z" fill="#22c55e" />
</marker>
</defs>
</svg>
</div>
</template>
@@ -82,9 +96,9 @@ function buildLinks(nodes: SimNode[]): SimLink[] {
}
function linkColor(mode: string): string {
if (mode === 'solution') return '#1B4436'
if (mode === 'alliance') return '#3b82f6'
if (mode === 'surprise') return '#a855f7'
if (mode === 'solution') return '#22c55e'
if (mode === 'alliance') return '#f97316'
if (mode === 'surprise') return '#3b82f6'
return '#ccc'
}
@@ -132,8 +146,6 @@ function rebuildLinks() {
currentLinks = buildLinks(currentNodes)
if (!gLinks || !simulation) return
const r = nodeRadius.value
const linkSel = gLinks
.selectAll<SVGLineElement, SimLink>('line')
.data(currentLinks, (d: SimLink) => {
@@ -149,7 +161,7 @@ function rebuildLinks() {
.attr('stroke', d => linkColor(d.mode))
.attr('stroke-width', d => 1 + d.score * 3)
.attr('stroke-opacity', 0.7)
.attr('marker-end', null)
.attr('marker-end', d => d.mode === 'solution' ? 'url(#arrow-solution)' : null)
}
// ── Rendu complet ──────────────────────────────────────────────────────────
@@ -173,6 +185,7 @@ function render() {
.attr('stroke', d => linkColor(d.mode))
.attr('stroke-width', d => 1 + d.score * 3)
.attr('stroke-opacity', 0.7)
.attr('marker-end', d => d.mode === 'solution' ? 'url(#arrow-solution)' : null)
// Noeuds = groupe <g> par personne
const nodeGroups = gNodes!