For some reason, the height: 50% etc declarations in the display section are now being ignored.
The only possible theory is a bug around the parents being flex now, as current prod does not have this issue.
A quick test in Safari devtools says it should work to use flex 2/1.

Wasn't sure about this one since it's extra saving of state, but ultimately, DDR itself does navigate you back to the last song you picked AND remembers your previous speedmod.

*Note: this gives the impression of already being implemented on iOS but that's due to their new arbitrary state save/load feature on PWAs

Including use of beforeinstallprompt on Chromium-based browsers to make the bottom bar disappear that usually pops up automatically.
Current thought is to add this to the menu as a floating bar at the bottom

For iOS, Material Design now has the needed icons for Share and Add
https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Aios_share
https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Aadd_box

Follow patterns from https://web.dev/promote-install/

The new Trusted Web Activity APIs allow us to offer a shell APK on Google Play that basically requests a browser on the user's device to open the app in full screen (if possible), otherwise as a custom tab, and finally with a regular browser UI.
Server side, Digital Asset Links must be set up.
Client side, a new Android Studio project must be started based on svgomg-twa with changed meta-data and icon.
The project and the library it depends on are not yet stable, so waiting on this ticket is not a loss, however as of opening it's probably good enough.

See also: https://medium.com/@firt/google-play-store-now-open-for-progressive-web-apps-ec6f3c6ff3cc

https://developer.mozilla.org/en-US/docs/Web/Manifest/icons

Maskable icons allow providing OSs icons that match their style, as opposed to the currently fixed shapes that we send at the moment.
Browser support has not yet been established (Chrome 75?).

As opposed to 2-layered Android Adaptive Icons, the image format is more like iOS/Google Play (square that will get clipped with a safe zone).

We will have to make a choice and go back to uniform manifest works-for-both-modes color, dynamic theme-color is just not working out.

Firefox was already ignoring the page theme-color as well.

iOS 12.2 standalone (home screen) web apps will restore state for who-knows-how-long, so a force reload option should be added to the menu so that users can force-reload the app.
Not sure if this helps provide updates.

Most likely fix is a touchstart handler with preventDefault on these elements, as active keys already have.
The good news is this is unlikely to happen since the user is mostly simply tapping active keys, but if triggered could be difficult to get rid of if the cause is not understood.

An issue has popped up on iOS 14 where rotating to landscape and back robs the UI of the bottom 20px (causes a weird "scroll" despite body being height: 100%).
The potential cause is opting into viewport-fit=cover, but I don't want to give up those enhancements.
The "hack" is to set body to height: 100vh while using the black-translucent iOS status bar option.
To keep things simple, (display-mode: standalone) and env(safe-area-inset-top) are used purely in CSS, as opposed to old JS hacks.

However, this means the following are missing on iOS versions that I still plan to keep supporting:

iOS 10.3

• (display-mode: standalone) (added in iOS 13)
• env(safe-area-inset-top) (added in iOS 11.1)
• max() (added in iOS 11.1, pairs with env())

iOS 12.4

• (display-mode: standalone)
  Note: iOS 11 and 13 are not considered due to all iOS 11 and 13 devices being upgradable to 12 and 14 respectively.

Goal: find out how severe the visual regression is and how simply it can be worked around on each version.
Workarounds should be clearly marked as discardable once the version becomes unsupported.

Hypothesis: iOS 12.4 will be missing the bottom 20px but will otherwise be ok thanks to env() support.
iOS 10.3 will have the whole UI shifted upward into the status bar (now invisible due to white on white).

Currently:

• Chrome WebAPK not picking up 512x512 for splash screen
• Firefox picking up the apple-touch-icon instead of the 192x192 as icon and in manifest

Some timing issues have plagued that choice; the link within the About dialog should suffice

TWA detection is crucial to ensure separate compliance with Google Play policies (as of 9/14, the main experience is compliant, although upcoming features may not be so).
The detection code using document.referrer has broken in the past due to Google Chrome changes (see below).
The referrer value also seems to be blank when Custom Tabs are fallen back to for any reason, as well as on Firefox Fenix.

