Játék-arculat

„Méhsejt-diorama” – a beeco játékok közös design systemje

Alapelvek

Öt szabály, ami minden képernyőre igaz.

Felismerhetően beecoAz app színei, betűi és méhecskéi.
Cuki és barátságosKerek formák, puha árnyék, soha nem szid.
3 másodpercKépernyőnként egy mondat, a többi lenyitható.
Méhsejt-dioramaHatszög, low-poly világ, meleg napfény.
MindenkinekOlvasható kontraszt, nagy koppintási felület, ikon + szín.

Színek

A felületen a szerepnevet használd (--ink, --surface), ne a nyers színt.

Szerepek

TokenMire valóÉrték

Betűk

Lalezar a címekre és számokra, Open Sans minden szövegre.

Térköz, sarok, árnyék

4 px-es rács, 3 px olívavonal, puha árnyék – kemény eltolt árnyék soha.

--soft
--soft-sm
--press

Piktogramok

Emoji helyett ezek: minden eszközön ugyanúgy néznek ki. Használat: pic('star').

Elemek

Új felület ezekből épül; az osztálynév a kártya alatt.

.ds-btn · is-secondary · is-small · is-block – képernyőnként EGY nagy gomb
.ds-btn-sm · is-primary · .ds-icon-btn (mindig aria-label)
1 240 5 2× 3 23 392
.ds-chip · is-big · is-small · is-honey · is-blossom · is-good · is-bad
Szuper, ez a papírba megy! Majdnem! Próbáld újra.
.ds-feedback · is-good · is-bad – szín + ikon együtt, soha csak szín
.ds-card is-interactive + .ds-hex (--acc, --size)
Miről szól?

Minden, ami nem fér bele az egy mondatba, ide kerül.

Szabályok és pontozás
  • Jó helyre: pont + tény.
  • Rossz helyre: tanulunk, nem büntetünk.
.ds-details
Háttérzene
.ds-switch · .ds-seg · .ds-tabs / .ds-tab

Billentyű: E felvesz · I info

.ds-meter (--v) · is-good · .ds-key
Töltsd le a beeco appot
A játékban tanultakat váltsd valódi tettekre.
Letöltöm
.ds-banner

Szint vége!

8 darabból 7 ment jó helyre.

.ds-scrim + .ds-panel – felugró ablak: cím, egy mondat, egy nagy gomb

Játék-minták

Ami minden játékban visszatér: buborék, csillag, eredmény, jelvény, lista.

MéhecskeNézd meg a villanyórát!
Megyek, már nézem is.
.ds-say (+ is-me) · .ds-avatar (is-bee, --acc, --size) · .ds-bubble · .ds-who
dsStarsHTML(n, max, big) · .ds-stars (is-big) · .ds-dots
.ds-input · .ds-code
Áramfaló-vadász
Csöpp-detektív
Még zárva
.ds-badge (is-new, is-locked) + .ds-hex + piktogram
  • Nézd meg a villanyszámlát
  • Keresd meg, mi fogyaszt éjjel
Konyhamegvanfeltételezéséjszaka
.ds-checklist (is-done + pic done/todo) · .ds-tag (is-accent, is-good, is-bad, is-dark)
3 100 kWh
2 080 kWh

Mintaszámok – csak a megjelenés bemutatására.

.ds-bars / .ds-bar (is-after, --v) · .ds-loader · .ds-skeleton
.ds-panel + dsResultHTML({ mood, title, stars, score, scoreLabel, lead, stats, actions }) – minden játék szint/kör vége

Méhecske-hangulatok

Helyzethez illő figura – a mérges méhecske soha nem reagál a játékosra.

Visszajelzés-recept

Jó vagy rossz válasz: szín, ikon, hang, rezgés és méhecske – mindig együtt.

Szuper! dsFeedback('good') · méhecske: good · rezgés: rövid
Rekord! dsFeedback('great') · méhecske: great · rezgés: kettős
Majdnem! dsFeedback('try') · méhecske: think · lágy, lefelé ívelő hang

Sötét környezet

Éjszakai nézet, hőkamera, mozi-jelenet: a .ds-dark átfordítja a szerep-színeket.

