1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
use super::*;
class! {
// The active UI scheme, named next to the theme toggle. The scheme is a
// compile-time choice, so the label is the one thing that tells a reader
// which design language the build carries.
pub(crate) c_nav_scheme_label {
font-size: var!(font-xs);
color: var!(muted-foreground);
text-transform: "uppercase";
letter-spacing: "0.08em";
white-space: "nowrap";
flex-grow: "1";
text-align: "left";
}
// The gesture demo's touch surface: tall enough to drag in, with the
// browser's own touch and text gestures suppressed so a drag reads as a
// drag rather than a scroll or a selection.
pub c_event_gesture_zone {
min-height: "340px";
touch-action: "none";
user-select: "none";
-webkit-user-select: "none";
}
pub(crate) c_game_stats_bar {
display: "flex";
gap: var!(space-lg);
margin-bottom: var!(space-md);
font-size: var!(font-sm);
font-weight: "600";
}
pub(crate) c_game_stats_label {
color: "inherit";
}
pub(crate) c_game_stats_fps_value {
color: "inherit";
}
pub(crate) c_game_stats_count_value {
color: "inherit";
}
pub(crate) c_game_stats_total_value {
color: "inherit";
}
pub(crate) c_game_description {
line-height: "1.5";
color: "inherit";
margin-bottom: var!(gap-component);
}
pub(crate) c_game_canvas_wrapper {
position: "relative";
width: "100%";
// Inline-mode canvas wrapper: gives the canvas a stable 3:2 CSS
// box (matching the 600x400 backing buffer) so the inline
// dimensions are 820x547 on a 1280-wide page. Without
// `aspect-ratio`, the inner `c_game_fullscreen_canvas_wrapper`
// collapses to the canvas's natural inline-block height (a few
// pixels) on inline layout, producing a 820x210 (or similar)
// strip instead of the intended 3:2 frame.
// The two caps stop the ratio from pushing the frame past the
// visible area on either axis. They are percentages of the wrapper
// rather than viewport units: the wrapper is a flex item, so a
// viewport-unit cap would ignore the surrounding page chrome
// (header/footer height) and let the frame spill under the fold.
aspect-ratio: "3 / 2";
max-width: "100%";
max-height: "100%";
}
pub(crate) c_game_fullscreen_canvas_wrapper {
// Fullscreen-mode wrapper: fills the fixed fullscreen
// container (1248x750 on a 1280x800 viewport) so the canvas
// packed inside takes the entire viewport minus toolbar
// padding. The canvas's `width:100%; height:100%` makes its
// CSS box match this wrapper exactly.
flex: "1";
display: "flex";
align-items: "center";
justify-content: "center";
overflow: "hidden";
min-height: "0";
width: "100%";
height: "100%";
}
pub(crate) c_game_3d_canvas {
width: "100%";
height: "100%";
cursor: "grab";
display: "block";
background: var!(accent);
touch-action: "none";
object-fit: "contain";
}
pub(crate) c_game_3d_canvas_fullscreen {
// Fullscreen canvas: CSS box matches the fullscreen wrapper
// (1248x750 on 1280x800 viewport, 100% of the column). The
// backing buffer is resized to match via the fullscreen enter
// hook (see game_2d hook::fn::enter_game_2d_fullscreen and
// game_3d hook::fn::enter_game_3d_fullscreen) so the ball /
// cube physics bounds, click mapping, and clear rect all
// operate on the full canvas dimensions instead of the
// 600x400 default. No CSS rotation, no aspect-ratio squeeze,
// no letterbox - the canvas fills the available space and the
// game elements are redrawn at the new size.
width: "100%";
height: "100%";
cursor: "grab";
display: "block";
background: var!(accent);
touch-action: "none";
}
pub(crate) c_raytrace_canvas_fullscreen {
// RayTrace and Lighting are software-rendered 2D canvases with
// a fixed 4:3 backing buffer (320x240). Their backing buffer
// is NOT resized on fullscreen enter (re-tracing 1248x750
// pixels per frame is not viable in WASM), so the CSS box
// must NOT stretch the canvas element to the wrapper - that
// would deform every sphere into a 1.45:1 ellipse on a 1280x800
// viewport. `object-fit: contain` makes the browser uniformly
// scale the 4:3 backing buffer to the largest 4:3 fit inside
// the wrapper, painting letterbox bars where the wrapper
// extends beyond 4:3.
width: "100%";
height: "100%";
cursor: "grab";
display: "block";
background: var!(surface-media);
touch-action: "none";
object-fit: "contain";
}
pub(crate) c_game_2d_canvas {
width: "100%";
height: "100%";
cursor: "pointer";
display: "block";
background: var!(accent);
touch-action: "none";
object-fit: "contain";
}
pub(crate) c_game_2d_canvas_fullscreen {
// Fullscreen canvas - see c_game_3d_canvas_fullscreen for
// the resize-on-enter rationale.
width: "100%";
height: "100%";
cursor: "pointer";
display: "block";
background: var!(accent);
touch-action: "none";
}
pub(crate) c_canvas_pixelated {
image-rendering: "pixelated";
image-rendering: "crisp-edges";
}
pub(crate) c_game_loading_overlay {
position: "absolute";
top: "0";
left: "0";
width: "100%";
height: "100%";
pointer-events: "none";
}
pub(crate) c_keep_alive_tab_visible {
display: "block";
}
pub(crate) c_keep_alive_tab_hidden {
display: "none";
}
pub(crate) c_binding_slider_label_accent {
color: var!(accent);
}
pub(crate) c_binding_color_preview_bg(background: &str) {
background: {
background
};
}
pub(crate) c_slider_value(value_percent: &str) {
{
"--value"
}
: {
value_percent
};
}
pub(crate) c_anim_scale_shrink {
transform: "scale(0.85)";
}
pub(crate) c_anim_scale_normal {
transform: "scale(1)";
}
}