Added sensitivity option

README.md

@@ -2,7 +2,7 @@
 A parkour game where you run away from elmo! With a leaderboard.
 
 ## The Game ##
-Your goal is to run as far as you can before falling down or elmo eating you.
+Your goal is to run as far as you can before falling down or elmo eating you. Kind of like temple run (If you know what that is, pog).
 
 * WASD to move
   * W - Forward
@@ -28,8 +28,8 @@ There are also different kinds of platforms:
 Make sure to check out the leaderboard at `/leaderboard`. If you want your name on it, make sure to login with replit ;).
 
 ## Feedback (Work in Progress) ##
-
-* Add sensitivity option
+* Currently working on achievements 
+* ~~Add sensitivity option~~ (Done 6/13/2021)
 * Add arrow or some way to indicate which way to go at the start.
 * Github auth (because only 9 year olds use replit)
 

src/public/scripts/script.js

@@ -26,6 +26,14 @@ const canvas = document.getElementById('c');
 canvas.width = innerHeight * 4 / 3;
 canvas.height = innerHeight;
 
+const sensitivityFactorElem = document.querySelector("#sensitivity > input");
+
+let sensitivityFactor = 200 - sensitivityFactorElem.value;
+
+sensitivityFactorElem.oninput = () => {
+	sensitivityFactor = 200 - sensitivityFactorElem.value;
+}
+
 const renderer = new Three.WebGLRenderer(
 	{ canvas, antialias: true }
 );
@@ -315,8 +323,8 @@ onkeyup = e => {
 
 onmousemove = e => {
 	if (document.pointerLockElement) {
-		player.rotation.y -= e.movementX / 100;
-		camera.rotation.x -= e.movementY / 100;
+		player.rotation.y -= e.movementX / sensitivityFactor; // this is all we need to change for sensitivity
+		camera.rotation.x -= e.movementY / sensitivityFactor; // default was 100 before, remember that ig, ok
 	}
 }
 

src/public/styles/style.css

@@ -75,4 +75,43 @@ a {
 	right: 50%;
 	z-index: 15;
 	color: ghostwhite;
+}
+
+.slider {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 15px;
+  border-radius: 5px;  
+  background: #d3d3d3;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
+  transition: opacity .2s;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%; 
+  background: #04AA6D;
+  cursor: pointer;
+}
+
+.slider::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: #04AA6D;
+  cursor: pointer;
+}
+
+#sensitivity p {
+	margin-bottom: 0px;
+}
+
+#sensitivity {
+	position: relative;
+	top: 200px;
 }

src/views/index.ejs

@@ -25,6 +25,10 @@
 				<div id="chilc"></div>
 				<div id="pause-menu">
 					<button id="resume">Resume</button>
+					<div id="sensitivity">
+						<p>Sensitivity: </p>
+						<input type="range" min="1" max="150" value="100" class="slider"> 
+					</div>
 				</div>
 			</div>
 			<canvas id="c"></canvas>