When selecting a card, transition the perspective transform so the card is shown flat on the screen. This could look like the card is lifted up from the card stack.

As a bonus, a blurred background could possibly add some more to the effect.

maybe some decisions have to be made very quickly(say 10~15 secs?), while others are not (1 min?)

Presenting this data could hopefully help people in the movement (and also politicians) understand the challenges and trade offs.

By using anonymized data, personal integrity would not be affected.

• Use accessible colors
• They also need to be more interesting to make the game look more alive

Based on ideas from #25, here are some practical steps to take:

1. Add new types of world state to TypeScript data descriptions
2. Add new types of world state to DEFAULT_GAME_WORLD to ensure the state is registered with the game.
3. Add some cards that use the new world state. Make sure they update.
4. Show view with detailed game world state for a category when toggled in the top menu bar. Possibly use a router to control what views should be shown.

This would greatly improve our ability to explain and show how the game works, which would result in better help from others who want to contribute content.

Goals:

• Add 10-15 cards
• Add 2 events (for example two different endgame events to trigger game restart)
• Add 4-5 eventCards

This depends on:

• Decide which variables should be in the game world state

I don't really understand why you want to trigger another state change after setting the updated world. This can easily be done using a single setState. Is there reason for this?

I would prefer the following implementation:
https://github.com/Muthaias/swipeforfuture.com/blob/29e8169213f2b50d71c7037623a212d13da29324/src/components/Game.js#L108

I'll make a merge request when my previous merge request has been considered.

• Support complex calculations and value dependencies

• Values should have dependencies

• Values can be fixed or dynamic

  • Fixed values only updates from card logic
  • Dynamic values uses its depencencies to calculate a value

• Values can be exposed or hidden

  • Hidden values are only used for logic and calculations
  • Exposed values should have an icon and will be visible in the UI

Implementation

• Generic or specific implementation?
• Atleast we might want to consider creating a generic Interface for the Game

interface GameCalculations {
    exposedValues: {
        id: string
        icon: string
        value: number
    }[]
    values: {
        id: string
        value: number
    }
    flags: {
        id: string
        value: boolean
    }
    getValue(id: string): number
    setValue(id: string, value: number): void

    getFlag(id: string): boolean
    setFlag(id: string, boolean): void
}

This same functionality would be used when triggering events too, to show visually that the player is no longer playing with regular Cards but with EventCards

• Create a publicly available website where content creators easily could create and edit content for the game.

Features

• Import data files (from disk, or from GitHub?)
• Show game data with a simple UI, to edit content
• Export data files that can be understood by the game
• Ideally, add feature to submit the updates
  • If the maxlength of mailto link pre-populated body is large enough, perhaps this could be a way to send data. But it would be hard to moderate and add back to the game...
• Possibly add feature to submit PR directly to GitHub
  • Git diffs would be ideal, and letting content creators work with Git would simplify for us developers.
  • But adding git as a requirement would make it much harder to create game content.

Resolves #4

https://swr.now.sh/

This library is looking really promising to handle data fetching and caching. It also has convenient API:s for handling game loading state, which would improve UX.

Consider this generated data, which leaves a blank screen until content is loaded. This could easily be replaced by a loading screen while content is fetching using SWR.

This step is crucial to allow the larger climate movement to join forces and create a realistic and engaging game.

• Tech-tree elements are represented by state flags or values
• Tech-tree elements should all have an icon
• Tech-tree elements are grouped using a hierachical description ex. {id: FlagOrValueId, type: 'flag' | 'value', parentId: FlagOrValueId}
• Tech-tree visualization description does not affect game logic. It should be up to the card formulation to enforce the Tech-tree hierarchy

Relevant and accurate content is key to the success of this game. But we can't review all content properly since we've created it - so use the network to get help from people with competences.

Step 1: Ask climate students
Step 2: Ask Klimatklubben
Step 3: Fridays For Future

If this would be moved to a separate package, it could be imported with npm directly from a git repo. This would allow us to update the card types on a single place, making maintenance easier.

1. I'm thinking about ways to prevent cards from being swiped until the card stack drop animation has completed (new cards are rendered in the middle of the screen). This would prevent buggy behaviors when swiping rapidly before cards are ready. Ideally, we could disable the swipe gesture handler when cards are returning to the middle of the screen.

