Adds assets and changes the main design

Kutomore · Feb 21, 2019 · b7a639b · b7a639b
1 parent 421e8e4
commit b7a639b
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 36 deletions.
diff --git a/assets/fonts/ARCADECLASSIC.TTF b/assets/fonts/ARCADECLASSIC.TTF
diff --git a/assets/images/floor.jpg b/assets/images/floor.jpg
diff --git a/assets/images/money.png b/assets/images/money.png
diff --git a/assets/images/wall.jpg b/assets/images/wall.jpg
diff --git a/assets/javascript/game.js b/assets/javascript/game.js
@@ -1,48 +1,48 @@
 var money = 0;
 var click_value = 1;
 var helper_count = 0;
-const office = document.getElementById('office');
+const employers = document.querySelector('#office > .employers')
 
 window.onload = function startGame(){
-    document.getElementById('office').addEventListener("click", click, false);
-    document.getElementById('improve_self').addEventListener("click", improveSelf, false);
-    document.getElementById('hire_help').addEventListener("click", hireHelp, false);
-    outsourcedMoney();
-    updateMoney();
+	document.getElementById('office').addEventListener("click", click, false);
+	document.getElementById('improve_self').addEventListener("click", improveSelf, false);
+	document.getElementById('hire_help').addEventListener("click", hireHelp, false);
+	outsourcedMoney();
+	updateMoney();
 };
 
 function outsourcedMoney() {
-    money = money + helper_count;
-    updateMoney();
-    setTimeout(outsourcedMoney, 1000);
+	money = money + helper_count;
+	updateMoney();
+	setTimeout(outsourcedMoney, 1000);
 }
 
 function updateMoney() {
-    document.getElementById('money').innerHTML= "You have: $"+money
+	document.getElementById('money').innerHTML = money
 }
 
 function improveSelf() {
-    if(money > (Math.pow(click_value,2))){
-        money = money - (Math.pow(click_value,2));
-        updateMoney();
-        click_value++;
-    }
+	if(money > (Math.pow(click_value,2))){
+		money = money - (Math.pow(click_value,2));
+		updateMoney();
+		click_value++;
+	}
 }
 
 function click(){
-    money = money + click_value;
-    updateMoney();
+	money = money + click_value;
+	updateMoney();
 }
 
 function hireHelp() {
-    if(money > (Math.pow(helper_count, 2)+1)){
-        money = money - (Math.pow(helper_count, 2)+1);
-        updateMoney();
-        helper_count ++;
-        addNewHelper();
-    }
+	if(money > (Math.pow(helper_count, 2) + 1)) {
+		money = money - (Math.pow(helper_count, 2)+1);
+		updateMoney();
+		helper_count++;
+		addNewHelper();
+	}
 }
 
 function addNewHelper() {
-    office.innerHTML += '<img class="character" src="assets/images/main_guy.png">'
-}
+	employers.innerHTML += '<img class="character" src="assets/images/main_guy.png">'
+}
diff --git a/assets/stylesheets/game.css b/assets/stylesheets/game.css
@@ -1,10 +1,78 @@
+@font-face {
+	font-family: arcadeclassic;
+	src: url('../fonts/ARCADECLASSIC.ttf');
+}
+
+body, html {
+	background: #000;
+	font-family: arcadeclassic;
+}
+
 #game {
-    background: #261C2A;
-    width: 50%;
-    margin-left: auto;
-    margin-right: auto;
+	width: 800px;
+	height: 750px;
+	margin-left: auto;
+	margin-right: auto;
+	background-image: url('../images/floor.jpg');
+	background-size: 10rem;
+
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none; 
+}
+
+#office {
+	height: calc(750px - 4rem);
+}
+
+#office > .employers {
+	padding: 1rem;
+}
+
+#office > .employers > .you {
+	display: flex;
+	justify-content: center;
+	margin-bottom: 2rem;
+}
+
+.stats {
+	background: #ffffff;
+	background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
+	background: -webkit-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
+	background: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0);
+
+	display: flex;
+	height: 4rem;
+	justify-content: space-between;
+	padding-right: 1rem;
+	padding-left: 1rem;
+}
+
+.stats__money {
+	display: flex;
+	justify-content: space-between;
+	width: 60px;
+	align-items: center;
+	font-size: 19px;
+}
+
+.wall {
+	height: 80px;
+	background-image: url('../images/wall.jpg');
 }
 
 .character {
-    height: 50px;
-}
+	height: 50px;
+	margin-right: .3rem;
+}
+
+footer {
+	display: flex;
+	align-self: center;
+	justify-content: center;
+	margin-top: 1rem;
+}
diff --git a/index.html b/index.html
@@ -6,15 +6,29 @@
 	</head>
 	<body>
 		<div id='game'>
+			<div class="stats">
+				<div class="stats__money">
+					<img src="assets/images/money.png" height="30">
+					<div id="money"></div>
+				</div>
+				<div class="project"></div>
+			</div>		
 			<div id='office'>
-				<img class="character" src="assets/images/main_guy.png">
+				<div class="wall"></div>
+				<div class="employers">
+					<div class="you">
+						<img class="character" src="assets/images/main_guy.png">
+					</div>					
+					<!-- employers here !-->
+				</div>
 			</div>
+		</div>
+		<footer>
 			<div>
-				<h1 id='money'></h1>
-				<button id = 'hire_help'>Hire a developer</button>
-				<button id = 'improve_self'>Improve yourself</button>
+				<button id='hire_help'>Hire a developer</button>
+				<button id='improve_self'>Improve yourself</button>
 			</div>
-		</div>
+		</footer>
 	</body>
 	<script src="assets/javascript/game.js"></script>
 </html>