🥧 Began adding pi, updated readme & about to reflect this

wiki-Bird · Aug 23, 2023 · 3dd00ec · 3dd00ec
1 parent 41e5390
commit 3dd00ec
Show file tree

Hide file tree

Showing 10 changed files with 227 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,6 @@
   - Type a 35 word paragraph as fast as you can.
 - Alphabet:
     - Type the alphabet as fast as you can.
-    - Under development.
 - Pi:
     - Type as many digits of pi as you can, without making a mistake.
     - Under development.
@@ -51,5 +50,6 @@
 - [x] Time trial gamemode
 - [x] Blur on not focused
 - [x] Alphabet gamemode
-- [ ] Pi gamemode
+- [x] Pi gamemode
+- [ ] Small screen support
 - [ ] Multiplayer
diff --git a/about.html b/about.html
@@ -56,10 +56,13 @@ <h2>gamemodes:</h2>
             <ul>
                 <li><b>Time trial:</b> Type as many words as you can in 30 seconds.</li>
                 <li><b>Sprint:</b> Type a 35 word paragraph as fast as you can.</li>
-                <li><b>Alphabet:</b> Type the alphabet as fast as you can. (under development)</li>
+                <li><b>Alphabet:</b> Type the alphabet as fast as you can.</li>
                 <li><b>Pi:</b> Type as many digits of pi as you can remember. (under development)</li>
             </ul>
 
+            <h2>fyi:</h2>
+            <p>Some PBs won't be counted if you have a sufficenty low accuracy or an inhumanly high WPM.</p>
+
         </div>
     </div>
     </div>

diff --git a/pi.html b/pi.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Keybored / Time Trial</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- styling -->
+    <link id="stylesheet" rel="stylesheet"type="text/css" href="styles/main.css" title="main" />
+    <link id="theme" rel="stylesheet" href="styles/dark.css" />
+    <link id="font" rel="stylesheet" href="styles/mono.css" />
+
+    <!-- favicon -->
+    <link rel="apple-touch-icon" sizes="180x180" href="./images/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png">
+    <link rel="manifest" href="./images/site.webmanifest">
+    <link rel="mask-icon" href="./images/safari-pinned-tab.svg" color="#ffc000">
+    <link rel="shortcut icon" href="./images/favicon.ico">
+    <meta name="msapplication-TileColor" content="#ffc000">
+    <meta name="msapplication-config" content="./images/browserconfig.xml">
+    <meta name="theme-color" content="#ffc000">
+
+    <!-- screenshot sharing -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
+
+    <!-- fonts & icons-->
+    <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=Frank+Ruhl+Libre&family=Inter&family=Roboto+Slab&display=swap" rel="stylesheet">
+    <script src="https://kit.fontawesome.com/b28f3098c8.js" crossorigin="anonymous"></script>
+</head>
+<body>
+    <div class="page-wrap">
+        <div class="header">
+            <div class="left">
+                <a href="./"><h1><i class="fa-solid fa-keyboard"></i> keybored</h1></a>
+                <div class="nav">
+                    <a href="index"><i class="fa-solid fa-bolt"></i> Sprint</a>
+                    <a href="timetrial"><i class="fa-solid fa-stopwatch"></i> Time Trial</a>
+                    <a href="alphabet"><i class="fa-solid fa-arrow-down-a-z"></i> Alphabet</a>
+                    <a href="pi" class="selected"><i class="fa-solid fa-calculator"></i> Pi</a>
+                </div>
+            </div>
+            <div class="right">
+                <a href="settings"><i class="fa-solid fa-gear"></i> Settings</a>
+            </div> 
+        </div>
+
+        <div class="main">
+            <div class="contained">
+                <div class="stats">
+                    <div class="time"><i class="fa-solid fa-clock"></i> <span class="timer">0</span>s</div>
+                </div>
+                <div class="typeArea piArea">
+
+                    <div class="cursorLine">︳</div>
+                    <input type="text" class="hiddenInput no-copy-paste">
+                    <div class="words unselectable"><div class="piStart">3.</div></div>
+                </div>
+            </div>
+            <div class="endStats">
+                <div class="statsBlock">
+                    <div class="topBanner">
+                        <div class="bigStat">
+                            <div class="bigNum highlight">105</div>
+                            <div class="statLabel">words per minute</div>
+                        </div>
+                        <div class="bigText">That's faster than <span class="percent highlight">99%</span> of people!</div>
+                    </div>
+                    <div class="bottomStats"></div>
+                    <div class="buttons">
+                        <button class="statsBtn retry" onclick="retry()"><i class="fa-solid fa-arrow-rotate-left"></i> retry</button>
+                        <button class="statsBtn share" onclick="share()"><i class="fa-solid fa-share"></i> share</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <footer><a href="about">about</a> \ <a href="https://github.com/wiki-Bird/keybored"  target="_blank" rel="noopener noreferrer">source</a> \ <a href="https://ramiels.me/" target="_blank" rel="noopener noreferrer"> ramiel</a></footer>
+
+    <script src="./scripts/settings.js"></script>
+    <script src="./scripts/loadwords.js"></script>
+    <script src="./words/words.js"></script>
+    <script src="./scripts/pi.js"></script>
+    <script src="./scripts/main.js"></script>
+    <script src="./scripts/typing.js"></script>
+</body>
+
diff --git a/scripts/loadwords.js b/scripts/loadwords.js
@@ -32,6 +32,30 @@ function loadwords(num, type) {
         }
         wordArea.appendChild(alphabetDiv);
     }
