Merge pull request #21 from Dana94/feature/fix-modal-spacing

Remove modal

Author: Dana94

README.md

@@ -10,7 +10,7 @@ The game can be solely accessed through the keyboard alone.
 
 1. Clone the repo: `git clone https://github.com/Dana94/lights-puzzle.git`
 1. `cd lights-puzzle`
-1. `npm install` 
+1. `npm install`
 1. `npm run dev` to start a local dev server at `http://localhost:8080`
 
 ## Build Setup
@@ -27,4 +27,3 @@ npm run build
 ```
 ## Notes
 - Styled with [Vuetify](https://vuetifyjs.com/en/).
-- Modal used is a [SweetModal](https://github.com/adeptoas/sweet-modal-vue).

package-lock.json

@@ -10,7 +10,6 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
-    "sweet-modal-vue": "^2.0.0",
     "vue": "^2.5.11",
     "vuetify": "^1.5.23",
     "vuex": "^3.1.1"

package.json

@@ -1,22 +1,14 @@
 <template>
   <div id="app">
-    <v-container v-if="!levelSelected">
-      <v-layout align-center column>
-        <Home />
-      </v-layout>
+    <v-container v-if="!levelSelected && !isGameWon">
+      <Home />
+    </v-container>
+    <v-container v-else-if="isGameWon">
+      <EndGame />
     </v-container>
     <v-container v-else>
-      <v-layout align-center column>
-        <v-flex xs12>
-          <Rules />
-        </v-flex>
-      </v-layout>
-      <v-layout align-center column>
-        <v-flex xs12 class="board-container">
-          <Board :level="level" :board="board" />
-        </v-flex>
-      </v-layout>
-      <v-layout row wrap> </v-layout>
+      <Rules />
+      <Board :level="level" :board="board" />
     </v-container>
   </div>
 </template>
@@ -25,6 +17,7 @@
 import Board from "./components/Board.vue";
 import Rules from "./components/Rules.vue";
 import Home from "./components/Home.vue";
+import EndGame from "./components/EndGame.vue";
 
 export default {
   name: "app",
@@ -39,6 +32,9 @@ export default {
     },
     levelSelected() {
       return this.level !== 0;
+    },
+    isGameWon() {
+      return this.$store.getters.isGameWon;
     }
   },
   watch: {
@@ -51,7 +47,8 @@ export default {
   components: {
     Board,
     Rules,
-    Home
+    Home,
+    EndGame
   }
 };
 </script>
@@ -69,27 +66,23 @@ export default {
   display: flex;
   justify-content: center;
 
-  .board-container {
-    position: relative;
-
-    // for some reason the stats component button styles aren't displaying when declared in the Stats.vue file
-    // that's why they are here instead
-    .stats {
-      position: absolute;
-      right: -9rem;
-      top: 0;
-      display: flex;
-      flex-direction: column;
+  // for some reason the stats component button styles aren't displaying when declared in the Stats.vue file
+  // that's why they are here instead
+  .stats {
+    position: absolute;
+    right: -9rem;
+    top: 0;
+    display: flex;
+    flex-direction: column;
 
-      .reset {
-        background-color: $purple;
-        color: $white;
-      }
+    .reset {
+      background-color: $purple;
+      color: $white;
+    }
 
-      .end {
-        background-color: $blue;
-        color: $white;
-      }
+    .end {
+      background-color: $blue;
+      color: $white;
     }
   }
 }

src/App.vue

@@ -1,39 +1,44 @@
 <template>
-  <div class="board">
-    <row v-for="(row, x) in board" :key="x" :row="row" :index_x="x" :level="level"></row>
-    <modal :showModal="showModal" @closeModal="showModal = false"/>
-    <stats />
-  </div>
+  <v-layout align-center column>
+    <v-flex xs12 class="board-container">
+      <div class="board">
+        <row
+          v-for="(row, x) in board"
+          :key="x"
+          :row="row"
+          :index_x="x"
+          :level="level"
+        ></row>
+        <stats />
+      </div>
+    </v-flex>
+  </v-layout>
 </template>
 
 <script>
 import Row from "./Row.vue";
-import Stats from './Stats.vue';
-import Modal from './Modal.vue';
+import Stats from "./Stats.vue";
 import { eventBus } from "../main";
 
 export default {
-  props: ['level', 'board'],
+  props: ["level", "board"],
   data() {
     return {
-      checkBoard: false,
-      gameWon: false,
-      showModal: false
+      checkBoard: false
     };
   },
   watch: {
     checkBoard() {
       if (this.$store.getters.gameWon({ check: this.checkBoard })) {
         setTimeout(() => {
-          this.showModal = true;
+          this.$store.dispatch("setGameProgress", { gameWon: true });
         }, 500);
       }
     }
   },
   components: {
     Row,
-    Stats,
-    Modal
+    Stats
   },
   created() {
     // check if game is done
@@ -45,11 +50,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../assets/base.scss";
+
 p {
   display: none;
   &.show {
     display: block;
   }
 }
-</style>
 
+.board-container {
+  position: relative;
+}
+</style>

src/components/Board.vue

@@ -21,10 +21,6 @@ import store from "../store/store";
 
 export default {
   props: ["index_y", "index_x"],
-  data() {
-    return {
-    };
-  },
   methods: {
     changeStatus() {
       this.$store.dispatch("increaseCount");

src/components/Column.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-layout align-center column>
+    <div>
+      <h1 class="mb-2">You solved level {{ level }} in {{ moves }} moves!</h1>
+      <p class="title">What do you want to do next?</p>
+      <div>
+        <v-btn class="end" @click="end">Try Another Level</v-btn>
+        <v-btn class="reset" @click="reset">Play Again</v-btn>
+      </div>
+    </div>
+  </v-layout>
+</template>
+
+<script>
+export default {
+  name: "EndGame",
+  methods: {
+    end() {
+      this.$store.dispatch("endGame");
+    },
+    reset() {
+      this.$store.dispatch("reset");
+    }
+  },
+  computed: {
+    moves() {
+      return this.$store.getters.getMoves;
+    },
+    level() {
+      return this.$store.getters.getLevel;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/base.scss";
+
+.reset {
+  background-color: $purple !important;
+  color: $white !important;
+}
+
+.end {
+  background-color: $green !important;
+  color: $white !important;
+}
+</style>

src/components/EndGame.vue

@@ -1,25 +1,27 @@
 <template>
-  <div>
-    <h1 class="display-1 mb-3">Choose a Level</h1>
-    <v-btn class="level1" @click="level = 1">Level 1</v-btn>
-    <v-btn class="level2" @click="level = 2">Level 2</v-btn>
-    <v-btn class="level3" @click="level = 3">Level 3</v-btn>
-  </div>
+  <v-layout align-center column>
+    <div>
+      <h1 class="display-1 mb-3">Choose a Level</h1>
+      <v-btn class="level1" @click="level = 1">Level 1</v-btn>
+      <v-btn class="level2" @click="level = 2">Level 2</v-btn>
+      <v-btn class="level3" @click="level = 3">Level 3</v-btn>
+    </div>
+  </v-layout>
 </template>
 
 <script>
 export default {
-  data () {
+  data() {
     return {
       level: 0
-    }
+    };
   },
   watch: {
-    level () {
-      this.$store.dispatch('setLevel', this.level);
+    level() {
+      this.$store.dispatch("setLevel", this.level);
     }
   }
-}
+};
 </script>
 
 <style lang="scss">

src/components/Home.vue

@@ -1,13 +1,25 @@
 <template>
-  <div class="row" :class="{ rowLevel1: level === 1, rowLevel2: level === 2, rowLevel3: level === 3 }">
-    <column v-for="(col, j) in row" :key="j" :index_y="j" :index_x="index_x"></column>
+  <div
+    class="row"
+    :class="{
+      rowLevel1: level === 1,
+      rowLevel2: level === 2,
+      rowLevel3: level === 3
+    }"
+  >
+    <column
+      v-for="(col, j) in row"
+      :key="j"
+      :index_y="j"
+      :index_x="index_x"
+    ></column>
   </div>
 </template>
 
 <script>
 import Column from "./Column.vue";
 export default {
-  props: ['row', 'index_x', 'level'],
+  props: ["row", "index_x", "level"],
   components: {
     Column
   }