diff --git a/index.html b/index.html
index 8199206..92f6e8a 100644
--- a/index.html
+++ b/index.html
@@ -11,23 +11,28 @@
0
-
Victory
-
+
Victory
+
+
0
-
Villagers
-
+
Villagers
+
+
0
-
Coffers
-
+
Coffers
+
+
diff --git a/script.js b/script.js
index cecc45b..1376f06 100644
--- 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
index aacc366..179368f 100644
--- a/styles.css
+++ b/styles.css
@@ -1,6 +1,7 @@
.flex-container {
display: flex;
flex-flow: row wrap;
+ justify-content: space-evenly;
width: 100vw;
height: 100vh;
background-color: black;
@@ -8,36 +9,36 @@
}
.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);
}
\ No newline at end of file