olange / arcade Goto Github PK

Desired features

• Accessible to all, especially younger children TODO select specific features, such as tap accessibility
• A nice and fun combination of fonts DONE 24.01 OL picked VT323 and IBM Plex Sans
• Nice transitions between scenes TODO remember CSS clipping is quite useful & fun, next to PIXI.js filters

See also

• #11 Setup app shell

Actions

• Register darcade.app domain name DONE 19.01.2021 OL with Gandi
• Setup contact e-mail & redirection DONE 19.01.2021 OL redirection to @olange
• Setup DNS records for Firebase Hosting DONE 19.01.2021 OL see #15

See also

• #15 Setup Firebase project & hosting

Actions

• Create project darcade-app on Google Firebase DONE 19.01.2021 OL
• Setup darcade.app account on Google Analytics for the project DONE 19.01.2021 OL
• Setup Firebase Hosting DONE 19.01.2021 OL free Spark plan
• Link darcade.app domain with the hosting project DONE 19.01.2021 OL see #14
• Define default GCP resource location (region) for Cloud Storage and Firestore DONE 17.03.2021 OL selected regional location europe-west6 (Zürich/Switzerland)

See also

• #14 Domain name registration & setup

As a developer, I'd like to know how to name and locate «the things» of the game, so that we can talk to each other 😸 about things, that would not be just things anymore.

More precisely: choose terms to designate the parts of our ‹world space›, ‹screen space›, ‹game world› and ‹game boards› (we have coined four terms!); describe the topologies of the ‹world space› (spherical/‹lat,long,alt›), ‹screen space› (2D/pixels), ‹game world› (flat or spherical? circular? surface or volume?) and the ‹game boards› (hexgrids, but why?); and choose coordinate systems, matching each topology. Explain how the ‹World Space› is partitioned in a ‹Game World›; and how the later is partitioned in ‹Game Boards›. Choose tuples of letters, to designate components of coordinates.

Actions

• Topology & coordinate system for the ‹World Space› TODO 2D & 3D / physical world (lat/long/alt)
• Topology & coordinate system for the ‹Screen Space› TODO ultimately, 2D / pixels
• Topology & coordinate system for ‹Game World› TODO geodesic H3 / spherical world (flat? or with altitude?)
• Topology & coordinate system for ‹Game Boards› TODO Hexgrid (honeycomb) and … coordinate system; what do we need to locate: faces, edges and/or vertices? do we have altitude?
• Tuples of letters for every coordinate system TODO
• Explainer document: which problems do we need to solve? TODO
• Explainer document: why such topologies for the ‹Game World› and ‹Game Boards› TODO
• Explainer document: characteristics of each coordinate system TODO
• Explainer document: coordinate transformations TODO pipeline of the coordinate transformations
• Describe the terms used to designate parts of the ‹Game World› and ‹Game Boards› TODO
• Describe the topology of the ‹Game World› TODO
• Describe the topology of a ‹Game Board› TODO
• Define location of an origin game board in the ‹Game World› DONE 17.03 OL see comment below

Documents

• ObservableHQ › Hexagonal game board uses cube coordinates and ring algorithm to draw the board
• Wiki › Geometry of the game – Inspiration
• Wiki › Geometry of the game – Explainer
• Wiki › Geometry of the game – Coordinate systems

Reference articles

• Amit’s Thoughts on Grids Red Blob Games, Amit Patel, 09.01.2006

Actions

• Create an ‹app-game› component with a Pixi v5 canvas DONE 27.01 OL+RF
• Propagate resize of ‹app-game› component to its Pixi canvas TODO note this is different than window resize; we might want to use a Resize Observer, or propagate the resize event fired on the window
• Debounce the resize TODO avoid too much costly resizing of the canvas, especially in case of component resize driven by window being resized by the user
• Add a fullscreen button and have the layout adjust TODO see also Gōng-fu I/O en 10 min.
• Add a FPS display TODO voir jkanchelov/pixi-fps

References

• StackOverflow › Dynamically resize the pixi stage and it's contents on window resize and window load
• MDN › Window: resize event
  « […] It is still possible to set onresize attributes or use addEventListener() to set a handler on any element. However, resize events are only fired on the window object […] »
• CSSWG › Resize Observer Editor’s Draft, 11.11.2020
• Why Async iterators matters › slide «Wait, do we even need this?» Benjamin Gruenbaum, 08.04.2016