2. When the game ends, we should be able to disable card swiping while the timeout before shoring endgame state is executed. If the endgame would trigger a timeout to complete the swiping animation, while also fading the screen to (transparent) black or red, and also disabling the swiping handlers of the next card - this would be a much better endgame UX. This kind of control should probably be added to Deck to allow that component to disable Cards it controls.

Edit: the following was resolved in #35

3. Right now, the only thing required totrigger a swipe is to move the cursor/finger fast enough. Could we improve the UX by limiting the swipes to only happen after the card has been moved a certain distance? Either with or without the trigger happening by swiping fast enough.

I could be wrong but as far as I can see there's a problem with useGesture which prevents it from updating any of the referenced values of the lambda-function after the initial state.

It seems to me that this i a problem with the gestures library hook but I could be wrong. There are a number of ways to fix this problem:

• We could work around this problem by either making Deck a class in order to maintain object references within the lambda-function (This will make it possible to update the state of component)
• We could move the useGuesture and useSprings code into the Card code in order to be able to destroy the states by using well specified Ids.
• We could use some other guesture library
• We could try to fix the current library

Please correct me if I am wrong though.

In order to make the game more replay friendly we could add "themes" to the cards in order to limit the card selection when starting a game. This way a player would not be exposed to the same cards as many times since one could choose different scenarios or themes.

Cards should of course be possible to share between different themes.

(This might require a quite streamlined card production pipeline and guidelines since it could get quite content heavy.)

When a card is active, show visual indicators of how the decision will impact the game world. This will help players make their decisions.

This could be done in several ways:

1. a dot above the icon to indicate how the value will change. Large dot meaning increasing, small dot meaning decreasing.
2. Highlight the difference inside of the bar below each icon for a given choice. Green bar meaning increasing and red bar meaning decreasing.

Game logic

• App: global state and logic
• Game: global game state for the current session.
• World: game state and logic related to the world
• Player: game state and logic related to the player
• Events: decisions that creates the core gameplay. This module should load and handle almost all game content.
• Helpers: general utility functions that don't fit anywhere else. Should be named exports to allow minimal imports where they are used.

Content / Data

• events.json: game events and the impact different choices can have on the outcome.
• story.json: Special game events that tell the underlying story that plays out in the background depending on how the player is performing

This relates to three different tasks:

1. File loader
2. Calculations / world state updates
3. Decide what world state we want to use

interface GameWorld {
    gameCards: GameCard[];
    worldEvents: WorldEvent[];
    eventCards: EventCard[];
    exposedValues: { id: string, label: string, value: string, icon: string }[];
}

function createGameWorld(gameCards, worldEvents, eventCards) {
    return {
        gameCards,
        worldEvents,
        eventCards,
    }
}

function getGameWorld(id) {
    // find folder with name `id`
    // load gameCards, worldEvents, eventCards
    // return GameWorld instance
}

Bar colors could be fading from red to green depending on how full the bar is.

Or simply have some breakpoints:
< 30% red
< 70% yellow

70% green

If there's no end: we need to produce new content, but the slower progress would make swipes more meaningful and impact your game session.

What would it mean to win the game?

• Trying to keep the presidency score as high as possible for as long as possible, by making the right choices.
• The aim could be to be a good enough president that you stay in power for a very long time. To basically get re-elected because you have a good presidency score.
• Another way to put this is: your goal is to maintain a good presidency score, by making decisions that create a thriving, sustainable society. This way, the game could help telling the vision of a sustainable future.
• If we focus on maintaining the presidency score high over time, we can get around the democracy problem with many subsequent re-elections by making the player (the president) an abstract character rather than giving them their own avatar. Then it's less about the person but more about what kind of policies that they choose.

What would it mean to lose the game?

• Should you lose the game if you don't get re-elected? Probably yes, because you won't get re-elected unless you maintain a thriving society (maintaining a high presidency score).
• The highscore would be based on the time time you survived and the presidency score.
  • The presidency score could be: averagePresidencyScore * timeSurvived. This would be fair since it adds both the time factor of the session - but also the average score, which speaks about how good of president you were.
