🎨 Style: Failed page

package.json

@@ -20,13 +20,11 @@
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.1.1",
-    "@vue/cli-plugin-eslint": "^3.1.1",
     "@vue/cli-plugin-pwa": "^3.1.1",
     "@vue/cli-service": "^3.1.1",
     "@vue/eslint-config-airbnb": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0-0",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.0.1",
     "vue-template-compiler": "^2.5.17"

src/App.vue

@@ -12,7 +12,7 @@
 export default {
   data() {
     return {
-    };
+    }
   },
 };
 </script>

src/components/Failed.vue

@@ -1,14 +1,61 @@
 <template>
-  <div>
-    Failed!
+  <div class="wrapper">
+    <div class="slogan">已經是 .... 極限了嗎？</div>
+    <p class="score_wording">{{score.success}} / {{flags.length}}</p>
+    <md-button to="/" class="restart_btn">Restart</md-button>
+    <img src="../assets/kumamon.png" alt="">
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 export default {
+  name: 'Failed',
+  computed: {
+    ...mapState({
+      score: ({ score }) => score,
+      flags: ({ flags }) => flags,
+    }),
+  },
 };
 </script>
 
 <style lang="scss" scoped>
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  position: relative;
+}
+.slogan {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+.score_wording {
+  font-size: 2rem;
+  font-weight: bolder;
+}
+.restart_btn {
+  cursor: pointer;
+  font-size: 1.2rem;
+  background: #2ab6fb !important;
+  border-radius: 5px;
+  color: white;
+  font-weight: bolder;
+  cursor: pointer;
+  padding: 16px 20px;
+  text-align: center;
+  height: 50px;
+  border-radius: 5px;
+  margin-bottom: 4rem;
+}
 
+img {
+  position: absolute;
+  bottom: -5px;
+  width: 360px;
+}
 </style>

src/router.js

@@ -5,7 +5,7 @@ import Home from './views/Home.vue';
 Vue.use(Router);
 
 export default new Router({
-  mode: 'history',
+  // mode: 'history',
   base: process.env.BASE_URL,
   routes: [
     {

src/views/Game.vue

@@ -1,8 +1,12 @@
 <template>
   <div>
-    <score class="score-container" />
-    <flag class="flag-container" :code="currentFlag.code" />
+    <!-- <score class="score-container" /> -->
+    <transition mode="out-in">
+      <failed v-if="score.failed > 0" />
+    </transition>
+    <flag class="flag-container" :code="currentFlag.code" v-if="score.failed === 0" />
     <guessing-buttons
+      v-if="score.failed === 0"
       class="buttons-container"
       :flags="currentOptions"
       :correct-flag="currentFlag"
@@ -17,7 +21,7 @@
 import { mapActions, mapState } from 'vuex';
 import Flag from '@/components/Flag.vue';
 import GuessingButtons from '@/components/GuessingButtons.vue';
-import Score from '@/components/Score.vue';
+import Failed from '@/components/Failed.vue';
 
 export default {
   // Component name
@@ -36,7 +40,7 @@ export default {
   components: {
     Flag,
     GuessingButtons,
-    Score,
+    Failed,
   },
 
   // Methods
@@ -51,6 +55,7 @@ export default {
       currentOptions: ({ currentOptions }) => currentOptions,
       justGuessed: ({ justGuessed }) => justGuessed,
       currentGuess: ({ currentGuess }) => currentGuess,
+      score: ({ score }) => score,
     }),
   },
 };
@@ -67,4 +72,11 @@ export default {
 .score-container {
   background: transparent !important;
 }
+
+.v-leave { opacity: 1; }
+.v-leave-active { transition: opacity .5s }
+.v-leave-to { opacity: 0; }
+.v-enter { opacity: 0; }
+.v-enter-active  { transition: opacity .5s }
+.v-enter-to { opacity: 1; }
 </style>

src/views/Home.vue

@@ -1,33 +1,29 @@
 <template>
   <div class="container">
-    <img src="https://www.twicon.page/imgs/about_version.png" alt="TW Icon Game">
+    <img src="https://www.twicon.page/imgs/about_version.png" alt="TW Icon Game" />
     <h1 class="md-display-6">The 100 icons of Taiwan</h1>
-    <select-game-type></select-game-type>
+    <select-game-type />
   </div>
 </template>
 
 <script>
-// Imported components
 import SelectGameType from '@/components/SelectGameType.vue';
 
 export default {
-  // Component name
   name: 'App',
-
-  // Imported components
   components: {
     SelectGameType,
   },
 };
 </script>
 
 <style scoped>
-  .container{
-    text-align: center;
-    background: #D9F2E7;
-  }
-  img {
-    display: inline-block;
-    max-width: 72%;
-  }
+.container {
+  text-align: center;
+  background: #d9f2e7;
+}
+img {
+  display: inline-block;
+  max-width: 72%;
+}
 </style>