1size 420 580
2background #0e1320
3
4// Symboles paramétrés (VISUEL) + `each` (COMPORTEMENT) + `def` (constantes de placement) : un clavier
5// 3×3 complet en quelques lignes. La touche est un symbole (chiffre paramétré) ; `repeat` la pose 9 fois ;
6// `each` attache le même handler à chaque instance, l'indice `i` donnant le chiffre saisi.
7def cols = 3
8def cell = 112
9def x0 = 98
10def y0 = 210
11
12var saisie = 0
13
14symbol "Touche"(chiffre) {
15 layer "c" {
16 rect -48 -48 96 96 12 fill linear(120, 0:#2b3a5c, 1:#172037)
17 text "$(chiffre)" at -48,-30 font "Geist, system-ui, sans-serif" size 44 align center line 1.15 color #cfe3ff bold box 96 60
18 }
19}
20
21scene {
22 layer "Fond" {
23 path "M0 0L420 0L420 580L0 580Z" fill radial(0.5, 0.3, 0.8, 0:#1a2336, 1:#080b14)
24 }
25 layer "Ecran" {
26 group "Ecran" at 210,96 pivot 0,0 {
27 layer "c" {
28 rect -150 -46 300 92 10 fill #070d18
29 text "0" at -150,-32 font "Geist, system-ui, sans-serif" size 46 align center line 1.15 color #6cffc0 bold bind "saisie" box 300 60
30 }
31 }
32 }
33 layer "Clavier" {
34 repeat i from 0 to 8 {
35 instance "Touche"($(i+1)) as "T$(i)" at $(x0 + (i%cols)*cell),$(y0 + floor(i/cols)*cell)
36 }
37 }
38 layer "Indice" {
39 text "tape ton code" at 60,540 font "Geist, system-ui, sans-serif" size 22 align center line 1.2 color #7f8db5 box 300 28
40 }
41}
42
43each "Touche" as i {
44 when clicked { saisie = saisie * 10 + (i + 1) }
45}