nditech / cybersim-ui Goto Github PK

As a facilitator, I would like to see the current state of the systems.
The systems have two statuses: online or offline.

Requirements:

• Display all the systems
• The two statuses should have separate, distinct icons that show the state
• The status needs to be updated real-time, according the current game state

Addition:
Please see UI mock, screen 3

As a facilitator, I would like to see the available budget items before I start the timer and the actual game phase.
On this screen, I would like to register the budgeting choices of the participants and see the actual state of the budget, how much money the participants have spent, and how much money they left.
When I registered the choices I would like to start the game.

As a joined facilitator, I would like to see the changes real time, and be able to make changes.

Requirements:

• Should list out all the budgeting options
• Display the total cost of the chosen options
• Display the remaining budget
• Separate the budget items into categories
• Should be able to finalize the budget and step into the next phase
• Should promote the changes through websocket

Additions:
Please see UI mock, screen 2

When allocating your budget, the game starts locking options that cost more than the money you have left in budget. However the game not only freezes the unchosen options you could select, but also freezes the options you've already selected and stops you from unselecting them. So for example if you have $500 left, you are stopped from selecting a new $1000 option, which is correct behavior, but if you've already selected the $1000 "Facebook two-factor" option, you can no longer unselect it, and instead you can only unselect options that are worth $500 or less.

When a system related action is performed on the UI, the appropriate cost change should be registered and the state of the system should be changed.

Requirements:

• Serve all the available actions based on each individual system's current state
• register the changes in the available budget
• persist the change in the game state
• propagate the changes to all users in the current game

All actions and events should be logged and persisted for the current game in a way that it would be replayable at the end of the game phase and during the game on the main overview screen.

Requirements:

• Save the occurring injections
• save the performed actions
• the log entries should be filterable by type (injection, action), the exact types will be detailed later

The review logs shall be exported via printing the page.
For this, the logs in the review phase should be expandable with a single button, so the page printing will show all the elements

Create a React skeleton app for the UI as a starting point

This is a placeholder ticket, it will be separated into multiple tickets when the actual logging system has been designed

When budget is too low and you try finish a response you get two overlapping conflicting notifications: 1) "not enough budget" and 2) "response made"

As a facilitator I would like to see which upcoming injections mitigated at a time.

Requirements:

• List out the injections that are mitigated by the bought budget items
• List out the injections that are not mitigated
• Refresh the list upon new budget item buy

Additions:
Please see UI mock, screen 3

The state of the systems needs to be persisted in the game state. When an action with effect on system(s) has been performed, the change should be registered in the game state.

Requirements:

• Serve the list of systems
• serve the state of each individual systems
• handle performed actions
• propagate changes to every user joined via WebSocket connection

The backend sevice should handle the game room creation

Requirements:

• establish DB connection
• check for unique game name, respond in error if the name is already taken
• create a new game state record in the db

The backend should handle the join to a running game

Requirements:

• Should let the new user join to the WebSocket connection
• Should check if there is a game with the given identifier name
• Should update the UI with the current game state
• Should respond with an error if the game is not found

When a toggle button is used, it should switch to the right to indicate it is “on”. Additionally, when it is switched on, there should be a color (not grayscale) to make it more intuitive about what on and off state are.

toggled right = on
toggled left = off

Replace upright fist icon with different icon that can't be confused as a reference to the Black Lives Matter movement in the U.S. cc @rolandszoke

The facilitator should be able to pause and restart the timer during the game phase.

Requirements:

• should pause the timer
• should stop triggering injections
• should restart the counting from the stopping point
• log the pause / restart
• propagate changes to all users in the game

When an action is performed, the cost and effect need to be registered in the game state.

Requirements:

• check the prerequisites for the action
• Reduce the available budget with the action's cost
• represent the effect in the game state
• log the action
• propagate the game state changes to all users in the game

Create the necessary DB migration files for the first DB setup.

Requirements:

• First DB setup should be done via a separate script
• Should have a script for migrating to the latest schema
• Rollback on error

Additions:
Please see the DB static excel file for schema

It is possible to buy budget items during the game phase.

Requirements:

• check the pre-requisites for the budget item
• register the purchase
• deduce the cost from the budget
• change the game state
• propagate the game state change to all users in the game

For example:

• On Action table, Game tracker at bottom of screen does not align well on iphone
• On Action table, Perform Action and Projector buttons don’t display well on iphone
• On budget screen on iphone HQ/Branch toggles don’t visually align well
• Game name cut off on iphone when entering or creating new game
  

As a lead facilitator, I would like to have an overview of the actual game state after finalizing the budget and starting the game.

I would like to see the current state of the systems (operational or offline) (also referred as assets).
I would like to see all the actions that can turn back an offline system.

I would like to see which injections are mitigated currently by the bought budget items and which are not.

I would like to access the logs anytime during the game.

