toddmedema / electrify

Take Charge of the Power Market

Electrify

A mobile-friendly web game that teaches about the electricity markets in the style of a Tycoon game. Hosted at https://electrifygame.com

Getting Started

Setup

Requires NodeJS v21+. Check your version with node -v.

We recommend using NVM to install Node to make it easier to swap between and upgrade Node versions.

Windows: must be run within a Unix-like shell (such as Git Bash).

With Node.js installed, run the following from the root of the repository:

npm install

Development Workflow: Serve & watch

npm start

This runs the app at http://localhost:3000.

Run tests

npm test

This runs the unit tests defined in files with the .test.tsx extensio.

Release checklist

To release, you'll need to install and authenticate the aws cli.

Before deploying to production, run ./deploy.sh and have it deploy to beta. Then check that:

• basic functionality works (app loads, game starts, music plays)

Once functionality is verified, you can deploy prod with the same script.

Troubleshooting

If you're trying to debug the Redux store, it's wired up to use the Dev Tool extension for advanced state debugging: https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

electrify's Issues

Advanced forecast chart views: Energy supply by fuel source, stored energy

Help players understand where their current energy is coming from and anticipate the effects of their actions (e.g. do I have the spare energy storage capacity for the next year to be able to delete my old coal power plant?)

Right now, the timeline/forecast state doesn't capture this level of info (facility power and energy state per tick), so I need to refactor in some way...

1. I could just add this info to generateNewTimeline / TickPresentFutureType - it's only used in a few places (forecast view and calculating new months), and this data is already calculated as part of the pipeline in updateSupplyFacilitiesFinances, so it's just adding it to memory
2. Or, split out calculations for monthly updates vs forecast view - although this might be more memory efficient, it wouldn't save any CPU (since all this needs to be figured out to get to supply/demand), and would increase code duplication

1 seems right for this project, so going with that

Bug with updateSupplyFacilitiesFinances