Éjszakai teszt

Minden lekapcsolva – mi pörgeti még az órát?

23:4048 W
Kapcsold be a hőkamerát!

A „48 W” és a „23:40” csak megjelenési minta.

Mozgás és rétegek

Egy közös mozgás-készlet – a „Kevesebb mozgás” beállítás mindet leállítja.

+120 Majdnem Érkezik Talált ÍTÉLET 0 pont
.ds-anim-pop · -shake · -float · -spin · -in · -drop · -tick · -stamp · -rise · -buzz · -glow · -pulse · -sweep · -flip · -slide-l/-r · -out · .ds-delay-1…4
JS: DS.motion.play(el,'stamp') · .rise('+120',x,y) · .burst(el) · .countUp(el, 1240) / .countStop(el) · tokenek: --t-fast/base/slow/xslow, --ease, --bounce
Döntés-kártya
12345
Játékérzet (kit 1.10, js/ds-juice.js): DS.motion.stagger(box) · .chain(els, { cls }) · .swipe(el, ±1) · .meter(meter, 0.6, { delta:+2, label }) · .celebrate(el) · dsSound('swipe' | 'whoosh' | 'chain')
RétegMire

Szereplők

Minden játéknak saját szerepes méhecskéje van, hatszögben, a palettából vett háttérrel.

A figurák a beeco app illusztrációi. Új szerep (pl. kertész, vízvezeték-szerelő) csak a beeco illusztrátorával egyeztetve; külső anyagban a beeco jóváhagyása kell.

Illusztrációk

Egy tárgy = egy lapokra tört árnyalású matrica fehér peremmel és puha olívazöld árnyékkal. Emoji és régi kódrajz helyett. Használat: artIcon('🧊') (HTML) · ART.image('i_tukor') (vászon, 3D). Szabályok: docs/grafika-spec.md.

Ugyanaz a matrica 120 · 72 · 40 · 24 px-en – kicsiben is felismerhető kell legyen.

Csere szebb képre (MI-képgenerátor vagy illusztrátor)

Bármelyik matrica lecserélhető kész képre a játék kódjának módosítása nélkül: a promptok a docs/illusztracio-promptok.csv-ben, a kész 512 × 512-es, átlátszó hátterű PNG-ket a python3 tools/art-import.py <mappa> tömöríti és köti be.

Párbeszédablak

Minden felugró panel role="dialog" + aria-modal="true". A ds.js őre gondoskodik a többiről: a Tab a panelen belül körbejár, az Esc a data-ds-close (vagy „Bezárás”) gombot nyomja, bezárás után a fókusz visszaáll.

Márka-képek

Megosztási előkép és böngésző-ikon – a design system elemeiből készülnek (tools/og-kep.html, tools/ikon.html), újrakészítés: node tools/brand-kepek.js.

Megosztási előkép: a hat játék méhecskéi egy méhsejtben
og-kep.png · 1200 × 630 · Facebook, Messenger, LinkedIn
ikon-512 · ikon-180 (iPhone kezdőképernyő) · ikon-32 (böngészőfül)

3D világ

A díszlet a DS.world (kint) és DS.interior (bent) palettából színez, a táblákat a DS.signCanvas rajzolja.

DS.signCanvas('MŰANYAG ÉS FÉM') – kuka-tábla
DS.pillCanvas('Pizzásdoboz') – hulladék neve

Így

  • Low-poly formák (kevés oldalú henger, ikozaéder), lapos tónusok.
  • Meleg napfény: DS.light.outdoor; meleg köd a háttérben.
  • Matricák fehér kontúrral, a táblák méz–olíva színben.
  • Kevés anyag, összevont geometria – mobilon is folyamatos.

Ne így

  • Fotórealista textúra, csillogó fém, erős tükröződés.
  • Tiszta fekete vagy a régi, harsány citromsárga.
  • Új, a palettán kívüli szín név nélkül a kódban.
  • Szöveg a 3D térben ott, ahol egy ikon is elég.

Szöveg és hangnem

Tegeződünk, röviden, bátorítóan – tanítunk, nem szidunk.

