sum stylez

src/App.vue

@@ -3,10 +3,7 @@
     <div class="simeon-wrapper">
       <div class="overlay">
         <div class="start">
-          <div class="score" :style="{
-              color: colors[score % 4],
-              'text-shadow': '2px 2px 8px '+ colors[score % 4]
-          }">
+          <div class="score" :class="{'score-success': success, 'score-fail': fail}">
             {{score}}
           </div>
 
@@ -25,10 +22,10 @@
         <div :key="space"
           @click="checkInput(i)"
           v-for="(space,i) in spaces"
-          :class="[space.klass, {fail: fail, success: success}] "
+          :class="[space.klass, {fail: fail, blink: blink == i || success}] "
           class="simeon-game-spaces">
 
-          <div class="lite" :class="{blink: blink == i}">
+          <div class="lite">
             <div class="key">
               {{space.key}}
             </div>
@@ -141,8 +138,8 @@ export default {
   },
 
   mounted() {
-    const randomColor = "#"+((1<<24)*Math.random()|0).toString(16);
-    document.documentElement.style.setProperty('--main-bg-color', randomColor);
+  //const randomColor = "#"+((1<<24)*Math.random()|0).toString(16);
+  //document.documentElement.style.setProperty('--main-bg-color', randomColor);
   },
 
   methods: {
@@ -169,7 +166,7 @@ export default {
     },
 
     checkInput(i) {
-      if(!this.playing) {
+      if(!this.playing && this.started) {
         this.blink = i
         if(this.check.length < this.pattern.length) {
           this.playOSC(this.spaces[i].tone)
@@ -265,7 +262,14 @@ html, body{
   height: 100%;
   padding: 0;
   margin: 0;
-  background: var(--main-bg-color);
+  /*background: var(--main-bg-color);*/
+  background:
+  radial-gradient(black 15%, transparent 16%) 0 0,
+  radial-gradient(black 15%, transparent 16%) 8px 8px,
+  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
+  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
+  background-color:#282828;
+  background-size:16px 16px;
 }
 
 
@@ -303,9 +307,11 @@ body {
   grid-template-columns: 50% 50%;
   width: 75%;
   height: 75%;
-  padding: 12px;
-  background: linear-gradient(to bottom, #3f3f3f, #0f0f0f);
+  padding: 8px;
+  border: 4px solid #232323;
+  background: linear-gradient(to left, #2b2b2b, #464646);
   border-radius: 100%;
+  box-shadow: 0 0 8px 2px black;
 }
 
 .overlay {
@@ -326,7 +332,6 @@ body {
   background: black;
   border-radius: 6px;
   border-top: 2px solid #262626;
-  /*color: #fd0010;*/
   width: 50%;
   height: 32px;
   font-size: 22px;
@@ -335,10 +340,21 @@ body {
   position: absolute;
   top: 50%;
   left: 50%;
-  /*text-shadow: 2px 2px 8px #fd0010;*/
+  color: blue;
+  text-shadow: 2px 2px 8px blue;
   transform: translateX(-50%) translateY(-50%);
 }
 
+.score-success {
+  color: green;
+  text-shadow: 2px 2px 8px green;
+}
+
+.score-fail {
+  color: red;
+  text-shadow: 2px 2px 8px red;
+}
+
 .simeon-game-spaces {
   box-sizing: border-box;
   align-content: center;
@@ -347,7 +363,7 @@ body {
   display: grid;
   width: 100%;
   height: 100%;
-  box-shadow: 1px -1px 11px -1px black, inset -9px 0px 20px 2px #000000ab, inset 8px 0px 20px 2px #ffffffa6;
+  box-shadow: 1px 1px 4px 2px black, inset -11px 0px 4px -2px #00000059, inset 11px 0px 4px 2px #ffffff6b;
 }
 
 .piece-t-l {
@@ -379,8 +395,7 @@ body {
 }
 
 .blink {
-  background: #ffffff7d;
-  box-shadow: 0px 0px 22px 12px white;
+  box-shadow: inset 0 0 70px 60px #ffffffa6, inset -11px 0px 4px -2px #00000059, inset 11px 0px 4px 2px #ffffff6b;
 }
 
 .start, .reset {