Now that we can pause/resume facilities (#116), there's a noticeable bug where, if you pause and de-ramp to 0 a slow-ramping facility (e.g. nuclear), and then resume it, the forecast correctly shows it ramping back up - but in the actual now moment, it's magically ramped back up to full capacity!

I'm not sure why it's different between the forecast and the now moment, since I thought they both use the same updateSupply function... at the very least, this is a good excuse to modularize and unit test this function to make sure it's not an issue with, say, the min/max math

EDIT: Current suspect is the fact that it's editing the facilities in place when forecasting? But that doesn't really make sense, it looks like the forecast view calls generateNewTimeline, which deepClones the state...

Ohhh, togglePauseFacility and sellFacility do state.timeline = reforecastSupply(state);, skipping the deepClone in generateNewTimeline...

Integrate "Learn to Play" and "New Game" modes

Task: Eliminate the "Learn to Play" and "New Game" distinction

These can take the form of a flat level list where the player can freely interact with the early or later levels as desired.
The priority (first appearance) of the "Learn to Play" sections will drive players to interact with the tutorial levels first.

These can optionally be titled as "Special Scenario" or "Tutorial Scenarios" if appropriate, using a divider within the list for most visual appeal.

Quote from #45

As an "easy to say, hard to do" big one, I would suggest an overhaul which eliminates the "Learn to play" mode entirely. These should just be the first missions. Ready for my opinionated take? 😃

As a life-long gamer I found it kind of hard to immediately tell the mapping between the scenarios and the tutorials. I would ideally want to jump in feet first and learn on the ground, but I'm immediately faced with a choice I don't understand. When I regress to enter the tutorial, it's a lot of pop-up boxes that don't let me test my knowledge. There's currently a heavy weight of "tell don't play" which needs to be reversed to "play don't tell". A way that some game designers really make head-way in this space is to imagine that someone said "We need to ship this to [foreign country] next week and there's no budget to localize any text. Go." Knowing that you can't use any text, you'd start to swap out for symbols. Rendering pictorial/ideographic game prompts for any and all textual representations and slowly training on the meaning of those symbols is the means of eliminating these text prompts.

Not an easy idea, but I believe a low barrier to entry is critical for any game looking to get off the ground.

Add "Enhanced Geothermal" generator type

FIll out all the data required in the array of GENERATORS in facilities.tsx

1. RESEARCH: When does it unlock? Aka, when in reality is it expected to reach commercialization scale?
2. RESEARCH: What's the cost modeling?
3. Unlike regular geothermal, it can be installed anywhere, so no location constraints / no increasing the cost based on # already installed

Create different scenarios for profit-seeking vs public-good utilities

PART 1, DONE:

Right now, there's a "marketing" slider in finances that controls how fast your customer base grows.

In reality, that's only a thing if you're profit-seeking.

If you're a public-good utility, your customer base grows (or shrinks) outside of your control (although we can keep the same blackouts-reduce-customers logic). And, if you're public-good, you aren't trying to maximize profit.

As such, we should split scenarios into these two types, with different mechanisms for customer base growth AND scoring:

1. Investor-owned: customer base controlled by your marketing spending, scored based on ending cash in bank
2. Publicly-owned: customer base changes randomly (hide marketing slider), scored based on availability (which we already do, penalty for blackouts)

The type of scenario, and how you're scored, should be added to the scenarios detail page

PART 2, DONE:

• Add a score multiplier to higher difficulties, and an info icon/modal on game detail page explaining the impacts of difficulty level

PART 3:

• In public-good, add a slider for the rate you're charging people, and you get more points the lower your average $/kWh (the tradeoff being that you can't afford to build as much and might go bankrupt) - currently hard coded as dollarsPerWh in game.tsx
• (don't show rate slider in for-profit, their lever is marketing spend)

Add event: Fires

1. TODO DESIGN UI for showing ongoing events - probably a little notification icon that you can expand to get more details
2. TODO RESEARCH What's the cause of fires, distilled into simplified simulation logic? E.g. for scenarios in these areas (California, Australia, etc), drier winter + hotter summer = higher % chance of event, and higher magnitude of damage

• should we also introduce the idea of an ongoing maintenance budget that players control, and underfunding maintenance slowly increases chance of this too?

4. TODO discuss how to model impacts, such as

• loss of revenue / demand due to cutting off part of customer base
• maintenance / repair / damages costs (perhaps differentiating between a natural-caused wildfire, and one caused by your lack of maintenance, where you would then also owe huge $$$ damages)

Research: per-location limits on hydro/pumped hydro/geothermal

1. For each location, figure out what the plausible locations and sizes for hydro dams, pumped hydro, and geothermal are, and add to the data set
2. Update UI for building that type of facility so that 1. You can see what slots are still available, and 2. You can only build in one of those slots/not freeform sizing (well, you can build smaller than the slot max, but not bigger)
3. Selling a facility on a slot should NOT free it up again, because that facility will continue to operate. Far future feature, we could add a new option when selling, to pay to demolish it instead of earning money to sell it, which would free up that slot.

Inspiration https://www.canarymedia.com/articles/geothermal/geothermal-is-the-hottest-thing-in-clean-energy-heres-why?_hsmi=299632946&utm_source=pocket_saves

Incorporate transmission as a concept

1. Lets say for simplicity that you as the power company have a monopoly on your area, so that we can abstract away the challenges inside your zone
2. Then, you have zones around you (it'd be awesome if each scenario grabbed historically and locally accurate transmission info), perhaps defined as 1-6 connected regions, with a set amount of transmission capacity
3. Then, your levers as a player are: (perhaps this is a new tab)

Buy and sell electricity with each region

Each region should be willing to either buy or sell a certain quantity of electricity at a certain price (or, more accurately, a curve, e.g. the more you buy/sell, the less valuable it becomes).

This will also be constrained by transmission infrastructure, which is not a Boolean / hard limit - the hotter the temperature, the less current lines can support due to sagging (TODO research what's the drop, ideally simplified to a -x% per degree C above y temperature)

TODO: BIG UI question: How to do this? Buying/selling electricity is an ongoing concept, so it's not a page you can go to and click "sell" when you have spare capacity. It's almost like you need a rules engine, sell to the highest buyer when you have spare capacity, buy from the lowest seller when you have a capacity gap... But then players will definitely want tools to debug (for example, seeing how much of their current supply/demand/income/cost is going to/from trading, forecasts on trading pricing and availability, indications when your trading is constrained by transmission capacity)

TODO: research simplified factors of how we can calculate adjacent region's quantity and price

Upgrade transmission infrastructure

Like generation facilities, should have a sliding scale with how much capacity you'd like to add, and the resulting cost + time to build.

UI can probably be similar to existing list of generators; perhaps there's a high level list of all regions, then when you click one region, you see the specific transmission lines (having the concept of specific lines would then allow us, for example, to have events where a specific line goes out of commission)

TODO: research needed on factors that influence the cost and timeframes for transmission construction

Upgrade to Firebase v9

https://firebase.google.com/docs/web/modular-upgrade

Help improve the tutorials

If you're new to the game, try going through the tutorials and let me know any and all thoughts about how I can improve them!

Save/load games

0. Utilize random seed #78
1. Store game state to (local storage? firebase?), and re-load to exact same state
2. v2: Import/export JSON blob of game state so you can share saves
3. v3: Store and view replay: Initial random seed + list of decisions made + current state (and then replay you just re-watch the player actions at their realtime)

Improve hydroelectric modeling

Right now I base it purely on local rain data, but there are two other important factors:

1. Upstream rain data (pretty instant) and snow cover / snow melt (gains during winter, melts slowly over summer)
2. Water rights (e.g. how much of the water has to be released or saved for agriculture irrigation and drinking water)

Would be awesome to update the availability modeling to incorporate #1 (if you're going to work on this, let me know and I can procure some additional historic weather data). It would be important to add rainfall + snowpack information in the Forecasts -> Weather chart.

Additionally, one could consider available viable hydro-electric / pumped hydro locations per-scenario. So, rather than any other type of generator that can be built in any quantity + size, hydro, you only have a few slots you can use, each with a maximum size.

TODO: Research, should we update simulation modeling of pumped hydro storage to also act like a dam, in that it gains capacity from rain and snow melt?

V2: Would be even more awesome, as follow-up work, to create a scenario in the west/mid-west, where you have to deal with the shrinking water rights situation.

Tip: leverage Git LFS to separate source-code from media

Hello!
I see that media has crept into the repository itself, causing the clone to be very large and slow.

https://git-lfs.com/ and other solutions can help to reduce the size back down so that building can occur with or without all media assets, and permit flexible changes to the media without growing the repo to absurd proportions.

A git repo of this size should generally be under a megabyte, but the current clone is ~170MB and that'll only get worse.

Fix Steps

1. Set up a Git LFS endpoint where media can go
2. Migrate all media to Git LFS
3. Use https://github.com/newren/git-filter-repo to prune all objects from the entire git history, not just the current commit
4. Force push the smaller target back, potentially also eliminating all branches on the old base

This is a good step to take before going too far or including other collaborators. While it's just yourself coding on it, this is effortless to do. As soon as someone else begins coding, you've lost a lot of the ability to make this change.

Therefore, this is somewhat of an "urgent fix needed". Happy to help with further tips where you need them!

Map view (Art, design and programming)

1. Visually design maps for each scenario
2. How do the maps show? How do they change over time?
3. Build facilities by dragging them onto the map (but still have list view)
4. v2: Transmission lines, construction and limitations

Bug: Wind power doesn't seem to sufficient power

That's because my weather data is from cities at low altitude, but wind turbines are installed at higher altitudes on windy hills near cities.

The most accurate solution would be to find 40 year historic data for wind speeds that's on the outskirts of the locations, and at the altitude that the turbines operate... but no dice.

Checking some weather maps with live weather data at ground level at city vs turbine height at outskirts, I'm seeing 50-150% higher winds at turbine locations, e.g. from https://www.camarilloweather.com/wxglobalwind.php

Although, interestingly, when I use the existing 40 year weather data I have in the game repo to compare wind speed in SF vs "CAmountains" (alas I don't remember the exact location of that file), it's actually about 20% slower in "the mountains"

Regardless, wind turbines in the game aren't producing nearly as much as they would in real life. So, update game.tsx wind output calculation with an additional modifier. After some experimentation, ~2x multiplier seems to fit expectation.

Migrate from tslint to eslint

Looks like this will first require upgrading node to v18 or 20+

tslint is apparently deprecated in favor of eslint now. Hopefully not much is required / configs are likely quite similar

migration guide: https://code.visualstudio.com/api/advanced-topics/tslint-eslint-migration

And then run the linter on the whole repo, e.g. https://stackoverflow.com/questions/41702815/how-to-make-visual-studio-code-check-entire-project-for-errors

Update node version to latest

I built the MVP game 5 years ago (how time flies!) and it still works and can be developed on, but it's probably a good idea to update dependencies / modernize it...

Updating the node version in particular to the latest will drive a lot of other package updates

Make scenarios more engaging (mostly art + copywriting)

Ideas:

• Add a clearer indication of win/lose conditions on scenarios detail page, perhaps woven into the scenario text description (technically it's always "survive for the whole timeframe")
  • Programming opportunity: Add other scenario-specific win/lose conditions
• Add a cool visual header image on each scenario's detail page, keeping with the existing visual style of line drawing with 1-2 color tones.

Fix & re-enable custom game creation

In NewGame.tsx, it's commented out because it's broken. Basically, the ability to set tons of the starting parameters for scenarios.

Consider removing hotkey tips for mobile users

It seems we can detect mobile users via src/Globals.tsx::export function isSmallScreen(), so it could be a good idea to avoid printing out tips about hotkeys (e.g. first blurb on Tutorial 4) if they are on mobile, as they probably aren't using a keyboard.

This issue may be more of a discussion, but we don't have discussions on for the repo at the current time 😄

Solar + wind's build cost and expected output should reflect local weather forecast

It's currently based on a single hardcoded capacity factor, obviously not correct

1. DONE: Update solar output calculation in updateSupplyFacilitiesFinances in Game.tsx to account for lat/long (add lat/long to LOCATIONS in constants) AND month of year...
2. Build facilities menu should reflect full output calculation (incl weather and lat long) in average output and $/MWh for wind + solar

For simplicity in determining "average output", can use the weather for the full upcoming year as a model year, e.g. don't need to simulate/forecast every year of service life uniquely

LFS or remove `AWSCLIV2.pkg`

It looks like da2b830 might have introduced a large blob (38M) into the raw git repo.
It looks like an install package for the AWS CLI? This should definitely be provisioned by whatever infra is installing outside of the repo, similar to #50

We can LFS it or do an amended rm and force push, so this'll take admin perms 😃
Happy to meet to rework the commit tree if desired!

Improve social & replayability mechanics

Would be great to incorporate more modern game design techniques to boost replayability and how much people want to share the game with their friends.

Some ideas:

• Achievements: encourage folks to log in, store with their account. Example achievements: Complete the first tutorial, complete all tutorials, win each of the scenarios, win at each difficulty level
• Improve leaderboard: Let people enter username, show names on the board, celebrate scores at end of each game
• Perhaps with the above, there's a new main menu item for achievements, that shows your scores, earned badges, and progress towards unearned badges? (like Steam achievements page)
• On the scenarios list page, if you're logged in, indicate which ones you have/haven't played yet (perhaps by showing your best score vs the global high score?)

Reduce textual learning to an absolute minimum by increasing symbolic teaching

Task: extend the game's teach & reach by turning text into play

This will make the game super localizable, as well.
This will involve the creation of whatever training levels or special scenarios are necessary to train up the symbolic elements to avoid needing to front- or over-load the player with information when first learning.
Of special note is that this flow is most relevant for new-players to increase the game's potential reach and ability to teach. Once a player has learned the symbolic systems, this change doesn't matter; it's invisible to expert players.

Quote from #45

As an "easy to say, hard to do" big one, I would suggest an overhaul which eliminates the "Learn to play" mode entirely. These should just be the first missions. Ready for my opinionated take? 😃

As a life-long gamer I found it kind of hard to immediately tell the mapping between the scenarios and the tutorials. I would ideally want to jump in feet first and learn on the ground, but I'm immediately faced with a choice I don't understand. When I regress to enter the tutorial, it's a lot of pop-up boxes that don't let me test my knowledge. There's currently a heavy weight of "tell don't play" which needs to be reversed to "play don't tell". A way that some game designers really make head-way in this space is to imagine that someone said "We need to ship this to [foreign country] next week and there's no budget to localize any text. Go." Knowing that you can't use any text, you'd start to swap out for symbols. Rendering pictorial/ideographic game prompts for any and all textual representations and slowly training on the meaning of those symbols is the means of eliminating these text prompts.

Not an easy idea, but I believe a low barrier to entry is critical for any game looking to get off the ground.

Improve generating future weather

forecastNextDay in weather.tsx could use a lot of improvements, such as

• factor in the location's weather history and seasonality, e.g. more clouds and wind in winter, higher temperature range in summer
• factor in player's emissions, i.e. more emissions = larger std deviation + positive bias + min/max range for temperature

Note that all locations have 40 years of /historic/ data (in public/data/WeatherRaw csv files) - since each location has all of that historic data, it may be smart to use that to determine the above, rather than attempting to code a different weather algorithm for each location (not scalable)

Migrate from awesome-typescript-loader (deprecated) to ts-loader

https://github.com/TypeStrong/ts-loader (use ts-loader 8.x if you need webpack 4 support, which is what we're currently using)

Spacebar and 0 keyboard shortcuts should also pause

Currently only the back-tick (`) key pauses the game, but spacebar and 0 are also intuitive shortcuts for time control. Easy and fast way to improve usability

Update technologies and economics based on the latest state of world

The technologies and economics were last updated in 2020. It would be helpful to go through the latest government reports and update economics. Also, if there are any new technologies being deployed at commercial scale, could add them too! (NOT anything that's not being deployed commercially yet, e.g. no fusion)

Generator economics: https://github.com/toddmedema/electrify/blob/master/src/Facilities.tsx

I believe at minimum I'm missing Trash-to-power and biomass.
(which would also need kgCO2ePerBTU estimates here https://github.com/toddmedema/electrify/blob/master/src/Constants.tsx )

UI: Add desktop-sized view

On larger screens, it would be great to be able to see more! But how, and what?

Currently there's a max-width: 650px on body.

Ideally we keep the core UI/interaction as similar as possible to avoid forks in the code, so maybe this is as simple as showing 2-3 tabs side by side if enough space? E.g. if width > 1000, show two columns and change max width to 1300? (650x2). But then how do you set which side is showing which view...

What about a super generic 2d-grid setup, like https://github.com/johnwalley/allotment, perhaps in a horizontal view https://allotment-storybook.netlify.app/?path=/story/basic--horizontal

Audio bug: resets position in music when you enter/leave tab

Adjust `Yes/No` user interface semantics on title screen `Enable Music` choice

This looks a bit like a radio button set where the Yes is the default selection and hitting play will enable the music.
In the case, it's actually that you need to hit yes.

Suggested Fix

Remove the no button, as it's default and will imply that no music will occur if Yes is not tapped

Add more internal management details to facilities

When you build an individual facility, it would be awesome to be able to "dive in" to it:

1. Adding and upgrading individual generator units (e.g. how a nuclear plant can have multiple reactors, and you could install an additional generator 10 years after building original facility)
2. Each generator has its own maintenance timer?

Improve visual design / engagement

Right now it's pretty much "spreadsheet the game". Would love any help / ideas on how to make it more visually interesting to appeal to a more mainstream audience!

Fix search icon in the top bar of the manual not working

Right now, clicking on it takes you back to the main menu
Instead, it should show a text input that's automatically focused, and typing should hide manual entries except those that have the word in their title or text.

Bonus objective: Add synonyms (or tags or such) for manual entries, e.g. so that searching for LCOE still shows Levelized Cost of Energy

turn supply by fuel forecast chart into a more typical stacked / steam chart

Music & sounds play on Options page even when disabled

Steps

1. Click "No" on enable music
2. Click Options

Actual Result

Music and sound plays

Expected Result

No music plays; the choice is remembered.

Additional Notes

You can navigate to another tab and back to recreate the bug without restarting

Make INTEREST_RATE_YEARLY and INFLATION dynamic, simulated values

The interest rate for a company is a combination of two factors:

1. Macroeconomic conditions and prime interest rate (download and use historic monthly prime rates back to 1980 from something like https://www.jpmorganchase.com/about/our-business/historical-prime-rate, and then in the future, it should range between 3.25% and 15%, biased towards 5%, and moving in large swings and then stabilizing, like a sine curve that rests at the top and bottom, at a random 6-12 year cadence)
2. Also better-simulate inflation, and the interaction between the two (e.g. high growth leads to high inflation leads to high interest rates, which then inverts the cycle, on a 8-12 year cadence)
3. The company's trustworthiness (perhaps a reasonable proxy would be to blend profit margin as a % of revenue and cash on hand). A perfectly trustworthy company would have, say, 10%+ of its net worth as liquid cash, and a profit margin of 10%+, and would pay just the prime rate. For every X point either is lower, the company should pay 5X% of prime, e.g. if they're at 0% and 5%, they have 15 "points" x 5 = 60% higher than prime (so if Prime were 5%, they'd pay 8%). Note that profit margin can go negative, and it should accumulate further points if so.

Simulating it means it will need to be calculated as part of the timeline/monthlyHistory

Then we can track it as part of timeline / history and add it to the Finances tab, as a row in the expanded table (perhaps just below "loan interest") + a metric you can chart

Consideration: This will, on average, make the game more difficult, given that the current rate is hard-coded at 4%. So, rebalance scenarios by boosting all their starting cash by 10% (in Scenarios.tsx)

Add panel: Policy levers

Perhaps all policies are sliders, where the middle means nothing, and going farther on either side costs more and has marginally less and less impact (although some policies could be either a boolean checkbox, or one-sided slider, e.g. Time of Use Rates)

Specific policy ideas:

1. Subsidize heat pumps, or make permitting more complex - costs money to subsidize, but increased adoption reduces peak energy load from heating in winter
2. Subsidize solar, or make permitting more complex - costs money to subsidize, reduces consumer demand based on solar availability
3. Time of Use Rates - slightly pushes consumer demand to hours that you specify
4. Demand Response technologies - costs money to implement; the more cumulative money you spend, the larger % of demand/timing you control (would need some new UI work for managing the Demand Response once implemented)
5. TODO: Brainstorm what other levers utilities have here - subsidizing energy efficiency upgrades?

Add tooltips to charts

https://commerce.nearform.com/open-source/victory/guides/tooltips

A quick test on mobile shows that it also works okay and doesn't crash performance, although there's a small bug where lifting your finger doesn't remove the tooltip

Update deprecated Material UI v4 functions -> v5

There's a helpful guide here https://mui.com/material-ui/migration/migration-v4/#update-material-ui-packages

Should be pretty fast

Abstract variables from deploy.sh

It would be good to have a .env file that could store some of the key variables.

I'm a bit of a BASH enthusiast, and I'm a big fan of this sort of default syntax where any good default exists:

export MYVAL=${MYVAL:-whatever}

If the user passes in an environment variable for MYVAL, it'll take it, but otherwise it's whatever.

Add events: Damage from Hail, Flooding, Freezing

1. Hail can damage PV panels https://www.linkedin.com/feed/update/urn:li:activity:7178704710630076417/ - cost would get folded into insurance premiums, but they'd still be offline for repairs for XXX time
2. Freezing can block natural gas pipelines, IF you're in a warm area and IF you don't build or upgrade your facilities to have pipe heaters (which cost upfront + maintenance) (those sort of options should be part of the build by default in cold areas)

TO RESEARCH: How should we think about insurance costs? Would it be a flat "per panel per year" rate that goes up with inflation, or would it go up faster for you if you have lots of extreme weather events? (It could be an interesting simulation mechanic that the more CO2 you emit -> the more extreme weather events you experience -> the faster your insurance rates go up)

TO RESEARCH: What else is damaged by extreme weather? E.g. extreme hot or cold?

Nope: Flooding damage. May only be doable with flood maps, which are either computationally difficult or depend on proprietary data. Simplified to the already true "hydro and pumped storage cannot exceed their capacity no matter how much rain falls"

improve randomness: store + use seed

1. When you start a game, store a seed
2. Use that seed for all randomness calls
3. Then, could have seed as an input for #76

Have settings page version pull from package.json

This used to be done with a webpack build script, but that got ripped out in #77

Hopefully there's a way to do it within the create-react-app framework, I'd like to avoid having to eject and manage everything ourselves

Ability to pause facilities

Essentially lets you simulate deleting it

Add generator type: Offshore wind

1. TO RESEARCH: Main factors that determine cost
2. ART: Make a variant of wind icon with waves at the base
3. Download historic offshore wind speeds for locations near the coast and merge into existing weather data as new offshore wind speed column, from https://openweathermap.org/history-bulk
4. Only show in generator build list if the location has offshore wind speed
5. Add "Wind, Offshore (Kph)" to weather forecast graph, if location has it

Good inspiration: https://youtu.be/MuwNBtKpjhQ?si=VT0Gq-MxLLsvBnKa

Game speed should not be based on CPU speed

For MVP, I set the game speed based on timeout between ticks in CONSTANTS.tsx

export const TICK_MS = {
  PAUSED: 250,
  SLOW: 100,
  NORMAL: 40,
  FAST: 1,
};

But this will lead to an inconsistent experience across devices. Ideally these times would represent time per frame, and the timeout would be set based on how long the previous frame took to calculate+render.

For reference, on an M1 Macbook Pro, each render on Facilities page took 16ms, and simulation steps took between 1-18ms depending on if it was generating a new month — and would presumably be much slower on a slower device.

Example calculation: 100ms frame timing on slow - 17ms to render and calculate = timer set for 83ms