Changes proposed:

• Use query parameter or hash value exclusive to the launch URL of the TWA
  • If using query parameter, service worker needs to be updated to match this in the cache
• When parameter detected, store in sessionStorage for continuity in case of navigation
  • Investigate whether stripping it immediately using replaceState keeps the entries added to the supporting browser's history clean, otherwise users that later navigate to the webapp in their browsers will get the TWA experience due to the appended parameters

Concept: ability to select from pre-made color palettes to theme the calculator display, keypad, and dialogs

Implementation ideas:

• Show using Menu module with stub script
• Don't load full Theme Picker script until user selects the menu item
• Use stub to load user's theme selection on page load without loading the whole picker UI
• Use CSS Variables and classes to change the colors
• All browsers that we currently target due to fetch and NodeList.forEach support CSS Variables, so no fallback CSS is required

Using svgomg-twa as a TWA template has been deprecated in favor of the new bubblewrap tool, which also brings in various desirable benefits:

• Reduced APK size
• Enhanced control over navigation bar color
• Imports data from PWA manifest and generates APK from a manifest (as opposed to merging together template branches)

Steps:

• Generate new twa/ folder and set up TWA manifest within it
• Bring in Release Notes kept in svgomg-twa repo as twa/CHANGELOG.md and storeAssets/release-notes.txt (or similar)
• Attach prior TWA release APKs to matching DDR Calc Release Notes in this repo
• Build, validate, and publish new generated TWA
• Archive svgomg-twa repo

Otherwise there's no way to share the app after installing it (well, mostly on iOS. Android browsers offer a share notification. Pretty hidden though)

An editable player card UI could be offered that lets users keep a local copy of their nickname, DDR code, and maybe a small photo (stored locally via JS APIs).

Capture via proxy script to GA Measurement API so we can control what/how data is collected and avoid PII

