img() add images

immortal-tofu · Dec 5, 2023 · 5bd6383 · 5bd6383
1 parent 90ac457
commit 5bd6383
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 15 deletions.
diff --git a/src/modules/game/assets/badguy.jpg b/src/modules/game/assets/badguy.jpg
diff --git a/src/modules/game/assets/bomb.jpg b/src/modules/game/assets/bomb.jpg
diff --git a/src/modules/game/assets/card.jpg b/src/modules/game/assets/card.jpg
diff --git a/src/modules/game/assets/goodguy.jpg b/src/modules/game/assets/goodguy.jpg
diff --git a/src/modules/game/assets/neutral.jpg b/src/modules/game/assets/neutral.jpg
diff --git a/src/modules/game/assets/wire.jpg b/src/modules/game/assets/wire.jpg
diff --git a/src/modules/game/components/CardDisplay/CardDisplay.css b/src/modules/game/components/CardDisplay/CardDisplay.css
@@ -21,23 +21,23 @@
 }
 
 .CardDisplay__card.CardDisplay__bad {
-  --bg-card: url('https://christopherstarr.files.wordpress.com/2013/01/randall.jpg');
+  --bg-card: url('../../assets/badguy.jpg');
 }
 
 .CardDisplay__card.CardDisplay__good {
-  --bg-card: url('https://as1.ftcdn.net/v2/jpg/01/95/05/50/1000_F_195055061_A112Kvjh9Bq5FFkdLIAnmk8Lh0MRdLrd.jpg');
+  --bg-card: url('../../assets/goodguy.jpg');
 }
 
 .CardDisplay__card.CardDisplay__wire {
-  --bg-card: url('https://i.stack.imgur.com/K9jSi.jpg');
+  --bg-card: url('../../assets/wire.jpg');
 }
 
 .CardDisplay__card.CardDisplay__bomb {
-  --bg-card: url('https://media.gettyimages.com/id/185410981/fr/photo/a-time-bomb.jpg?s=612x612&w=gi&k=20&c=tLm5Onl-r9Sx7t9_p9h13nAJKWvr96piVWRXJdil_gM=');
+  --bg-card: url('../../assets/bomb.jpg');
 }
 
 .CardDisplay__card.CardDisplay__neutral {
-  --bg-card: url('https://cdn.akamai.steamstatic.com/steam/apps/1534200/ss_d0fcb94c4fc2cc1cc01ca46d5c31840da74d9694.600x338.jpg?t=1616065824');
+  --bg-card: url('../../assets/neutral.jpg');
 }
 
 /* Keyframes */

diff --git a/src/modules/game/components/CardsDeck/CardsDeck.css b/src/modules/game/components/CardsDeck/CardsDeck.css
@@ -1,19 +1,20 @@
 .CardsDeck {
   display: flex;
   justify-content: center;
+  flex-wrap: wrap;
   margin-top: 15px;
 }
 
 .CardsDeck_cardContainer {
-  width: 60px;
-  margin: 0 10px;
+  width: 80px;
+  margin: 15px 7.5px;
 }
 
 .CardsDeck__card {
   position: relative;
-  width: 60px;
-  height: 100px;
-  --bg-card-verso: url('https://media.moddb.com/images/games/1/73/72356/screenshot.7.1.jpg');
+  width: 80px;
+  height: 128px;
+  --bg-card-verso: url('../../assets/card.jpg');
   background: #fff var(--bg-card-verso) no-repeat;
   background-size: cover;
   background-position: center center;
@@ -29,23 +30,23 @@
 }
 
 .CardsDeck__displayed.CardsDeck__wire {
-  --bg-card: url('https://i.stack.imgur.com/K9jSi.jpg');
+  --bg-card: url('../../assets/wire.jpg');
 }
 
 .CardsDeck__displayed.CardsDeck__bomb {
-  --bg-card: url('https://media.gettyimages.com/id/185410981/fr/photo/a-time-bomb.jpg?s=612x612&w=gi&k=20&c=tLm5Onl-r9Sx7t9_p9h13nAJKWvr96piVWRXJdil_gM=');
+  --bg-card: url('../../assets/bomb.jpg');
 }
 
 .CardsDeck__displayed.CardsDeck__neutral {
-  --bg-card: url('https://cdn.akamai.steamstatic.com/steam/apps/1534200/ss_d0fcb94c4fc2cc1cc01ca46d5c31840da74d9694.600x338.jpg?t=1616065824');
+  --bg-card: url('../../assets/neutral.jpg');
 }
 
 /* Keyframes */
 @keyframes turn {
   0% {
     left: 0px;
     background-image: var(--bg-card-verso);
-    width: 60px;
+    width: 80px;
     transform: skew(0deg, 0deg);
   }
   49% {
@@ -62,7 +63,7 @@
   100% {
     left: 0px;
     background-image: var(--bg-card);
-    width: 60px;
+    width: 80px;
     transform: skew(0deg, 0deg);
   }
 }