01Οι τέσσερις παραλλαγές

Δύο ανεξάρτητοι άξονες στο .formdots: data-variant (mobile / desktop) × data-sport (football / basket, default football). Ο παρακάτω πίνακας είναι ο άξονας data-variant· η διαφορά του αθλήματος είναι στο 3B.

02Ανατομία & γεωμετρία

Η γεωμετρία είναι κοινή στις δύο παραλλαγές — γράφεται μία φορά.

03Χρώματα αποτελέσματος

04Συμβόλαιο δεδομένων

Κανονική είσοδος: data-fm JSON σε κάθε παιγμένο bubble.

ΣΤΟ .formdots

ΣΤΟ ? BUBBLE · ΚΑΙ LEGACY

05API

Ένα global: window.FormBubbles. Το init() είναι idempotent (κάθε bubble δένεται μία φορά, μέσω data-fb-bound).

// μετά το markup, μία φορά
FormBubbles.init();

// ή με ρητό mount point (π.χ. μέσα σε device frame)
FormBubbles.init({ root: document.querySelector('.page'), mount: document.querySelector('.phone') });

06Καταστάσεις

07Design tokens

Το component δεν δηλώνει tokens — μόνο τα χρησιμοποιεί. Πηγή: tokens/tokens.css.

08Προσβασιμότητα

• Κάθε .fd έχει tabindex="0" — προσβάσιμο από πληκτρολόγιο.
• Το popover έχει role="tooltip"· το κουμπί κλεισίματος του modal aria-label="Κλείσιμο".
• prefers-reduced-motion απενεργοποιεί το transition.

ΑΠΟΔΕΚΤΟ ΧΡΕΟΣ WCAG — ΜΕΤΡΗΜΕΝΟ 2026-07-29

Τα γράμματα είναι 12px/700. Το bold 12px δεν είναι «large text» κατά WCAG, άρα ισχύει το όριο 4.5:1.

09Markup — copy/paste

MOBILE — ΒΑΘΜΟΛΟΓΙΑ (5 ΑΓΩΝΕΣ)

<div class="formdots" data-variant="mobile"
     data-team="Ολυμπιακός" data-crest="/img/teams/olympiacos.svg">
  <span class="fd fw"  data-fm='{"v":"H","o":"ΑΕΚ","dt":"24 Αυγ","gf":2,"ga":0,"r":"W","y":0,"rd":0,"e":[[23,"g","us"],[71,"g","us"]]}'>Ν</span>
  <span class="fd fw"  data-fm='{"v":"A","o":"ΠΑΟΚ","dt":"31 Αυγ","gf":3,"ga":1,"r":"W","y":1,"rd":0,"e":[]}'>Ν</span>
  <span class="fd fdr" data-fm='{"v":"H","o":"Παναθηναϊκός","dt":"14 Σεπ","gf":1,"ga":1,"r":"D","y":2,"rd":0,"e":[]}'>Ι</span>
  <span class="fd fw"  data-fm='{"v":"A","o":"Άρης","dt":"21 Σεπ","gf":2,"ga":1,"r":"W","y":1,"rd":0,"e":[]}'>Ν</span>
  <span class="fd fl"  data-fm='{"v":"H","o":"ΟΦΗ","dt":"28 Σεπ","gf":0,"ga":1,"r":"L","y":1,"rd":1,"e":[]}'>Η</span>
</div>

DESKTOP — HERO, ΜΕ ΕΠΟΜΕΝΟ ΑΓΩΝΑ

<div class="formdots" data-variant="desktop" data-team="Ολλανδία">
  <span class="fd fw" data-fm='{"v":"H","o":"Αυστρία","dt":"25 Μαρ","gf":3,"ga":0,"r":"W","y":1,"rd":0,"e":[[12,"g","us"]]}'>Ν</span>
  <span class="fd fq" data-fmnext="Επόμενος: vs Ιαπωνία · Σάβ 14 Ιουν 23:00">?</span>
</div>

ΔΟΧΕΙΟ ΠΟΥ ΚΟΒΕΙ ΤΟ POPOVER

<!-- ΚΑΘΕ γονιός με overflow hidden/auto/scroll κόβει το popover.
     Βάλε data-fb-scroll στο wrapper και το .fpop γίνεται position:fixed
     ώστε να ξεφύγει. Ισχύει για πίνακες με scroll ΚΑΙ για κάρτες με
     overflow:hidden — π.χ. τα demo αυτής της σελίδας. -->
