From 3915f56073b1d27a514e5cd96924f21e7f00cffa Mon Sep 17 00:00:00 2001 From: notaphplover Date: Mon, 16 Sep 2024 01:08:49 +0200 Subject: [PATCH] refactor(web-ui): update BaseCard with differrent css classes --- .../src/game/components/BaseCard.spec.tsx | 2 +- .../web-ui/src/game/components/BaseCard.tsx | 14 ++- .../src/game/components/DrawCard.spec.tsx | 2 +- .../src/game/components/ImageCard.spec.tsx | 2 +- .../web-ui/src/game/components/ImageCard.tsx | 2 +- .../src/game/components/NormalCard.spec.tsx | 2 +- .../src/game/components/ReverseCard.spec.tsx | 2 +- .../src/game/components/ReversedCard.tsx | 6 +- .../src/game/components/SkipCard.spec.tsx | 2 +- .../src/game/components/TextCard.spec.tsx | 2 +- .../src/game/components/WildCard.spec.tsx | 2 +- .../game/components/WildDraw4Card.spec.tsx | 2 +- .../web-ui/src/game/routes/GameRoutes.tsx | 2 +- .../web-ui/src/scss/base/_variables.scss | 4 + .../src/scss/game/components/_card.scss | 92 ++++++++++++------- 15 files changed, 86 insertions(+), 52 deletions(-) diff --git a/packages/frontend/web-ui/src/game/components/BaseCard.spec.tsx b/packages/frontend/web-ui/src/game/components/BaseCard.spec.tsx index c881ec110..f4c7462a9 100644 --- a/packages/frontend/web-ui/src/game/components/BaseCard.spec.tsx +++ b/packages/frontend/web-ui/src/game/components/BaseCard.spec.tsx @@ -25,7 +25,7 @@ describe(BaseCard.name, () => { ); const cardColor: HTMLElement = renderResult.container.querySelector( - '.cornie-base-card-inner-content', + '.cornie-card-inner-content', ) as HTMLElement; isExpectedClassNameInCard = diff --git a/packages/frontend/web-ui/src/game/components/BaseCard.tsx b/packages/frontend/web-ui/src/game/components/BaseCard.tsx index 7a9fae9ff..3e16f7b89 100644 --- a/packages/frontend/web-ui/src/game/components/BaseCard.tsx +++ b/packages/frontend/web-ui/src/game/components/BaseCard.tsx @@ -7,14 +7,12 @@ interface BaseCardOptions { export const BaseCard = (params: BaseCardOptions) => { return ( - - - - {params.children} - + + + {params.children} ); diff --git a/packages/frontend/web-ui/src/game/components/DrawCard.spec.tsx b/packages/frontend/web-ui/src/game/components/DrawCard.spec.tsx index 0abd626cf..14004085b 100644 --- a/packages/frontend/web-ui/src/game/components/DrawCard.spec.tsx +++ b/packages/frontend/web-ui/src/game/components/DrawCard.spec.tsx @@ -50,7 +50,7 @@ describe(DrawCard.name, () => { ); const cardColor: HTMLElement = renderResult.container.querySelector( - '.cornie-base-card-inner-content', + '.cornie-card-inner-content', ) as HTMLElement; isExpectedClassNameInCard = diff --git a/packages/frontend/web-ui/src/game/components/ImageCard.spec.tsx b/packages/frontend/web-ui/src/game/components/ImageCard.spec.tsx index 766775121..9204bb985 100644 --- a/packages/frontend/web-ui/src/game/components/ImageCard.spec.tsx +++ b/packages/frontend/web-ui/src/game/components/ImageCard.spec.tsx @@ -27,7 +27,7 @@ describe(ImageCard.name, () => { ); const cardColor: HTMLElement = renderResult.container.querySelector( - '.cornie-base-card-inner-content', + '.cornie-card-inner-content', ) as HTMLElement; isExpectedClassNameInCard = cardColor.classList.contains( diff --git a/packages/frontend/web-ui/src/game/components/ImageCard.tsx b/packages/frontend/web-ui/src/game/components/ImageCard.tsx index cf598cd51..f0817876e 100644 --- a/packages/frontend/web-ui/src/game/components/ImageCard.tsx +++ b/packages/frontend/web-ui/src/game/components/ImageCard.tsx @@ -10,7 +10,7 @@ export interface ImageCardOptions { export const ImageCard = (params: ImageCardOptions) => { return ( - + diff --git a/packages/frontend/web-ui/src/game/components/NormalCard.spec.tsx b/packages/frontend/web-ui/src/game/components/NormalCard.spec.tsx index b05f3b447..406726e73 100644 --- a/packages/frontend/web-ui/src/game/components/NormalCard.spec.tsx +++ b/packages/frontend/web-ui/src/game/components/NormalCard.spec.tsx @@ -37,7 +37,7 @@ describe(NormalCard.name, () => { ); const cardColor: HTMLElement = renderResult.container.querySelector( - '.cornie-base-card-inner-content', + '.cornie-card-inner-content', ) as HTMLElement; isExpectedClassNameInCard = diff --git a/packages/frontend/web-ui/src/game/components/ReverseCard.spec.tsx b/packages/frontend/web-ui/src/game/components/ReverseCard.spec.tsx index 31051fdf3..67933b39c 100644 --- a/packages/frontend/web-ui/src/game/components/ReverseCard.spec.tsx +++ b/packages/frontend/web-ui/src/game/components/ReverseCard.spec.tsx @@ -50,7 +50,7 @@ describe(ReverseCard.name, () => { ); const cardColor: HTMLElement = renderResult.container.querySelector( - '.cornie-base-card-inner-content', + '.cornie-card-inner-content', ) as HTMLElement; isExpectedClassNameInCard = diff --git a/packages/frontend/web-ui/src/game/components/ReversedCard.tsx b/packages/frontend/web-ui/src/game/components/ReversedCard.tsx index ea967ce19..68d79ae64 100644 --- a/packages/frontend/web-ui/src/game/components/ReversedCard.tsx +++ b/packages/frontend/web-ui/src/game/components/ReversedCard.tsx @@ -1,6 +1,8 @@ import { Box } from '@mui/material'; -export const ReversedCard = (): React.JSX.Element => { +export const ReversedCard = (options?: { + text?: string; +}): React.JSX.Element => { return ( @@ -28,7 +30,7 @@ export const ReversedCard = (): React.JSX.Element => { - CORNIE + {options?.text ?? 'CORNIE'} diff --git a/packages/frontend/web-ui/src/game/components/SkipCard.spec.tsx b/packages/frontend/web-ui/src/game/components/SkipCard.spec.tsx index 4dfbdb379..fa329fe40 100644 --- a/packages/frontend/web-ui/src/game/components/SkipCard.spec.tsx +++ b/packages/frontend/web-ui/src/game/components/SkipCard.spec.tsx @@ -50,7 +50,7 @@ describe(SkipCard.name, () => { ); const cardColor: HTMLElement = renderResult.container.querySelector( - '.cornie-base-card-inner-content', + '.cornie-card-inner-content', ) as HTMLElement; isExpectedClassNameInCard = diff --git a/packages/frontend/web-ui/src/game/components/TextCard.spec.tsx b/packages/frontend/web-ui/src/game/components/TextCard.spec.tsx index f4be30c00..866e1e0e2 100644 --- a/packages/frontend/web-ui/src/game/components/TextCard.spec.tsx +++ b/packages/frontend/web-ui/src/game/components/TextCard.spec.tsx @@ -27,7 +27,7 @@ describe(TextCard.name, () => { ); const cardColor: HTMLElement = renderResult.container.querySelector( - '.cornie-base-card-inner-content', + '.cornie-card-inner-content', ) as HTMLElement; isExpectedClassNameInCard = cardColor.classList.contains( diff --git a/packages/frontend/web-ui/src/game/components/WildCard.spec.tsx b/packages/frontend/web-ui/src/game/components/WildCard.spec.tsx index a4ad86415..baff5a356 100644 --- a/packages/frontend/web-ui/src/game/components/WildCard.spec.tsx +++ b/packages/frontend/web-ui/src/game/components/WildCard.spec.tsx @@ -45,7 +45,7 @@ describe(WildCard.name, () => { ); const cardColor: HTMLElement = renderResult.container.querySelector( - '.cornie-base-card-inner-content', + '.cornie-card-inner-content', ) as HTMLElement; isExpectedClassNameInCard = cardColor.classList.contains( diff --git a/packages/frontend/web-ui/src/game/components/WildDraw4Card.spec.tsx b/packages/frontend/web-ui/src/game/components/WildDraw4Card.spec.tsx index 3984348ed..6a4643420 100644 --- a/packages/frontend/web-ui/src/game/components/WildDraw4Card.spec.tsx +++ b/packages/frontend/web-ui/src/game/components/WildDraw4Card.spec.tsx @@ -45,7 +45,7 @@ describe(WildDraw4Card.name, () => { ); const cardColor: HTMLElement = renderResult.container.querySelector( - '.cornie-base-card-inner-content', + '.cornie-card-inner-content', ) as HTMLElement; isExpectedClassNameInCard = cardColor.classList.contains( diff --git a/packages/frontend/web-ui/src/game/routes/GameRoutes.tsx b/packages/frontend/web-ui/src/game/routes/GameRoutes.tsx index e10b6a4a2..e6b62e304 100644 --- a/packages/frontend/web-ui/src/game/routes/GameRoutes.tsx +++ b/packages/frontend/web-ui/src/game/routes/GameRoutes.tsx @@ -7,7 +7,7 @@ import { PublicGames } from '../pages/PublicGames'; export const GameRoutes = (): React.JSX.Element => { return ( - } /> + } /> } /> } /> diff --git a/packages/frontend/web-ui/src/scss/base/_variables.scss b/packages/frontend/web-ui/src/scss/base/_variables.scss index 13c5a5a24..eace999bf 100644 --- a/packages/frontend/web-ui/src/scss/base/_variables.scss +++ b/packages/frontend/web-ui/src/scss/base/_variables.scss @@ -4,6 +4,10 @@ $cornie_font: 'Gochi Hand'; // Colors $black: #000; +$blue: #00f; +$green: #0f0; +$red: #f00; +$yellow: #ff0; $white: #fff; $transparent: rgba(0, 0, 0, 0); diff --git a/packages/frontend/web-ui/src/scss/game/components/_card.scss b/packages/frontend/web-ui/src/scss/game/components/_card.scss index 84aadeb0e..341af2645 100644 --- a/packages/frontend/web-ui/src/scss/game/components/_card.scss +++ b/packages/frontend/web-ui/src/scss/game/components/_card.scss @@ -1,44 +1,74 @@ @use '../../base/variables' as variables; div.cornie-card { + aspect-ratio: 2 / 3; border: 2px solid var(--cg-bkg-primary-main); border-radius: 1.5rem; background-color: variables.$black; - height: 100%; padding: 0.5rem 0.5rem; -} -div.cornie-card div.cornie-card-inner-border { - border-radius: 1rem; - background-color: var(--cg-bkg-primary-main); - height: 100%; - padding: 0.5rem 0.5rem; -} + div.cornie-card-inner-border { + border-radius: 1rem; + background-color: var(--cg-bkg-primary-main); + height: 100%; + padding: 0.5rem 0.5rem; -div.cornie-card div.cornie-card-inner-content { - background-color: variables.$black; - border-radius: 0.5rem; - display: grid; - height: 100%; -} + div.cornie-card-inner-content { + border-radius: 0.5rem; + } + } -div.cornie-card div.cornie-card-icon { - align-self: end; - padding: 0 1rem; -} + div.cornie-card-inner-content { + background-color: variables.$black; + border-radius: 1rem; + display: grid; + height: 100%; -div.cornie-card div.cornie-card-icon path { - stroke: var(--cg-bkg-primary-light); -} + &.blue-card { + background-color: variables.$blue; + } + + &.green-card { + background-color: variables.$green; + } + + &.red-card { + background-color: variables.$red; + } + + &.yellow-card { + background-color: variables.$yellow; + } + + &.white-color { + background-color: variables.$white; + } + } + + div.cornie-card-icon { + align-self: end; + padding: 0 1rem; + + path { + stroke: var(--cg-bkg-primary-light); + } + } + + div.cornie-card-text { + align-self: start; + color: var(--cg-bkg-primary-light); + cursor: default; + font-family: variables.$cornie_font; + font-weight: bold; + font-size: variables.$font-xs; + letter-spacing: 0.3rem; + text-align: center; + user-select: none; + } -div.cornie-card div.cornie-card-text { - align-self: start; - color: var(--cg-bkg-primary-light); - cursor: default; - font-family: variables.$cornie_font; - font-weight: bold; - font-size: variables.$font-sm; - letter-spacing: 0.3rem; - text-align: center; - user-select: none; + div.cornie-card-image { + display: flex; + align-items: center; + justify-content: center; + } }