• Visits
• Unique users (via random UUID)
• Country (via CloudFlare header and thus don't have to send any IP address info)
• Language (for potential future i18n support)
• User-agent (for OSs to care about)
• Viewport resolution (for screen sizes to care about)
• Device resolution (how big are browser UIs / are users using split screen mode)
• Whether the visit is as a homescreen webapp (navigator.standalone / media query)

Privacy Policy must be set up concurrently

Cause: this is a simple race condition due to the fact the page loads with the menuOpen: true state, but the various modules have not yet completely populated the menu.

Solution: menu DOM will have to be re-built whenever addMenuItem is called, not just when the menu is opened. Optimization idea: re-build only if if called while the menu is opened.

Very whimsical, but "DDR Calc" looks rather short on the splash screen after all...

iPhone 12 models introduce new viewport sizes.
iPhone 12 mini shares the viewport size with the SE 2/8, but not the device pixel ratio.

Resources:

• https://firt.dev/notes/viewports/
• https://www.apple.com/iphone/compare/?device1=iphone12promax&device2=iphone12&device3=iphone12mini

Note: the 12 and 12 Pro have identical screen resolutions.

AppScope is an "app store" for progressive web apps.

Steps to reproduce (Android/iOS):

• Hold down a keypad key
• Lock the phone
• Unlock the phone

Expected result: key no longer appears held
Actual result: key stays in "pressed" visual state until touched again

On Android 4.x, Roboto Light is available, but gated behind the "sans-serif-light" font family alias.
On newer Android, this alias maps to Roboto + font-weight 300 (what we're doing today), so no harm there.
Curious whether any more obscure devices would be affected by picking this alias, since it appears to be non-standard.

Separately, "Roboto Light" can be added to the stack for e.g. devices where the font has been installed but is not a default.

Plan: use CSS variables for the font stack, prepend the light ones above for the light stack, add to items that use font-weight 300.
Keep a bare-bones sans-serif fallback for showing the "Unsupported browser" dialog.

Then use Object.entries() to produce the Map objects. Should simplify the TS declarations as well.

Set up a fast-dismissing quick-test for a "browser update required" dialog.
The test can be guided by which feature is being used which requires the newest browser.
Currently, it's NodeList.forEach

Currently, users in dark mode on iOS will be blinded by the splash screens based on the original light theme.
Since the link tags use media queries, there's a chance we can specify dark mode specific splash screens.
If not, we should consider defaulting to them.

Start by migrating release notes into it. Will make tracking changes easier going forward.

Good news is CloudFlare is already auto-minifying the JS/CSS when their cache is hit, and service workers mean users only have to download the assets once per update.

Idea:
Have the shape of the calculator load (the 3 backgrounds: display, keypad, side keypad), then essentially the calculator components fade into it once loaded.

Capturing the screen:
Use Chrome devtools to gather the differently sized shots for the devices, after deleting menu items and setting keys to 0 opacity.

Implementation:
https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210 is the real deal!!!

Not strictly necessary as code currently ensures BPM input is bound between 0-999 and speed mods are within the supported game options.

Can be worked on separately or in tandem to #14
Phase 1: convert key UI colors to CSS variables (same as for #14)
Phase 2: use the media query prefers-color-scheme to toggle the dark mode CSS
Phase 3: offer a UI for toggling manually, since mobile browser support as of writing this ticket is currently only Firefox 67/Chrome 76 (Android) and Safari 13 (iOS)
Phase 4 (optional): integrate UI into #14 UI (if this one is worked on first, otherwise do so as part of phase 3)

The keypad is already pretty dark, and it's possible #14 will be limited to coloring the keypad, so this one could handle coloring the display and supplementary UIs (game picker, dialogs, etc)

As per https://internetingishard.com/html-and-css/css-box-model/, apparently I've been sleeping on when we started using border-box, and didn't realize CSS frameworks I've used before incorporate it.

Recommended box model reset:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Preliminary testing shows it will only require re-tweaking the About box.

Double-tap on buttons on iOS is causing zoom-in.
Solution: need to set passive: false and call event.preventDefault() on the touchstart events.
Bonus: set touch-action: none to prevent pinch zoom.

Currently, even after a new service worker and assets are picked up, the automatic switchover does not happen until the site is fully closed and re-opened.
In some scenarios (mainly iOS 12.2 with state restoration), this could take a longer time to happen (unknown).

Use available APIs and provide a link in about or a menu item for applying the update.
Maybe a top header, but there might not be enough height and it could be too intrusive.

Currently, buttons support only tap and hold actions.
Currently, only the DEL button uses hold (to clear the whole input).

For one-handed mode, users may expect it to behave like the game, where after a pause it starts repeating.

Cause: games.js is doing a Boolean() cast on a 'true'/'false' string from localStorage

However, Boolean('false') === true

Workaround: use JSON.parse()

Using Vibration API
Use a vibration sequence (and cancel it on touchend) to provide a follow-up vibration during long-press.

Firefox 48 is not officially supported but the fix is simple.
Currently, the height for the display breaks since Firefox 48 doesn't support env() (support added in Firefox 68) and the height is set as: calc(30% + var(--safe-area-inset-top)) which resolves to using env().
Solution:

• Set height to 30%
• Set margin-top for display to the inset top
• Undo the inner top paddings for inset top

Should be fine, as display's background is transparent, and no other elements in it need to be under the inset.

Target BPM mode presents the nearest below and above speed mods and the resulting BPM.
This proposal is to compare the resulting BPMs, and bold the line that is closer in value to the user's preferred speed.

Search UI and DB of "???" BPM songs, ready to insert into the calculator

Caused since manifest theme color was set to this color to attempt to have a uniform color splash screen.
Having the actual <meta theme-color=white> or setting it with JS right away is not taking effect (as opposed to setting it to black).

Only viable option at this time is to set the manifest theme color back to white.
Firefox home-screen PWA mode uses the manifest theme color and ignores <meta theme-color> so switching the manifest color gives us a static white which clashes with the Dark theme.

Missing items from it:
A20 PLUS in game picker
Underline for active element

Reproduced on iPhone 5s with iOS 12.5
Regression since version 4.0.0
Does not impact functionality, and this version of iOS is notoriously buggy with not playing friendly with the debugger, so this is low priority

Not an issue on iPhone 7 with iOS 15