<div class="standwrap" data-fb-scroll> <table>…</table> </div>

3AMobile modal — ανάπτυξη γραμμής εκτός MVP

Το modal ανοίγει με όλες τις γραμμές κλειστές, και στα δύο αθλήματα. Πάτημα σε γραμμή της δίνει .is-open και εμφανίζει από κάτω τη λεπτομέρεια· πάτημα σε άλλη τη μεταφέρει, πάτημα στην ίδια την κλείνει. Μια γραμμή είναι αναπτύξιμη μόνο αν έχει δεδομένα: q για μπάσκετ, e για ποδόσφαιρο.

ΠΟΔΟΣΦΑΙΡΟ — TIMELINE ΓΚΟΛ & ΚΑΡΤΩΝ ref 2b

3BΜπάσκετ — data-sport="basket" Q1–Q4 εκτός MVP

Ίδια bubbles, ίδια γεωμετρία, ίδιο μοτίβο αλληλεπίδρασης. Αλλάζει μόνο η λεπτομέρεια του αθλήματος. Το μπάσκετ δεν έχει ισοπαλία, οπότε εμφανίζονται μόνο .fw / .fl (Ν / Η) — ποτέ .fdr.

ΕΠΙΠΛΕΟΝ ΠΕΔΙΑ ΣΤΟ data-fm

ΤΑ ΥΠΟΛΟΙΠΑ ΠΑΡΑΓΩΓΟΝΤΑΙ — ΜΗ ΤΑ ΣΤΕΛΝΕΙΣ

DESKTOP — ΧΩΡΙΣ ΑΝΑΛΥΣΗ ΠΕΡΙΟΔΩΝ

Το popover δείχνει έδρα · αντίπαλο, σκορ, αποτέλεσμα + διαφορά και τον κορυφαίο παίκτη — και τίποτα άλλο. Δεν έχει ανάλυση περιόδων: το .fpop-tl (0–90′ timeline του ποδοσφαίρου) απλώς δεν έχει αντίστοιχο στο μπάσκετ. Κρατά το κανονικό πλάτος 196px. Η ανά-περίοδο πληροφορία υπάρχει μόνο στο mobile modal.

MOBILE — ΑΝΑΛΥΣΗ ΠΕΡΙΟΔΩΝ ΣΤΟ MODAL

Το modal ανοίγει με όλες τις γραμμές κλειστές — μόνο η λίστα των 5 αγώνων. Πάτημα σε γραμμή της δίνει .is-open και εμφανίζει από κάτω .fdacc-res (τελεία + «Νίκη +2 · 2/4 περίοδοι · Εντός · παίκτης») και .fdacc-q με τέσσερα .fdq: chip διαφοράς, ζεύγος μπαρών, σκορ περιόδου, ετικέτα Q. Πάτημα σε άλλη γραμμή μεταφέρει την ανάλυση· πάτημα στην ίδια την κλείνει.

10Τι ΔΕΝ περιλαμβάνεται

11Build checklist

• Αντίγραψε component.css και component.js. Καμία εξάρτηση, κανένα asset.
• Βεβαιώσου ότι τα --win / --err / --errdark υπάρχουν στα tokens.
• Κάθε .formdots πρέπει να δηλώνει data-variant.
• Δώσε data-team (και data-crest αν υπάρχει) σε κάθε ομάδα — αλλιώς η κεφαλίδα του modal πέφτει στο fallback.
• Το backend βγάζει data-fm JSON. Μη γράφεις νέο data-tip.
• data-fb-scroll σε κάθε wrapper που κόβει το popover — overflow hidden, auto ή scroll. Αν το popover δεν φαίνεται, αυτό λείπει.
• Κάλεσε FormBubbles.init() μία φορά μετά το render. Ξανακάλεσέ το μετά από AJAX — είναι idempotent.
• MVP: το κλικ ανά αγώνα μέσα στα mobile modals δεν είναι απαραίτητο. Αρκεί το modal + οι 5 αγώνες. Αν το κόψεις, μη στέλνεις e / q στο data-fm — μια γραμμή γίνεται αναπτύξιμη μόνο όταν έχει δεδομένα, οπότε παύει μόνη της να ανοίγει. Δεν χρειάζεται αλλαγή στο component.
• Έλεγξε: υπογράμμιση στον τελευταίο παιγμένο αγώνα, και στις δύο περιπτώσεις (με και χωρίς ?).