Code Monkey home page Code Monkey logo

cybersim-ui's People

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

cybersim-ui's Issues

Overview screen - System states

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

Budgeting phase UI skeleton

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

Unable to deselect item when budget is low

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.

Handling system related actions

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

Event logs

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

Exporting review phase

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

UI skeleton

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

Logging

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

Main overview screen - Mitigated injections

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

System state handling

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

Handle game room creation

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

Handle joining a running game

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

Toggle button not intuitive

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

Pausing and restarting the timer

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

Action handling

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 initial DB migration files

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

Budget item purchase

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

UI alignment and spacing issues when accessing a phone or tablet

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
    image3

Main overview screen skeleton

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

Main overview screen - System related actions

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

Projector screen

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

HQ overview screen - HQ actions

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

Sarah to provide recommendations

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

Joining an already running game

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

HQ overview screen - Injections

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

HQ overview screen skeleton

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

App skeleton

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)

"Phishing" no "Phising"

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.

Finishing the game phase

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

Initial data seed

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

Game room creation

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

HQ overview screen - System related actions

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

Overview screen - Events log

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

HQ overview screen - Budget items

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

Manual Injections

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.

Handling budgeting phase choices

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.