diff --git a/apps/client/CHANGELOG.md b/apps/client/CHANGELOG.md index 73903a8..8524c50 100644 --- a/apps/client/CHANGELOG.md +++ b/apps/client/CHANGELOG.md @@ -1,5 +1,17 @@ # @eop/client +## 1.1.0 + +### Minor Changes + +- Draw a random card. + +### Patch Changes + +- Updated dependencies + - @eop/shared@1.1.0 + - @eop/cornucopia-cards@1.1.0 + ## 1.0.1 ### Patch Changes diff --git a/apps/client/package.json b/apps/client/package.json index 7616e56..aa4fd14 100644 --- a/apps/client/package.json +++ b/apps/client/package.json @@ -1,7 +1,7 @@ { "name": "@eop/client", "type": "module", - "version": "1.0.1", + "version": "1.1.0", "main": "src/client/index.tsx", "scripts": { "build": "tsc -b tsconfig.app.json && vite build", diff --git a/apps/client/public/logo.png b/apps/client/public/logo.png index 8258a7c..0491615 100644 Binary files a/apps/client/public/logo.png and b/apps/client/public/logo.png differ diff --git a/apps/client/src/components/dealtcard/dealtcard.tsx b/apps/client/src/components/dealtcard/dealtcard.tsx index e258dff..d09bc05 100644 --- a/apps/client/src/components/dealtcard/dealtcard.tsx +++ b/apps/client/src/components/dealtcard/dealtcard.tsx @@ -6,19 +6,22 @@ import type { Card } from '@eop/shared'; interface DealtCardProps { gameMode: GameMode; card: Card; + isAlignedRight?: boolean; } -const DealtCard: React.FC = ({ gameMode, card }) => { +const DealtCard: React.FC = ({ + gameMode, + card, + isAlignedRight = false, +}) => { const roundedClass = gameMode === GameMode.CUMULUS ? `card-rounded-cumulus` : `card-rounded`; - const translationClass = - gameMode === GameMode.EOMLSEC ? `card-translate-left` : ``; return (
); }; diff --git a/apps/client/src/components/footer/footer.tsx b/apps/client/src/components/footer/footer.tsx index d08e622..277de52 100644 --- a/apps/client/src/components/footer/footer.tsx +++ b/apps/client/src/components/footer/footer.tsx @@ -12,7 +12,7 @@ type FooterProps = { }; const Footer: FC = ({ short = false }) => ( - + v{packageJson.version} {!short && ( <> @@ -20,10 +20,12 @@ const Footer: FC = ({ short = false }) => ( {' '} - made with{' '} at - Careem and{' '} - TNG Technology Consulting - - Elevation of Privilege was originally invented at Microsoft, - Cornucopia was developed at OWASP, Cumulus was started at{' '} +   + + TNG Technology Consulting + {' '} + and Careem - Elevation of Privilege was originally invented at + Microsoft, Cornucopia was developed at OWASP, Cumulus was started at{' '} TNG Technology Consulting, Elevation of MLsec was developed at{' '} Kantega AS. diff --git a/apps/client/src/components/logo/logo.module.css b/apps/client/src/components/logo/logo.module.css new file mode 100644 index 0000000..424c134 --- /dev/null +++ b/apps/client/src/components/logo/logo.module.css @@ -0,0 +1,3 @@ +.logo { + cursor: pointer; +} diff --git a/apps/client/src/components/logo/logo.tsx b/apps/client/src/components/logo/logo.tsx index 5d1888a..3100be3 100644 --- a/apps/client/src/components/logo/logo.tsx +++ b/apps/client/src/components/logo/logo.tsx @@ -1,11 +1,13 @@ import type React from 'react'; import { useNavigate } from 'react-router-dom'; +import classes from './logo.module.css'; const Logo: React.FC = () => { const navigate = useNavigate(); return ( logo { + const [selectedDecks, setSelectedDecks] = useState(allDecks); + const selectableCards = selectedDecks.flatMap((deck) => + SUITS.flatMap((suit) => + CARD_DECKS[deck][suit].cards.map((card) => ({ + card, + gameMode: deck, + })), + ), + ); + const getRandomSelectableCard = () => + selectableCards[Math.floor(Math.random() * selectableCards.length)]; + const [selectedCard, setSelectedCard] = useState(getRandomSelectableCard()); + const selectCard = () => setSelectedCard(getRandomSelectableCard()); + const toggleCardDeck = (deck: GameMode) => + setSelectedDecks((selectedDecks) => + selectedDecks.includes(deck) + ? selectedDecks.filter((selectedDeck) => selectedDeck !== deck) + : [...selectedDecks, deck], + ); + + return ( + <> + + {allDecks.map((deck) => ( + + ))} + + {selectedCard && ( +
+ +
+ )} + + + ); +}; + +export default RandomCardDisplay; diff --git a/apps/client/src/components/sidebar/sidebar.css b/apps/client/src/components/sidebar/sidebar.css index d7ce48e..4da6c2c 100644 --- a/apps/client/src/components/sidebar/sidebar.css +++ b/apps/client/src/components/sidebar/sidebar.css @@ -34,3 +34,12 @@ margin-top: 3%; margin-bottom: 1%; } + +.dealt-card-container { + position: relative; +} + +.aligned-right { + position: absolute; + right: 0; +} diff --git a/apps/client/src/components/sidebar/sidebar.tsx b/apps/client/src/components/sidebar/sidebar.tsx index d129197..ce8c3e2 100644 --- a/apps/client/src/components/sidebar/sidebar.tsx +++ b/apps/client/src/components/sidebar/sidebar.tsx @@ -54,7 +54,7 @@ const Sidebar: FC = ({ secret={secret} block size="lg" - color="success" + color="secondary" apiEndpoint="download" > Download Model @@ -66,7 +66,7 @@ const Sidebar: FC = ({ secret={secret} block size="lg" - color="warning" + color="secondary" apiEndpoint="download/text" > Download Threats @@ -96,8 +96,13 @@ const Sidebar: FC = ({ Pass )} - - +
+ +
); }; diff --git a/apps/client/src/index.tsx b/apps/client/src/index.tsx index 42e2403..271ea21 100644 --- a/apps/client/src/index.tsx +++ b/apps/client/src/index.tsx @@ -1,10 +1,12 @@ import React from 'react'; import { createRoot } from 'react-dom/client'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; +import About from './pages/about'; import App from './pages/app'; import Create from './pages/create'; -import About from './pages/about'; +import RandomCard from './pages/random-card'; +import './styles/index.css'; import 'bootstrap/dist/css/bootstrap.min.css'; const container = document.getElementById('root'); @@ -14,6 +16,7 @@ const router = createBrowserRouter([ { path: '/:matchID/:playerID/:credentials', element: }, { path: '/', element: }, { path: '/about', element: }, + { path: '/random-card', element: }, ]); root.render(); diff --git a/apps/client/src/pages/about.tsx b/apps/client/src/pages/about.tsx index 4be12ef..6e4f494 100644 --- a/apps/client/src/pages/about.tsx +++ b/apps/client/src/pages/about.tsx @@ -1,5 +1,3 @@ -import '../styles/about.css'; - import type React from 'react'; import type { FC } from 'react'; import { Card, CardBody, CardHeader, Col, Container, Row } from 'reactstrap'; diff --git a/apps/client/src/pages/create.tsx b/apps/client/src/pages/create.tsx index 42a1ebe..2299607 100644 --- a/apps/client/src/pages/create.tsx +++ b/apps/client/src/pages/create.tsx @@ -16,7 +16,6 @@ import { import type { PlayerID } from 'boardgame.io'; import _ from 'lodash'; import React, { ChangeEvent } from 'react'; -import { Link } from 'react-router-dom'; import { Button, Card, @@ -256,7 +255,7 @@ class Create extends React.Component { formatAllLinks(): string { return ( - 'You have been invited to a game of Elevation of Privilege:\n\n' + + 'You have been invited to a threat modeling game:\n\n' + Array(this.state.players) .fill(0) .map((_, i) => { @@ -270,19 +269,6 @@ class Create extends React.Component { const cardBody = !this.state.created ? (
-

- Elevation of Privilege (EoP) is the easy way to get started and learn - threat modeling. It is a card game that developers, architects or - security experts can play. -

-

- To learn more about the game, navigate to the{' '} - about page. -

- - To start playing, select the number of players and enter their names. - -
) : (
@@ -551,7 +545,7 @@ class Create extends React.Component {
@@ -576,9 +570,7 @@ class Create extends React.Component {
- - Elevation of Privilege - + Threat Modeling {cardBody} diff --git a/apps/client/src/pages/random-card.tsx b/apps/client/src/pages/random-card.tsx new file mode 100644 index 0000000..3eb633e --- /dev/null +++ b/apps/client/src/pages/random-card.tsx @@ -0,0 +1,38 @@ +import React, { FC } from 'react'; +import { Card, CardBody, CardHeader, Col, Container, Row } from 'reactstrap'; +import Banner from '../components/banner/banner'; + +import Footer from '../components/footer/footer'; +import Logo from '../components/logo/logo'; +import RandomCardDisplay from '../components/randomcarddisplay/randomCardDisplay'; + +const RandomCard: FC = () => { + return ( +
+ + + + +
+ +
+ + Threat Modeling + +

Random Card

+ +
+
+ +
+ + +
+ ); +}; + +export default RandomCard; diff --git a/apps/client/src/styles/about.css b/apps/client/src/styles/about.css deleted file mode 100644 index 3244b38..0000000 --- a/apps/client/src/styles/about.css +++ /dev/null @@ -1,3 +0,0 @@ -html body { - background-color: #000; -} diff --git a/apps/client/src/styles/cards.css b/apps/client/src/styles/cards.css index 887df68..5d65c4b 100644 --- a/apps/client/src/styles/cards.css +++ b/apps/client/src/styles/cards.css @@ -24,10 +24,6 @@ border-radius: 25px; } -.card-translate-left { - margin-left: -5rem; -} - .playingCardsContainer { position: fixed; bottom: 0; diff --git a/apps/client/src/styles/create.css b/apps/client/src/styles/create.css index e911b63..6419573 100644 --- a/apps/client/src/styles/create.css +++ b/apps/client/src/styles/create.css @@ -1,7 +1,3 @@ -html body { - background-color: #000; -} - table { table-layout: auto; word-wrap: break-word; @@ -15,3 +11,11 @@ table { .text-input-wide { width: 100%; } + +.space-top { + margin-top: 2rem; +} + +.centered { + text-align: center; +} diff --git a/apps/client/src/styles/index.css b/apps/client/src/styles/index.css new file mode 100644 index 0000000..60beba5 --- /dev/null +++ b/apps/client/src/styles/index.css @@ -0,0 +1,3 @@ +html body { + background-color: #fff; +} diff --git a/apps/server/CHANGELOG.md b/apps/server/CHANGELOG.md index f6ff34b..2ff0843 100644 --- a/apps/server/CHANGELOG.md +++ b/apps/server/CHANGELOG.md @@ -1,5 +1,12 @@ # @eop/server +## 1.1.0 + +### Patch Changes + +- Updated dependencies + - @eop/shared@1.1.0 + ## 1.0.1 ### Patch Changes diff --git a/apps/server/package.json b/apps/server/package.json index 01575ca..8a88879 100644 --- a/apps/server/package.json +++ b/apps/server/package.json @@ -1,7 +1,7 @@ { "name": "@eop/server", "type": "commonjs", - "version": "1.0.1", + "version": "1.1.0", "scripts": { "build": "rimraf dist *.tsbuildinfo && tsc --build tsconfig.app.json", "dev": "cross-env TS_NODE_PROJECT=./tsconfig.app.json node --inspect --watch --unhandled-rejections=warn -r ts-node/register src/main.ts", diff --git a/package-lock.json b/package-lock.json index 8882f43..90cac71 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,7 @@ }, "apps/client": { "name": "@eop/client", - "version": "1.0.1", + "version": "1.1.0", "dependencies": { "@eop/cornucopia-cards": "*", "@eop/shared": "*", @@ -116,7 +116,7 @@ }, "apps/server": { "name": "@eop/server", - "version": "1.0.1", + "version": "1.1.0", "dependencies": { "@eop/shared": "*", "@koa/cors": "^5.0.0", @@ -10753,7 +10753,7 @@ }, "packages/cornucopia-cards": { "name": "@eop/cornucopia-cards", - "version": "1.0.1", + "version": "1.1.0", "license": "CC-BY-SA-3.0", "devDependencies": { "@eop/eslint-config": "*", @@ -10780,7 +10780,7 @@ }, "packages/eslint-config": { "name": "@eop/eslint-config", - "version": "1.0.1", + "version": "1.1.0", "devDependencies": { "@eop/prettier-config": "*", "@eslint/js": "^9.9.0", @@ -10813,7 +10813,7 @@ }, "packages/prettier-config": { "name": "@eop/prettier-config", - "version": "1.0.1", + "version": "1.1.0", "devDependencies": { "eslint": "^9.9.0", "prettier": "^3.3.3" @@ -10837,7 +10837,7 @@ }, "packages/shared": { "name": "@eop/shared", - "version": "1.0.1", + "version": "1.1.0", "dependencies": { "boardgame.io": "^0.50.2", "lodash": "^4.17.21", @@ -10877,7 +10877,7 @@ }, "packages/typescript-config": { "name": "@eop/typescript-config", - "version": "1.0.1", + "version": "1.1.0", "devDependencies": { "@eop/prettier-config": "*", "prettier": "^3.3.3" diff --git a/packages/cornucopia-cards/CHANGELOG.md b/packages/cornucopia-cards/CHANGELOG.md index f539b2d..7e4c8b0 100644 --- a/packages/cornucopia-cards/CHANGELOG.md +++ b/packages/cornucopia-cards/CHANGELOG.md @@ -1,5 +1,7 @@ # @eop/cornucopia-cards +## 1.1.0 + ## 1.0.1 ## 1.0.0 diff --git a/packages/cornucopia-cards/package.json b/packages/cornucopia-cards/package.json index 1a82842..904b216 100644 --- a/packages/cornucopia-cards/package.json +++ b/packages/cornucopia-cards/package.json @@ -1,7 +1,7 @@ { "name": "@eop/cornucopia-cards", "type": "module", - "version": "1.0.1", + "version": "1.1.0", "description": "a version of the playing cards OWASP Cornucopia adapted for this game", "author": "TNG Technology Consulting", "license": "CC-BY-SA-3.0", diff --git a/packages/eslint-config/CHANGELOG.md b/packages/eslint-config/CHANGELOG.md index ec4f7ec..1ce70e1 100644 --- a/packages/eslint-config/CHANGELOG.md +++ b/packages/eslint-config/CHANGELOG.md @@ -1,5 +1,7 @@ # @eop/eslint-config +## 1.1.0 + ## 1.0.1 ## 1.0.0 diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json index b98cf47..62ba6fc 100644 --- a/packages/eslint-config/package.json +++ b/packages/eslint-config/package.json @@ -1,7 +1,7 @@ { "name": "@eop/eslint-config", "type": "module", - "version": "1.0.1", + "version": "1.1.0", "exports": { "./base": { "default": "./base.js" diff --git a/packages/prettier-config/CHANGELOG.md b/packages/prettier-config/CHANGELOG.md index eaaef92..7e984fa 100644 --- a/packages/prettier-config/CHANGELOG.md +++ b/packages/prettier-config/CHANGELOG.md @@ -1,5 +1,7 @@ # @eop/prettier-config +## 1.1.0 + ## 1.0.1 ## 1.0.0 diff --git a/packages/prettier-config/package.json b/packages/prettier-config/package.json index bd6e40c..0917b65 100644 --- a/packages/prettier-config/package.json +++ b/packages/prettier-config/package.json @@ -1,7 +1,7 @@ { "name": "@eop/prettier-config", "type": "module", - "version": "1.0.1", + "version": "1.1.0", "main": "prettier.config.mjs", "scripts": { "checkformat": "prettier . --check", diff --git a/packages/shared/CHANGELOG.md b/packages/shared/CHANGELOG.md index ebf17bb..bca2778 100644 --- a/packages/shared/CHANGELOG.md +++ b/packages/shared/CHANGELOG.md @@ -1,5 +1,11 @@ # @eop/shared +## 1.1.0 + +### Minor Changes + +- Draw a random card. + ## 1.0.1 ## 1.0.0 diff --git a/packages/shared/package.json b/packages/shared/package.json index 32f2c51..2ce8713 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -1,7 +1,7 @@ { "name": "@eop/shared", "type": "commonjs", - "version": "1.0.1", + "version": "1.1.0", "main": "./dist/cjs/index.js", "types": "./dist/types/index.d.ts", "exports": { diff --git a/packages/shared/src/utils/cardDefinitions.ts b/packages/shared/src/utils/cardDefinitions.ts index 8d6f140..1bae004 100644 --- a/packages/shared/src/utils/cardDefinitions.ts +++ b/packages/shared/src/utils/cardDefinitions.ts @@ -1,7 +1,8 @@ import { GameMode } from './GameMode'; export type Card = string; -export type Suit = 'A' | 'B' | 'C' | 'D' | 'E' | 'T'; +export const SUITS = ['A', 'B', 'C', 'D', 'E', 'T'] as const; +export type Suit = (typeof SUITS)[number]; interface SuitDetails { name?: string; @@ -15,7 +16,7 @@ type CardDeckDefinitions = { [key in GameMode]: { [suit in Suit]: SuitDetails }; }; -const CARD_DECKS: CardDeckDefinitions = { +export const CARD_DECKS: CardDeckDefinitions = { [GameMode.EOP]: { A: { name: 'Denial of Service', diff --git a/packages/typescript-config/CHANGELOG.md b/packages/typescript-config/CHANGELOG.md index d825fa6..76e9c74 100644 --- a/packages/typescript-config/CHANGELOG.md +++ b/packages/typescript-config/CHANGELOG.md @@ -1,5 +1,7 @@ # @eop/typescript-config +## 1.1.0 + ## 1.0.1 ## 1.0.0 diff --git a/packages/typescript-config/package.json b/packages/typescript-config/package.json index 0ac6dd0..75e1ae6 100644 --- a/packages/typescript-config/package.json +++ b/packages/typescript-config/package.json @@ -1,7 +1,7 @@ { "name": "@eop/typescript-config", "type": "module", - "version": "1.0.1", + "version": "1.1.0", "scripts": { "checkformat": "prettier . --check", "format": "prettier . --write"