Martin Bauer
2514ecbc35
The first cut of ?pi=1 switched off the two things that look most expensive - the backdrop-filter glass blur and the decorative CSS animation loops - and made the device slower, not faster: 53.5% of a core idle became 118%. Measured on musicdolphin, sum of the Firefox process tree, idle on the browse screen, 15s average: full app 53.5% + ambient canvas at half resolution 25.0% <- the whole win + 30fps cap on top of that 25.0% (no idle change) + decorative CSS animation loops off 24.6% (noise; left on) + backdrop-filter glass blur off 118.1% <- 5x worse The blur is what promotes each glass panel to its own compositing layer. Without it the animated canvas and the whole album grid above it collapse into one layer and every canvas frame repaints all of it. The most expensive-looking CSS in the app is what was keeping the rest of it cheap. SHOW_GLASS_BLUR and SHOW_DECORATIVE_ANIMATIONS therefore go back to unconditionally on, in both the music app and the typing game, with the numbers written down next to them so the next person does not repeat this. What is left is one real change - paint a quarter of the pixels - plus three caps that only bite while something is playing and so are not in the table above: 30fps on the canvas, 60 bubbles alive at once, and ten progress-bar re-renders a second. Those three are unmeasured; measuring them means playing audio. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
44 lines
2.0 KiB
TypeScript
44 lines
2.0 KiB
TypeScript
/** Feature toggles and the one hue this app is built on.
|
|
*
|
|
* Same role as ../../web/src/lib/theme.ts: flip a switch here rather than hunting
|
|
* through components. The hue lives in styles/app.css because CSS is where it is used;
|
|
* it is repeated here only for the canvas, which cannot read a custom property. */
|
|
|
|
/** The turquoise lagoon. Music is 210, Hörbücher 55, "Mein Zimmer" 300. */
|
|
export const HUE = 175;
|
|
|
|
/** Frost the glass panels with a real backdrop blur. Looks like the first thing to cut
|
|
* on a weak GPU; on the Pi it measured five times worse with it off, because the blur is
|
|
* what gives each panel its own compositing layer. Same finding as the music app's
|
|
* matching toggle - see the table in ../lowPower.ts. */
|
|
export const SHOW_GLASS_BLUR = true;
|
|
|
|
/** The decorative rising bubbles behind everything. A dozen elements on a CSS transform
|
|
* loop; measured as noise on the Pi, so they stay. */
|
|
export const SHOW_BUBBLES = true;
|
|
|
|
/** The earned pets swimming behind every screen. The reward that is always in view - off
|
|
* only to rule it out when chasing a performance problem. */
|
|
export const SHOW_AQUARIUM_CREATURES = true;
|
|
|
|
/** Fade screens in on entry. */
|
|
export const ANIMATE_VIEW_TRANSITIONS = true;
|
|
|
|
/** Show the on-screen keyboard with the finger colours. "auto" fades it out key by key
|
|
* as each one is mastered - the scaffold that removes itself, which is the whole point
|
|
* of teaching touch typing rather than hunt-and-peck. */
|
|
export const KEYBOARD_HINT_DEFAULT: "auto" | "on" | "off" = "auto";
|
|
|
|
/** Read the target letters and words aloud. She is six and still learning to read; a
|
|
* missing reading skill must never block the typing skill. */
|
|
export const SPEECH_DEFAULT = true;
|
|
|
|
export const SOUND_DEFAULT = true;
|
|
|
|
/** How many letters one bubbles round sends up - matched to the dive mode's length so a
|
|
* mode swap is not also a difficulty swap. Dive-mode line length lives on the lesson
|
|
* itself (`lengthFor` in lib/curriculum.ts). */
|
|
export function bubbleCountFor(world: number): number {
|
|
return world === 1 ? 50 : 100;
|
|
}
|