Requirements:
A skeleton should be created to

• Display the systems and their current state
• Display the mitigated and the not mitigated injections
• Display the event logs.

Additions:
Please see UI mock, screen 3

As a facilitator I would like to perform actions that restore an offline system.

Requirements:

• Display the list of available actions that can restore an offline system
• Allow 1 action at a time
• Remove the irrelevant actions upon game state change
• Display newly available actions upon game state change

Additions:
Please see UI mock, screen 3

As a facilitator, I would like to see the most important game statuses.

As a participant, I would like to see a summary of the most important game statuses.

Requirements:

• Display the available budget
• display the current poll standing
• display the game time counter
• display the systems and their state

Additions:
Please see UI mock, upper part of screen 5

As a facilitator, I would like to see the list of available actions for HQ level participant roles, and register taken actions.

Requirements:

• Display the list of available HQ level actions
• Display the cost and effect of each action
• Make it possible to perform actions one-by-one
• Display changes real-time based on the game state

Additions:
Please see UI mock, screen 4

In the review phase, the recommended actions and an explanation shall be linked to each injection log from the handbook.

!!! Waiting for descriptions from Sarah

Make it so the approval rating starts at 40%. This number is pre-determined for all games.

As a facilitator, I would like to join a running game.

Requirements:

• Should be able to join a running game by giving the game's name as a unique identifier
• There should be a separate Join game button
• Upon a successful join, the user should be redirected to the actual game phase's screen
• There should be an error message if the game could not be found
• There is no need for authentication/authorization

Additions:
Please see the UI mock, screen 1

As a facilitator, I would like to see the 3 upcoming injections. I would like to see information about the injection and what physical assets I need to prepare.

I would like to register the responses given by the participants.

Requirements:

• Display the list of injections up to current time +3
• Display a short name and a description
• Display the recipients of the physical assets/announcments
• Display the effects of the injection if it is not mitigated previously
• Mark it as 'Skipped' if the mitigation requirements are met before the injection is triggered
• List out the correct response actions
• Make it possible to mark the injection as not correctly responded
• display the cost of each recommended actions

Additions:
Please see UI mock, screen 4

As a facilitator, I would like to see an overview of all the available actions and upcoming injections that are related to HQ level only.

Requirements

• Show the actions by participant roles
• Display the unavailable actions
• Display the missing pre-requisites next to the unavailable actions

Additions:
Please see UI mock, screen 4

Create an http server skeleton the UI app can reach. The backend should be able to join to a relational DB.

Requirements:

• Graceful start and shutdown
• environmental config
• prepared for DB migration
• websocket enabled
• dockerizable (detailed later for deployment)

Provide state information to the UI so the injections can be properly separated into mitigated and not mitigated injections.

Correct spelling of “phishing” (it’s spelled “phising” throughout the app)

It might be good to spell check the entire app while you're at it.

The facilitator should be able to end the game phase and jump to the review phase.

Requirements:

• end the game phase and step the game state to review phase
• stop the timer
• log the act of finish
• propagate the game phase change to all users in the game

The provided excel tables and various materials should be translated into a DB schema form and a seed dataset should be created.

The dataset should be imported as a csv file. The seeding should have a separate script.

Additions:
Please see DB static excel file

As a facilitator I would like to create a new game. When the game room is successfully created, I should be redirected to the first stage of the game.

Requirements:

• The game room's name should be unique and act as a unique identifier for joining this game
• There is no need for user handling or any kind of authentication / authorization, security-through-obscurity
• Upon successful game creation, the user should be redirected to the first game screen
• There should be an error message if the game name is already in use

Additions:
Please see UI design mock, screen 1

As a facilitator, I would like to see the list of available actions that can restore an HQ system, based on the current game screen.

Requirements:

• display the available system related actions based on the current game state
• display the cost of each actions
• allow to perform the chosen action

Additions:
Please see UI mock, screen 4

As a facilitator, I would like to see the logs of taken actions and events.

Requirements:

• Display the logs up to actual time
• Hide the details by default
• Refresh the list on new log entry

Details will be provided later.

Additions:
Please see UI mock, screen 3

As a facilitator, I would like to see the list of currently available budget items and register the purchase initiated by the participants.

Requirements:

• List out all the available HQ level budget items, based on the current game state
• Display the cost of each available budget items
• Make it possible to perform a purchase

Additions:
Please see UI mock, screen 4

Sarah asked for manual injection effect activation.
We need to investigate the options on how to implement it.

For now, the effects take place immediately when an injection is triggered.

The backend should serve the UI with the available budgeting options and their properties.
The available options should be stored in the DB.
The backend should persist the changes and promote them to all the joined users via websocket.

Requirements:

• Save the game state's budgeting info on change in the options
• Broadcast the current game state as a result to all the joined users
• in case the budget is overspent, the game should not be started
• the budget should be persisted in the DB