completed

.gitignore

@@ -8,6 +8,7 @@ node_modules
 .env.*.local
 
 # Log files
+yarn.lock
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

src/assets/styles/global.css

@@ -1,7 +1,7 @@
 /* Variables CSS */
 :root {
     --dark: #212121;
-    --light: #f3f3f3;
+    --light: #ffffff;
     --front: "VT323", serif;
 }
 * {

src/components/BaseCard.vue

@@ -2,14 +2,30 @@
   <div
     class="card"
     :class="{ disabled: isDisabled, matched: isMatched, unmatched: isUnmatched }"
+    :style="{
+      height: `${(920 - 16 * 4) / Math.sqrt(cardsContext.length) - 16}px`,
+      width: `${(((920 - 16 * 4) / Math.sqrt(cardsContext.length) - 16) * 3) / 4}px`,
+      perspective: `${
+        ((((920 - 16 * 4) / Math.sqrt(cardsContext.length) - 16) * 3) / 4) * 2
+      }px`,
+    }"
   >
     <div
       class="card__inner"
       :class="{ 'is-flipped': isFlipped }"
       @click="ontoggleFlipCard"
     >
       <div class="card_face card__face--front">
-        <div class="card__content"></div>
+        <div
+          class="card__content"
+          :style="{
+            'background-size': `${
+              (((920 - 16 * 4) / Math.sqrt(cardsContext.length) - 16) * 3) / 4 / 3
+            }px ${
+              (((920 - 16 * 4) / Math.sqrt(cardsContext.length) - 16) * 3) / 4 / 3
+            }px`,
+          }"
+        ></div>
       </div>
       <div class="card_face card__face--back">
         <div
@@ -31,6 +47,10 @@ export default {
       type: String,
       required: true,
     },
+    cardsContext: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -67,8 +87,6 @@ export default {
   display: inline-block;
   margin-right: 1rem;
   margin-bottom: 1rem;
-  width: 90px;
-  height: 120px;
   perspective: 1000px; /* Add perspective for 3D effect */
 }
 
@@ -98,7 +116,6 @@ export default {
 
 .card__face--front .card__content {
   background: url(../assets/images/icon_back.png) no-repeat center center;
-  background-size: 40px 40px;
   height: 100%;
   word-wrap: 100%;
 }

src/components/InteractScreen.vue

@@ -1,14 +1,25 @@
 <template>
   <div class="screen">
     <h1>Interact Component here</h1>
-    <base-card
-      v-for="(card, index) in cardsContext"
-      :key="index"
-      :imgBackFaceUrl="`images/${card}.png`"
-      :card="{ index, value: card }"
-      :ref="`card-${index}`"
-      @onFlipCard="checkRule($event)"
-    ></base-card>
+    <div
+      class="screen__inner"
+      :style="{
+        width: `${
+          ((((920 - 16 * 4) / Math.sqrt(cardsContext.length) - 16) * 3) / 4 + 16) *
+          Math.sqrt(cardsContext.length)
+        }px`,
+      }"
+    >
+      <base-card
+        v-for="(card, index) in cardsContext"
+        :key="index"
+        :imgBackFaceUrl="`images/${card}.png`"
+        :card="{ index, value: card }"
+        :cardsContext="cardsContext"
+        :ref="`card-${index}`"
+        @onFlipCard="checkRule($event)"
+      ></base-card>
+    </div>
   </div>
 </template>
 
@@ -64,3 +75,59 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.screen {
+  width: 100%;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  background-color: var(--light);
+  color: var(--light);
+  animation: fadeIn 1s ease-in-out;
+}
+
+.base-card {
+  animation: bounceIn 1s ease-in-out;
+}
+
+.screen__inner {
+  width: calc(424px);
+  display: flex;
+  flex-wrap: wrap;
+  margin: 2rem auto;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideInFromTop {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes bounceIn {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>

src/components/MainScreen.vue

@@ -2,7 +2,7 @@
   <div class="screen">
     <h1>Pokemon - GO</h1>
     <h3>Select mode to start game</h3>
-    <div class="actions">
+    <div class="modes">
       <button @click="onStart(16)">
         <span>4x4</span>
         <span>Easy</span>
@@ -32,3 +32,106 @@ export default {
   },
 };
 </script>
+<style lang="css" scoped>
+.screen {
+  width: 100%;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: var(--dark);
+  color: var(--light);
+  animation: fadeIn 1s ease-in-out;
+}
+
+.screen h1 {
+  font-size: 4.5rem;
+  text-transform: uppercase;
+  animation: slideInFromTop 1s ease-in-out;
+}
+
+.screen h3 {
+  font-size: 2rem;
+  margin-bottom: 2rem;
+  animation: slideInFromTop 1s ease-in-out;
+}
+
+.modes {
+  display: flex;
+  margin-top: 2rem;
+  animation: fadeIn 1.5s ease-in-out;
+}
+
+.modes button {
+  font: var(--font);
+  width: 150px;
+  height: 150px;
+  background: transparent;
+  box-shadow: none;
+  border: 1px solid var(--light);
+  color: var(--light);
+  display: flex;
+  flex-direction: column;
+  border-radius: 1rem;
+  margin: 0 1rem;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
+  animation: bounceIn 1s ease-in-out;
+}
+
+.modes button:hover {
+  background-color: var(--light);
+  color: var(--dark);
+  transform: scale(1.1);
+}
+
+.modes button span:first-child {
+  font-size: 2rem;
+}
+
+.modes button span:last-child {
+  display: block;
+  font-size: 1.25rem;
+  margin-top: 0.5rem;
+}
+
+/* Keyframes for animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideInFromTop {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes bounceIn {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>