add tutorial and fixing dropdown

Author: GunawanAhmad

src/App.vue

@@ -3,15 +3,17 @@
     <Navbar />
     <pathfinding-visualizer />
     <Aboutme />
+    <Tutorial />
   </div>
 </template>
 
 <script>
 import PathfindingVisualizer from "./components/PathfindingVisualizer.vue";
 import Navbar from "./components/Navbar.vue";
 import Aboutme from "./components/Aboutme.vue";
+import Tutorial from "./components/Tutorial";
 export default {
-  components: { PathfindingVisualizer, Navbar, Aboutme },
+  components: { PathfindingVisualizer, Navbar, Aboutme, Tutorial },
 };
 </script>
 <style lang="scss">
@@ -27,4 +29,8 @@ export default {
   box-sizing: border-box;
   font-family: "Poppins", sans-serif;
 }
+
+body {
+  overflow-x: hidden;
+}
 </style>

src/assets/addWall.gif

@@ -29,7 +29,6 @@ export default {};
   justify-content: center;
   margin-top: 1rem;
   font-size: 2rem;
-  opacity: 0.6;
 
   .twitter a:hover:before {
     opacity: 1;
@@ -90,6 +89,11 @@ export default {};
 
   .sign {
     margin-right: 2rem;
+    opacity: 0.6;
+
+    &:hover {
+      opacity: 1;
+    }
 
     a {
       color: #313131;

src/assets/navbar.jpg

@@ -3,10 +3,16 @@
     <nav class="navbar">
       <div class="select-algo">
         <span>Algorithm : </span>
-        <select name="algorithm" id="algorithm" @change="changeSelectedAlgo">
-          <option value="dijkstra" selected>Dijkstra</option>
-          <option value="astar">A*</option>
-        </select>
+        <span class="box">
+          <span class="result" @click="openAlgoList">
+            <p>{{ selectedAlgorithm }}</p>
+            <span class="triangle" ref="triangle"></span>
+          </span>
+          <ul class="ul-list" v-if="isShowingAlgoList">
+            <li @click="changeSelectedAlgo('A* Search')">A* Search</li>
+            <li @click="changeSelectedAlgo('Dijkstra')">Dijkstra</li>
+          </ul>
+        </span>
       </div>
       <button ref="visualize" class="run-btn start">Visualize !</button>
       <button ref="clear" class="clear-btn start">Clear Board !</button>
@@ -42,16 +48,24 @@
 export default {
   data() {
     return {
-      selectedAlgorithm: "dijkstra",
+      selectedAlgorithm: "Dijkstra",
+      isShowingAlgoList: false,
     };
   },
   mounted() {
     this.$store.state.runBtn = this.$refs.visualize;
     this.$store.state.clearBtn = this.$refs.clear;
   },
   methods: {
-    changeSelectedAlgo(e) {
-      this.$store.state.selectedAlgorithm = e.target.value;
+    changeSelectedAlgo(val) {
+      this.$store.state.selectedAlgorithm = val;
+      this.selectedAlgorithm = val;
+      this.isShowingAlgoList = false;
+      this.$refs.triangle.classList.remove("flip");
+    },
+    openAlgoList() {
+      this.isShowingAlgoList = true;
+      this.$refs.triangle.classList.add("flip");
     },
   },
 };

src/assets/navbar.png

@@ -64,10 +64,13 @@ export default {
       ];
       let test = bidirectionalDijkstra(this.grid, startNode, finishNode);
       console.log(test);
+      console.log(this.$store.state.selectedAlgorithm.toLowerCase());
       this.resetVisitedGrid();
-      if (this.$store.state.selectedAlgorithm === "astar") {
+      if (this.$store.state.selectedAlgorithm.toLowerCase() === "a* search") {
         this.runAstarAlgo();
-      } else if (this.$store.state.selectedAlgorithm === "dijkstra") {
+      } else if (
+        this.$store.state.selectedAlgorithm.toLowerCase() === "dijkstra"
+      ) {
         this.runDijkstraAlgo();
       }
     },
@@ -210,7 +213,7 @@ export default {
   // flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  min-width: 1000px;
+  // border: 1px solid red;
 }
 
 .container {
@@ -220,6 +223,9 @@ export default {
   justify-content: center;
   align-items: center;
   margin-top: 2rem;
+  max-width: 1000px;
+  min-width: 800px;
+  margin: 2rem auto 0 auto;
 
   &.active {
     pointer-events: none;

src/assets/navigation.svg

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <div class="container" v-if="isShowTutorial">
+      <div class="tutorial">
+        <h1 class="title">{{ setPagesData.Title }}</h1>
+        <p class="description">{{ setPagesData.description }}</p>
+
+        <img
+          :src="require(`../assets/${setPagesData.img}`)"
+          class="img"
+          alt=""
+        />
+
+        <div class="buttons">
+          <div class="left-side">
+            <button class="Skip btn" @click="isShowTutorial = false">
+              Skip tutorial
+            </button>
+          </div>
+          <div class="right-side">
+            <button
+              class="btn previous"
+              @click="currentPage--"
+              :disabled="currentPage > 0 ? false : true"
+            >
+              Back
+            </button>
+            <button
+              class="btn next"
+              @click="currentPage++"
+              :disabled="currentPage < pagesData.length - 1 ? false : true"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tutorial-icon"
+      v-if="!isShowTutorial"
+      @click="isShowTutorial = true"
+    >
+      <div class="icon">
+        <i class="fas fa-lightbulb"></i>
+      </div>
+      <p>Tutorial</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentPage: 0,
+      isShowTutorial: true,
+      pagesData: [
+        {
+          Title: "Welcome to Pathfinding Visualizer !",
+          description:
+            'If you want to dive right in, feel free to press the "Skip Tutorial" button below. Otherwise, press "Next"!',
+          imgLink: "https://storyset.com/people",
+          img: "welcome.svg",
+        },
+        {
+          Title: "What is a pathfinding algorithm?",
+          description:
+            "Pathfinding algorithm is an algorithm that used to find shortest path between two points.",
+          imgLink: "https://storyset.com/city",
+          img: "navigation.svg",
+        },
+        {
+          Title: "Using the Navigation bar",
+          description:
+            "You can pick the type of the algorithm and start visualizing the algorithm from the navigation bar. You can clear the board like previous path and wall by clicking the clear board button.",
+          img: "navbar.jpg",
+        },
+        {
+          Title: "Adding Walls",
+          description:
+            "Click the grid to add a wall, hold the click and move your mouse to add more wall. Walls are impenetrable, meaning that a path cannot cross through them.",
+          img: "addWall.gif",
+        },
+      ],
+    };
+  },
+
+  computed: {
+    setPagesData() {
+      return this.pagesData[this.currentPage];
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../scss/Tutorial.scss"></style>