Typing Game Submission

plb18001 · May 1, 2022 · 3f186d0 · 3f186d0
1 parent 60acd24
commit 3f186d0
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 27 deletions.
diff --git a/final-project/css/main.css b/final-project/css/main.css
@@ -117,6 +117,22 @@ body {
   border-color: black;
 }
 
+#main-menu {
+  color: white;
+  font-size: 50px;
+  margin-bottom: 1em;
+  text-align: center;
+}
+#mainButton {
+  border-radius: 10px;
+  border-color: transparent;
+  background-color: rgb(121, 121, 101);
+  font-size: 20px;
+  padding: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
 .container {
   background-color: blanchedalmond;
   padding: 1rem;
@@ -126,21 +142,46 @@ body {
 }
 
 #timer {
-  position: absolute;
-  top: 2rem;
+  margin-bottom: 1em;
   font-size: 3rem;
   color: blanchedalmond;
+  background-color: red;
+  padding-left: 1rem; 
+  padding-right: 1rem;
+  padding-top: .2rem;
+  padding-bottom: .2rem;
+  border-radius: 25px;
   font-weight: bold;
+  display: none;
+}
+#countdown {
+  color: white;
+  font-size: 50px;
+  margin-bottom: 1em;
+  text-align: center;
+}
+#wpm, #timeLeft, #length {
+  color: white;
+  font-size: 20px;
+}
+#finalScoreDiv {
+  display: none;
+  margin-bottom: 1em;
+  flex-direction: column;
+  text-align: center;
+}
+.container {
+  display:none;
 }
 
 #quoteDisplay {
   margin-left: calc(1rem + 2px);
   margin-right: calc(1rem + 2px);
-  /* -webkit-user-select: none;
+  -webkit-user-select: none;
   -webkit-touch-callout: none;
   -moz-user-select: none;
   -ms-user-select: none;
-  user-select: none; */
+  user-select: none;
 }
 #authorDisplay {
   margin-bottom: 1rem;
@@ -151,10 +192,21 @@ body {
   font-style: italic;
   font-weight: bold;
 }
+#quoteDisplay, #authorDisplay {
+  font-size: 20px;
+}
 
 
 #nextButton {
   margin-top: 1rem;
