Merge pull request #1642 from notaphplover/refactor/rename-base-card-…

…class Update BaseCard with differrent css classes
notaphplover · Sep 15, 2024 · 63459b5 · 63459b5
2 parents 2984c37 + 3915f56
commit 63459b5
Show file tree

Hide file tree

Showing 15 changed files with 86 additions and 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
@@ -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
@@ -7,14 +7,12 @@ interface BaseCardOptions {
 
 export const BaseCard = (params: BaseCardOptions) => {
   return (
-    <Box component="div" className="cornie-base-card">
-      <Box component="div" className="cornie-base-card-inner-border">
-        <Box
-          component="div"
-          className={`cornie-base-card-inner-content ${params.colorClass}`}
-        >
-          {params.children}
-        </Box>
+    <Box component="div" className="cornie-card">
+      <Box
+        component="div"
+        className={`cornie-card-inner-content ${params.colorClass}`}
+      >
+        {params.children}
       </Box>
     </Box>
   );

diff --git 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
@@ -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
@@ -10,7 +10,7 @@ export interface ImageCardOptions {
 export const ImageCard = (params: ImageCardOptions) => {
   return (
     <BaseCard colorClass={params.colorClass}>
-      <Box component="div" className="cornie-base-card-image">
+      <Box component="div" className="cornie-card-image">
         <img src={params.image} />
       </Box>
     </BaseCard>

diff --git 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
@@ -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
@@ -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 (
     <Box component="div" className="cornie-card">
       <Box component="div" className="cornie-card-inner-border">
@@ -28,7 +30,7 @@ export const ReversedCard = (): React.JSX.Element => {
             </svg>
           </Box>
           <Box component="div" className="cornie-card-text">
-            CORNIE
+            {options?.text ?? 'CORNIE'}
           </Box>
         </Box>
       </Box>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -7,7 +7,7 @@ import { PublicGames } from '../pages/PublicGames';
 export const GameRoutes = (): React.JSX.Element => {
   return (
     <Routes>
-      <Route path="/" element={<CreateNewGame />} />
+      <Route path="/create" element={<CreateNewGame />} />
       <Route path="/join" element={<JoinExistingGame />} />
       <Route path="/public" element={<PublicGames />} />
     </Routes>

diff --git 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
@@ -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;
+  }
 }