See also

• #11 Setup app shell

Desired features

• Progressive Web App
• Good Web Vital Metrics scores TODO define our performance budget
• WebComponents, PIXI.js & WebGL based application
• Avoid FOIT and minimise FOUT when loading fonts

Actions

• Basic bits & pieces DONE 26.01 OL+RF
  • charset & lang
  • favicon & robots.txt
  • dir=ltr
• Descriptive metadata
  • Twitter card
  • Dublin Core
  • link rel=canonical
• Optimizations
  • preconnect to external static resources (Google Fonts) DONE 24.01 OL
  • crossorigin attribute when preconnecting to external resources
  • preload web component definitions
• Desired fonts (see #12) DONE 24.01 OL
• Progressive Web App Manifest
  • link rel=manifest
  • meta name=theme-color
  • attributs mobile-web-app
  • attributs touch|Tile-icons
• Firebase services DONE 24.01 OL
• Flex layout & typographic grid
  • Choose & define box-sizing model CSS attribute at root
  • Set viewport correctly: width=min-fixed or device-width?
  • Use CSS variables for font size & line height
  • Grid layout
  • Prevent grid blowout
  • Define content-visibilty and overflow CSS properties where it matters to improve performance
• Fullbleed / Fullscreen layout (for the game)
• Promote installation of PWA (from the app)
• Smooth CSS transition on active elements after everything loaded TODO see onload remove class unresolved and may be apply a backdrop-filter frosted-glass effect
• ‹app-loading-progression› thin bar in header TODO informed by the pre-caching service worker

See also

• #13 Setup app root with WebGL/Pixi canvas
• #12 Design system

Desired features

• Target native JS module system first (ESM)
• Ability to easily integrate CJS & AMD modules
• Support for module assets (relative paths in modules & web components)
• Support for source maps
• Support for monorepo layout (many artefacts / packages in one repository)
• Instant startup & Hot-module replacement & fast refresh
• Unbundled/independent package deployment
• Clear separation of build pipeline and dev server
• Reasonably good feedback about errors and outcome of the build pipeline
• Optimizations such as bundling, treeshaking, minification for a late stage (production build)

Actions

• Study & decide
  • Study Parcel: look for desirable features DONE 25.01 OL Parcel image transformer (Sharp)
  • Study Snowpack DONE 25.01 OL
  • Study Vite DONE 22.01 OL
  • Study Modern Web Dev Server DONE 26.01 OL opiniated build of Storybook
  • Decide which build tool & dev server DONE 25.01 OL Snowpack 3 with esbuild and Babel plus NPM workspaces; see motivations
• Implement
  • Require Node engine version 14+, which has ES modules support out-of-the-box DONE 26.01
  • Firebase tools DONE 19.01 OL hosting & serve
  • Snowpack DONE 25–26.01 OL dev & build
    see implementation details, as well as the details of its integration with Firebase deploy hereafter
  • Babel: decorators & class properties to ease using decorators with Lit-Element DONE 26.01 OL see implementation details hereafter
• Improve afterthoughts
  • Enable HTTPS support in Snowpack TODO
    • Auto-generate self-signed certificate upon install TODO
    • Add secure: true to devOptions of Snowpack TODO
  • Code-style check & formatting with Prettier and shared config DONE 25.02 OL
  • Code-syntax & error check with ESLint and @babel/eslint-parser DONE 25.02 OL
  • Workbox: cache fonts & preload root custom elements WONTFIX 25.01 OL for the caching and preloading, we'll go with simple preload technique and browser cache for now; we'll come back to SW for background sync and streaming updates of the game state
• Document
  • Document toolchain DONE 26.01 OL yEd diagram wiki › Toolchain page with diagram

Reference articles

• Modern Web › Example projects › snowpack-lit

See also

• #18 Add ‹hexgrid› module to webapp & monorepo layout

Actions

• Create module @gongfuio/hexgrid in packages/hexgrid folder DONE 24.02 OL using Implementation of Hex Grids from Red Blob Games
• Setup monorepo layout with NPM workspace DONE 24.02 OL
• Setup Snowpack build pipeline to handle the @gongfuio/hexgrid dependency DONE 24.02 OL

Reference articles

• FredKSchott/snowpack#2707
• NPM › CLI › Using › Workspaces

See also

• #10 Setup toolchain & build system