Merge pull request #26 from Capstone-Projects-2024-Spring/jimmy1

week2 work
Capstone-Projects-2024-Spring · Apr 2, 2024 · 1f8f751 · 1f8f751
2 parents 1e764ac + 35afca8
commit 1f8f751
Show file tree

Hide file tree

Showing 2 changed files with 233 additions and 0 deletions.
diff --git a/GamePage.html b/GamePage.html
@@ -0,0 +1,233 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Thrill Typer Game</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background-image: url('ironman.jpg');
+            background-size: cover; /* Adjust the background size as needed */
+            background-repeat: no-repeat; 
+
+        }
+
+        #game-container {
+            max-width: 600px;
+            margin: 50px auto;
+        }
+
+        #text-display {
+            font-size: 18px;
+            margin-bottom: 20px;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+
+        #input-box {
+            padding: 10px;
+            font-size: 16px;
+            width: 80%; /* Adjust the width as needed */
+        }
+
+        #result {
+            margin-top: 20px;
+            font-weight: bold;
+        }
+
+        .typed-word {
+            color: green;
+        }
+
+
+        #stats {
+            margin-top: 20px;
+        }
+
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <h1>Thrill Typer Game</h1>
+        <div id="text-display"></div>
+        <input type="text" id="input-box" oninput="checkInput()" disabled>
+        <div id="result"></div>
+        <div id="stats"></div>
+        <button onclick="startTimer()">Start</button>
+    </div>
+
+    <script>
+    "use strict";
+
+
+        /*
+            known bugs
+            #1: for unknown reason, if you click start button in the middle of typing, you can not submit the game and finish
+                (the result is not showing) (fixed)
+            #2
+        */
+        const text = "The quick brown fox jumps over the lazy dog.";
+        const words = text.split(" ");
+
+        let currentCharIndex = 0;   //only increment when user has typed correct letter
+        let currentWordIndex = 0;
+        let startTime;
+        let timerInterval;
+        let userInputCorrectText = "";
+
+
+        let correctCharsTyped = 0; // Track correct characters typed
+        let totalCharsTyped = 0; // Track total characters typed
+
+        //update text color as user types text
+        //green text if user typed correctly
+        //red background text if user typed incorrectly
+        /*
+            The whole function logic is based on following assumption, we divide text into 3 sections
+            correct text | incorrect text | untyped text
+        */
+        //if you don't get what is going on here, open a type racer game and type some wrong text
+        function updateText(){
+            var str = text
+            var userInputFullText = userInputCorrectText + document.getElementById("input-box").value;
+            var greenText = "";          //correct text
+            var redText = "";           //incorrect text
+            var uncoloredText = "";     //untyped text
+
+            //green text
+            //start index is fixed to 0
+            //end index is number of matched letters, until the first incorrect letter
+            var greenStartIndex = 0;
+            var greenEndIndex = 0;
+            var numMatchLetters = 0;
+            for(var i=0; i<userInputFullText.length; i++){   
+                if(userInputFullText[i] == text[i]){    //what if userInputFullText is longer than text? could not happend because submission
+                    numMatchLetters++;
+                }else{
+                    break;
+                }
+            }   
+
+            greenEndIndex = numMatchLetters;
+            greenText = text.substring(greenStartIndex, greenEndIndex);
+
+            //red text
+            //start index is the first unmatched letter, if it exists. It equals to greenEndIndex
+            //end index is the last index of user input text
+            var redStartIndex = greenEndIndex; 
+            var redEndIndex = greenEndIndex;
+            if(numMatchLetters < userInputFullText.length){    //if number of matched letters less than input letters means there are wrong input letters
+                redEndIndex = userInputFullText.length > text.length ? text.length : userInputFullText.length;  //in case user input text is longer than text
+            }
+
+            redText = text.substring(redStartIndex, redEndIndex);
+
+            //uncoloredText is the rest of the text starting from redEndIndex
+            uncoloredText = str.substring(redEndIndex);
+
+            /* debug
+            console.log("updateText debugging");
+            console.log("userInputFullText: " + userInputFullText);
+            console.log("greenText: " + greenText);
+            console.log("red text: " + redText);
+            console.log("uncoloredText: " + uncoloredText + "\n");
+            */
+
+            var updatedText = `<span style="color: #9CCE52">${greenText}</span>` + 
+            `<span style="background: #F0A3A3">${redText}</span>` + uncoloredText;
+
+            document.getElementById("text-display").innerHTML = updatedText;
+        }
+
+
+        function startTimer() {
+            currentWordIndex = 0;   //initializes value for play again
+            currentCharIndex = 0;
+            userInputCorrectText = "";
+            document.getElementById("input-box").value = "";
+            document.getElementById("result").innerHTML = "";
+
+            startTime = new Date().getTime();
+            displayText();
+            enableInput();
+
+            clearInterval(timerInterval);
+            timerInterval = setInterval(updateTimer, 10);
+        }
+
+        function updateTimer() {
+            const currentTime = new Date().getTime();
+            const elapsedTime = (currentTime - startTime) / 1000;
+            document.getElementById("result").innerHTML = `Time elapsed: ${elapsedTime.toFixed(2)} seconds`;
+        }
+
+        function displayText() {
+            document.getElementById("text-display").innerHTML = text;
+        }
+
+        function displayhtml(){
+            // jimmy1
+             // Calculate words per minute and accuracy
+
+             const elapsedTime = (new Date().getTime() - startTime) / 1000;
+             const wordsPerMinute = Math.round((currentWordIndex / elapsedTime) * 60);
+             const accuracy = (correctCharsTyped / totalCharsTyped) * 100;
+
+
+            // Display WPM and accuracy
+            const statsDisplay = `Speed: ${wordsPerMinute} WPM | Accuracy: ${accuracy.toFixed(2)}%`;
+            document.getElementById("stats").innerHTML = statsDisplay;
+
+        }
+
+
+        function enableInput() {
+            document.getElementById("input-box").disabled = false;
+            document.getElementById("input-box").focus();
+        }
+
+        function checkInput() {
+            var userInputText = document.getElementById("input-box").value;
+            var userInputLastChar = userInputText[userInputText.length-1];
+
+            //updates text color
+            updateText();
+            // Call displayhtml function to update WPM and accuracy
+            displayhtml();
+
+            //idk what this is 
+            //if typed word matches with text word and last letter is space, clear input box and add word to userInputCorrectText
+            if(userInputText.substring(0, userInputText.length-1) == words[currentWordIndex] && userInputLastChar == ' '){
+                currentWordIndex++;
+                userInputCorrectText += userInputText;  //saves correct text
+                document.getElementById("input-box").value = "";
+            }
+
+            if(userInputLastChar == text[currentCharIndex]){ //works but logic is bad
+                currentCharIndex++;
+                correctCharsTyped++; // Increment correct characters typed
+            }
+            totalCharsTyped++; // Increment total characters
+
+
+            //submit input if last letter is typed
+            if(currentCharIndex >= text.length){
+                submitInput();
+            }
+        }
+
+        function submitInput() {
+            clearInterval(timerInterval);
+            const endTime = new Date().getTime();
+            const elapsedTime = (endTime - startTime) / 1000;
+            const wordsPerMinute = Math.round((text.split(" ").length / elapsedTime) * 60);
+            const accuracy = (correctCharsTyped / totalCharsTyped) * 100; // Calculate accuracy
+            document.getElementById("result").innerHTML = `Congratulations! You completed the game in ${elapsedTime.toFixed(2)} seconds. Your speed: ${wordsPerMinute} WPM. Accuracy: ${accuracy.toFixed(2)}%`;
+            document.getElementById("input-box").value = "";
+            document.getElementById("input-box").disabled = true;
+        }
+    </script>
+</body>
+</html>
diff --git a/ironman.jpg b/ironman.jpg