v3 : socle Rust (moteur pur, accès trustinWallet, serveur) ; maquette Nuxt rangée dans maquette/
- crates/ld-engine : formule inertielle (parité avec la maquette, garde C), coquille / changement de fond, assistant d'édition à règles, composition d'un document sous vote permanent (adoptions, aperçus, rivales). - crates/trustin-access : qui voit, qui ouvre, qui gère les accès. - crates/ld-server : API axum + SQLite, connexion Ğ1 (client OAuth2 de connect.monnaie-libre.fr), invitations, entrée en vigueur automatique, signalements de contradiction, traductions éditoriales, publication git, taille de la toile lue sur la chaîne. - seeds/acte-engagement-certification.json : 33 articles, fr + en + es ; en vigueur : préambule, E1, E2 (seed a minima). - maquette/ : frontend, backend et docker v2 déplacés tels quels. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,203 @@
|
||||
<script setup lang="ts">
|
||||
// <!-- ld-v2 --> Binaire inertiel hérité — jauge SIGNATURE : arc 270°, le
|
||||
// remplissage suit les voix pour, le curseur de seuil DESCEND quand la
|
||||
// participation monte (wotThreshold recalculé en direct). Les lettres de la
|
||||
// formule vivent à l'Atelier ; ici, des chiffres clairs et une phrase.
|
||||
import { wotThreshold } from '~/engine'
|
||||
import { useCollectiveStore } from '~/stores/collective'
|
||||
import { useDecisionsStore } from '~/stores/decisions'
|
||||
import { thresholdSentence } from '~/lexicon'
|
||||
import type { Decision, Id, Protocol, VoteSession } from '~/types/domain'
|
||||
|
||||
const props = defineProps<{
|
||||
decision: Decision
|
||||
session: VoteSession
|
||||
protocol: Protocol
|
||||
secret?: boolean
|
||||
canAct?: boolean
|
||||
asPersonId?: Id
|
||||
}>()
|
||||
|
||||
const col = useCollectiveStore()
|
||||
const store = useDecisionsStore()
|
||||
|
||||
const eligible = computed(() => Math.max(props.session.corpusSize, 1))
|
||||
const active = computed(() => store.activeVotes(props.session.id))
|
||||
const votesFor = computed(() => active.value.filter(v => v.value === 'for').length)
|
||||
const votesAgainst = computed(() => active.value.filter(v => v.value === 'against').length)
|
||||
const total = computed(() => votesFor.value + votesAgainst.value)
|
||||
|
||||
const formula = computed(() => props.protocol.formula)
|
||||
const threshold = computed(() => wotThreshold(
|
||||
eligible.value, total.value,
|
||||
formula.value.majorityPct, formula.value.baseExponent,
|
||||
formula.value.gradientExponent, formula.value.constantBase,
|
||||
))
|
||||
|
||||
const sentence = computed(() =>
|
||||
total.value > 0 ? thresholdSentence(eligible.value, total.value, threshold.value) : '')
|
||||
const formulaLink = computed(() => {
|
||||
const f = formula.value
|
||||
return `/textes/formules?W=${eligible.value}&T=${total.value}&M=${f.majorityPct}`
|
||||
+ `&B=${f.baseExponent}&G=${f.gradientExponent}&C=${f.constantBase}`
|
||||
})
|
||||
|
||||
// ── Arc 270° : de 135° à 405°, sens horaire ──
|
||||
const R = 46
|
||||
function pt(frac: number): { x: number; y: number } {
|
||||
const a = ((135 + 270 * frac) * Math.PI) / 180
|
||||
return { x: 60 + R * Math.cos(a), y: 60 + R * Math.sin(a) }
|
||||
}
|
||||
function arc(from: number, to: number): string {
|
||||
const p1 = pt(from)
|
||||
const p2 = pt(to)
|
||||
const large = (to - from) > 2 / 3 ? 1 : 0
|
||||
return `M ${p1.x.toFixed(2)} ${p1.y.toFixed(2)} A ${R} ${R} 0 ${large} 1 ${p2.x.toFixed(2)} ${p2.y.toFixed(2)}`
|
||||
}
|
||||
function tick(frac: number): string {
|
||||
const a = ((135 + 270 * frac) * Math.PI) / 180
|
||||
const x1 = 60 + (R - 11) * Math.cos(a)
|
||||
const y1 = 60 + (R - 11) * Math.sin(a)
|
||||
const x2 = 60 + (R + 11) * Math.cos(a)
|
||||
const y2 = 60 + (R + 11) * Math.sin(a)
|
||||
return `M ${x1.toFixed(2)} ${y1.toFixed(2)} L ${x2.toFixed(2)} ${y2.toFixed(2)}`
|
||||
}
|
||||
const trackPath = arc(0, 1)
|
||||
const forFrac = computed(() => (total.value > 0 ? votesFor.value / total.value : 0))
|
||||
const againstFrac = computed(() => (total.value > 0 ? votesAgainst.value / total.value : 0))
|
||||
const thrFrac = computed(() => (total.value > 0 ? Math.min(threshold.value / total.value, 1) : 1))
|
||||
const fillPath = computed(() => (forFrac.value > 0 ? arc(0, forFrac.value) : ''))
|
||||
const againstPath = computed(() => (againstFrac.value > 0 ? arc(1 - againstFrac.value, 1) : ''))
|
||||
const thresholdTick = computed(() => tick(thrFrac.value))
|
||||
|
||||
// ── Le geste ──
|
||||
const voterId = computed(() => props.asPersonId ?? col.me?.id)
|
||||
const myVote = computed(() => active.value.find(v => v.voterId === voterId.value))
|
||||
const refusing = ref(false)
|
||||
const comment = ref('')
|
||||
const error = ref('')
|
||||
|
||||
function cast(value: 'for' | 'against') {
|
||||
error.value = ''
|
||||
const result = store.castVote(props.session.id, {
|
||||
value,
|
||||
...(comment.value.trim() ? { comment: comment.value.trim() } : {}),
|
||||
...(props.asPersonId ? { asPersonId: props.asPersonId } : {}),
|
||||
})
|
||||
if ('ok' in result) { error.value = result.reason; return }
|
||||
comment.value = ''
|
||||
refusing.value = false
|
||||
}
|
||||
|
||||
const comments = computed(() => active.value.filter(v => v.comment?.trim()))
|
||||
function name(id: Id): string {
|
||||
return col.people.find(p => p.id === id)?.displayName ?? '—'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ld-v2 -->
|
||||
<section class="ld-card vb">
|
||||
<!-- La jauge inertielle -->
|
||||
<div class="vb__gauge">
|
||||
<svg viewBox="0 0 120 114" class="vb__svg" aria-hidden="true">
|
||||
<path :d="trackPath" class="vb__track" />
|
||||
<path v-if="againstPath" :d="againstPath" class="vb__against" />
|
||||
<path v-if="fillPath" :d="fillPath" class="vb__fill" />
|
||||
<path :d="thresholdTick" class="vb__threshold" />
|
||||
</svg>
|
||||
<div class="vb__center">
|
||||
<span class="vb__for">{{ votesFor.toLocaleString('fr-FR') }}</span>
|
||||
<span class="vb__for-label">pour</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Les chiffres, clairs -->
|
||||
<dl class="vb__stats">
|
||||
<div><dt>seuil requis</dt><dd>{{ threshold.toLocaleString('fr-FR') }}</dd></div>
|
||||
<div><dt>votants</dt><dd>{{ total.toLocaleString('fr-FR') }}</dd></div>
|
||||
<div><dt>inscrits</dt><dd>{{ eligible.toLocaleString('fr-FR') }}</dd></div>
|
||||
</dl>
|
||||
|
||||
<p v-if="sentence" class="vb__sentence">{{ sentence }}</p>
|
||||
<p v-else class="vb__sentence vb__sentence--muted">Personne n'a encore voté — le seuil part de l'unanimité et descend avec la participation.</p>
|
||||
<NuxtLink :to="formulaLink" class="vb__link">
|
||||
<UIcon name="i-lucide-graduation-cap" />
|
||||
<span>comprendre ce seuil</span>
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Le geste -->
|
||||
<div v-if="session.status === 'open'" class="vb__actions">
|
||||
<button class="ld-btn vb__yes" type="button" :disabled="!canAct" @click="refusing = false; cast('for')">
|
||||
Pour
|
||||
</button>
|
||||
<button class="ld-btn ld-btn--ghost vb__no" type="button" :disabled="!canAct" @click="refusing = !refusing">
|
||||
Contre
|
||||
</button>
|
||||
<span v-if="myVote" class="vb__mine">
|
||||
Ta position actuelle : {{ myVote.value === 'for' ? 'pour' : 'refus argumenté' }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="refusing && session.status === 'open'" class="vb__argue">
|
||||
<textarea v-model="comment" rows="2" placeholder="Dis pourquoi — un commentaire accompagne toute position négative." />
|
||||
<button class="ld-btn" type="button" :disabled="!comment.trim()" @click="cast('against')">
|
||||
Déposer ce refus
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="error" class="vb__error">{{ error }}</p>
|
||||
|
||||
<!-- Clôture : la distribution complète -->
|
||||
<p v-if="session.status === 'closed'" class="vb__outcome">
|
||||
{{ votesFor.toLocaleString('fr-FR') }} pour · {{ votesAgainst.toLocaleString('fr-FR') }} refus ·
|
||||
seuil {{ threshold.toLocaleString('fr-FR') }} —
|
||||
{{ session.outcome === 'adopted' ? 'le collectif adopte.' : 'le collectif n’adopte pas.' }}
|
||||
</p>
|
||||
<ul v-if="comments.length" class="vb__comments">
|
||||
<li v-for="vote in comments" :key="vote.id">
|
||||
<span v-if="!secret" class="vb__comment-who">{{ name(vote.voterId) }}</span>
|
||||
<p>{{ vote.comment }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.vb { padding: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
|
||||
.vb__gauge { position: relative; width: min(240px, 70vw); }
|
||||
.vb__svg { width: 100%; display: block; }
|
||||
.vb__track { fill: none; stroke: var(--mood-accent-soft); stroke-width: 9; stroke-linecap: round; }
|
||||
.vb__fill { fill: none; stroke: var(--mood-accent); stroke-width: 9; stroke-linecap: round; transition: d 0.25s ease; }
|
||||
.vb__against { fill: none; stroke: color-mix(in srgb, var(--mood-error) 45%, transparent); stroke-width: 9; stroke-linecap: round; }
|
||||
.vb__threshold { fill: none; stroke: var(--mood-secondary); stroke-width: 3.5; stroke-linecap: round; transition: d 0.25s ease; }
|
||||
.vb__center {
|
||||
position: absolute; inset: 0; display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center; pointer-events: none;
|
||||
}
|
||||
.vb__for { font-size: clamp(1.6rem, 8vw, 2.2rem); font-weight: 800; color: var(--mood-accent); line-height: 1; }
|
||||
.vb__for-label { font-size: 0.8125rem; font-weight: 700; color: var(--mood-text-muted); }
|
||||
.vb__stats { display: flex; gap: 1.5rem; margin: 0; }
|
||||
.vb__stats div { display: flex; flex-direction: column; align-items: center; }
|
||||
.vb__stats dt { font-size: 0.72rem; font-weight: 700; color: var(--mood-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.vb__stats dd { margin: 0; font-size: 1.125rem; font-weight: 800; }
|
||||
.vb__stats div:first-child dd { color: var(--mood-secondary); }
|
||||
.vb__sentence { margin: 0; text-align: center; font-size: 0.9375rem; line-height: 1.5; max-width: 34rem; }
|
||||
.vb__sentence--muted { color: var(--mood-text-muted); }
|
||||
.vb__link {
|
||||
display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem;
|
||||
font-weight: 700; color: var(--mood-accent); text-decoration: none;
|
||||
}
|
||||
.vb__link:hover { text-decoration: underline; }
|
||||
.vb__actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
|
||||
.vb__yes { min-width: 7rem; }
|
||||
.vb__no { min-width: 7rem; color: var(--mood-error); background: color-mix(in srgb, var(--mood-error) 10%, transparent); }
|
||||
.vb__mine { font-size: 0.8125rem; color: var(--mood-text-muted); width: 100%; text-align: center; }
|
||||
.vb__argue { width: 100%; display: flex; flex-direction: column; gap: 0.5rem; }
|
||||
.vb__argue textarea { padding: 0.55rem 0.75rem; font-size: 0.9375rem; resize: vertical; }
|
||||
.vb__argue .ld-btn { align-self: flex-end; }
|
||||
.vb__error { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--mood-error); }
|
||||
.vb__outcome { margin: 0; font-weight: 700; font-size: 0.9375rem; text-align: center; }
|
||||
.vb__comments { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 0.5rem; }
|
||||
.vb__comments li { background: var(--mood-bg); border-radius: var(--r-input); padding: 0.55rem 0.8rem; font-size: 0.875rem; }
|
||||
.vb__comments p { margin: 0.2rem 0 0; }
|
||||
.vb__comment-who { font-weight: 700; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user