much improve

jmenter · Apr 21, 2019 · 36a7353 · 36a7353
1 parent c4cbbf0
commit 36a7353
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 48 deletions.
diff --git a/index.html b/index.html
@@ -11,23 +11,28 @@
     <div class="flex-container">
         <div class="stepper-group victory top left">
             <div class="value" id="victory">0</div>
-            <div class="stepper-increment up label" onclick="incrementVictory()">Victory</div>
-            <div class="stepper-decrement down" onclick="decrementVictory()"></div>
+            <div class="label">Victory</div>
+            <div class="stepper-increment up label" onclick="handleOnClick('victory', 1)"
+                onmousedown="handleMouseDown(this)" onmouseup="handleMouseUp(this)"></div>
+            <div class="stepper-decrement down" onclick="handleOnClick('victory', -1)"></div>
         </div>
         <div class="stepper-group villager top right">
             <div class="value" id="villagers">0</div>
-            <div class="stepper-increment up label" onclick="incrementVillagers()">Villagers</div>
-            <div class="stepper-decrement down" onclick="decrementVillagers()"></div>
+            <div class="label">Villagers</div>
+            <div class="stepper-increment up label" onclick="handleOnClick('villagers', 1)"></div>
+            <div class="stepper-decrement down" onclick="handleOnClick('villagers', -1)"></div>
         </div>
         <div class="stepper-group coffer bottom left">
             <div class="value" id="coffers">0</div>
-            <div class="stepper-increment up label" onclick="incrementCoffers()">Coffers</div>
-            <div class="stepper-decrement down" onclick="decrementCoffers()"></div>
+            <div class="label">Coffers</div>
+            <div class="stepper-increment up label" onclick="handleOnClick('coffers', 1)"></div>
+            <div class="stepper-decrement down" onclick="handleOnClick('coffers', -1)"></div>
         </div>
         <div class="stepper-group debt bottom right">
             <div class="value" id="debt">0</div>
-            <div class="stepper-increment up label" onclick="incrementDebt()">Debt</div>
-            <div class="stepper-decrement down" onclick="decrementDebt()"></div>
+            <div class="label">Debt</div>
+            <div class="stepper-increment up label" onclick="handleOnClick('debt', 1)"></div>
+            <div class="stepper-decrement down" onclick="handleOnClick('debt', -1)"></div>
         </div>
     </div>
     <script src="./script.js"></script>

diff --git a/script.js b/script.js
@@ -1,32 +1,17 @@
-function incrementVictory() {
-    adjust("victory", 1);
+function handleMouseDown(element) {
+    console.log("down")
+    element.style.opacity = 1;
 }
-function decrementVictory() {
-    adjust("victory", -1);
-}
-function incrementVillagers() {
-    adjust("villagers", 1);
-}
-function decrementVillagers() {
-    adjust("villagers", -1);
-}
-function incrementCoffers() {
-    adjust("coffers", 1);
-}
-function decrementCoffers() {
-    adjust("coffers", -1);
-}
-function incrementDebt() {
-    adjust("debt", 1);
-}
-function decrementDebt() {
-    adjust("debt", -1);
+
+function handleMouseUp(element) {
+    console.log("up")
+    element.style.opacity = 0.5;
 }
 
-function adjust(item, value) {
-    let element = document.getElementById(item);
+function handleOnClick(identifier, amount) {
+    let element = document.getElementById(identifier);
     let currentValue = parseInt(element.textContent);
-    currentValue += value;
+    currentValue += amount;
     if (currentValue < 0) {
         currentValue = 0;
     }

diff --git a/styles.css b/styles.css
@@ -1,43 +1,44 @@
 .flex-container {
     display: flex;
     flex-flow: row wrap;
+    justify-content: space-evenly;
     width: 100vw;
     height: 100vh;
     background-color: black;
     text-align: center
 }
 
 .stepper-group {
-    width: calc(50vw - 8px - 4px);
+    width: calc(50vw - 8px - 11px);
     height: calc(50vh - 8px - 4px);
-    margin: 8px;
+    /* margin: 8px; */
     border-radius: 8px;
 }
 
 .down {
-    background: url(down.svg);
-    background-size: cover;
+    background: url(down.svg) no-repeat center;
+    opacity: 0.5;
 }
 
 .up {
-    background: url(up.svg);
-    background-size: cover;
+    background: url(up.svg) no-repeat center;
+    opacity: 0.5;
 }
 
 .top {
-    margin-bottom: 4px;
+    margin-top: 8px;
 }
 
 .left {
-    margin-right: 4px;
+    /* margin-right: 4px; */
 }
 
 .bottom {
-    margin-top: 4px;
+    /* margin-top: 4px; */
 }
 
 .right {
-    margin-left: 4px;
+    /* margin-left: 4px; */
 }
 
 .victory {
@@ -58,17 +59,19 @@
 
 .value {
     position: absolute;
-    font-size: 72px;
+    font-size: 64px;
     font-weight: 700;
     color: white;
     font-family: Verdana, Geneva, Tahoma, sans-serif;
     text-align: center;
-    text-shadow: 2px 2px 4px #000000;
+    text-shadow: 0px 0px 8px #0000007c;
     width: calc(50vw - 12px);
-    transform: translateY(calc(25vw + 24px));
+    height: 64px;
+    transform: translateY(calc(25vh - 32px - 8px));
 }
 
 .label {
+    height: 18px;
     font-size: 14px;
     font-weight: 700;
     color: white;
@@ -77,11 +80,11 @@
 
 .stepper-increment {
     width: calc(50vw - 12px);
-    height: calc(25vh - 6px);
+    height: calc(25vh - 6px - 18px);
 }
 
 .stepper-decrement {
     text-align: left;
     width: calc(50vw - 12px);
-    height: calc(25vh - 6px);
+    height: calc(25vh - 6px - 18px);
 }