Added a monospace font.

Added touch-action: manipulation; to prevent iPhone text select. Implemented car counter.
igasparetto · Dec 26, 2023 · 4753bfc · 4753bfc
1 parent b15eb29
commit 4753bfc
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 17 deletions.
diff --git a/css/main.css b/css/main.css
@@ -1,18 +1,19 @@
 body {
-  touch-action: manipulation;
   text-align: center;
   width: 100%;
   overflow: hidden;
   font-size: 12px;
   background: rgb(17, 17, 17);
 }
 body * {
-  font-family: "Orbitron", sans-serif;
+  font-family: 'Rubik Mono One', monospace;
 }
 footer,
 p {
+  touch-action: manipulation;
   color: white;
   text-align: center;
+  font-size: 10px;
 }
 
 #wrapper {
@@ -39,11 +40,13 @@ p {
 }
 
 .btn {
+  touch-action: manipulation;
   min-width: 70px;
   height: 70px;
   font-size: 22px;
+  font-family: Arial, Helvetica, sans-serif !important;
   box-sizing: border-box;
-  background-color: #161616;
+  background: linear-gradient(#454545, #313337 40%, #191919 3%, #212121);
   text-align: center;
   user-select: none;
   cursor: pointer;
@@ -55,18 +58,19 @@ p {
 
 h1 {
   text-align: center;
-  color: #ef5473;
-  font-size: 28px;
+  color: #dcdcdc7d;
+  font-size: 22px;
   margin: 0;
+  height: 30px;
 }
 h1 span {
   display: inline-block;
-  padding: 10px 24px;
+  padding: 7px 34px 13px;
   background: linear-gradient(#454545, #313337 40%, #191919 3%, #212121);
   border: 2px outset #a5a5a5;
-  border-radius: 30px;
+  border-radius: 14px 14px 50px 50px;
   position: relative;
-  bottom: -30px;
+  bottom: -15px;
   z-index: 1;
 }
 
@@ -88,12 +92,15 @@ h1 span {
 .icon {
   position: relative;
   display: inline-block;
+  font-family: Arial, Helvetica, sans-serif !important;
 }
 #btnLeft .icon::after{
   content: "\21E6";
+  font-size: 33px;
 }
 #btnRight .icon::after{
   content: "\21E8";
+  font-size: 33px;
 }
 
 #start {
@@ -108,14 +115,54 @@ h1 span {
 }
 #start .icon::after {
   position: absolute;
-  top: -38px;
+  top: -30px;
   left: -8px;
   content: "\23FC";
   color: rgb(133, 239, 84);
 }
 .paused #start .icon::after {
   color: rgb(239, 84, 115);
 }
+#btnLeft{border-radius: 60px 10px 10px 60px;}
+#btnRight{border-radius: 10px 60px 60px 10px;}
+
+#statsWrapper {
+  text-align: center;
+  font-size: 24px;
+  margin-top: 10px;
+}
+#phase, #points {
+  padding: 0 4px;
+}
+#stats {
+  background: #fe0d0e;
+  display: inline-block;
+  margin: 0 auto;
+  padding: 10px;
+}
+#stats > div{
+  background: #ffbb3b;
+  float: left;
+  font-size: 22px;
+}
+#pointsContainer {
+  margin-left: 10px;
+}
+#pointsContainer::before {
+  content: "";
+  display: block;
+  float: left;
+  width: 30px;
+  height: 21px;
+  background-image: url(../image/car-counter.png);
+  background-position: 0 0;
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin: 2px 0 2px 4px;
+}
+#points {
+  float: left;
+}
 
 @media (max-width: 980px) {
   #start,
@@ -130,5 +177,6 @@ h1 span {
   p {float: left; width: 33%; text-align: center;}
   footer {clear: both;}
   footer p {float: none; width: 100%;}
-  h1 {margin-bottom: 5px;}
+  h1 {height: 15px;}
+  h1 span {bottom: 5px;}
 }
diff --git a/image/car-counter.png b/image/car-counter.png
diff --git a/index.html b/index.html
@@ -21,7 +21,7 @@
 
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap" rel="stylesheet">
 
   <link rel='stylesheet' type='text/css' media='screen' href='css/main.css?v9'>
   <link rel='stylesheet' type='text/css' media='screen' href='css/car.css?v9'>
@@ -42,9 +42,13 @@ <h1><span>ENDURO</span></h1>
             <div id="land"></div>
           </div>
         </div>
-        <div id="stats">
-          <p>Points: <span id="points">0</span> | Speed: <span id="currentSpeed">0</span></p>
+        <div id="statsWrapper">
+          <div id="stats">
+            <div id="phase">1</div>
+            <div id="pointsContainer"><div id="points">000</div></div>
+          </div>
         </div>
+        <p>Speed: <span id="currentSpeed">0</span></p>
         <div id="controls">
           <p>Scene: <span id="currentScene">summer day</span>.</p>
           <div>

diff --git a/js/main.js b/js/main.js
@@ -110,10 +110,7 @@ function init() {
     $gameContainer.classList.add("curving-right");
   });
   game.addEventListener(document.body, "addOne", function () {
-    $points.innerHTML = game.gamePoints;
-  });
-  game.addEventListener(document.body, "addOne", function () {
-    $points.innerHTML = game.gamePoints;
+    $points.innerHTML = (game.gamePoints < 10 ? "00" : game.gamePoints < 100 ? "0" : "") + game.gamePoints;
   });
   game.addEventListener(document.body, "speedChange", function () {
     $currentSpeed.innerHTML = game.currentSpeed + 1;

diff --git a/js/scene.js b/js/scene.js
@@ -23,12 +23,17 @@ let scenes = [
 ];
 let sceneChangeInterval = 10000;
 let $scene = document.getElementById("scene");
+let $phase = document.getElementById("phase");
 let $currentScene = document.getElementById("currentScene");
 let currentScene = 0;
+let years = 1;
 let changeScenes = setInterval(function () {
   currentScene++;
   if (currentScene == scenes.length) {
     currentScene = 0;
+    years++;
+    $phase.innerHTML = years;
+    console.log(years);
   }
   $scene.setAttribute("class", scenes[currentScene]);
   $currentScene.innerHTML = scenes[currentScene];