feat: create card component with flip effect

ngtinn59 · Dec 18, 2024 · 873edd3 · 873edd3
1 parent 06017dd
commit 873edd3
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 63 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -7,27 +7,5 @@ root = true
 [*]
 end_of_line = lf
 insert_final_newline = true
-
-# Matches multiple files with brace expansion notation
-# Set default charset
-[*.{js,py}]
-charset = utf-8
-
-# 4 space indentation
-[*.py]
-indent_style = space
-indent_size = 4
-
-# Tab indentation (no size specified)
-[Makefile]
-indent_style = tab
-
-# Indentation override for all JS under lib directory
-[lib/**.js]
-indent_style = space
-indent_size = 2
-
-# Matches the exact files either package.json or .travis.yml
-[{package.json,.travis.yml}]
 indent_style = space
 indent_size = 2
diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>

diff --git a/src/App.vue b/src/App.vue
@@ -1,21 +1,41 @@
 <template>
-  <main-screen v-if="statusMatch === 'default'"/>
-  <interact-screen v-if="statusMatch === 'match'"/>
+  <main-screen v-if="statusMatch === 'default'" @onStart="onHandleBeforeStart($event)" />
+  <interact-screen v-if="statusMatch === 'match'" />
 </template>
 
 <script>
-import MainScreen from './components/MainScreen.vue';
-import InteractScreen from './components/InteractScreen.vue';
+import MainScreen from "./components/MainScreen.vue";
+import InteractScreen from "./components/InteractScreen.vue";
+
 export default {
-  name: 'App',
+  name: "App",
+  components: {
+    MainScreen,
+    InteractScreen,
+  },
   data() {
     return {
-      statusMatch: "default"
+      settings: {
+        totalOfBlocks: 0,
+        cardsContext: [],
+        startedAt: null,
+      },
+      timer: 0,
+      statusMatch: "default",
     };
   },
-  components: {
-    MainScreen,
-    InteractScreen
+  methods: {
+    onHandleBeforeStart(configs) {
+      console.log("Configs:", configs); // Kiểm tra giá trị của configs
+      this.settings.totalOfBlocks = configs.size; // Đảm bảo rằng bạn dùng 'size' thay vì 'totalOfBlocks'
+      console.log("Total of blocks:", this.settings.totalOfBlocks); // Kiểm tra giá trị của totalOfBlocks
+      const firstCards = Array.from(
+        { length: this.settings.totalOfBlocks / 2 },
+        (_, i) => i + 1
+      );
+      console.log("First cards:", firstCards); // Kiểm tra mảng firstCards
+      this.statusMatch = "match";
+    },
   },
-}
-</script>
+};
+</script>
diff --git a/src/assets/styles/global.css b/src/assets/styles/global.css
@@ -1,6 +1,18 @@
+/* Variables CSS */
+:root {
+    --dark: #212121;
+    --light: #f3f3f3;
+    --front: "VT323", serif;
+}
 * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
 
+}
+
+body {
+    font-family: var(--front);
+    font-size: 16px;
+    width: 100%;
 }
diff --git a/src/components/BaseCard.vue b/src/components/BaseCard.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="card">
+    <div
+      class="card__inner"
+      :class="{ 'is-flipped': isFlipped }"
+      @click="ontoggleFlipCard"
+    >
+      <div class="card_face card__face--front">
+        <div class="card__content">Front</div>
+      </div>
+      <div class="card_face card__face--back">
+        <div class="card__content">Back</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      isFlipped: false,
+    };
+  },
+  methods: {
+    ontoggleFlipCard() {
+      this.isFlipped = !this.isFlipped;
+    },
+  },
+};
+</script>
+<style lang="css" scope>
+.card {
+  display: inline-block;
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+  width: 90px;
+  height: 120px;
+}
+
+.card__inner {
+  width: 100%;
+  height: 100%;
+  transition: transform 1s;
+  transform-style: preserve-3d;
+  cursor: pointer;
+  position: relative;
+}
+
+.card__inner.is-flipped {
+  transform: rotateY(-180deg);
+}
+
+.card_face {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  overflow: hidden;
+  border-radius: 1rem;
+  padding: 1rem;
+  box-shadow: 0 3px 10px 3px rgba(0, 0, 0, 0.2);
+}
+
+.card__face--back {
+  background-color: var(--light);
+  transform: rotateY(-180deg);
+}
+</style>
diff --git a/src/components/InteractScreen.vue b/src/components/InteractScreen.vue
@@ -1,5 +1,15 @@
 <template>
-    <h1>
-        Welcome to Pokemon GO!
-    </h1>
-</template>
+  <div class="screen">
+    <base-card></base-card>
+  </div>
+</template>
+
+<script>
+import BaseCard from "./BaseCard";
+
+export default {
+  components: {
+    BaseCard,
+  },
+};
+</script>
diff --git a/src/components/MainScreen.vue b/src/components/MainScreen.vue
@@ -1,32 +1,34 @@
 <template>
-    <div class="screen">
-        <h1>
-            Pokemon - GO
-        </h1>
-        <h3>Select mode to start game</h3>
-        <div class="actions">
-            <button>
-                <span>4x4</span>
-                <span>Easy</span>
-            </button>
-            <button>
-                <span>6x6</span>
-                <span>Normal</span>
-            </button>
-            <button>
-                <span>8x8</span>
-                <span>Hard</span>
-            </button>
-            <button>
-                <span>10x10</span>
-                <span>Supper Hard</span>
-            </button>
-        </div>
+  <div class="screen">
+    <h1>Pokemon - GO</h1>
+    <h3>Select mode to start game</h3>
+    <div class="actions">
+      <button @click="onStart(16)">
+        <span>4x4</span>
+        <span>Easy</span>
+      </button>
+      <button @click="onStart(36)">
+        <span>6x6</span>
+        <span>Normal</span>
+      </button>
+      <button @click="onStart(64)">
+        <span>8x8</span>
+        <span>Hard</span>
+      </button>
+      <button @click="onStart(100)">
+        <span>10x10</span>
+        <span>Supper Hard</span>
+      </button>
     </div>
+  </div>
 </template>
+
 <script>
 export default {
-    
-}
+  methods: {
+    onStart(size) {
+      this.$emit("onStart", { size });
+    },
+  },
+};
 </script>
-