+    else if (type == "pi") {
+
+        let pi = getPi(num);
+        let piStart = "3."
+        let piStartDiv = document.createElement("div");
+        piStartDiv.classList.add("word");
+        for (let letter of piStart) {
+            let letterDiv = document.createElement("letter");
+            letterDiv.classList.add("piStart");
+            letterDiv.innerHTML = letter;
+            piStartDiv.appendChild(letterDiv);
+        }
+        wordArea.appendChild(piStartDiv);
+
+        for (let digit of pi) {
+            let digitDiv = document.createElement("div");
+            digitDiv.classList.add("word");
+            let digitLetterDiv = document.createElement("letter");
+            digitLetterDiv.innerHTML = digit;
+            digitLetterDiv.classList.add("piDigit");
+            digitDiv.appendChild(digitLetterDiv);
+            wordArea.appendChild(digitDiv);
+        }
+    }
 }
 
 function getWords(num) {
@@ -45,6 +69,18 @@ function getWords(num) {
     }
 }
 
+function getPi(num) {
+    if (text["Pi"]) {
+        let pi = text["Pi"];
+        let pistring = "";
+        // get pi from words.js 
+        pistring = pi.slice(num - 1, 1000 * num);
+
+        return pistring;
+    }
+}
+
+
 function getLines() {
     let words = document.querySelector(".words");
     let divs = words.children;

diff --git a/scripts/pi.js b/scripts/pi.js
@@ -0,0 +1,4 @@
+
+document.addEventListener("DOMContentLoaded", function() {
+    loadwords(1, "pi");
+});
diff --git a/scripts/typing.js b/scripts/typing.js
@@ -12,6 +12,10 @@ const timerStart = timer.innerHTML;
 let countDown = false; 
 var timerCount = parseInt(timerStart);
 
+let piChecker = false;
+let check = false;
+
+
 
 inputBox.addEventListener("focus", function() {
     tabbed = true;
@@ -40,12 +44,31 @@ document.addEventListener("DOMContentLoaded", function() {
     var valueCur = hiddenInput.value;
     var wordsStart = words.innerHTML;
 
+    // if pi 
+    let pi = false;
+    if (document.querySelector(".piArea")) pi = true;
+
     hiddenInput.value = ""; // reset textbox on page reload
     var firstWord = words.childNodes[0]; // get first child div of words
     firstWord.classList.add("active"); // give firstword the "active" class
 
     let screenshakeStorage = sessionStorage.getItem("screenShake");
 
+    if (pi) {
+        // move cursor to the start of the second word
+        let secondWord = words.childNodes[1];
+        let secondWordRect = secondWord.getBoundingClientRect();
+        let XPos = secondWordRect.left;
+        let YPos = secondWordRect.bottom - 2;
+        let cursor = document.querySelector(".cursorLine");
+        let parentPosition = cursor.parentElement.getBoundingClientRect();
+        let verticalOffset = 40;
+        let adjustedXPos = XPos - parentPosition.left;
+        let adjustedYPos = YPos - parentPosition.top - verticalOffset;
+        cursor.style.left = adjustedXPos + "px";
+        cursor.style.top = adjustedYPos + "px";
+    }
+
 
     hiddenInput.addEventListener("keydown", function(event) { 
         linesCheck();
@@ -117,6 +140,7 @@ document.addEventListener("DOMContentLoaded", function() {
                     let letter = activeWord.childNodes[i];
                     if (!letter.classList.contains("correct") && !letter.classList.contains("incorrect")) {
                         letter.classList.add("incorrect");
+                        endRound();
                     }
                 }
             }
@@ -147,16 +171,49 @@ document.addEventListener("DOMContentLoaded", function() {
             }
             activeWord.classList.remove("active");
         }
-        else {
+        else { // if the newest character is not a space
+
+            // if pi, check if it's the first letter of the first word
+            // if it is, and the user typed 1, input a "3. 1" for them
+            if (pi) {
+                if (activeWord.previousSibling == null) {
+
+                    if (newestChar == "1") {
+                        check = true;
+                        let event = new KeyboardEvent('keydown', {key: '3'}); // Fix: Use document.createElement
+                        hiddenInput.dispatchEvent(event);
+                        let event2 = new KeyboardEvent('keydown', {key: '.'}); // Fix: Use document.createElement
+                        hiddenInput.dispatchEvent(event2);
+                        let event3 = new KeyboardEvent('keydown', {key: ' '}); // Fix: Use document.createElement
+                        hiddenInput.dispatchEvent(event3);
+                        piChecker = true;
+                        let event4 = new KeyboardEvent('keydown', {key: '1'}); // Fix: Use document.createElement
+                        hiddenInput.dispatchEvent(event4);
+
+                        return;
+                    }
+                    else if (nextLetter.previousSibling == null && check == false) {
+                        endRound();
+                    }
+                }
+            }
+
+
             // if nextLetter exists check if it's the same as newestChar
-
             if (nextLetter != false) {
                 moveCursorRight(nextLetter, false);
                 if (nextLetter && nextLetter.innerHTML == newestChar) {
                     nextLetter.classList.add("correct");
+                    if (piChecker) {
+                        let event = new KeyboardEvent('keydown', {key: ' '});
+                        hiddenInput.dispatchEvent(event);
+                    }
                 }
                 else if (nextLetter) {
                     nextLetter.classList.add("incorrect");
+                    if (pi) {
+                        endRound();
+                    }
                 }
                 else {
                     // log error and info

diff --git a/styles/dark.css b/styles/dark.css
@@ -21,6 +21,10 @@
     --orange: orange;
 }
 
+.piStart {
+    color: var(--text-light-secondary)!important;
+}
+
 body {
     background-color: var(--bg-dark);
     color: var(--text-light-main);

diff --git a/styles/light.css b/styles/light.css
@@ -15,6 +15,9 @@
     --orange: orange;
 }
 
+.piStart {
+    color: var(--text-dark-secondary)!important;
+}
 
 body {
     background-color: var(--bg-light);

diff --git a/styles/main.css b/styles/main.css
@@ -85,6 +85,11 @@ h1 {
     padding: 1rem 2rem 1rem 2rem;
 }
 
+.correct, .incorrect {
+    opacity: 1!important;
+    transition: opacity 0.1s ease-out;
+}
+
 .y, .correct {
     color: var(--green);
 }
@@ -383,6 +388,24 @@ label {
     pointer-events: none;
 }
 
-.alphabet {
+.alphabet, .piWords {
     height: auto!important;
+}
+
+.piDigit {
+    max-width: 60%;
+    /* overflow text mid word */
+    overflow-wrap: break-word;
+}
+
+.piDigit {
+    opacity: 0;
+}
+
+.piArea {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    height: 100%;
+    width: 100%;
 }
diff --git a/words/words.js b/words/words.js