Notes on building HTML5 games with Phaser 4, TypeScript and Vite.https://svitsgames.com/blog/en-gbhttps://svitsgames.com/blog/astro-scoped-styles-miss/https://svitsgames.com/blog/astro-scoped-styles-miss/Astro adds a scope id to every compound selector, so .foot__links a misses an anchor rendered by a child component. Ours fell from a 44px tap target to 16px.Tue, 04 Aug 2026 00:00:00 GMTastrocssaccessibilitydebugginghttps://svitsgames.com/blog/clip-path-filter-drop-shadow/https://svitsgames.com/blog/clip-path-filter-drop-shadow/CSS applies filter before clip-path, so a drop-shadow on a clipped element is generated and then clipped away. In Chrome it renders identically to no filter.Tue, 04 Aug 2026 00:00:00 GMTcssdesigndebugginghttps://svitsgames.com/blog/phaser-boot-splash/https://svitsgames.com/blog/phaser-boot-splash/A Phaser loading screen ships inside the bundle it would cover, so it can't paint until that bundle has. Measured — 72ms to an inline splash, 601ms to handover.Tue, 04 Aug 2026 00:00:00 GMTphasertypescriptviteperformancedebugginghttps://svitsgames.com/blog/vite-base-and-public-traps/https://svitsgames.com/blog/vite-base-and-public-traps/Vite emits root-absolute asset paths, which 404 from a portal subpath, and copies public/ wholesale, so 1.89 MB of flag-disabled audio ships anyway.Tue, 04 Aug 2026 00:00:00 GMTvitedeploymentdebugginghttps://svitsgames.com/blog/wcag-22-target-size/https://svitsgames.com/blog/wcag-22-target-size/A 15px breadcrumb link looks like a WCAG 2.2 SC 2.5.8 failure at 24x24. Measured, its exceptions rescue it — and the AAA criterion is the stricter test.Tue, 04 Aug 2026 00:00:00 GMTaccessibilitycssdebugginghttps://svitsgames.com/blog/phaser-4-orientation-resize/https://svitsgames.com/blog/phaser-4-orientation-resize/Phaser 4.1.0 measures the viewport inside its orientationchange handler, mid-rotation, then caches the correct rect — which blocks its own recovery path.Mon, 03 Aug 2026 00:00:00 GMTphasermobilescalingtypescriptdebugginghttps://svitsgames.com/blog/phaser-4-pointerup-outside/https://svitsgames.com/blog/phaser-4-pointerup-outside/Phaser routes an up event to pointerup only when pointer.upElement is the canvas. Miss pointerupoutside and a drag that leaves the canvas freezes, silently.Mon, 03 Aug 2026 00:00:00 GMTphaserinputtypescriptdebugginghttps://svitsgames.com/blog/phaser-4-scale-none-dpr/https://svitsgames.com/blog/phaser-4-scale-none-dpr/In Phaser 4.1.0, Scale.RESIZE overwrites gameSize with the parent's CSS-pixel size on every refresh, so the canvas can never track the device pixel ratio.Mon, 03 Aug 2026 00:00:00 GMTphaserscalingmobiletypescriptdebugginghttps://svitsgames.com/blog/phaser-4-scene-restart-state/https://svitsgames.com/blog/phaser-4-scene-restart-state/Phaser reuses the scene instance across restart(), so TypeScript field initializers run once while create() runs many times. Stale state accumulates.Mon, 03 Aug 2026 00:00:00 GMTphasertypescriptdebugginghttps://svitsgames.com/blog/phaser-4-text-font-shorthand/https://svitsgames.com/blog/phaser-4-text-font-shorthand/Phaser 4.1.0's setFont() parses a font string with split(' ') and keeps three tokens, so setFont('bold 24px Cook Line Font') sets the family to "Cook".Mon, 03 Aug 2026 00:00:00 GMTphasercssfontstypescriptdebugginghttps://svitsgames.com/blog/phaser-4-volume-setter/https://svitsgames.com/blog/phaser-4-volume-setter/In Phaser 4.1.0 the WebAudioSound volume setter looks dead because the write doesn't read back. Skip it and your music returns 3.13x too loud on resume.Sun, 02 Aug 2026 00:00:00 GMTphaseraudiotypescriptdebugging