• One way to lose would be to run out of any of the key stats (environment, people, security, money). Then you immediately lose, with some event happening related to the crisis you've created. For example if people get angry, there might be riots. Or if they get unhealthy, they die out. Or if you lose national security/stability: you get attacked by other countries - or get riots in the country. If you run out of money, the country is bankrupt and there's an economic crisis. Or you simply can't fund new policies and lose. And if you don't maintain a balanced environmental impact, you get various ecological crises.
• Should the game get harder over time, requiring you to have a higher and higher election score to stay in power? Probably yes.

Brainstorming session @ Klimathack #2

• The emotional story in the game

  • Doesn't need to be uplifting - you can be the last emperor of Rome.

• Events based on your previous choices

  • Make your choices mean something - they can cost more short-term but be good long term.

• Fixed length 8 years term

  • You don't get a restart - your next session will be based on previous actions.

• quit session = "I resign as president"

  • you will be remembered for popularity
  • you will be

• Election campaigns every 4 years - you have to get re-elected to continue

  • Choose your prioritized policies

• Skill tree to visualize the policies and research/tech

• Multiplayer with shared earth and multiple countries.

• Interact with other countries - they don't have to be other players

• The people

  • formulate how dependent they are on fossil fuels, meat etc

Give money to beekeepers?

+Environment

-Money

Research new weapons?

+Security

-Money

Energy weapons?

Information war?

Digital entertainment instead of meeting people IRL for long travel events?

+Environment

+People (but also losing jobs in the region, destroying tourism)

-Money

360° cameras streaming the crowd of live events so people don't have to fly all around.

VR/AR experience - will increase accessibility for concerts

Prepare distribution centrals with emergency resources around the country?

+Security

-Money

+People

It's an upfront investment - to prepare for distasters

But if you prepare for disasters - you can save the people.

If you haven't got enough security you don't get a good enough bonu

This is a follow up decision

Research negative emissions technology?

-Money

+Environment (if you repeatedly fund this decision and give researchers time to find a solution)

This could also be trees (BECCS)

Put negative environmental costs into regular economic costs?

Ban fossil fuel cars

-People/Popularity

+Environment

-Security/Trust in society

For this you get a follow up decision where another person warns you for implementing this without helping people transition to sustainable alternatives.

Directly after fossil fuel cars ban

Some expert tells you to also invest in helping people who don't have sustainable alternatives

If you choose to help your people through a just transition:

+People

-Money

+Security

+Environment

If you don't want to spend the extra money:

-People

-Environment (people start using their cars despite the ban, and the effect)

-Security

Start adding carbon customs fees on imported/exported goods to manage CO2-impact of international trade

+Environment

+Money

-Security

-People (losing jobs short sighted)

Fund public information campaign to raise awareness?

+People

Idea:

You always get decisions as a multiple step card.

First is the decision

Then any possible follow up decisions.

And finally you get a summary of the results. "Thank you Mrs. President, I think this is a great step forward."

Should we take the opportunity and move towards more dictatorial powers?

