diff --git a/public/favicon.ico b/public/favicon.ico index df36fcf..1b91e39 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/src/App.vue b/src/App.vue index 3b5337c..3170160 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,10 +3,7 @@
-
+
{{score}}
@@ -25,10 +22,10 @@
-
+
{{space.key}}
@@ -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 { diff --git a/src/assets/font/DIGITALDREAM.ttf b/src/assets/font/DIGITALDREAM.ttf new file mode 100644 index 0000000..25ab5de Binary files /dev/null and b/src/assets/font/DIGITALDREAM.ttf differ