project-thrilltyper/robot.html at main · Capstone-Projects-2024-Spring/project-thrilltyper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!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('images/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;
        }


        #robot-text-display {
            font-size: 18px;
            margin-bottom: 20px;
            white-space: pre-wrap;
            word-wrap: break-word;
            color: blue; /* Set robot typing color to blue */
        }

        #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>
        <div id="robot-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>
        <svg id="progressCircle" width="100" height="100">
            <circle cx="50" cy="50" r="52" fill="none" stroke="#ccc" stroke-width="4"></circle>
        </svg>
        <div id="progressText"></div>
    </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 userFinish = false;


        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 robotType() {
            // Simulate robot typing with random errors
            const robotSpeed = 5; // wpm adjustment
            let robotTypedText = '';
            let currentIndex = 0;
            const robotInterval = setInterval(() => {
                if (currentIndex < text.length) {
                    robotTypedText += text[currentIndex]; // Simulate typing the next character
                    currentIndex++;
                    document.getElementById("robot-text-display").innerHTML = robotTypedText;
                } else {
                    clearInterval(robotInterval); // Stop typing when the text is completed
                    document.getElementById("input-box").disabled = true;
                    robotInput();
                }
            }, 1000 / robotSpeed);
        }


        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);
            robotType();
        }

        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();

            }
            updateTypingProgress(currentCharIndex, text.length); // Update progress

        }
        function updateProgress(percentage) {
            const progressText = document.getElementById("progressText");
            const progressCircle = document.getElementById("progressCircle");

            const circumference = 2 * Math.PI * 52; // Circle circumference
            progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
            progressCircle.style.strokeDashoffset =
              circumference - (percentage / 100) * circumference;

            progressText.textContent = `${Math.round(percentage)}%`;
          }

          // This function is expected to be called from another file
          function updateTypingProgress(currentLetters, totalLetters) {
            const percentage = (currentLetters / totalLetters) * 100;
            updateProgress(percentage);
          }

          // Example external call
          // Assume this is how the other file updates the progress
          // updateTypingProgress(50, 100); // You can test this by manually calling it from the console or another script


        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
            userFinish = true;
            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;
        }


        function robotInput() {

            if(!userFinish){
            clearInterval(timerInterval); // Stop the timer
            const endTime = new Date().getTime();
            const elapsedTime = (endTime - startTime) / 1000;
            const wordsPerMinute = Math.round((text.split(" ").length / elapsedTime) * 60);
            document.getElementById("result").innerHTML = `Sadly, Robot finished the game first in ${elapsedTime.toFixed(2)} seconds. Robot speed: ${wordsPerMinute} WPM.`;
            document.getElementById("input-box").value = "";
            document.getElementById("input-box").disabled = true;
            }
        }

    </script>
</body>
</html>