-People (people don't like it - but you get control to influence difference decisions)

Give concrete examples of what you would gain.

Endgame idea:

Show popularity
Show how the environment is doing
"You saved the planet, but destroyed your people and humanity"

Build more schools?

Invest in green tech?

Plant trees?

Build factories to gain jobs?

+People

Increase fossil fuel price?

+Environment

-People

Create new train lines?

+People

+Environment

-Money

Leads to less car driving

Forbid plastic bottles?

-People

+Money

+Environment

Put high taxes on long distance imports?

+Poeple, intrease local jobs

+Money or oculd be bad

-Security - trading is the glue keeping international

Make gasoline forbidden?

-Security (tanks cant use gasoline)

-People (unless you give them alternatives)

-Money (because of stranded fossil assets)

Force everyone to be vegan - unless they want to go to prison?

-People

+Environment

Build a new highway?

-Environment

-Money

+People (but can also be achieved by building)

Install solar rooftops on every public environment?

+Environment

+Security

-Money shortsight but will be positive long term

+People

Building nuclear power plants?

-Enviromnent

-Security (huge risks with centralized production)

-Money

-People (fear for accidents - but will be balanced by more jobs)

Terrorists may try to blow it up.

Waste may leak and cause environmental problems.

Extreme weather might shut them down.

High speed trains? Yes/No?

+1 Security

+3 People

+3 Environment

-4/5 Money (large investment)

Should we put the national economy into heavy debt to invest in climate solutions?

-5 Money

-people

Should we have vegetarian food in schools/public institutions?

-Security

-People

+Environment

+Money

Should we increase military presence to protect national borders?

-3 Money

+Security

-3 Environment

-People (short term positive but long term negative)

Or should we put the military into working actively to implement solutions?

+Money (saving money)

-Security (military, but )

Should we focus on putting immigrants to work?

-Money (losing short term, but improve long term)

+People (they get control over their lives)

Free communal traffic?

+People

-3 Money (in the beginning, but people get more money to spend, meaning they taxes increase)

Close city traffic for cars?

+People (negative short sighted, but positive long term because of health and happiness increases)

https://dev.to/benweiser/how-to-set-up-eslint-typescript-prettier-with-create-react-app-3675

Should it be visible - or shown at the end of rounds?

This adds complexity and should probably not be added for the MVP

This is not required to make the game work - simple text events with nice background colors and fonts could work for a first version of the game.

However, humnas are visual thinkers so graphics would make the game easier to understand and more engaging.

Perhaps play this during a game event. But remember to ask for permission from the remixer (and the original artists too).

https://soundcloud.com/talla2xlc/right-here-right-now-sleeper-in-klimatropolis-talla-2xlc-rework

Then the main game music should be something original.

What's the aim of the game?

Get players to share their presidency score with their friends. Also global highscores. But also highscores only for friends.

Compare highscores with other players. Possibly with a friends list - invite friends and join groups to compare with each other.

Highscores and accounts would require some kind of database & server - but it would make the game much more enjoyable.

Avoid the barrier by letting player start playing without accounts, saving their game locally. But if they want to share globally, they need to create an account. This will also allow them to save the game online.

We have the data for action descriptions but they are not shown.

• Determine how to visualize the descriptions.
• Implement the visualization.

A hidden score, with weighted stats. Keeping it hidden would keep players interested in understanding how they can find a good balance between the objectively, scientifically good (the presidency score) - and the subjectively, or emotionally "good" (the election score) - how people perceive your results.

Popularity could play an important factor.

It would be interesting to keep a set of detailed stats behind each game stat like money, environment, security, people, popularity. This way the game world state would be more in depth and more realistic. But these details are primarily working behind the scenes, aggregated into a single value for each category.

Having these detailed stats would make it much easier to write good decision-cards, because they would be more exact in how they affect the game world state.

For scientists, this would be much easier to rate - otherwise it would be too broad and too unclear to be any realistic.

This way, we could potentially show the in-depth factor affecting each stat-category, with nice visual breakdowns.

In order to calculate the actual stat category score for for example environment, we could weight the factors and their values by percentages, always adding up to 200 in potential max presidency score you can earn from each stat category.

In order to calculate stat category scores, we should keep maximum 4-5 detailed stats per category. And to calculate we add them all all together, adding up to 200 as max if you do really well. This way, you get the result out of 200 max, that then can be used for the presidency score or for the election score (potentially by using the detailed scores in different weights)

To find good detailed stats for each category (environment, people, security, money), we could use the most broad stats according to some scientific papers

Examples of detailed stats for each category:

Environment (Planetary boundaries)

Contact Kate Raworth and/or Johan Rockström to hear if this is a reasonable simplification for the game:

• Biodiversity

• Climate emissions - greenhouse gas emissions

• Oceans acidification

• Resource usage (circularity of the economy & land usage)

• Pollution (chemical- & air pollution)

• Food factors - freshwater, nitrogen & phosphorous loading

• CML 2001, (2016 version) could be use to explain environmental factors in a scientific way:

  • Climate emissions
  • Ozone layer depletion potential
  • Ozone layer increase potential
  • Ocean - Acidification

• Doughnut environmental factors

  • climate change
  • biodiversity
  • land conversion (land use)
  • nitrogen & phospherous
  • freshwater usage

People

• Health
• Happiness - this is not necessarily connected to the people's perception of your popularity as a president - because they can be happy even with a bad president. This "happiness" has to be very short-term to explain how people are feeling right now. This could be affected by decisions made in the past.
• Social stability - can people work together and maintain a healthy society. It's also about trust in society and in other people. This also includes criminality, because a stable society would have lower crime rates. maybe this should be divided into several detailed stats - use expert help to get a good understanding of the most interesting social aspects to cover in the game
• Criminality
• Tolerance - among people in your country - and towards all the million of climate refugees flooding the streets.

Security

• Inner security
  • Terrorist attacks / political attacks
  • risk for riots
• National security (at the borders, and toward other countries)
  • Wars
• Social resilience
  • how prepared are you for natural disasters - and other crises like blackouts, food shortages
• Military power (= their level of funding and support from the president
  • A strong military will be able to help society in many different ways as crisis management resources. A weak military will hurt the country.

Money

• National budget (funding for initiatives/decisions)
• The economic status of your people (do they have enough money to live good lives)
• How are businesses doing? Is the country's economy productive?
• National debt (the option to borrow from the future to increase the national budget today) - potentially this is too connected to the national budget which would make it hard to use?

Popularity

• How the people perceive your presidency subjectively
• How organizations influence people's opinions. Could be lobby organizations, the climate movement, protest groups or even businesses and their lobbyists. Lobbyists could also be influencing corruption
• How you are portrayed in the media? - could be too related to the other values to be relevant - OR it could be really interesting since YOU as the president could choose to go down an authoritarian path - controlling the media to control your popularity. This would make the game so much more complex - BUT add the dimension of corrupt politicians, and raising the moral question IF THE END JUSTIFIES THE MEANS when it comes to solving the climate crisis.
• Corruption could be a potential threat to your popularity - if you choose this path - you play with higher risks if let it get out. NO, the corruption would be an event happening in the game rather than a stat affecting how people perceive your popularity

Players can save their interesting or favorite cards in their accounts. They also can share cards on the social network for discussions.

Green choices is pretty flat and boring working title.

How about Swipe 4 Earth?

Solving the climate crisis, one swipe at a time.

There should be some way to download images in the background when the game loads.

Perhaps cache images locally, so they can be used immediately when they're needed.

Especially the px values need to be changed into responsive alternatives. Ideally using CSS flexbox or CSS grid.

As the game moves on, the content(decision/situation) becomes complicated, the longer will a player make a decision. (But how to set difficulty levels of the content?)

• Inspire people to talk about the climate crisis and the challenges we face.
• Educate the climate movement
  • What are our potential visions of a sustainable future society?
  • What are the challenges we face? How can we get around them?
  • What are the opportunities we can take advantage of in a just and sustainable transition.
• Raise awareness of the climate and ecological crisis among the public
• Entertain players
• Be reasonably scientific (but simple enough to make it enjoyable to play and make people interested in thinking and learning more)
• Low prio: Aggregate data on players' decisions and how they view the path forward. This is a game, so we should be clear about what the data will show = how people explore these issues, not what they would do in real life. But the data might still be interesting.

https://firstdonoharm.dev/ could be a good option.

The current dynamic image URL:s don't seem to get cached properly, which hurts game load performance.

How to present this score?

• Show it at the top of the screen since it's based on the other stats.
• Connect the stats to the presidency score with lines, to show that they are combined to calculate it. Make lines go up top to the score
• Maybe use a symbol/icon - or just a number - or number with percentage.

How to calculate this score?

• Get the average of the stats.
• Another way is to add them all together - 200 max for each (environment, people, security, money, popularity) adding up to 1000 total max presidency score.
  • Then you could get events that happen on regular basis that are based on your decisions, giving you bonuses or penalties, affecting some relevant stats, and in the end also your presidency score
  • These could be shown at the bottom of the screen in green or red to show how they are affecting you.
• There could also be a weighted average, where different stats weight differently.
  • This would be hard to explain to players though

Even though this is a small project, TypeScript would make the code easier to maintain (and modify).

Also, a small project is a good place for experimenting with new technologies.

We should look into some library that already solved this feature so we can focus on the core gameplay - the content.

Similar solution to what I'm thinking about:
https://github.com/GavBaros/react-tinder-cards

http://www.oekotopia.net/

This could be a way to get players to come back.

But it could also hurt the fun in the game - since they can't have crazy, intense game sessions if they have the serious decisions.

If you have a sense of progress, this idea could be the hook that gets people coming back

• They have to take into account what choices you've already made.