styling, use setInterval

src/App.vue

@@ -40,8 +40,6 @@
 </template>
 
 <script>
-
-
 const getAudioContext = () => {
   let ctx = null, usingWebAudio = true;
 
@@ -142,10 +140,14 @@ export default {
     })
   },
 
+  mounted() {
+    const randomColor = "#"+((1<<24)*Math.random()|0).toString(16);
+    document.documentElement.style.setProperty('--main-bg-color', randomColor);
+  },
+
   methods: {
-    playOSC: function (freq = 440.0, type = 'sine') {
+    playOSC: function (freq = 440.0, type = 'triangle') {
       if (this.oscMain != null) {
-        console.log("stopping")
         this.oscMain.stop();
         this.oscMain = null;
       }
@@ -185,21 +187,15 @@ export default {
           this.score += 1
           this.check = []
           this.success = true
-
-          setTimeout(()=>{
+          this.blink = null
 
           setTimeout(()=>{
             this.success = false
             this.fail = false
-            },200)
-
-            this.blink = null
-            this.check = []
             this.addToPattern()
             this.playPattern()
           },200)
         }
-
       }
     },
 
@@ -209,7 +205,7 @@ export default {
         this.audioContext = getAudioContext()
       }
 
-      this.playOSC(this.spaces[0].tone)
+      //this.playOSC(this.spaces[0].tone)
 
       this.reset()
     },
@@ -225,22 +221,28 @@ export default {
     },
 
     playPattern() {
+      var i = 0
       this.playing = true
-      for(let i = 0; i < this.pattern.length; i++ ) {
-        setTimeout(()=> {
-          setTimeout(()=> {
+
+      var moves = setInterval(() => {
         this.blink = this.pattern[i]
         this.playOSC(this.spaces[this.pattern[i]].tone)
-          }, 900)
+        i++
 
-          setTimeout(()=> {
+        setTimeout(() => {
+          this.blink = null
+        }, 500)
+
+        if(i >= this.pattern.length) {
+          clearInterval(moves)
+
+          setTimeout(() => {
             this.blink = null
-            if(i == this.pattern.length - 1) {
             this.playing = false
+          }, 200)
         }
-          }, 1000)
-        }, 600 * (i+1))
-      }
+      },600)
+
     },
 
     addToPattern() {
@@ -263,7 +265,7 @@ html, body{
   height: 100%;
   padding: 0;
   margin: 0;
-  background: black;
+  background: var(--main-bg-color);
 }
 
 
@@ -294,10 +296,8 @@ body {
   max-width: 640px;
   height: 100vw;
   max-height: 640px;
-  border: 3px dotted black;
 }
 
-
 .simeon-game-board {
   display: grid;
   grid-template-columns: 50% 50%;
@@ -347,24 +347,23 @@ body {
   display: grid;
   width: 100%;
   height: 100%;
-  box-shadow: 1px -1px 11px -1px black, inset -12px -9px 20px 2px #000000a6;
-
+  box-shadow: 1px -1px 11px -1px black, inset -9px 0px 20px 2px #000000ab, inset 8px 0px 20px 2px #ffffffa6;
 }
 
 .piece-t-l {
-  background: #12cb56;
+  background-color: #12cb56;
   border-top-left-radius: 100%;
 }
 .piece-t-r {
-  background: #fd0010;
+  background-color: #fd0010;
   border-top-right-radius: 100%;
 }
 .piece-b-l {
-  background: #f1c200;
+  background-color: #f1c200;
   border-bottom-left-radius: 100%;
 }
 .piece-b-r {
-  background: #1264ca;
+  background-color: #1264ca;
   border-bottom-right-radius: 100%;
 }
 
@@ -372,7 +371,7 @@ body {
   font-size: 25px;
   font-weight: bold;
   line-height: 50px;
-  color: white;
+  color: #ffffffa8;
   box-sizing: border-box;
   border-radius: 100%;
   height: 50px;;
@@ -399,7 +398,7 @@ body {
   font-size: 24px;
   font-weight: bold;
   height: 100%;
-  background: linear-gradient(45deg, black,  transparent);
+  background: linear-gradient(45deg, #262626, #ffffff29);
   text-shadow: -1px -1px 0px #838383;
   color: black;
   width: 100%;
@@ -411,7 +410,7 @@ body {
   border-bottom: 1px solid #262626;
 }
 
-.start button:disabled {
+.start button:disabled, .reset button:disabled {
   color: #838383;
   font-weight: normal;
   text-shadow: -1px -1px 0px black;
@@ -435,6 +434,12 @@ body {
 .key {
   text-shadow: 0 0 5px black;
 }
+
+@media (max-height:640px) {
+  .simeon-wrapper {
+    max-height: 100%;
+  }
+}
 @media (max-width:640px) {
   .simeon-wrapper {
     max-width: 100%;