styles and stuff

src/App.vue

@@ -3,7 +3,10 @@
     <div class="simeon-wrapper">
       <div class="overlay">
         <div class="start">
-          <div class="score">
+          <div class="score" :style="{
+              color: colors[score % 4],
+              'text-shadow': '2px 2px 8px '+ colors[score % 4]
+          }">
             {{score}}
           </div>
 
@@ -13,7 +16,7 @@
         </div>
 
         <div class="reset">
-          <button @click="reset()">
+          <button :disabled="!started" @click="reset()">
             RESET
           </button>
         </div>
@@ -77,6 +80,7 @@ export default {
 
   data() {
     return {
+      colors: ["green", "red", "blue", "yellow"],
       started: false,
       audioContext: null,
       oscMain: null,
@@ -93,22 +97,22 @@ export default {
       spaces: [
         {
           key: "Q",
-          tone: 196.00,
+          tone: 220.00,
           klass: 'piece-t-l'
         },
         {
           key: "W",
-          tone: 220.00,
+          tone: 261.63,
           klass: 'piece-t-r'
         },
         {
           key: "A",
-          tone: 261.63,
+          tone: 293.66,
           klass: 'piece-b-l'
         },
         {
           key: "S",
-          tone: 293.66,
+          tone: 329.63,
           klass: 'piece-b-r'
         },
       ]
@@ -164,6 +168,7 @@ export default {
 
     checkInput(i) {
       if(!this.playing) {
+        this.blink = i
         if(this.check.length < this.pattern.length) {
           this.playOSC(this.spaces[i].tone)
           this.check.push(i)
@@ -171,6 +176,7 @@ export default {
 
         for(let i = 0; i < this.check.length; i++) {
           if(this.check[i] != this.pattern[i]) {
+            this.blink = null
             this.fail = true
           }
         }
@@ -187,11 +193,13 @@ export default {
               this.fail = false
             },200)
 
+            this.blink = null
             this.check = []
             this.addToPattern()
             this.playPattern()
           },200)
         }
+
       }
     },
 
@@ -243,19 +251,30 @@ export default {
 </script>
 
 <style>
+@font-face {
+  font-family: 'digital';
+  src: url('~@/assets/font/DIGITALDREAM.ttf');
+}
+
 html, body{
+  overflow: hidden;
+  font-family: 'digital';
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
   background: black;
 }
+
+
+body {
+  position: relative;
+}
+
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
 }
 
 .simeon-wrapper {
@@ -284,10 +303,13 @@ html, body{
   grid-template-columns: 50% 50%;
   width: 75%;
   height: 75%;
+  padding: 12px;
+  background: linear-gradient(to bottom, #3f3f3f, #0f0f0f);
+  border-radius: 100%;
 }
 
 .overlay {
-  background: #585858;
+  background: linear-gradient(to bottom, #5b5b5b, #191919);
   border-radius: 100%;
   width: 30%;
   height: 30%;
@@ -295,23 +317,25 @@ html, body{
   position: absolute;
   top: 50%;
   left: 50%;
-  border: 16px solid black;
+  padding: 6px;
+  box-shadow: 1px 1px 6px 0px black;
   transform: translateX(-50%) translateY(-50%);
 }
 
 .score {
   background: black;
   border-radius: 6px;
-  color: #fd0010;
+  border-top: 2px solid #262626;
+  /*color: #fd0010;*/
   width: 50%;
   height: 32px;
-  font-size: 18px;
+  font-size: 22px;
-  font-family: Courier New;
   line-height: 32px;
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
+  /*text-shadow: 2px 2px 8px #fd0010;*/
   transform: translateX(-50%) translateY(-50%);
 }
 
@@ -323,8 +347,7 @@ html, body{
   display: grid;
   width: 100%;
   height: 100%;
-  border: 8px solid black;
+  box-shadow: 1px -1px 11px -1px black, inset -12px -9px 20px 2px #000000a6;
-  box-shadow: inset -12px -9px 20px 2px #000000a6; /*inset 9px 4px 6px 2px white*/
 
 }
 
@@ -371,27 +394,33 @@ html, body{
 }
 
 .start button, .reset button {
+  font-family: 'digital';
   outline: none;
   font-size: 24px;
   font-weight: bold;
-  font-family: monospace;
   height: 100%;
   background: linear-gradient(45deg, black,  transparent);
-  text-shadow: 0px 0px 12px black;
+  text-shadow: -1px -1px 0px #838383;
-  color: silver;
+  color: black;
   width: 100%;
 }
 
 .start button {
   border-radius: 100px 100px 0 0;
+  border: 2px solid #262626;
+  border-bottom: 1px solid #262626;
 }
 
 .start button:disabled {
-  color: black;
+  color: #838383;
+  font-weight: normal;
+  text-shadow: -1px -1px 0px black;
 }
 
 .reset button {
   border-radius: 0 0 100px 100px;
+  border: 2px solid #262626;
+  border-top: 1px solid #262626;
 }
 
 .fail {
@@ -400,31 +429,20 @@ html, body{
 
 .success {
   /*background: #12cb56;*/
-  background: White;
+  background: #ffffffba;
 }
 
-.level {
+.key {
-  font-size: 32px;
+  text-shadow: 0 0 5px black;
-  font-family: Courier;
-  font-weight: bold;
-  width: 100%;
-  color: #f1c200;
-  box-sizing: border-box;
-  text-align: center;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  padding: 16px;
 }
-
 @media (max-width:640px) {
   .simeon-wrapper {
     max-width: 100%;
   }
 
   .simeon-game-board {
-    width: 100%;
+    width: 90%;
-    height: 100%;
+    height: 90%;
   }
   .start button, .reset button {
     font-size: 14px;