history.push('/')}
11 | />
12 | );
13 | };
14 |
15 | export default withRouter(Logo);
16 |
--------------------------------------------------------------------------------
/src/client/components/board/board.css:
--------------------------------------------------------------------------------
1 | .model {
2 | position: fixed;
3 | left: 0;
4 | width: 100%;
5 | }
6 |
7 | .status-bar {
8 | border-bottom: 1px solid #ccc;
9 | padding: 5px;
10 | }
11 |
12 | .timer-wrapper {
13 | position: fixed;
14 | left: 5px;
15 | bottom: 5px;
16 | background-color: white;
17 | }
18 |
19 | .player-wrap {
20 | position: relative;
21 | }
22 |
23 | .player-wrap:hover {
24 | z-index: 1;
25 | }
--------------------------------------------------------------------------------
/src/client/components/dealtcard/dealtcard.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import DealtCard from './dealtcard';
4 | import { DEFAULT_GAME_MODE } from '../../../utils/constants';
5 |
6 | it('renders without crashing', () => {
7 | const div = document.createElement('div');
8 | ReactDOM.render(
13 |
17 |
16 | The card game{' '}
17 |
18 | Elevation of Privilege
19 | {' '}
20 | by Adam Shostack is licensed
21 | under{' '}
22 |
23 | CC-BY-3.0
24 |
25 | .
26 |
27 | );
28 |
29 | case GameMode.CORNUCOPIA:
30 | return (
31 |
32 | The card game{' '}
33 | Cornucopia by
34 | the OWASP foundation is licensed
35 | under{' '}
36 |
37 | CC-BY-SA-3.0
38 |
39 | .
40 |
41 | );
42 |
43 | default:
44 | return <>;
45 | }
46 | };
47 |
48 | export default LicenseAttribution;
49 |
--------------------------------------------------------------------------------
/src/server/ModelFlatFile.ts:
--------------------------------------------------------------------------------
1 | import { FlatFile } from 'boardgame.io/server';
2 |
3 | import type { Object } from 'ts-toolbelt';
4 | import type {
5 | FetchFields,
6 | FetchOpts,
7 | } from 'boardgame.io/dist/types/src/server/db/base';
8 |
9 | interface ModelFetchOpts extends FetchOpts {
10 | model?: boolean;
11 | }
12 |
13 | interface ModelFetchFields extends FetchFields {
14 | model: Record
47 |
54 | );
55 | };
56 |
57 | export default App;
58 |
--------------------------------------------------------------------------------
/src/client/jointjs/joint-tm.css:
--------------------------------------------------------------------------------
1 | .joint-element.highlighted rect {
2 | stroke-width: 3
3 | }
4 |
5 | .joint-element.highlighted circle {
6 | stroke-width: 3
7 | }
8 |
9 | .joint-element.highlighted path {
10 | stroke-width: 3
11 | }
12 |
13 | .joint-link.highlighted path {
14 | stroke-width: 3
15 | }
16 |
17 | /*threat model status indicator classes*/
18 |
19 | .isOutOfScope {
20 | stroke-dasharray: 5,2;
21 | fill: none
22 | }
23 |
24 | .hasOpenThreats {
25 | stroke: red;
26 | }
27 |
28 | .marker-target.hasOpenThreats {
29 | fill: red
30 | }
31 |
32 | text.hasOpenThreats {
33 | stroke: none;
34 | fill: red
35 | }
36 |
37 | /*threat model element tools*/
38 |
39 | .joint-element .element-tools {
40 | display: none;
41 | cursor: pointer
42 | }
43 |
44 | .joint-element.highlighted .element-tools {
45 | display: inline;
46 | }
47 |
48 | .element-tool-link circle {
49 | fill: grey;
50 | }
51 |
52 | .element-tool-link.linking circle {
53 | fill: green;
54 | }
55 |
56 | /*threat model link tools*/
57 |
58 | .joint-type-tm-flow .link-tool .tool-options {
59 | display: inline;
60 | }
61 |
62 | .joint-type-tm-flow .labels .label text {
63 | font-weight: 400;
64 | font-size: small
65 | }
66 |
67 | /* responsive paper */
68 |
69 | .tmt-diagram-container {
70 | height: 100%;
71 | width: 100%;
72 | overflow-x: auto;
73 | overflow-y: auto;
74 | }
75 |
76 | /*stencil*/
77 |
78 | .stencil .joint-element, .stencil .joint-link, .stencil .joint-link .connection-wrap {
79 | cursor: pointer;
80 | }
81 |
82 | .stencil .link-tool, .stencil .marker-arrowheads {
83 | visibility: hidden;
84 | }
85 |
86 | .stencil .joint-link:hover, .stencil .joint-element:hover path, .stencil .joint-element:hover rect, .stencil .joint-element:hover circle {
87 | stroke-width: 3;
88 | }
--------------------------------------------------------------------------------
/src/client/components/copybutton/copybutton.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from 'reactstrap';
3 | import { copyToClipboard } from '../../utils/utils';
4 | import { faCopy, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
5 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
6 | import PropTypes from 'prop-types';
7 |
8 | class CopyButton extends React.Component {
9 | static get propTypes() {
10 | return {
11 | text: PropTypes.string.isRequired,
12 | color: PropTypes.string,
13 | active: PropTypes.bool,
14 | block: PropTypes.bool,
15 | disabled: PropTypes.bool,
16 | outline: PropTypes.bool,
17 | size: PropTypes.string,
18 | children: PropTypes.any.isRequired,
19 | };
20 | }
21 |
22 | constructor(props) {
23 | super(props);
24 | this.state = {
25 | color: this.props.color,
26 | icon: faCopy,
27 | };
28 |
29 | this.handleClick = this.handleClick.bind(this);
30 | }
31 |
32 | render() {
33 | return (
34 |
45 | );
46 | }
47 |
48 | async handleClick() {
49 | try {
50 | await copyToClipboard(this.props.text);
51 | this.setState({ color: 'success', icon: faCheck });
52 | } catch (err) {
53 | //If the copy fails, maybe alert the user somehow
54 | this.setState({ color: 'danger', icon: faTimes });
55 | } finally {
56 | setTimeout(() => {
57 | this.setState({ color: this.props.color, icon: faCopy });
58 | }, 500);
59 | }
60 | }
61 | }
62 |
63 | export default CopyButton;
64 |
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | parserOptions: {
3 | ecmaVersion: 2021,
4 | sourceType: 'module',
5 | },
6 |
7 | env: {
8 | es2021: true,
9 | },
10 |
11 | extends: ['eslint:recommended', 'plugin:prettier/recommended'],
12 |
13 | overrides: [
14 | {
15 | // all typescript files
16 | files: ['./src/**/*.ts', './src/**/*.tsx'],
17 | extends: ['plugin:@typescript-eslint/recommended'],
18 | plugins: ['@typescript-eslint'],
19 | },
20 | {
21 | // all client files
22 | files: ['./src/index.tsx', './src/client/**'],
23 | parserOptions: {
24 | ecmaFeatures: {
25 | jsx: true,
26 | },
27 | },
28 | env: {
29 | browser: true,
30 | node: true, // needed because `process` etc. is used in client
31 | },
32 | extends: ['plugin:react/recommended'],
33 | plugins: ['react'],
34 | settings: {
35 | react: {
36 | version: 'detect',
37 | },
38 | },
39 | },
40 | {
41 | // client typescript files
42 | files: ['./src/index.tsx', './src/client/**/*.tsx'],
43 | parserOptions: {
44 | project: './tsconfig.json',
45 | },
46 | },
47 | {
48 | // non-client typescript files
49 | files: [
50 | './src/server/**/*.ts',
51 | './src/game/**/*.ts',
52 | './src/utils/**/*.ts',
53 | ],
54 | parserOptions: {
55 | module: 'tsconfig.server.json',
56 | },
57 | },
58 | {
59 | // all server files
60 | files: ['./src/server/**'],
61 | env: {
62 | node: true,
63 | },
64 | },
65 | {
66 | // test files
67 | files: ['./src/**/*.test.*'],
68 | env: { jest: true },
69 | },
70 | {
71 | // configuration files
72 | files: ['./.eslintrc.cjs', './.prettierrc.cjs'],
73 | env: {
74 | node: true,
75 | },
76 | },
77 | ],
78 | };
79 |
--------------------------------------------------------------------------------
/src/client/components/deck/deck.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { getValidMoves } from '../../../utils/utils';
4 | import { isGameModeCornucopia } from '../../../utils/constants';
5 |
6 | class Deck extends React.Component {
7 | static get propTypes() {
8 | return {
9 | suit: PropTypes.any.isRequired,
10 | cards: PropTypes.any.isRequired,
11 | isInThreatStage: PropTypes.bool,
12 | round: PropTypes.any.isRequired,
13 | current: PropTypes.bool.isRequired,
14 | active: PropTypes.bool.isRequired,
15 | onCardSelect: PropTypes.func.isRequired,
16 | startingCard: PropTypes.string.isRequired,
17 | gameMode: PropTypes.string.isRequired,
18 | };
19 | }
20 |
21 | static get defaultProps() {
22 | return {
23 | isInThreatStage: false,
24 | };
25 | }
26 |
27 | getRenderedDeck() {
28 | let left = this.props.cards;
29 | let suit = this.props.suit;
30 | let validMoves = [];
31 |
32 | if (
33 | this.props.current &&
34 | this.props.active &&
35 | !this.props.isInThreatStage
36 | ) {
37 | validMoves = getValidMoves(
38 | left,
39 | suit,
40 | this.props.round,
41 | this.props.startingCard,
42 | );
43 | }
44 |
45 | let deck = left.map((e) => (
46 | - {deck}
{deck}
;
63 | }
64 | }
65 |
66 | export default Deck;
67 |
--------------------------------------------------------------------------------
/src/utils/constants.ts:
--------------------------------------------------------------------------------
1 | export enum GameMode {
2 | EOP = 'Elevation of Privilege',
3 | CORNUCOPIA = 'OWASP Cornucopia',
4 | }
5 |
6 | export const DEFAULT_GAME_MODE = GameMode.EOP;
7 |
8 | export function isGameMode(value: GameMode): value is GameMode {
9 | return Object.values(GameMode).includes(value);
10 | }
11 |
12 | export function isGameModeCornucopia(gameMode: GameMode): boolean {
13 | return isGameMode(gameMode) && gameMode === GameMode.CORNUCOPIA;
14 | }
15 |
16 | export enum ModelType {
17 | THREAT_DRAGON = 'Threat Dragon',
18 | DEFAULT = 'Default',
19 | IMAGE = 'Image',
20 | }
21 |
22 | export const DEFAULT_START_SUIT = 'E';
23 | export const CARD_LIMIT = 26;
24 |
25 | export const MIN_NUMBER_PLAYERS = 2;
26 | export const MAX_NUMBER_PLAYERS = 9;
27 | export const DEFAULT_TURN_DURATION = 300;
28 |
29 | export const DEFAULT_MODEL = {
30 | summary: {
31 | title: 'Threat Modelling',
32 | },
33 | detail: {
34 | contributors: [],
35 | diagrams: [
36 | {
37 | title: 'Threat Modelling',
38 | diagramType: 'STRIDE',
39 | id: 0,
40 | $$hashKey: 'object:14',
41 | diagramJson: {
42 | cells: [
43 | {
44 | type: 'tm.Actor',
45 | size: {
46 | width: 160,
47 | height: 80,
48 | },
49 | position: {
50 | x: 50,
51 | y: 50,
52 | },
53 | angle: 0,
54 | id: '90cdcc2d-21ab-443d-ae95-f97a798429e7',
55 | z: 1,
56 | hasOpenThreats: false,
57 | attrs: {
58 | '.element-shape': {
59 | class: 'element-shape hasNoOpenThreats isInScope',
60 | },
61 | text: {
62 | text: 'Application',
63 | },
64 | '.element-text': {
65 | class: 'element-text hasNoOpenThreats isInScope',
66 | },
67 | },
68 | },
69 | ],
70 | },
71 | size: {
72 | height: 590,
73 | width: 790,
74 | },
75 | },
76 | ],
77 | },
78 | };
79 |
80 | export const SPECTATOR = `spectator`;
81 |
--------------------------------------------------------------------------------
/src/client/components/leaderboard/leaderboard.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React from 'react';
3 | import { Badge, Card, CardHeader, Table } from 'reactstrap';
4 | import { getCardDisplayName } from '../../../utils/cardDefinitions';
5 | import './leaderboard.css';
6 |
7 | class Leaderboard extends React.Component {
8 | static get propTypes() {
9 | return {
10 | scores: PropTypes.any.isRequired,
11 | names: PropTypes.any.isRequired,
12 | cards: PropTypes.any.isRequired,
13 | playerID: PropTypes.any.isRequired,
14 | passedUsers: PropTypes.array.isRequired,
15 | gameMode: PropTypes.string.isRequired,
16 | };
17 | }
18 |
19 | render() {
20 | let passed = this.props.passedUsers;
21 | function hasPassed(_idx) {
22 | return passed.includes(_idx.toString());
23 | }
24 |
25 | return (
26 | | Name | 32 |Passed | 33 |Card | 34 |Score | 35 |
|---|---|---|---|
|
41 | {this.props.names[idx]}
42 | {parseInt(this.props.playerID) === idx && (
43 |
44 | (you)
45 |
46 | )}
47 | |
48 |
49 | {hasPassed(idx, this) && (
50 | ✓
51 | )}
52 | |
53 | 54 | 55 | {getCardDisplayName( 56 | this.props.gameMode, 57 | this.props.cards[idx], 58 | )} 59 | 60 | | 61 |
62 | |
64 |
10 |
15 | );
16 | };
17 |
18 | class Timer extends React.Component {
19 | static get propTypes() {
20 | return {
21 | active: PropTypes.bool,
22 | duration: PropTypes.number.isRequired,
23 | targetTime: PropTypes.number,
24 | };
25 | }
26 |
27 | static get defaultProps() {
28 | return {
29 | active: true,
30 | };
31 | }
32 |
33 | constructor(props) {
34 | super(props);
35 | this.state = {
36 | painted: false,
37 | };
38 |
39 | // This is a bit of a workaround
40 | // The timer is updated with window.requestAnimationFrame however the page can be rendered before
41 | // this is called if it is not the current tab. This means the remaining time will be set to the
42 | // duration but doesn't start counting down until the tab is opened
43 | // By updating the component when requestAnimationFrame is first called, the initial remaining
44 | // time is reset and the timer shows the correct time
45 | window.requestAnimationFrame(() => {
46 | if (!this.state.painted) {
47 | this.setState({
48 | ...this.state,
49 | painted: true,
50 | });
51 | }
52 | });
53 | }
54 |
55 | render() {
56 | const timeDifferenceInSeconds = Math.floor(
57 | (this.props.targetTime - Date.now()) / 1000,
58 | );
59 | if (this.props.active && this.props.duration > 0) {
60 | return (
61 |
11 | {Math.floor(remainingTime / 60)}:
12 | {(remainingTime % 60).toString().padStart(2, '0')}
13 |
14 |
62 | false}
74 | >
75 | {renderTime}
76 |
77 |
78 | );
79 | } else {
80 | return null;
81 | }
82 | }
83 | }
84 |
85 | export default Timer;
86 |
--------------------------------------------------------------------------------
/src/client/components/imagemodel/imagemodel.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import './imagemodel.css';
4 | import { MapInteractionCSS } from 'react-map-interaction';
5 | import { asyncSetTimeout } from '../../../utils/utils';
6 | import { API_PORT } from '../../../utils/serverConfig';
7 |
8 | class ImageModel extends React.Component {
9 | static get propTypes() {
10 | return {
11 | playerID: PropTypes.any,
12 | credentials: PropTypes.string,
13 | matchID: PropTypes.string,
14 | };
15 | }
16 |
17 | constructor(props) {
18 | super(props);
19 | this.auth = this.auth.bind(this);
20 | this.updateImage = this.updateImage.bind(this);
21 | this.onError = this.onError.bind(this);
22 |
23 | // maybe this is better defined in constants (also used by downloadbutton.js)
24 | this.apiBase =
25 | process.env.NODE_ENV === 'production'
26 | ? '/api'
27 | : `${window.location.protocol}//${window.location.hostname}:${API_PORT}`;
28 | this.state = {
29 | imgSrc: undefined,
30 | };
31 | }
32 |
33 | auth() {
34 | const user = this.props.playerID;
35 | const pass = this.props.credentials;
36 | return {
37 | Authorization:
38 | 'Basic ' + Buffer.from(user + ':' + pass).toString('base64'),
39 | };
40 | }
41 |
42 | async updateImage() {
43 | const res = await fetch(
44 | `${this.apiBase}/game/${this.props.matchID}/image`,
45 | { headers: this.auth() },
46 | );
47 | if (!res.ok) {
48 | throw Error(res.statusText);
49 | }
50 |
51 | const blob = await res.blob();
52 | const url = URL.createObjectURL(blob);
53 |
54 | this.setState({
55 | ...this.state,
56 | imgSrc: url,
57 | });
58 | }
59 |
60 | async onError() {
61 | // Try again
62 | try {
63 | await asyncSetTimeout(this.updateImage, 5000);
64 | } catch {
65 | // If updateimage fails it won't then call this again
66 | // Handle this here.
67 | this.onError();
68 | }
69 | }
70 |
71 | async componentDidMount() {
72 | try {
73 | await this.updateImage();
74 | } catch (err) {
75 | console.error(err, err.stack);
76 | }
77 | }
78 |
79 | render() {
80 | return (
81 |
82 | {this.state.imgSrc && (
83 |
84 | 
89 |
90 | )}
91 |
92 | );
93 | }
94 | }
95 |
96 | export default ImageModel;
97 |
--------------------------------------------------------------------------------
/src/client/components/status/status.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React from 'react';
3 | import { getCardDisplayName } from '../../../utils/cardDefinitions';
4 | import {
5 | getPlayers,
6 | grammarJoin,
7 | resolvePlayerName,
8 | resolvePlayerNames,
9 | } from '../../../utils/utils';
10 | import './status.css';
11 |
12 | class Status extends React.Component {
13 | static get propTypes() {
14 | return {
15 | playerID: PropTypes.any,
16 | G: PropTypes.any.isRequired,
17 | ctx: PropTypes.any.isRequired,
18 | current: PropTypes.bool.isRequired,
19 | active: PropTypes.bool.isRequired,
20 | names: PropTypes.any.isRequired,
21 | dealtCard: PropTypes.string.isRequired,
22 | isInThreatStage: PropTypes.bool,
23 | };
24 | }
25 |
26 | static get defaultProps() {
27 | return {
28 | isInThreatStage: false,
29 | };
30 | }
31 |
32 | render() {
33 | if (!this.props.isInThreatStage) {
34 | let currentPlayerName = resolvePlayerName(
35 | this.props.ctx.currentPlayer,
36 | this.props.names,
37 | this.props.playerID,
38 | );
39 | let prefix = ;
40 |
41 | if (this.props.dealtCard === '' && this.props.G.round > 1) {
42 | let winnerName = resolvePlayerName(
43 | this.props.G.lastWinner,
44 | this.props.names,
45 | this.props.playerID,
46 | );
47 | prefix = (
48 |
49 | Last round won by {winnerName}.{' '}
50 |
51 | );
52 | }
53 |
54 | return (
55 |
56 | {prefix}Waiting for {currentPlayerName} to play a
57 | card.
58 |
59 | );
60 | } else {
61 | let all = new Set(getPlayers(this.props.ctx.numPlayers));
62 | let passed = new Set(this.props.G.passed);
63 | let difference = new Set([...all].filter((x) => !passed.has(x)));
64 | let players = resolvePlayerNames(
65 | Array.from(difference),
66 | this.props.names,
67 | this.props.playerID,
68 | );
69 | let playerWhoDealt = resolvePlayerName(
70 | this.props.G.dealtBy,
71 | this.props.names,
72 | this.props.playerID,
73 | );
74 |
75 | return (
76 |
77 | {playerWhoDealt} dealt{' '}
78 |
79 | {getCardDisplayName(this.props.G.gameMode, this.props.dealtCard)}
80 |
81 | , waiting for {grammarJoin(players)} to add threats
82 | or pass.
83 |
84 | );
85 | }
86 | }
87 | }
88 | export default Status;
89 |
--------------------------------------------------------------------------------
/src/client/components/status/status.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import Status from './status';
4 | import { DEFAULT_GAME_MODE } from '../../../utils/constants';
5 |
6 | it('renders without crashing', () => {
7 | const G = {
8 | dealt: ['T1'],
9 | order: [0, 1, 2],
10 | scores: [0, 0, 0],
11 | gameMode: DEFAULT_GAME_MODE,
12 | };
13 | const ctx = {};
14 | const div = document.createElement('div');
15 | ReactDOM.render(
16 |
43 |
57 | Download Model
58 |
59 | )}
60 |
69 | Download Threats
70 |
71 |
72 | 73 |
103 | );
104 | }
105 | }
106 |
107 | export default Sidebar;
108 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "eop",
3 | "version": "0.15.2",
4 | "private": true,
5 | "main": "src/client/index.tsx",
6 | "dependencies": {
7 | "@fortawesome/fontawesome-svg-core": "^1.3.0",
8 | "@fortawesome/free-solid-svg-icons": "^5.15.3",
9 | "@fortawesome/react-fontawesome": "^0.1.18",
10 | "@koa/cors": "^3.4.3",
11 | "basic-auth": "^2.0.1",
12 | "boardgame.io": "^0.46.1",
13 | "bootstrap": "^4.6.0",
14 | "cornucopia-cards-modified": "file:cornucopiaCards",
15 | "esm": "^3.2.25",
16 | "jointjs": "^3.6.2",
17 | "koa": "^2.13.4",
18 | "koa-body": "^4.2.0",
19 | "koa-router": "^10.1.1",
20 | "koa-send": "^5.0.1",
21 | "lodash": "^4.17.21",
22 | "node-persist": "^3.1.0",
23 | "react": "^17.0.2",
24 | "react-countdown-circle-timer": "^2.5.4",
25 | "react-dom": "^17.0.2",
26 | "react-helmet": "^6.1.0",
27 | "react-map-interaction": "^2.1.0",
28 | "react-nl2br": "^1.0.4",
29 | "react-router-dom": "^5.3.1",
30 | "react-scripts": "^4.0.3",
31 | "reactstrap": "^8.10.1",
32 | "reactstrap-confirm": "^1.3.2",
33 | "superagent": "^6.1.0",
34 | "uuid": "^8.3.2"
35 | },
36 | "type": "module",
37 | "scripts": {
38 | "start": "react-scripts start",
39 | "build": "run-p build:client build:server",
40 | "build:client": "react-scripts build",
41 | "build:server": "tsc -p tsconfig.server.json",
42 | "test": "react-scripts test",
43 | "eject": "react-scripts eject",
44 | "server": "node --unhandled-rejections=warn --es-module-specifier-resolution=node build-server/server/server.js",
45 | "preserver": "npm run build:server",
46 | "lint": "eslint --ext .js,.jsx,.ts,.tsx,.cjs .",
47 | "fixlint": "eslint --fix --ext .js,.jsx,.ts,.tsx,.cjs .",
48 | "format": "prettier --write \"./**/*.(js|jsx|ts|tsx|json|yml)\""
49 | },
50 | "eslintConfig": {
51 | "extends": "react-app"
52 | },
53 | "browserslist": {
54 | "production": [
55 | ">0.2%",
56 | "not dead",
57 | "not op_mini all"
58 | ],
59 | "development": [
60 | "last 1 chrome version",
61 | "last 1 firefox version",
62 | "last 1 safari version"
63 | ]
64 | },
65 | "devDependencies": {
66 | "@babel/eslint-parser": "^7.19.1",
67 | "@testing-library/jest-dom": "^5.16.5",
68 | "@testing-library/react": "^12.1.4",
69 | "@types/basic-auth": "^1.1.3",
70 | "@types/jest": "^27.5.2",
71 | "@types/koa__cors": "^3.3.0",
72 | "@types/koa-router": "^7.4.4",
73 | "@types/koa-send": "^4.1.3",
74 | "@types/lodash": "^4.14.189",
75 | "@types/node": "^16.11.26",
76 | "@types/react": "^17.0.43",
77 | "@types/react-dom": "^17.0.14",
78 | "@types/react-helmet": "^6.1.5",
79 | "@types/react-router-dom": "^5.3.3",
80 | "@types/seedrandom": "^3.0.2",
81 | "@types/superagent": "^4.1.15",
82 | "@types/uuid": "^8.3.4",
83 | "eslint": "^7.32.0",
84 | "eslint-config-prettier": "^8.5.0",
85 | "eslint-plugin-prettier": "^4.2.1",
86 | "eslint-plugin-react": "^7.31.11",
87 | "npm-run-all": "^4.1.5",
88 | "prettier": "^2.7.1",
89 | "seedrandom": "^3.0.5",
90 | "supertest": "^6.3.1",
91 | "ts-toolbelt": "^9.6.0",
92 | "typescript": "^4.8.4"
93 | },
94 | "jest": {
95 | "collectCoverageFrom": [
96 | "src/**/*.{js,jsx,ts,tsx}",
97 | "!
44 |
45 |
46 | {(this.props.G.modelType === ModelType.THREAT_DRAGON ||
47 | this.props.G.modelType === ModelType.DEFAULT) && (
48 | 72 | 73 |
You are the last one to pass!
84 | )}
85 | {this.props.isInThreatStage &&
86 | !this.props.G.passed.includes(this.props.playerID) &&
87 | this.props.active && (
88 |
99 | )}
100 |
101 |
107 | {this.props.G.modelType === ModelType.IMAGE ? (
108 |
183 | );
184 | }
185 | }
186 |
187 | export default Board;
188 |
--------------------------------------------------------------------------------
/src/client/components/model/model.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import * as joint from 'jointjs';
4 | import 'jointjs/dist/joint.css';
5 | import '../../jointjs/joint-tm.css';
6 | // eslint-disable-next-line
7 | import Shapes from '../../jointjs/shapes';
8 | import { Nav, NavItem, NavLink } from 'reactstrap';
9 | import classnames from 'classnames';
10 | import './model.css';
11 | import Helmet from 'react-helmet';
12 |
13 | const SPEED = 20;
14 |
15 | class Model extends React.Component {
16 | static get propTypes() {
17 | return {
18 | model: PropTypes.any,
19 | selectedDiagram: PropTypes.number.isRequired,
20 | selectedComponent: PropTypes.string.isRequired,
21 | onSelectDiagram: PropTypes.func.isRequired,
22 | onSelectComponent: PropTypes.func.isRequired,
23 | };
24 | }
25 |
26 | constructor(props) {
27 | super(props);
28 | this.state = {
29 | placeholder: React.createRef(),
30 | graph: new joint.dia.Graph({}, { cellNamespace: joint.shapes }),
31 | paper: null,
32 | dragging: false,
33 | dragPosition: {
34 | x: 0,
35 | y: 0,
36 | },
37 | };
38 | this.mouseMove = this.mouseMove.bind(this);
39 | this.mouseWheel = this.mouseWheel.bind(this);
40 | }
41 |
42 | offsetToLocalPoint(offsetX, offsetY, paper) {
43 | // Finds mouse position in unscaled version
44 | var svgPoint = paper.svg.createSVGPoint();
45 | svgPoint.x = offsetX;
46 | svgPoint.y = offsetY;
47 | var offsetTransformed = svgPoint.matrixTransform(
48 | paper.layers.getCTM().inverse(),
49 | );
50 | return offsetTransformed;
51 | }
52 |
53 | mouseWheel(e) {
54 | e = e.nativeEvent;
55 | var delta = Math.max(-1, Math.min(1, e.wheelDelta)) / SPEED;
56 | var newScale = joint.V(this.state.paper.layers).scale().sx + delta;
57 | this.state.paper.translate(0, 0);
58 | var p = this.offsetToLocalPoint(e.offsetX, e.offsetY, this.state.paper);
59 | this.state.paper.scale(newScale, newScale, p.x, p.y);
60 | }
61 |
62 | mouseMove(e) {
63 | if (this.state.dragging) {
64 | const x = e.nativeEvent.offsetX;
65 | const y = e.nativeEvent.offsetY;
66 | this.state.paper.translate(
67 | x - this.state.dragPosition.x,
68 | y - this.state.dragPosition.y,
69 | );
70 | }
71 | }
72 |
73 | componentDidUpdate(prevProps) {
74 | if (
75 | this.props.model !== prevProps.model ||
76 | this.props.selectedDiagram !== prevProps.selectedDiagram
77 | ) {
78 | this.updateDiagram(this.state.paper);
79 | this.updateSelection(this.state.paper);
80 | }
81 |
82 | if (this.props.selectedComponent !== prevProps.selectedComponent) {
83 | this.updateSelection(this.state.paper);
84 | }
85 | }
86 |
87 | updateSelection(paper) {
88 | // unhighlight all
89 | for (var k in paper._views) {
90 | // eslint-disable-next-line no-prototype-builtins
91 | if (paper._views.hasOwnProperty(k)) {
92 | paper._views[k].unhighlight();
93 | }
94 | }
95 |
96 | // highlight the selected component
97 | if (this.props.selectedComponent in paper._views) {
98 | paper._views[this.props.selectedComponent].highlight();
99 | }
100 | }
101 |
102 | updateDiagram(paper) {
103 | if (this.props.model !== null && paper !== null) {
104 | this.state.graph.fromJSON(
105 | this.props.model.detail.diagrams[this.props.selectedDiagram]
106 | .diagramJson,
107 | );
108 | //paper.fitToContent(1, 1, 10, { allowNewOrigin: "any" });
109 | }
110 | }
111 |
112 | componentDidMount() {
113 | let paper = new joint.dia.Paper({
114 | el: this.state.placeholder.current,
115 | width: window.innerWidth,
116 | height: window.innerHeight,
117 | model: this.state.graph,
118 | interactive: false,
119 | gridSize: 10,
120 | drawGrid: true,
121 | });
122 |
123 | this.setState({
124 | ...this.state,
125 | paper,
126 | });
127 |
128 | // setup callbacks
129 | let parent = this;
130 | paper.on('cell:pointerclick', function (cellView) {
131 | if (cellView.model.attributes.type === 'tm.Boundary') return;
132 |
133 | parent.props.onSelectComponent(cellView.model.id);
134 | });
135 | paper.on('blank:pointerclick', function () {
136 | if (parent.props.selectedComponent !== '') {
137 | parent.props.onSelectComponent('');
138 | }
139 | });
140 | paper.on('blank:pointerdown', function (event, x, y) {
141 | parent.setState({
142 | ...parent.state,
143 | dragging: true,
144 | dragPosition: {
145 | x,
146 | y,
147 | },
148 | });
149 | });
150 | paper.on('cell:pointerup blank:pointerup', function (event, x, y) {
151 | parent.setState({
152 | ...parent.state,
153 | dragging: false,
154 | dragPosition: {
155 | x,
156 | y,
157 | },
158 | });
159 | });
160 |
161 | // initial render
162 | this.updateDiagram(paper);
163 | this.updateSelection(paper);
164 | }
165 |
166 | render() {
167 | let content = ;
168 |
169 | if (this.props.model === null) {
170 | content =
123 |
154 |
124 | this.props.moves.draw(e)}
147 | startingCard={this.props.G.startingCard} // <=== This is still missing i.e. undeifned
148 | gameMode={this.props.G.gameMode}
149 | />
150 | )}
151 |
152 |
125 |
137 | {this.props.playerID && (
138 | No Model
; 171 | } else { 172 | content = ( 173 |
174 |
175 | EoP - {this.props.model.summary.title}
176 |
177 |
195 | );
196 | }
197 |
198 | return (
199 | 178 | {this.props.model.summary.title} 179 |
180 | 194 |
200 | {content}
201 |
207 |
208 | );
209 | }
210 | }
211 |
212 | export default Model;
213 |
--------------------------------------------------------------------------------
/src/utils/cardDefinitions.ts:
--------------------------------------------------------------------------------
1 | import { GameMode } from './constants';
2 |
3 | export type Card = string;
4 | export type Suit = 'A' | 'B' | 'C' | 'D' | 'E' | 'T';
5 |
6 | interface SuitDetails {
7 | name: string;
8 | abbreviation: string;
9 | cards: Card[];
10 | isTrump: boolean;
11 | }
12 |
13 | export const CARD_DECKS = {
14 | [GameMode.EOP]: {
15 | A: {
16 | name: 'Denial of Service',
17 | abbreviation: 'D',
18 | cards: [
19 | 'A2',
20 | 'A3',
21 | 'A4',
22 | 'A5',
23 | 'A6',
24 | 'A7',
25 | 'A8',
26 | 'A9',
27 | 'A10',
28 | 'AJ',
29 | 'AQ',
30 | 'AK',
31 | 'AA',
32 | ],
33 | isTrump: false,
34 | },
35 | B: {
36 | name: 'Information Disclosure',
37 | abbreviation: 'I',
38 | cards: [
39 | 'B2',
40 | 'B3',
41 | 'B4',
42 | 'B5',
43 | 'B6',
44 | 'B7',
45 | 'B8',
46 | 'B9',
47 | 'B10',
48 | 'BJ',
49 | 'BQ',
50 | 'BK',
51 | 'BA',
52 | ],
53 | isTrump: false,
54 | },
55 | C: {
56 | name: 'Repudiation',
57 | abbreviation: 'R',
58 | cards: [
59 | 'C2',
60 | 'C3',
61 | 'C4',
62 | 'C5',
63 | 'C6',
64 | 'C7',
65 | 'C8',
66 | 'C9',
67 | 'C10',
68 | 'CJ',
69 | 'CQ',
70 | 'CK',
71 | 'CA',
72 | ],
73 | isTrump: false,
74 | },
75 | D: {
76 | name: 'Spoofing',
77 | abbreviation: 'S',
78 | cards: [
79 | 'D2',
80 | 'D3',
81 | 'D4',
82 | 'D5',
83 | 'D6',
84 | 'D7',
85 | 'D8',
86 | 'D9',
87 | 'D10',
88 | 'DJ',
89 | 'DQ',
90 | 'DK',
91 | 'DA',
92 | ],
93 | isTrump: false,
94 | },
95 | E: {
96 | name: 'Tampering',
97 | abbreviation: 'T',
98 | cards: [
99 | 'E2',
100 | 'E3',
101 | 'E4',
102 | 'E5',
103 | 'E6',
104 | 'E7',
105 | 'E8',
106 | 'E9',
107 | 'E10',
108 | 'EJ',
109 | 'EQ',
110 | 'EK',
111 | 'EA',
112 | ],
113 | isTrump: false,
114 | },
115 | T: {
116 | name: 'Elevation of Privilege',
117 | abbreviation: 'E',
118 | cards: [
119 | 'T2',
120 | 'T3',
121 | 'T4',
122 | 'T5',
123 | 'T6',
124 | 'T7',
125 | 'T8',
126 | 'T9',
127 | 'T10',
128 | 'TJ',
129 | 'TQ',
130 | 'TK',
131 | 'TA',
132 | ],
133 | isTrump: true,
134 | },
135 | },
136 | [GameMode.CORNUCOPIA]: {
137 | A: {
138 | name: 'Data Validation & Encoding',
139 | abbreviation: 'Data',
140 | cards: [
141 | 'A2',
142 | 'A3',
143 | 'A4',
144 | 'A5',
145 | 'A6',
146 | 'A7',
147 | 'A8',
148 | 'A9',
149 | 'A10',
150 | 'AJ',
151 | 'AQ',
152 | 'AK',
153 | 'AA',
154 | ],
155 | isTrump: false,
156 | },
157 | B: {
158 | name: 'Cryptography',
159 | abbreviation: 'Crypt',
160 | cards: [
161 | 'B2',
162 | 'B3',
163 | 'B4',
164 | 'B5',
165 | 'B6',
166 | 'B7',
167 | 'B8',
168 | 'B9',
169 | 'B10',
170 | 'BJ',
171 | 'BQ',
172 | 'BK',
173 | 'BA',
174 | ],
175 | isTrump: false,
176 | },
177 | C: {
178 | name: 'Session Management',
179 | abbreviation: 'Sessn',
180 | cards: [
181 | 'C2',
182 | 'C3',
183 | 'C4',
184 | 'C5',
185 | 'C6',
186 | 'C7',
187 | 'C8',
188 | 'C9',
189 | 'C10',
190 | 'CJ',
191 | 'CQ',
192 | 'CK',
193 | 'CA',
194 | ],
195 | isTrump: false,
196 | },
197 | D: {
198 | name: 'Authorization',
199 | abbreviation: 'AuthZ',
200 | cards: [
201 | 'D2',
202 | 'D3',
203 | 'D4',
204 | 'D5',
205 | 'D6',
206 | 'D7',
207 | 'D8',
208 | 'D9',
209 | 'D10',
210 | 'DJ',
211 | 'DQ',
212 | 'DK',
213 | 'DA',
214 | ],
215 | isTrump: false,
216 | },
217 | E: {
218 | name: 'Authentication',
219 | abbreviation: 'AuthN',
220 | cards: [
221 | 'E2',
222 | 'E3',
223 | 'E4',
224 | 'E5',
225 | 'E6',
226 | 'E7',
227 | 'E8',
228 | 'E9',
229 | 'E10',
230 | 'EJ',
231 | 'EQ',
232 | 'EK',
233 | 'EA',
234 | ],
235 | isTrump: false,
236 | },
237 | T: {
238 | name: 'Cornucopia',
239 | abbreviation: 'Cornu',
240 | cards: [
241 | 'T2',
242 | 'T3',
243 | 'T4',
244 | 'T5',
245 | 'T6',
246 | 'T7',
247 | 'T8',
248 | 'T9',
249 | 'T10',
250 | 'TJ',
251 | 'TQ',
252 | 'TK',
253 | 'TA',
254 | ],
255 | isTrump: true,
256 | },
257 | },
258 | };
259 |
260 | export function getStartingCard(gameMode: GameMode, suit: Suit): Card {
261 | return CARD_DECKS[gameMode][suit].cards[0];
262 | }
263 |
264 | export function getSuits(gameMode: GameMode): Suit[] {
265 | return Object.keys(CARD_DECKS[gameMode]) as Suit[];
266 | }
267 |
268 | export function getSuitDisplayName(gameMode: GameMode, suit: Suit): string {
269 | return CARD_DECKS[gameMode]?.[suit]?.name ?? '';
270 | }
271 |
272 | function getCardAbbreviation(gameMode: GameMode, card: Card): string {
273 | const suitHoldingCard = Object.values(CARD_DECKS[gameMode] ?? []).find(
274 | (suit) => suit.cards.includes(card),
275 | );
276 |
277 | return suitHoldingCard?.abbreviation ?? '';
278 | }
279 |
280 | export function getCardDisplayName(
281 | gameMode: GameMode,
282 | card: Card | undefined,
283 | ): string {
284 | if (!card) {
285 | return ``;
286 | }
287 |
288 | const cardSuitAbbreviated = getCardAbbreviation(gameMode, card);
289 | const cardValue = card.substring(1);
290 | return `${cardSuitAbbreviated}${cardValue}`;
291 | }
292 |
293 | export function getAllCards(gameMode: GameMode): Card[] {
294 | return Object.values(CARD_DECKS[gameMode])
295 | .map((suit) => suit.cards)
296 | .reduce((accumulator, value) => accumulator.concat(value), []);
297 | }
298 |
299 | export function getCardScore(
300 | card: Card,
301 | currentSuit: Suit,
302 | gameMode: GameMode,
303 | ): number {
304 | if (isCardOfSuit(card, currentSuit)) {
305 | return getCardNumericalScore(card, gameMode);
306 | }
307 |
308 | const isTrump = getCardSuit(card, gameMode)?.isTrump;
309 | return isTrump ? getCardNumericalScore(card, gameMode) + 100 : 0;
310 | }
311 |
312 | function getCardNumericalScore(card: Card, gameMode: GameMode): number {
313 | const cardSuit = getCardSuit(card, gameMode);
314 | return cardSuit?.cards.indexOf(card) ?? 0;
315 | }
316 |
317 | function isCardOfSuit(card: Card, suit: Suit): boolean {
318 | return card.startsWith(suit);
319 | }
320 |
321 | function getCardSuit(card: Card, gameMode: GameMode): SuitDetails | undefined {
322 | return Object.values(CARD_DECKS[gameMode]).find((suit) =>
323 | suit.cards.includes(card),
324 | );
325 | }
326 |
327 | export function isSuitInDeck(suit: Suit, gameMode: GameMode): boolean {
328 | return Object.keys(CARD_DECKS[gameMode]).includes(suit);
329 | }
330 |
--------------------------------------------------------------------------------
/src/game/__tests__/eop.test.js:
--------------------------------------------------------------------------------
1 | import { Client } from 'boardgame.io/client';
2 | import { Local } from 'boardgame.io/multiplayer';
3 | import { getStartingCard } from '../../utils/cardDefinitions';
4 | import { DEFAULT_GAME_MODE, DEFAULT_START_SUIT } from '../../utils/constants';
5 | import { ElevationOfPrivilege } from '../eop';
6 |
7 | describe('game', () => {
8 | const spec = {
9 | game: ElevationOfPrivilege,
10 | numPlayers: 3,
11 | multiplayer: Local(),
12 | };
13 | const players = {
14 | 0: Client({ ...spec, playerID: '0' }),
15 | 1: Client({ ...spec, playerID: '1' }),
16 | 2: Client({ ...spec, playerID: '2' }),
17 | };
18 |
19 | let createdThreat = '';
20 | const STARTING_CARD = getStartingCard(DEFAULT_GAME_MODE, DEFAULT_START_SUIT);
21 |
22 | Object.keys(players).forEach((k) => {
23 | players[k].start();
24 | });
25 |
26 | const startingPlayer = players['0'].getState().ctx.currentPlayer;
27 |
28 | it("shouldn't start in a stage/phase", () => {
29 | expect(players['0'].getState().ctx.activePlayers).toBeFalsy();
30 | expect(players['0'].getState().ctx.phase).toBeFalsy();
31 | });
32 |
33 | it('should start with scores set to zero', () => {
34 | expect(players['0'].getState().G.scores).toStrictEqual([0, 0, 0]);
35 | });
36 |
37 | it('have correct order in ctx', () => {
38 | const state = players['0'].getState();
39 | expect(state.ctx.playOrder).toStrictEqual(['0', '1', '2']);
40 | });
41 |
42 | it('should move to the threats stage when the first player makes a move', () => {
43 | const starting = players['0'].getState().ctx.currentPlayer;
44 | players[starting].moves.draw(STARTING_CARD);
45 |
46 | const state = players['0'].getState();
47 | expect(state.G.dealt).toContain(STARTING_CARD);
48 | expect(state.G.dealtBy).toBe(starting);
49 | expect(state.G.suit).toBe(STARTING_CARD.slice(0, 1));
50 | expect(players['0'].getState().ctx.activePlayers).toStrictEqual({
51 | 0: 'threats',
52 | 1: 'threats',
53 | 2: 'threats',
54 | });
55 | });
56 |
57 | it('the played card should not be present in the deck', () => {
58 | const lastPlayer = players['0'].getState().G.dealtBy;
59 | const cards = players[lastPlayer].getState().G.players[lastPlayer];
60 | expect(cards.includes(STARTING_CARD)).toBeFalsy();
61 | });
62 |
63 | it('player should not be able to draw again', () => {
64 | const lastPlayer = players['0'].getState().G.dealtBy;
65 | const cards = players[lastPlayer].getState().G.players[lastPlayer];
66 | const card = cards[Math.floor(Math.random() * cards.length)];
67 |
68 | players[lastPlayer].moves.draw(card);
69 |
70 | const state = players['0'].getState();
71 |
72 | expect(state.G.dealt.includes(card)).toBeFalsy();
73 | });
74 |
75 | it('anyone should be able to select diagrams in a threats stage', () => {
76 | Object.keys(players).forEach((k) => {
77 | players[k].moves.selectDiagram(k);
78 | const state = players['0'].getState();
79 | expect(state.G.selectedDiagram).toBe(k);
80 | });
81 | });
82 |
83 | it('anyone should be able to select components in a threats stage', () => {
84 | Object.keys(players).forEach((k) => {
85 | players[k].moves.selectComponent(k);
86 | const state = players['0'].getState();
87 | expect(state.G.selectedComponent).toBe(k);
88 | });
89 | });
90 |
91 | it('anyone should be able to select threats in a threats stage', () => {
92 | Object.keys(players).forEach((k) => {
93 | players[k].moves.selectThreat(k);
94 | const state = players['0'].getState();
95 | expect(state.G.selectedThreat).toBe(k);
96 | });
97 | });
98 |
99 | it('anyone should be able to toggle the threat add modal in a threats stage', () => {
100 | Object.keys(players).forEach((k) => {
101 | players[k].moves.toggleModal();
102 | let state = players['0'].getState();
103 | expect(state.G.threat.modal).toBeTruthy();
104 | expect(state.G.threat.owner).toBe(k);
105 |
106 | // only the owner should be able to toggle the modal again
107 | players[k].moves.toggleModal();
108 | state = players['0'].getState();
109 | expect(state.G.threat.modal).toBeFalsy();
110 | });
111 | });
112 |
113 | it('the players who pass in the threats stage should not be able to toggle the modal', () => {
114 | players['0'].moves.pass();
115 | players['0'].moves.pass();
116 | players['0'].moves.toggleModal();
117 | let state = players['0'].getState();
118 | expect(state.G.threat.modal).toBeFalsy();
119 | });
120 |
121 | it('the players who have passed should not be able to select a diagram', () => {
122 | players['0'].moves.selectDiagram('foo');
123 | let state = players['0'].getState();
124 | expect(state.G.selectedDiagram).not.toBe('foo');
125 | });
126 |
127 | it('the players who have passed should not be able to select a component', () => {
128 | players['0'].moves.selectComponent('foo');
129 | let state = players['0'].getState();
130 | expect(state.G.selectedComponent).not.toBe('foo');
131 | });
132 |
133 | it('the players who have passed should not be able to select a threat', () => {
134 | players['0'].moves.selectThreat('foo');
135 | let state = players['0'].getState();
136 | expect(state.G.selectedThreat).not.toBe('foo');
137 | });
138 |
139 | it('the players who have not passed should be able to add a threat', () => {
140 | players['1'].moves.toggleModal();
141 | let state = players['0'].getState();
142 | let diagram = state.G.selectedDiagram;
143 | let component = state.G.selectedComponent;
144 | createdThreat = state.G.threat.id;
145 |
146 | players['1'].moves.updateThreat('title', 'foo');
147 | players['1'].moves.updateThreat('description', 'bar');
148 | players['1'].moves.updateThreat('mitigation', 'baz');
149 | players['1'].moves.addOrUpdateThreat();
150 |
151 | state = players['0'].getState();
152 |
153 | const t = state.G.identifiedThreats[diagram][component][createdThreat];
154 | expect(t.id).toBe(createdThreat);
155 | expect(t.owner).toBe('1');
156 | expect(t.title).toBe('foo');
157 | expect(t.description).toBe('bar');
158 | expect(t.mitigation).toBe('baz');
159 | });
160 |
161 | it('the players who have not passed and are owners should be able to toggle modal update', () => {
162 | players['1'].moves.toggleModalUpdate({
163 | owner: '1',
164 | title: 'foo',
165 | description: 'bar',
166 | mitigation: 'baz',
167 | });
168 | let state = players['0'].getState();
169 | expect(state.G.threat.new).toBeFalsy();
170 | players['1'].moves.toggleModal();
171 | });
172 |
173 | it('the threat owners should be able to delete threats', () => {
174 | players['1'].moves.deleteThreat({
175 | owner: '1',
176 | id: createdThreat,
177 | });
178 |
179 | let state = players['0'].getState();
180 | let diagram = state.G.selectedDiagram;
181 | let component = state.G.selectedComponent;
182 | expect(state.G.identifiedThreats[diagram][component]).toStrictEqual({});
183 | });
184 |
185 | it('should move on when all players have passed', () => {
186 | players['1'].moves.pass();
187 | players['2'].moves.pass();
188 |
189 | expect(players['0'].getState().ctx.activePlayers).toBeFalsy();
190 | });
191 |
192 | it('should respect the play order', () => {
193 | const state = players['0'].getState();
194 | const nextPlayer = (parseInt(startingPlayer) + 1) % state.ctx.numPlayers;
195 | expect(state.ctx.currentPlayer).toBe(nextPlayer.toString());
196 | });
197 | });
198 |
--------------------------------------------------------------------------------
/src/game/__tests__/utils.test.ts:
--------------------------------------------------------------------------------
1 | import {
2 | CARD_LIMIT,
3 | DEFAULT_START_SUIT,
4 | GameMode,
5 | ModelType,
6 | } from '../../utils/constants';
7 | import { endTurnIf, setupGame, shuffleCards } from '../utils';
8 | import seedrandom from 'seedrandom';
9 |
10 | import type { Ctx } from '../context';
11 | import type { SetupData } from '../setupData';
12 | import {
13 | getAllCards,
14 | getStartingCard,
15 | Suit,
16 | } from '../../utils/cardDefinitions';
17 | import type { Card } from 'reactstrap';
18 |
19 | describe('utils', () => {
20 | describe('setupGame', () => {
21 | const ctx = {
22 | random: {
23 | Shuffle: (deck) => deck,
24 | },
25 | } as Ctx;
26 |
27 | it('when the model is an image, starts off with a selected dummy component, so the entire image is treated as selected', () => {
28 | const game = setupGame(ctx, {
29 | modelType: ModelType.IMAGE,
30 | } as SetupData);
31 |
32 | expect(game.selectedComponent).toBeTruthy();
33 | });
34 |
35 | [
36 | {
37 | testCase: 'the default model',
38 | modelType: ModelType.DEFAULT,
39 | },
40 | {
41 | testCase: 'a Threat Dragon model',
42 | modelType: ModelType.THREAT_DRAGON,
43 | },
44 | ].forEach(({ testCase, modelType }) =>
45 | it(`when the model is ${testCase}, starts off with no selected component`, () => {
46 | const game = setupGame(ctx, { modelType } as SetupData);
47 |
48 | expect(game.selectedComponent).toEqual('');
49 | }),
50 | );
51 | });
52 |
53 | describe('shuffleCards', () => {
54 | // The idea behind these tests is that the functionality of 'shuffleCards'
55 | // strongly depends on how the cards get randomly shuffled.
56 | // Create a large number of reproducible shufflings and hope that all relevant cases are covered.
57 | [
58 | '37e784e1f2d6',
59 | 'dba82de704ce',
60 | 'c31c8f67beda',
61 | '4b23875e07d5',
62 | 'bb8f6df8aaad',
63 | 'cbc665bdea1d',
64 | '33a633885076',
65 | '036d489534f1',
66 | 'ebd94bc2faca',
67 | 'cb98363c2b33',
68 | 'fffbae6ba3c6',
69 | '03db8bd7ee06',
70 | 'cfdbdb6cf016',
71 | 'bbac51a69f98',
72 | '8f4753475942',
73 | '1b52d5c225bd',
74 | 'df1d76fe2d97',
75 | 'ff419b4d3a4e',
76 | 'eb83c988e16e',
77 | 'b7653656487c',
78 | 'b39062d46994',
79 | 'cfa5b75ae803',
80 | '175892b0d01c',
81 | 'ffaeb494ef2d',
82 | '1ffcaae17e1d',
83 | '63583b4c2835',
84 | '77ac3beadf76',
85 | '33bf763b7de2',
86 | 'cf74a13400ee',
87 | 'f384ce842917',
88 | '7bf63faed171',
89 | 'c30ef06a9077',
90 | '8bad931f842d',
91 | '93cc4ea7ab8f',
92 | '03695fbea1e2',
93 | '03db919702d9',
94 | 'abbe49553f82',
95 | '4738de085643',
96 | '0f7bc971aad6',
97 | '4fc5112ed5fb',
98 | '3789717805a1',
99 | 'df0b0bd054d4',
100 | '07cde6c25f13',
101 | '1b8c43bf94f5',
102 | 'd362851b4f54',
103 | '13c46e09085d',
104 | 'dbca023969d6',
105 | '5b26533ab65c',
106 | '034bd3f354ee',
107 | 'f7cf91ae4086',
108 | ].forEach((seed) => {
109 | const random = seedrandom(seed);
110 | const fakedShuffle =
14 | {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
15 |
17 |
18 |
23 |
24 | Elevation of Privilege
25 |
26 |
27 |
41 |
42 |
70 |
206 |
207 |
208 |
209 |
210 |
214 |
215 |
216 | );
217 | };
218 |
219 | export default About;
220 |
--------------------------------------------------------------------------------
/src/client/components/threatbar/threatbar.js:
--------------------------------------------------------------------------------
1 | import {
2 | faBolt,
3 | faEdit,
4 | faPlus,
5 | faTrash,
6 | } from '@fortawesome/free-solid-svg-icons';
7 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
8 | import PropTypes from 'prop-types';
9 | import React from 'react';
10 | import nl2br from 'react-nl2br';
11 | import {
12 | Button,
13 | Card,
14 | CardBody,
15 | CardFooter,
16 | CardHeader,
17 | CardText,
18 | Col,
19 | Collapse,
20 | ListGroup,
21 | ListGroupItem,
22 | Row,
23 | } from 'reactstrap';
24 | import confirm from 'reactstrap-confirm';
25 | import { getSuitDisplayName } from '../../../utils/cardDefinitions';
26 | import { getComponentName } from '../../../utils/utils';
27 | import ThreatModal from '../threatmodal/threatmodal';
28 | import './threatbar.css';
29 |
30 | class Threatbar extends React.Component {
31 | static get propTypes() {
32 | return {
33 | playerID: PropTypes.any,
34 | model: PropTypes.any,
35 | G: PropTypes.any.isRequired,
36 | ctx: PropTypes.any.isRequired,
37 | moves: PropTypes.any.isRequired,
38 | active: PropTypes.bool.isRequired,
39 | names: PropTypes.any.isRequired,
40 | isInThreatStage: PropTypes.bool,
41 | };
42 | }
43 |
44 | static get defaultProps() {
45 | return {
46 | isInThreatStage: false,
47 | };
48 | }
49 |
50 | getSelectedComponent() {
51 | if (this.props.G.selectedComponent === '' || this.props.model === null) {
52 | return null;
53 | }
54 |
55 | let diagram =
56 | this.props.model.detail.diagrams[this.props.G.selectedDiagram]
57 | .diagramJson;
58 | for (let i = 0; i < diagram.cells.length; i++) {
59 | let cell = diagram.cells[i];
60 | if (cell.id === this.props.G.selectedComponent) {
61 | return cell;
62 | }
63 | }
64 |
65 | return null;
66 | }
67 |
68 | getThreatsForSelectedComponent() {
69 | let threats = [];
70 | if (this.props.G.selectedComponent === '' || this.props.model === null) {
71 | return threats;
72 | }
73 |
74 | let diagram =
75 | this.props.model.detail.diagrams[this.props.G.selectedDiagram]
76 | .diagramJson;
77 | for (let i = 0; i < diagram.cells.length; i++) {
78 | let cell = diagram.cells[i];
79 | if (this.props.G.selectedComponent !== '') {
80 | if (cell.id === this.props.G.selectedComponent) {
81 | if (Array.isArray(cell.threats)) {
82 | // fix threat ids
83 | for (let j = 0; j < cell.threats.length; j++) {
84 | if (!('id' in cell.threats[j])) {
85 | cell.threats[j].id = j + '';
86 | }
87 | }
88 | return cell.threats;
89 | }
90 | }
91 | } else {
92 | /*
93 | if (Array.isArray(cell.threats)) {
94 | threats = threats.concat(cell.threats);
95 | }
96 | */
97 | }
98 | }
99 | return threats;
100 | }
101 |
102 | getIdentifiedThreatsForSelectedComponent() {
103 | let threats = [];
104 | if (this.props.G.selectedDiagram in this.props.G.identifiedThreats) {
105 | if (
106 | this.props.G.selectedComponent in
107 | this.props.G.identifiedThreats[this.props.G.selectedDiagram]
108 | ) {
109 | for (let k in this.props.G.identifiedThreats[
110 | this.props.G.selectedDiagram
111 | ][this.props.G.selectedComponent]) {
112 | let t =
113 | this.props.G.identifiedThreats[this.props.G.selectedDiagram][
114 | this.props.G.selectedComponent
115 | ][k];
116 | threats.push(t);
117 | }
118 | }
119 | }
120 |
121 | return threats;
122 | }
123 |
124 | render() {
125 | const threats = [...this.getThreatsForSelectedComponent()].reverse();
126 | const identifiedThreats = [
127 | ...this.getIdentifiedThreatsForSelectedComponent(),
128 | ].reverse();
129 | const component = this.getSelectedComponent();
130 | const componentName = getComponentName(component);
131 |
132 | return (
133 |
20 |
22 | About
28 |29 | The Elevation of Privilege game is designed to be the easiest 30 | way to start looking at your design from a security 31 | perspective. It's one way to threat model, intended to be 32 | picked up and used by any development group. 33 |
34 |35 | Because the game uses STRIDE threats, it gives you a framework 36 | for thinking, and specific actionable examples of those 37 | threats. 38 |
39 |STRIDE stands for
40 || Spoofing | 44 |Impersonating something or someone else | 45 |
|---|---|
| Tampering | 48 |Modifying data or code | 49 |
| Repudiation | 52 |Claiming not to have performed an action | 53 |
| Information Disclosure | 56 |57 | Exposing information to someone not authorized to see it 58 | | 59 |
| Denial of Service | 62 |Denying or degrading service to users | 63 |
| Elevation of Privilege | 66 |Gain capabilities without proper authorization | 67 |
Preparing to play
71 |72 | An Elevation of Privilege game is usually initiated for one of 73 | a few reasons. Those include because a group of developers has 74 | a system or feature to threat model, because someone wants to 75 | learn or teach the skill, or because someone has picked up a 76 | copy of the game and wants to explore. 77 |
78 |79 | This is a super-set of all non-game motivations to threat 80 | model. In any case, it is important to start with a system to 81 | be threat modelled, and an architectural diagram of that 82 | system should be available. A whiteboard diagram is ideal if 83 | participants agree it is reasonably accurate and it shows 84 | programs, data flows and data stores. For this version of the 85 | game, players should use a model created on{' '} 86 | 91 | Threat Dragon 92 | 93 | . If no such model exists, it needs to be created before play 94 | starts. 95 |
96 |97 | Players need a way to track bugs hence using a Threat Dragon 98 | model is ideal. 99 |
100 |How to play
101 |102 | Play starts by dealing out the entire deck (which is 103 | automatically done when the game is created), and ensuring 104 | players are familiar with the rules. 105 |
106 |Rules
107 |108 | A player (most likely an engineer) developing the system would 109 | explain the diagram to everyone playing. 110 |
111 |112 | Play starts with the player with the 3 of Tampering, and then 113 | proceeds clockwise around the table in tricks. 114 |
115 |116 | The game has two phases, Play and{' '} 117 | Threat Identification 118 |
119 |120 | In the Play phase, the current player would 121 | only be able to navigate through the diagram and/or select 122 | components. 123 |
124 |125 | When a card is dealt, the{' '} 126 | Threat Identification phase begins and 127 | players in any order can interact with the model and add 128 | threats or pass. 129 |
130 |After all players pass, only then would the play resume.
131 |132 | Each trick is played 'in' the suit that was led. 133 | That is, each player must play a card of that suit if they 134 | have one. Playing a card consists of reading it aloud, and 135 | explaining how it applies to the system being threat modelled 136 | and the component affected. The players can record their 137 | threat by selecting the component and adding the associated 138 | threat. 139 |
140 |141 | Playing a card where a player knows of a compensating control 142 | is less exciting, but still valid, because it allows for 143 | discussion of compensating controls, and helps newcomers to 144 | threat modelling understand the cycle of discovery and 145 | mitigation. 146 |
147 |148 | If the player has no cards left in the suit that was led, then 149 | they may play a card from any suit, the game does that 150 | automatically and only valid cards are available to be played. 151 | After each player has played a card, the trick is won by the 152 | player who has played the highest card in either the suit that 153 | was led or in the 'trump' suit, Elevation of 154 | Privilege. 155 |
156 |157 | The highest card is the highest value card played in the suit 158 | led, unless there was one or more trump card played. If a 159 | trump card has been played, the highest value trump card is 160 | the winning card. 161 |
162 |163 | A point is awarded for every threat identified and for every 164 | hand that is won. 165 |
166 |167 | The final model with the threats can be downloaded at the end 168 | of the game. 169 |
170 |Credits
171 |172 | The game was originally invented by{' '} 173 | 178 | Adam Shostack 179 | {' '} 180 | at Microsoft. The{' '} 181 | 186 | EoP Whitepaper 187 | {' '} 188 | written by Adam can be downloaded which describes the 189 | motivation, experience and lessons learned in creating the 190 | game. 191 |
192 |193 | The motivation for creating this online version of the game at 194 | Careem was due to a large number of teams working remotely 195 | across several geographies and we wanted to scale our method 196 | of teaching threat modeling to our engineering teams. 197 |
198 |199 | The game is built using{' '} 200 | boardgame.io, a framework 201 | for developing turn based games. The graphics, icons and card 202 | images used in this version were extracted from the original 203 | card game built by Microsoft. 204 |
205 |
137 |
138 |
139 | Threats for {componentName}{' '}
140 |
142 |
143 | {this.props.playerID && (
144 |
158 | )}
159 |
181 | {identifiedThreats.map((val, idx) => ( 182 |
183 | this.props.moves.selectThreat(val.id)}
186 | >
187 | {val.title}
188 |
189 |
203 |
204 |
205 |
206 | {nl2br(val.description)}
207 |
208 |{nl2br(val.mitigation)}
209 |
210 |
211 |
212 |
238 |
239 |
240 |
241 | ))}
242 | {identifiedThreats.length <= 0 && (
243 |
244 | No threats identified for this component yet.
245 |
246 | )}
247 |
248 | {threats.map((val, idx) => ( 249 |
250 | this.props.moves.selectThreat(val.id)}
253 | >
254 | {val.title}
255 |
256 |
269 |
270 |
271 |
272 | {nl2br(val.description)}
273 |
274 |{nl2br(val.mitigation)}
275 |
276 |
277 |
278 | ))}
279 | {threats.length <= 0 && (
280 |
281 | No existing threats for this component.
282 |
283 | )}
284 |
285 |
286 |
295 | );
296 | }
297 | }
298 |
299 | export default Threatbar;
300 |
--------------------------------------------------------------------------------
/src/client/styles/cards.css:
--------------------------------------------------------------------------------
1 | .carda10, .carda2, .carda3, .carda4, .carda5,
2 | .carda6, .carda7, .carda8, .carda9, .cardaa,
3 | .cardaj, .cardak, .cardaq, .cardt10, .cardt2, .cardt3, .cardt4, .cardt5,
4 | .cardt6, .cardt7, .cardt8, .cardt9, .cardta,
5 | .cardtj, .cardtk, .cardtq, .cardb10, .cardb2,
6 | .cardb3, .cardb4, .cardb5, .cardb6, .cardb7,
7 | .cardb8, .cardb9, .cardba, .cardbj, .cardbk,
8 | .cardbq, .cardc10, .cardc2, .cardc3, .cardc4,
9 | .cardc5, .cardc6, .cardc7, .cardc8, .cardc9,
10 | .cardca, .cardcj, .cardck, .cardcq, .cardd10,
11 | .cardd2, .cardd3, .cardd4, .cardd5, .cardd6,
12 | .cardd7, .cardd8, .cardd9, .cardda, .carddj,
13 | .carddk, .carddq, .carde10,.carde2, .carde3, .carde4,
14 | .carde5, .carde6, .carde7, .carde8, .carde9,
15 | .cardea, .cardej, .cardek, .cardeq
16 | { display: inline-block; background: url('cards.jpg') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
17 |
18 | .carda10 { background-position: -5px -0px; width: 300px; height: 518px; }
19 | .carda2 { background-position: -310px -0px; width: 300px; height: 518px; }
20 | .carda3 { background-position: -615px -0px; width: 300px; height: 518px; }
21 | .carda4 { background-position: -920px -0px; width: 300px; height: 518px; }
22 | .carda5 { background-position: -1225px -0px; width: 300px; height: 518px; }
23 | .carda6 { background-position: -1530px -0px; width: 300px; height: 518px; }
24 | .carda7 { background-position: -1835px -0px; width: 300px; height: 518px; }
25 | .carda8 { background-position: -2140px -0px; width: 300px; height: 518px; }
26 | .carda9 { background-position: -5px -523px; width: 300px; height: 518px; }
27 | .cardaa { background-position: -310px -523px; width: 300px; height: 518px; }
28 | .cardaj { background-position: -615px -523px; width: 300px; height: 518px; }
29 | .cardak { background-position: -920px -523px; width: 300px; height: 518px; }
30 | .cardaq { background-position: -1225px -523px; width: 300px; height: 518px; }
31 | .cardt10 { background-position: -1530px -523px; width: 300px; height: 518px; }
32 | .cardt2 { background-position: -922px -4709px; width: 300px; height: 518px; }
33 | .cardt3 { background-position: -1226px -4708px; width: 300px; height: 518px; }
34 | .cardt4 { background-position: -1530px -4709px; width: 300px; height: 518px; }
35 | .cardt5 { background-position: -1835px -523px; width: 300px; height: 518px; }
36 | .cardt6 { background-position: -2140px -523px; width: 300px; height: 518px; }
37 | .cardt7 { background-position: -5px -1046px; width: 300px; height: 518px; }
38 | .cardt8 { background-position: -310px -1046px; width: 300px; height: 518px; }
39 | .cardt9 { background-position: -615px -1046px; width: 300px; height: 518px; }
40 | .cardta { background-position: -920px -1046px; width: 300px; height: 518px; }
41 | .cardtj { background-position: -1225px -1046px; width: 300px; height: 518px; }
42 | .cardtk { background-position: -1530px -1046px; width: 300px; height: 518px; }
43 | .cardtq { background-position: -1835px -1046px; width: 300px; height: 518px; }
44 | .cardb10 { background-position: -2140px -1046px; width: 300px; height: 518px; }
45 | .cardb2 { background-position: -5px -1569px; width: 300px; height: 518px; }
46 | .cardb3 { background-position: -310px -1569px; width: 300px; height: 518px; }
47 | .cardb4 { background-position: -615px -1569px; width: 300px; height: 518px; }
48 | .cardb5 { background-position: -920px -1569px; width: 300px; height: 518px; }
49 | .cardb6 { background-position: -1225px -1569px; width: 300px; height: 518px; }
50 | .cardb7 { background-position: -1530px -1569px; width: 300px; height: 518px; }
51 | .cardb8 { background-position: -1835px -1569px; width: 300px; height: 518px; }
52 | .cardb9 { background-position: -2140px -1569px; width: 300px; height: 518px; }
53 | .cardba { background-position: -5px -2092px; width: 300px; height: 518px; }
54 | .cardbj { background-position: -310px -2092px; width: 300px; height: 518px; }
55 | .cardbk { background-position: -615px -2092px; width: 300px; height: 518px; }
56 | .cardbq { background-position: -920px -2092px; width: 300px; height: 518px; }
57 | .cardc10 { background-position: -1225px -2092px; width: 300px; height: 518px; }
58 | .cardc2 { background-position: -1530px -2092px; width: 300px; height: 518px; }
59 | .cardc3 { background-position: -1835px -2092px; width: 300px; height: 518px; }
60 | .cardc4 { background-position: -2140px -2092px; width: 300px; height: 518px; }
61 | .cardc5 { background-position: -5px -2615px; width: 300px; height: 518px; }
62 | .cardc6 { background-position: -310px -2615px; width: 300px; height: 518px; }
63 | .cardc7 { background-position: -615px -2615px; width: 300px; height: 518px; }
64 | .cardc8 { background-position: -920px -2615px; width: 300px; height: 518px; }
65 | .cardc9 { background-position: -1225px -2615px; width: 300px; height: 518px; }
66 | .cardca { background-position: -1530px -2615px; width: 300px; height: 518px; }
67 | .cardcj { background-position: -1835px -2615px; width: 300px; height: 518px; }
68 | .cardck { background-position: -2140px -2615px; width: 300px; height: 518px; }
69 | .cardcq { background-position: -5px -3138px; width: 300px; height: 518px; }
70 | .cardd10 { background-position: -310px -3138px; width: 300px; height: 518px; }
71 | .cardd2 { background-position: -615px -3138px; width: 300px; height: 518px; }
72 | .cardd3 { background-position: -920px -3138px; width: 300px; height: 518px; }
73 | .cardd4 { background-position: -1225px -3138px; width: 300px; height: 518px; }
74 | .cardd5 { background-position: -1530px -3138px; width: 300px; height: 518px; }
75 | .cardd6 { background-position: -1835px -3138px; width: 300px; height: 518px; }
76 | .cardd7 { background-position: -2140px -3138px; width: 300px; height: 518px; }
77 | .cardd8 { background-position: -5px -3661px; width: 300px; height: 518px; }
78 | .cardd9 { background-position: -310px -3661px; width: 300px; height: 518px; }
79 | .cardda { background-position: -615px -3661px; width: 300px; height: 518px; }
80 | .carddj { background-position: -920px -3661px; width: 300px; height: 518px; }
81 | .carddk { background-position: -1225px -3661px; width: 300px; height: 518px; }
82 | .carddq { background-position: -1530px -3661px; width: 300px; height: 518px; }
83 | .carde10 { background-position: -1835px -3661px; width: 300px; height: 518px; }
84 | .carde2 { background-position: -617px -4707px; width: 300px; height: 518px; }
85 | .carde3 { background-position: -2140px -3661px; width: 300px; height: 518px; }
86 | .carde4 { background-position: -5px -4184px; width: 300px; height: 518px; }
87 | .carde5 { background-position: -310px -4184px; width: 300px; height: 518px; }
88 | .carde6 { background-position: -615px -4184px; width: 300px; height: 518px; }
89 | .carde7 { background-position: -920px -4184px; width: 300px; height: 518px; }
90 | .carde8 { background-position: -1225px -4184px; width: 300px; height: 518px; }
91 | .carde9 { background-position: -1530px -4184px; width: 300px; height: 518px; }
92 | .cardea { background-position: -1835px -4184px; width: 300px; height: 518px; }
93 | .cardej { background-position: -2140px -4184px; width: 300px; height: 518px; }
94 | .cardek { background-position: -5px -4707px; width: 300px; height: 518px; }
95 | .cardeq { background-position: -310px -4707px; width: 300px; height: 518px; }
96 |
97 | .playing-card {
98 | border: 1px solid darkgray;
99 | -moz-box-shadow: .2em .2em .5em #ccc;
100 | -webkit-box-shadow: .2em .2em .5em #ccc;
101 | box-shadow: .2em .2em .5em #ccc;
102 | background-color: rgba(0, 0, 0, 0.2);
103 | bottom: 0;
104 | top: 0;
105 | }
106 |
107 | .card-none {
108 | border: none;
109 | }
110 |
111 | .card-rounded {
112 | border-radius: 44px;
113 | }
114 |
115 | .playingCardsContainer {
116 | position: fixed;
117 | bottom: 0;
118 | border-top: 4px double #ccc;
119 |
120 | background-image: radial-gradient(#ccc 20%, transparent 20%), radial-gradient(#fafafa 20%, transparent 20%);
121 | background-color: #eaeaea;
122 | background-position: 0 0, 50px 50px;
123 | background-size: 100px 100px;
124 | padding-left: 20px;
125 |
126 | width: 100%;
127 | }
128 |
129 | .playingCards {
130 | display: table;
131 | width: 100%;
132 | padding-top: 20px;
133 | height: 250px;
134 | }
135 |
136 | .playingCards:after {
137 | content: "";
138 | display: table;
139 | clear: both;
140 | }
141 |
142 | .playingCards .hand li {
143 | background-blend-mode: color;
144 | }
145 |
146 | .playingCards .hand .active {
147 | background-blend-mode: normal;
148 | border: 1px solid #000;
149 | }
150 |
151 | .playingCards .hand .active:hover {
152 | margin-top: -310px;
153 | cursor: pointer;
154 | transform: scale(1.0);
155 | }
156 |
157 | .scaled {
158 | transform-origin: top left;
159 | transform: scale(0.4);
160 | transition: all 0.4s ease-in-out;
161 | }
162 |
163 | .scaled-big {
164 | transform: scale(0.9);
165 | }
166 |
167 | .playingCards ul.table,
168 | .playingCards ul.hand,
169 | .playingCards ul.deck {
170 | list-style-type: none;
171 | padding: 0;
172 | margin: 0 0 1.5em 0;
173 | position: relative;
174 | }
175 | .playingCards ul.table li,
176 | .playingCards ul.hand li,
177 | .playingCards ul.deck li {
178 | margin: 0;
179 | padding: 0;
180 | list-style-type: none;
181 | float: left;
182 | }
183 |
184 | .playingCards ul.hand li,
185 | .playingCards ul.deck li {
186 | position: absolute;
187 | display: inline-block;
188 | }
189 |
190 | .playingCards ul.hand li:nth-child(1) { left: 0; }
191 | .playingCards ul.hand li:nth-child(2) { left: 3em; }
192 | .playingCards ul.hand li:nth-child(3) { left: 6em; }
193 | .playingCards ul.hand li:nth-child(4) { left: 9em; }
194 | .playingCards ul.hand li:nth-child(5) { left: 12em; }
195 | .playingCards ul.hand li:nth-child(6) { left: 15em; }
196 | .playingCards ul.hand li:nth-child(7) { left: 18em; }
197 | .playingCards ul.hand li:nth-child(8) { left: 21em; }
198 | .playingCards ul.hand li:nth-child(9) { left: 24em; }
199 | .playingCards ul.hand li:nth-child(10) { left: 27em; }
200 | .playingCards ul.hand li:nth-child(11) { left: 30em; }
201 | .playingCards ul.hand li:nth-child(12) { left: 33em; }
202 | .playingCards ul.hand li:nth-child(13) { left: 36em; }
203 | .playingCards ul.hand li:nth-child(14) { left: 39em; }
204 | .playingCards ul.hand li:nth-child(15) { left: 42em; }
205 | .playingCards ul.hand li:nth-child(16) { left: 45em; }
206 | .playingCards ul.hand li:nth-child(17) { left: 48em; }
207 | .playingCards ul.hand li:nth-child(18) { left: 51em; }
208 | .playingCards ul.hand li:nth-child(19) { left: 54em; }
209 | .playingCards ul.hand li:nth-child(20) { left: 57em; }
210 | .playingCards ul.hand li:nth-child(21) { left: 60em; }
211 | .playingCards ul.hand li:nth-child(22) { left: 63em; }
212 | .playingCards ul.hand li:nth-child(23) { left: 66em; }
213 | .playingCards ul.hand li:nth-child(24) { left: 69em; }
214 | .playingCards ul.hand li:nth-child(25) { left: 72em; }
215 | .playingCards ul.hand li:nth-child(26) { left: 75em; }
216 | .playingCards ul.hand li:nth-child(27) { left: 78em; }
217 | .playingCards ul.hand li:nth-child(28) { left: 81em; }
218 | .playingCards ul.hand li:nth-child(29) { left: 84em; }
219 | .playingCards ul.hand li:nth-child(30) { left: 87em; }
220 | .playingCards ul.hand li:nth-child(31) { left: 90em; }
221 | .playingCards ul.hand li:nth-child(32) { left: 93em; }
222 | .playingCards ul.hand li:nth-child(33) { left: 96em; }
223 | .playingCards ul.hand li:nth-child(34) { left: 99em; }
224 | .playingCards ul.hand li:nth-child(35) { left: 102em; }
225 | .playingCards ul.hand li:nth-child(36) { left: 105em; }
226 | .playingCards ul.hand li:nth-child(37) { left: 108em; }
227 |
--------------------------------------------------------------------------------
160 |
161 |
162 | Flow Data Elements
163 |
164 | {component !== null &&
165 | Array.isArray(component.dataElements) &&
166 | component.dataElements.map((val, idx) => (
167 |
168 | {val}
169 |
170 | ))}
171 | {component !== null &&
172 | !Array.isArray(component.dataElements) && (
173 |
174 | No data elements defined
175 |
176 | )}
177 |
178 |
179 |
180 | 161 |
181 | {identifiedThreats.map((val, idx) => ( 182 |
208 |
248 | {threats.map((val, idx) => ( 249 |
274 |