Update game design

micschwarz · Oct 1, 2020 · 8958ba7 · 8958ba7
1 parent 4b4f20a
commit 8958ba7
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 13 deletions.
diff --git a/public/static/css/buttons.css b/public/static/css/buttons.css
@@ -101,20 +101,28 @@
     align-items         : center;
 }
 
-.btn-2:not(:disabled):hover {
+.btn-2:not(:disabled):not(.btn-2--no-click):not(.btn-2--inactive):hover {
     transform : scale(1.03) translateY(-.05rem);
 }
 
-.btn-2:active {
+.btn-2:not(.btn-2--no-click):not(.btn-2--inactive):active {
     transform  : scale(0.97) translateY(.05rem);
     background : var(--color-btn--active);
 }
 
+.btn-2.btn-2--no-click {
+    background : var(--color-btn);
+    box-shadow : 0 .05rem .5rem rgba(0, 0, 0, .3);
+    cursor     : not-allowed;
+}
+
+.btn-2.btn-2--inactive,
 .btn-2:disabled {
     background : var(--color-btn--active);
-    box-shadow : 0 .075rem 1rem rgba(0, 0, 0, .3);
+    box-shadow : 0 .05rem .5rem rgba(0, 0, 0, .3);
     color      : var(--color-text-translucent);
     cursor     : not-allowed;
+    transform  : scale(.95);
 }
 
 .btn-2 .btn-2-icon {
@@ -143,7 +151,7 @@
     margin-right : 0;
 }
 
-.btn-2.btn-2--flat:not(:disabled):hover {
+.btn-2.btn-2--flat:not(:disabled):not(.btn-2--no-click):not(.btn-2--inactive):hover {
     transform : scale(1.03);
 }
 
@@ -155,3 +163,12 @@
     --color-btn         : rgba(255, 255, 255, .1);
     --color-btn--active : rgba(255, 255, 255, .2);
 }
+
+.btn-2.btn-2--compact {
+    padding : .75rem;
+    height  : 3.1rem;
+}
+
+.btn-2.btn-2--compact.btn-2--square {
+    width : 3.1rem;
+}
diff --git a/src/Components/Hangman/Actions.svelte b/src/Components/Hangman/Actions.svelte
@@ -4,7 +4,8 @@
 
 <div class="btns">
     {#each actions as action (action)}
-        <div class={`btn btn--no-click btn--${action.getColor()}`} class:btn--inactive={action.didRun()}>
+        <div class={`btn-2 btn-2--square btn-2--compact btn-2--no-click btn-2--${action.getColor()}`}
+             class:btn-2--inactive={action.didRun()}>
             <i class={`uil uil-${action.getIcon()}`}></i>
         </div>
     {/each}

diff --git a/src/Components/Hangman/LetterKeyboard.svelte b/src/Components/Hangman/LetterKeyboard.svelte
@@ -23,7 +23,7 @@
 <svelte:window on:keyup={keyboardPressHandler}/>
 <div class="btns">
     {#each letters as letter (letter.getValue())}
-        <button class="btn btn--square"
+        <button class="btn-2 btn-2--compact btn-2--square"
                 animate:flip={{duration: 300}}
                 on:click={() => letterClickHandler(letter.getValue())}
                 disabled={letter.isUsed()}>

diff --git a/src/Components/Hangman/Rounds.svelte b/src/Components/Hangman/Rounds.svelte
@@ -23,15 +23,26 @@
     }
 
     .rounds .current {
-        margin-bottom : .5rem;
-        font-weight   : bold;
+        font-weight : bold;
     }
 
     .rounds .separator {
-        border : 1px solid var(--color-text);
+        position : relative;
+        border   : 1px solid var(--color-text-translucent);
+        margin   : .5rem 0 .65rem;
     }
 
-    .rounds .max {
-        margin-top : .5rem;
+    .rounds .separator:after {
+        position   : absolute;
+        content    : 'von';
+        background : var(--color-background);
+        color      : var(--color-text-translucent);
+        padding    : 0 .2rem;
+        font-size  : .45em;
+        transform  : translate(-50%, -50%);
+        top        : 50%;
+        left       : 50%;
     }
+
+
 </style>
diff --git a/src/Components/Hangman/Word.svelte b/src/Components/Hangman/Word.svelte
@@ -23,11 +23,12 @@
         justify-content : center;
         align-items     : center;
 
-        border          : 1px solid var(--color-text);
+        border          : 1px solid var(--color-text-translucent-2);
         background      : rgba(255, 255, 255, .05);
         width           : 2rem;
         height          : 2.75rem;
-        border-radius   : 5px;
+        border-radius   : .5rem;
+        box-shadow      : 0 .05rem .75rem rgba(0, 0, 0, .3);
 
         font-size       : 1.2em;
         font-weight     : bold;