+  display:none;
+  border-radius: 10px;
+  border-color: transparent;
+  background-color: rgb(121, 121, 101);
+  font-size: 20px;
+  padding: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 .correct {

diff --git a/final-project/index.html b/final-project/index.html
@@ -24,12 +24,25 @@
 
 <body>
 
+  <div id="main-menu">
+    Paolo's Speed Typing Game
+  </div>
+  <div id="mainButtonDiv">
+    <button id="mainButton">START GAME</button>
+  </div>
+
+
   <div id="timer">0</div>
+  <div id="countdown"></div>
+  <div id="finalScoreDiv">
+    <span id="length"></span>
+    <span id="wpm"></span>
+    <span id="timeLeft"></span>
+  </div>
 
   <div class="container">
     <div id="quoteDisplay"></div>
     <div id="authorDisplay"></div>
-    <div id="wpm"></div>
     <textarea id="quoteInput" autofocus></textarea>
   </div>
 

diff --git a/final-project/js/main.js b/final-project/js/main.js
@@ -1,15 +1,21 @@
-const quote_api = 'https://api.quotable.io/random?minLength=160'
+const quote_api = 'https://api.quotable.io/random?minLength=160&maxLength=200'
 const quoteDisplay = document.querySelector('#quoteDisplay')
 const authorDisplay = document.querySelector('#authorDisplay')
 const quoteInput = document.querySelector('#quoteInput')
 const nextButton = document.querySelector('#nextButton')
 const incorrectEntry = document.querySelector('#incorrectEntry')
 const timer = document.querySelector('#timer')
 const wpm = document.querySelector('#wpm')
+const startButton = document.querySelector('#mainButton')
+const mainMenu = document.querySelector('#main-menu')
 let timerStart = false;
 let startTime
+let time = 60
 let count = 5
 
+// wpm counter variable
+let topScore;
+
 // Current quote information, as globals
 let quote, authorName, quoteLength;
 
@@ -21,7 +27,7 @@ const badKeys = [
   "Enter",
   "Delete"
 ]
-
+quoteInput.readOnly = true;
 
 quoteInput.addEventListener('keydown', (event) => {
 
@@ -36,7 +42,6 @@ quoteInput.addEventListener('keydown', (event) => {
     // Disable further typing
     event.preventDefault();
   }
-
 })
 
 quoteInput.addEventListener('input', (event) => {
@@ -45,6 +50,7 @@ quoteInput.addEventListener('input', (event) => {
       const arrayQuote = quoteDisplay.querySelectorAll('span')
       const arrayValue = quoteInput.value.split('')
       let finished = true;
+
       arrayQuote.forEach((charSpan, index) => {
         if(typingError !== true || event.inputType == 'deleteContentBackward'){
           const character = arrayValue[index]
@@ -73,9 +79,19 @@ quoteInput.addEventListener('input', (event) => {
   })
 
 
+startButton.addEventListener('click', () => {
+  document.querySelector('#nextButton').style.display = "none";
+  mainMenu.style.display = "none";
+  startButton.style.display = "none";
+  document.querySelector('.container').style.display = "block";
+  getNextQuote()
+  quoteInput.focus();
+})
 nextButton.addEventListener('click', () => {
     getNextQuote()
-    quoteInput.readOnly = false;
+    document.querySelector('#nextButton').style.display = "none";
+    document.querySelector('#countdown').style.display = "block";
+    document.querySelector('#finalScoreDiv').style.display = "none";
     quoteInput.focus();
 })
 
@@ -117,41 +133,64 @@ async function getNextQuote () {
     quoteInput.value = null;
     timerStart = true;
     count = 5;
+    time = 60;
     startTimer()
 }
 
 
 function startTimer() {
     timer.innerText = 0
-    startTime = new Date()
 
     let interval = setInterval(() =>{
         if (timerStart) {
             if (count > 0) {
                 console.log(count);
+                document.querySelector('#countdown').innerText = "TIME TO START: " + count
                 count--;
+                quoteInput.readOnly = true;
+                document.querySelector('#countdown').style.color = "white"
+                if (count == 2) {
+                  document.querySelector('#countdown').style.color = "red"
+                } else if (count == 1) {
+                  document.querySelector('#countdown').style.color = "yellow"
+                } else if (count == 0) {
+                  document.querySelector('#countdown').style.color = "green"
+                }
             }
             else {
-                clearInterval(interval)
-                console.log('RUnning else on startTimer() interval')
-                setInterval(() => {
-                    timer.innerText = getTimerTime()
-                }, 100);
+                console.log('Running else (code below) on time interval')
+                document.querySelector('#countdown').style.display = "none";
+                timer.style.display = "block";
+                quoteInput.readOnly = false;
+                    if (time > 0) {
+                        timer.innerText = time;
+                        time--;
+                        console.log(time)
+                    } else {
+                      clearInterval(interval)
+                      console.log("Interval finished")
+                      topScore = (quoteLength / 5)
+                      document.querySelector('#wpm').innerText = "Words Per Minute: " + Math.round(topScore);
+                      document.querySelector('#length').innerText = "Quote Length: " + quoteLength;
+                      document.querySelector('#timeLeft').innerText = "Seconds Taken to Complete: " + (60 -             time);
+                      document.querySelector('#nextButton').style.display = "block";
+                      document.querySelector('#finalScoreDiv').style.display = "flex";
+                    }
             }
+        } else {
+          time = time + 1
+          clearInterval(interval)
+          console.log("Interval finished")
+          topScore = (quoteLength / 5) / ((60 - time) / 60);
+          document.querySelector('#wpm').innerText = "Words Per Minute: " + Math.round(topScore);
+          document.querySelector('#length').innerText = "Quote Length: " + quoteLength;
+          document.querySelector('#timeLeft').innerText = "Seconds Taken to Complete: " + (60 - time);
+          document.querySelector('#nextButton').style.display = "block";
+          document.querySelector('#finalScoreDiv').style.display = "flex";
         }
     }, 1000);
-
+    
 }
-function getTimerTime() {
-    if (timerStart){
-        if (count > 0){
-            return (new Date() - startTime) / 1000
-        }else {
-            let calcWpm = (quoteLength / 5) / timer.innerText
-            wpm.innerText = calcWpm
-            return timer.innerText = timer.innerText
-        }
-    }
 
-}
+