Add Interval Training

The first exercise with large and known bugs.
barisaksu · Nov 9, 2020 · 823e461 · 823e461
1 parent d44496d
commit 823e461
Show file tree

Hide file tree

Showing 13 changed files with 664 additions and 116 deletions.
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "commonjs"
+  },
+  "exclude": ["node_modules", "**/node_modules/*"]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "core-js": "^3.6.5",
     "register-service-worker": "^1.7.1",
     "tailwindcss": "^1.9.6",
+    "tone": "^14.7.58",
     "vexflow": "^3.0.9",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",

diff --git a/src/App.vue b/src/App.vue
@@ -22,6 +22,10 @@ body {
   font-family: "Playfair Display", serif;
 }
 
+.blur {
+  filter: blur(7px);
+}
+
 .btn {
   @apply rounded-t p-2 text-white;
   &.btn-blue {

diff --git a/src/components/Play.vue b/src/components/Play.vue
diff --git a/src/components/buttons/Checkbox.vue b/src/components/buttons/Checkbox.vue
@@ -0,0 +1,40 @@
+<template>
+  <label class="flex justify-start items-start my-2">
+    <div
+        class="bg-white border-2 rounded border-gray-400 w-6 h-6 flex flex-shrink-0 justify-center items-center mr-2 focus-within:border-blue-500"
+    >
+      <input
+          type="checkbox"
+          class="opacity-0 absolute"
+          v-model="$store.state.Interval.selectedIntervals"
+          :value="key"
+          :id="key"
+      />
+      <svg
+          class="fill-current hidden w-4 h-4 text-green-500 pointer-events-none"
+          viewBox="0 0 20 20"
+      >
+        <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/>
+      </svg>
+    </div>
+    <div class="select-none">{{ key }} ({{ interval.name }})</div>
+  </label>
+</template>
+
+<script>
+export default {
+  name: "Checkbox",
+  props: {
+    value: {
+      require: true,
+    },
+    id: {
+      require: true,
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/buttons/RadioButton.vue b/src/components/buttons/RadioButton.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="flex items-center mr-4">
+    <input :id="id" type="radio" :checked="checked" :value="text" :name="name" v-model="radioButtonValue" class="hidden"/>
+
+    <label :for="id" class="flex items-center cursor-pointer">
+      <span class="inline-block w-4 h-4 mr-1 border rounded-full border-grey"></span>
+      {{ text }} - {{checked}}</label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RadioButton",
+  props: ['name', 'text', 'value', 'checked'],
+  created() {
+    // console.log("başla")
+    // console.log(this.$store.state.Interval.intervalType);
+    // console.log(this.value)
+    // console.log("bit")
+    // if (this.$store.state.Interval.intervalType === this.value) {
+    //   this.isChecked = true;
+    // }
+  },
+  data() {
+    return {
+      id: "radio-id-" + this._uid,
+      // isChecked: false
+    }
+  },
+  computed: {
+    radioButtonValue: {
+      get: function () {
+        return this.value
+      },
+      set: function () {
+        // Communicate the change to parent component so that selectedValue can be updated
+        this.$emit("selected", this.value)
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+input[type="radio"] + label span {
+  transition: background .2s,
+  transform .2s;
+}
+
+input[type="radio"] + label span:hover,
+input[type="radio"] + label:hover span {
+  background-color: #48bb78;
+  transform: scale(1.2);
+}
+
+input[type="radio"]:checked + label span {
+  background-color: #48bb78; //bg-blue
+  box-shadow: 0px 0px 0px 2px white inset;
+}
+
+input[type="radio"]:checked + label {
+  color: #48bb78; //text-blue
+}input[type="radio"] + label {
+  color: #bbc1be; //text-blue
+}
+</style>
diff --git a/src/components/intervals/Settings.vue b/src/components/intervals/Settings.vue
@@ -1,32 +1,80 @@
 <template>
-  <div class="bg-white shadow border p-2 mb-4">
-    <div v-for="(interval, key) in $store.state.Interval.intervals" :key="key">
-      <label class="flex justify-start items-start my-2">
-        <div
-          class="bg-white border-2 rounded border-gray-400 w-6 h-6 flex flex-shrink-0 justify-center items-center mr-2 focus-within:border-blue-500"
-        >
-          <input
-            type="checkbox"
-            class="opacity-0 absolute"
-            v-model="$store.state.Interval.selectedIntervals"
-            :value="key"
-            :id="key"
-          />
-          <svg
-            class="fill-current hidden w-4 h-4 text-green-500 pointer-events-none"
-            viewBox="0 0 20 20"
-          >
-            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
-          </svg>
+  <div class="flex flex-col bg-white shadow border p-2 mb-4 justify-between divide-x absolute w-2/3 z-50">
+    <div class="flex">
+      <div class="flex flex-col w-1/2 pr-2"><h2 class="border-b text-xl font-bold">Intervals</h2>
+        <div v-for="(interval, key) in $store.state.Interval.intervals" :key="key">
+          <label class="flex justify-start items-start my-2">
+            <div
+                class="bg-white border-2 rounded border-gray-400 w-6 h-6 flex flex-shrink-0 justify-center items-center mr-2 focus-within:border-blue-500"
+            >
+              <input
+                  type="checkbox"
+                  class="opacity-0 absolute"
+                  v-model="$store.state.Interval.selectedIntervals"
+                  :value="key"
+                  :id="key"
+              />
+              <svg
+                  class="fill-current hidden w-4 h-4 text-green-500 pointer-events-none"
+                  viewBox="0 0 20 20"
+              >
+                <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/>
+              </svg>
+            </div>
+            <div class="select-none">{{ key }} ({{ interval.name }})</div>
+          </label>
         </div>
-        <div class="select-none">{{ key }} ({{ interval.name }})</div>
-      </label>
+      </div>
+      <div class="w-1/2 pl-2">
+        <h2 class="border-b text-xl font-bold">Interval Type</h2>
+      </div>
+      <div class="w-1/2 pl-2">
+        <h2 class="border-b text-xl font-bold">Options </h2>
+        <div class="border p-2 my-2 space-y-2">
+          <RadioButton name="intervalType" checked="checked" value="melodic" text="Melodic" @selected="yazdir"/>
+          <RadioButton name="intervalType" value="harmonic" text="Harmonic" @selected="yazdir"/>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="flex justify-end space-x-2">
+      <button class="relative right-0 bg-red-300 text-red-900 px-4 rounded" @click="
+            $store.state.Interval.showSettings = !$store.state.Interval
+              .showSettings
+          ">Cancel
+      </button>
+      <button class="relative right-0 bg-blue-300 text-blue-900 px-4 rounded" @click="
+            $store.state.Interval.showSettings = !$store.state.Interval
+              .showSettings
+          ">Save
+      </button>
     </div>
+
   </div>
 </template>
 
 <script>
-export default {};
+import RadioButton from "@/components/buttons/RadioButton";
+
+export default {
+  data() {
+    return {
+      type: 1
+    }
+  },
+  methods: {
+    setType() {
+      this.$store.commit('setIntervalType', 'melodic');
+    },
+    yazdir(value) {
+      this.$store.commit("setIntervalType", value)
+    }
+  },
+  components: {
+    RadioButton
+  },
+};
 </script>
 
 <style lang="sass" scoped>

diff --git a/src/components/intervals/Start.vue b/src/components/intervals/Start.vue
@@ -2,14 +2,14 @@
   <div>
     <button
       @click="start()"
-      class="text-center bg-yellow-500 px-2 rounded hover:bg-yellow-400 px-4 mr-4"
+      class="text-center bg-yellow-500  text-yellow-900 px-2 rounded hover:bg-yellow-400 px-4 mr-4"
       v-if="!$store.state.Interval.start"
     >
       Start
     </button>
     <button
-      @click="start()"
-      class="text-center bg-red-500 px-2 rounded hover:bg-red-400 px-4 mr-4"
+      @click="reset()"
+      class="text-center bg-red-500 text-red-900 px-2 rounded hover:bg-red-400 px-4 mr-4"
       v-else
     >
       Reset
@@ -23,6 +23,9 @@ export default {
     start() {
       this.$store.commit("start");
     },
+    reset(){
+      this.$store.commit("reset")
+    }
   },
 };
 </script>