Így

  • „Majdnem! A tükör nem üveg – próbáld a kommunálist.”
  • „Szuper, ez a papírba megy!”
  • Számot csak hiteles forrással; ha nincs: „megtakarít, de nincs rá igazolt szám”.

Ne így

  • „Rossz válasz! Ezt illett volna tudni.”
  • Három mondat egy felugró ablakban.
  • Kitalált százalék a hatás érzékeltetésére.

Új elemek (1.2)

Változás, profil, forrás, tanító, időzítő, tippelés, magyarázat, alsó lap, képernyő-váz és nagy betű – css/ds-ext.css + js/ds-ext.js.

dsDeltaHTML({ label, icon, value, unit, better:'up'|'down', small }) · dsMeterHTML({ label, icon, value01, delta, deltaValue }) · DS.delta.show(el, [..])
Előjel + nyíl + szín: a szín sosem egyedül jelez. better:'down': ahol a kevesebb a jobb (CO₂, forint).

Mintaértékek – csak a megjelenés bemutatására.

dsProfileHTML({ values:[{ label, icon, value01 }], mode:'radar'|'bars', title }) – 3–6 tengely; 3 alatt magától sáv

Egy átlagos háztartás ennyi áramot használ egy évben.

dsSourceHTML({ title, url, publisher, year, note }) – új lapon nyílik · dsAssumeHTML(szöveg) – nem mért, hanem feltételezett adat

Az utolsó negyedben bogyószín és lüktető szám; háttérbe tett lapon megáll.

dsRingHTML({ seconds, size, label }) · DS.ring.start(el, mp, onEnd) → { stop, pause, resume, left } · DS.ring.stop(el)
dsRangeHTML({ id, label, min, max, step, value, unit, labels:[bal, jobb] }) + DS.range.bind(input) · egyszerű: input.ds-range (--k)
Nyilakkal, Home/End-del is állítható (natív csúszka).

A villanyóra kWh-ban mér.

DS.tip.attach(el, szöveg) · jelölővel: data-ds-tip="…" (DS.tip.scan) · dsTipBtnHTML(szöveg, szó) – rámutatás, fókusz, koppintás; Esc zárja; a képernyő szélén átfordul
DS.sheet.open(html, { title, onClose }) · DS.sheet.close() – asztalon középen, 700 px alatt alulról (fül, lehúzás) · DS.coach.show(cél, { text, key }) – kulcsonként egyszer (beeco_coach_<kulcs>) · DS.coach.reset()
Nagy betű mód

Minden betű és koppintási felület kb. 1,2×. Tárolva: beeco_big.

<html class="ds-big"> · DS.big.set(true) · DS.big.get()
.ds-screen › .ds-screen-top (HUD: .ds-hud, .ds-hud-group, .ds-hud-spacer) · .ds-screen-main (tábla) · .ds-screen-tray (tálca)
Töréspont: fekvő tájolás + legfeljebb 500 px magas kijelző → a tálca oldalra kerül (jobb oldali minta: .is-landscape kényszeríti). A notch-sávokat figyeli. .is-contained: beágyazva.

Ellenőrzőlista új képernyőhöz

Mielőtt élesre megy – ezt nézzük meg.

  1. Csak tokenek (var(--…)) és ds- elemek; új szín/méret a tokens.css-be és a ds.js-be kerül.
  2. Egy mondat látszik, a többi .ds-details-ben; egy nagy gomb.
  3. Emoji helyett pic(); minden ikon-gombnak van aria-label-je.
  4. Jó/rossz visszajelzés színnel ÉS ikonnal; koppintási felület legalább 44 px.
  5. Megnézve: asztali, 375 × 812 álló telefon, 812 × 375 fekvő telefon; „Kevesebb mozgás” mellett is.
  6. Felugró panel: role="dialog" + aria-modal="true", a bezáró gombon data-ds-close.
  7. Tárgy, étel, készülék képe: artIcon() matrica, nem emoji; új matrica a docs/grafika-spec.md szerint.
  8. node tests/check-arculat.js és node tests/check-art.js zöld.