From 37d5e5dbe135307e1e375858a9621c2ea328c285 Mon Sep 17 00:00:00 2001 From: Anirudh Sharma Date: Tue, 18 Jun 2024 01:54:57 +0530 Subject: [PATCH 1/3] fix: master typing UI related issues --- Games/Master_Typing/index.html | 8 +- Games/Master_Typing/rules.html | 17 +- Games/Master_Typing/script.js | 91 +++++----- Games/Master_Typing/style.css | 316 +++++++++++++++++++-------------- 4 files changed, 235 insertions(+), 197 deletions(-) diff --git a/Games/Master_Typing/index.html b/Games/Master_Typing/index.html index aa978e259f..6a13c49bcb 100644 --- a/Games/Master_Typing/index.html +++ b/Games/Master_Typing/index.html @@ -12,18 +12,16 @@
-
- +
-

MASTER TYPING

-
-

click here for instructions

+
+

Click here for Instructions

diff --git a/Games/Master_Typing/rules.html b/Games/Master_Typing/rules.html index b89f21a79a..f6303bbce9 100644 --- a/Games/Master_Typing/rules.html +++ b/Games/Master_Typing/rules.html @@ -4,20 +4,25 @@ - Document + Master Typing | Instructions - back +
+ + + + + back

INSTRUCTIONS

-

This is a typing test which allows you test your typing skills

-

Click on the popped up key to start the test

-

The test limit is 60 seconds

-

A result will be generated after completion of test

+

◘ This is a typing test which allows you test your typing skills

+

◘ Click on the popped up key to start the test

+

◘ The test limit is 60 seconds

+

◘ A result will be generated after completion of test

diff --git a/Games/Master_Typing/script.js b/Games/Master_Typing/script.js index de87dd72ae..61992f8adb 100644 --- a/Games/Master_Typing/script.js +++ b/Games/Master_Typing/script.js @@ -1,14 +1,14 @@ const keys = [..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"]; -let wrongKeyTracker=[]; +let wrongKeyTracker = []; const timestamps = []; let wrongKey; -const wrongTeller=document.querySelector(".wrTeller"); +const wrongTeller = document.querySelector(".wrTeller"); console.log(wrongTeller.innerText); //Declear the variables for counting total entry and correct entry let totalEntry = 0; let correctEntry = 0; -for(let i=0;i<26;i++){ - wrongKeyTracker[i]=0; +for (let i = 0; i < 26; i++) { + wrongKeyTracker[i] = 0; } timestamps.unshift(getTimestamp()); @@ -22,12 +22,11 @@ function getRandomKey() { return keys[getRandomNumber(0, keys.length - 1)]; } -let lastPopUpkey=null; +let lastPopUpkey = null; function targetRandomKey() { const key = document.getElementById(getRandomKey()); key.classList.add("selected"); - lastPopUpkey=key; - + lastPopUpkey = key; } // Function to unselect the last popped-up key function unselectLastPopUpKey() { @@ -39,9 +38,9 @@ function unselectLastPopUpKey() { function getTimestamp() { return Math.floor(Date.now() / 1000); } -const totKey=document.querySelector(".TotScore"); -const wrKey=document.querySelector(".wrScore"); -const corKey=document.querySelector(".corScore"); +const totKey = document.querySelector(".TotScore"); +const wrKey = document.querySelector(".wrScore"); +const corKey = document.querySelector(".corScore"); document.addEventListener("keyup", (event) => { const keyPressed = String.fromCharCode(event.keyCode); const keyElement = document.getElementById(keyPressed); @@ -49,10 +48,10 @@ document.addEventListener("keyup", (event) => { //counting the total entry totalEntry++; - totKey.textContent="Key pressed :"+totalEntry; - // Add sound - const audio = new Audio("assets/Right_Press.mp3"); - audio.play(); + totKey.textContent = "Key pressed :" + totalEntry; + // Add sound + const audio = new Audio("assets/Right_Press.mp3"); + audio.play(); keyElement.classList.add("hit"); keyElement.addEventListener("animationend", () => { @@ -62,8 +61,8 @@ document.addEventListener("keyup", (event) => { if (keyPressed === highlightedKey.innerHTML) { //counting the correct entry correctEntry++; - - corKey.innerText="Correct: "+correctEntry; + + corKey.innerText = "Correct: " + correctEntry; // // Add right sound // const audio = new Audio("assets/Right_Press.mp3"); @@ -78,10 +77,9 @@ document.addEventListener("keyup", (event) => { highlightedKey.classList.remove("selected"); targetRandomKey(); - } - else{ - wrongKeyTracker[(highlightedKey.innerHTML).charCodeAt(0)-65]++; - wrKey.innerText="Incorrect: "+(totalEntry-correctEntry); + } else { + wrongKeyTracker[highlightedKey.innerHTML.charCodeAt(0) - 65]++; + wrKey.innerText = "Incorrect: " + (totalEntry - correctEntry); } // else { // // Add wrong sound @@ -90,8 +88,6 @@ document.addEventListener("keyup", (event) => { // } }); - - // ---------------------For the Timer-------------------------------- var timerElement = document.getElementById("timer"); @@ -99,12 +95,11 @@ var intervalId; var secondsLeft = 60; function startTimer() { - const startButton = document.querySelector("button:nth-of-type(1)"); - + targetRandomKey(); // Disable the start button - startButton.disabled = true; + startButton.disabled = true; // Reset the counts entries totalEntry = 0; @@ -118,7 +113,7 @@ function startTimer() { if (secondsLeft === 10) { showCountdownMessage(); // Show custom alert message } - + if (secondsLeft < 0) { //call assessment function for review result assessment(); @@ -136,26 +131,24 @@ function restartTimer() { secondsLeft = 60; timerElement.textContent = "00:00"; - unselectLastPopUpKey(); - + unselectLastPopUpKey(); //set all the counter to 0 - totKey.innerText="Total Key Pressed: 0"; - corKey.innerText="Correct: 0"; - wrKey.innerText="Incorrect: 0"; - wrongTeller.innerHTML=" "; + totKey.innerText = "Total Key Pressed: 0"; + corKey.innerText = "Correct: 0"; + wrKey.innerText = "Incorrect: 0"; + wrongTeller.innerHTML = " "; //remove the mark from key which was pressed wrong most amount of time - if(wrongKey!=null&&wrongKey.classList.contains("wrongSelection")) - wrongKey.classList.remove("wrongSelection"); - totalEntry=0; - correctEntry=0; - for(let i=0;i<26;i++){ - wrongKeyTracker[i]=0; + if (wrongKey != null && wrongKey.classList.contains("wrongSelection")) + wrongKey.classList.remove("wrongSelection"); + totalEntry = 0; + correctEntry = 0; + for (let i = 0; i < 26; i++) { + wrongKeyTracker[i] = 0; } // Enable the start button document.querySelector("button:nth-of-type(1)").disabled = false; - } function padNumber(number) { @@ -191,18 +184,20 @@ function assessment() { // Update the timerElement with the result content timerElement.innerHTML = "00:00"; let mostIncorrectKey; - let micval=0;//mostIncorrectKeyValue - for(let i=0;i<26;i++){ - if(micval0){ - wrongKey=document.getElementById(String.fromCharCode(mostIncorrectKey)); + if (micval > 0) { + wrongKey = document.getElementById(String.fromCharCode(mostIncorrectKey)); wrongKey.classList.add("wrongSelection"); - wrongTeller.innerText="The Key which need most Practice is "+String.fromCharCode(mostIncorrectKey); + wrongTeller.innerText = + "The Key which need most Practice is " + + String.fromCharCode(mostIncorrectKey); } } @@ -292,4 +287,4 @@ document.addEventListener("DOMContentLoaded", () => { // Set timeout for game completion after 60 seconds setTimeout(onGameCompleted, 67000); -}); \ No newline at end of file +}); diff --git a/Games/Master_Typing/style.css b/Games/Master_Typing/style.css index 4312cd5e4c..bea3dda0e2 100644 --- a/Games/Master_Typing/style.css +++ b/Games/Master_Typing/style.css @@ -1,5 +1,10 @@ body { - background: linear-gradient(90deg, rgba(0,194,32,1) 0%, rgba(113,77,231,1) 0%, rgba(93,220,255,1) 72%); + background: linear-gradient( + 90deg, + rgba(0, 194, 32, 1) 0%, + rgba(113, 77, 231, 1) 0%, + rgba(93, 220, 255, 1) 72% + ); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; display: flex; @@ -11,7 +16,7 @@ body { display: flex; justify-content: space-around; width: 70vw; - margin-bottom: 3%; + margin-bottom: 40px; } .details_div > div { @@ -26,18 +31,42 @@ body { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); text-align: center; } - +.Back-button { + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + /* background-color: rgba(255, 255, 255, 0.8); */ + border-radius: 15px; + padding: 20px; + width: 100px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + text-align: center; + cursor: pointer; + margin-bottom: 20px; +} +.Back-button:hover { + transform: scale(1.05); + transition: 0.2s ease all; +} .home_btn i { font-size: 2em; /* color: white; */ } +.home_btn { + cursor: pointer; +} +.home_btn:hover { + transform: scale(1.05); + transition: 0.2s ease all; +} .load { background-color: rgba(113, 77, 231, 1); } .load h1 { - font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; font-size: 1.5em; color: white; } @@ -52,97 +81,110 @@ body { .menu { /* background-color: white; */ - color: #202639; + color: #ffffff; padding: 10px; + cursor: pointer; /* border: 2px solid #202639; border-radius: 10px; */ - font-size: medium; + font-size: 20px; +} +.menu:hover { + transform: scale(1.05); + transition: 0.2s ease all; } -.container1{ - - background-color:rgba(75, 26, 26, 0.942); - - padding:50px 50px 50px 50px; +.container1 { + background-color: rgba(75, 26, 26, 0.942); + + padding: 50px 50px 50px 50px; border-radius: 30px; } -.container1 .rules article{ - - padding:10px 10px 10px 10px; +.container1 .rules article { + padding: 30px; border-radius: 30px; background-color: burlywood; } -.navbar{ +.navbar { margin-left: auto; } -.h2{ +.h2 { font-size: 15px; text-align: center; background-color: red; font-family: "cursive"; } -html{ +html { scroll-behavior: auto; } -.namesa{ +.namesa { font-style: italic; } -#maina{ - display:flex; +#maina { + display: flex; } -#maina div{ - display:inline-block; +#maina div { + display: inline-block; } .instructions { background-color: black; - height:400px; - width:500px; + height: 400px; + width: 500px; margin-right: auto; - display:flex; + display: flex; flex-direction: column; } -.instructions article{ - display:flex; - width:80%; +.instructions article { + display: flex; + width: 80%; background-color: blue; - margin-left:auto; - margin-right:auto; - margin-top:auto; - margin-bottom:auto; + margin-left: auto; + margin-right: auto; + margin-top: auto; + margin-bottom: auto; border-radius: 60px; flex-direction: column; - } -.instructions article h1{ - margin-left:auto; - margin-right:auto; +.instructions article h1 { + margin-left: auto; + margin-right: auto; } - -.container{ - background-image: linear-gradient(to left, #3f4c77, #3c4871, #39446b, #364165, #333d5f, #303a5a, #2e3654, #2b334f, #283049, #252c44, #23293e, #202639); - box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; - padding-right: 60px; - padding-left: 30px; +.container { + background-image: linear-gradient( + to left, + #3f4c77, + #3c4871, + #39446b, + #364165, + #333d5f, + #303a5a, + #2e3654, + #2b334f, + #283049, + #252c44, + #23293e, + #202639 + ); + box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, + rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, + rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; + padding: 40px; border-radius: 10px; display: flex; flex-direction: column; - align-items:center; - + align-items: center; } .title { color: mintcream; text-transform: uppercase; - margin-top: 10em; - margin-bottom: 3em; font-size: 1em; letter-spacing: 0.3em; } -.timer{ - color:mintcream; +.timer { + color: mintcream; margin-top: 1em; margin-bottom: 1em; font-size: 25px; @@ -259,7 +301,7 @@ button { li { height: 3em; width: 3em; - color: rgba(0,0,0,0.7); + color: rgba(0, 0, 0, 0.7); border-radius: 0.4em; line-height: 3em; letter-spacing: 1px; @@ -293,7 +335,7 @@ li { width: 5em; } -.pinky { +.pinky { background-color: crimson; border: 2px solid crimson; } @@ -301,7 +343,7 @@ li { color: crimson; } -.ring { +.ring { background-color: coral; border: 2px solid coral; } @@ -309,7 +351,7 @@ li { color: coral; } -.middle { +.middle { background-color: darkorange; border: 2px solid darkorange; } @@ -317,7 +359,7 @@ li { color: darkorange; } -.pointer1st { +.pointer1st { background-color: gold; border: 2px solid gold; } @@ -325,7 +367,7 @@ li { color: gold; } -.pointer2nd { +.pointer2nd { background-color: khaki; border: 2px solid khaki; } @@ -340,12 +382,12 @@ li { .selected { background-color: transparent; - -webkit-animation: vibrate-1 0.3s linear infinite both; - animation: vibrate-1 0.3s linear infinite both; + -webkit-animation: vibrate-1 0.3s linear infinite both; + animation: vibrate-1 0.3s linear infinite both; } -.wrongSelection{ - background-color: red ; - border:5px solid black; +.wrongSelection { + background-color: red; + border: 5px solid black; } /* ---------------------------------------------- @@ -356,159 +398,157 @@ li { * ---------------------------------------------- */ .hit { - -webkit-animation: hit 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; - animation: hit 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; + -webkit-animation: hit 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both; + animation: hit 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both; } @-webkit-keyframes hit { 0% { -webkit-transform: scale(1.2); - transform: scale(1.2); + transform: scale(1.2); } 100% { -webkit-transform: scale(1); - transform: scale(1); + transform: scale(1); } } @keyframes hit { 0% { -webkit-transform: scale(1.2); - transform: scale(1.2); + transform: scale(1.2); } 100% { -webkit-transform: scale(1); - transform: scale(1); + transform: scale(1); } } @-webkit-keyframes vibrate-1 { 0% { -webkit-transform: translate(0); - transform: translate(0); + transform: translate(0); } 20% { -webkit-transform: translate(-2px, 2px); - transform: translate(-2px, 2px); + transform: translate(-2px, 2px); } 40% { -webkit-transform: translate(-2px, -2px); - transform: translate(-2px, -2px); + transform: translate(-2px, -2px); } 60% { -webkit-transform: translate(2px, 2px); - transform: translate(2px, 2px); + transform: translate(2px, 2px); } 80% { -webkit-transform: translate(2px, -2px); - transform: translate(2px, -2px); + transform: translate(2px, -2px); } 100% { -webkit-transform: translate(0); - transform: translate(0); + transform: translate(0); } } @keyframes vibrate-1 { 0% { -webkit-transform: translate(0); - transform: translate(0); + transform: translate(0); } 20% { -webkit-transform: translate(-2px, 2px); - transform: translate(-2px, 2px); + transform: translate(-2px, 2px); } 40% { -webkit-transform: translate(-2px, -2px); - transform: translate(-2px, -2px); + transform: translate(-2px, -2px); } 60% { -webkit-transform: translate(2px, 2px); - transform: translate(2px, 2px); + transform: translate(2px, 2px); } 80% { -webkit-transform: translate(2px, -2px); - transform: translate(2px, -2px); + transform: translate(2px, -2px); } 100% { -webkit-transform: translate(0); - transform: translate(0); + transform: translate(0); } } /* ------------for button----------------------------- */ -.btn{ -margin-top: 10px; -margin-bottom: 30px; -padding-left: 60px; -text-align: center; -display: flex; -justify-content: space-between; +.btn { + margin-top: 10px; + padding-left: 60px; + text-align: center; + display: flex; + justify-content: space-between; } .button { -align-items: center; -appearance: none; -margin-right: 30px; -background-color: #FCFCFD; -border-radius: 4px; -border-width: 0; -box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset; -box-sizing: border-box; -color: #36395A; -cursor: pointer; -display: inline-flex; -font-family: "JetBrains Mono",monospace; -height: 48px; -justify-content: center; -line-height: 1; -list-style: none; -overflow: hidden; -padding-left: 16px; -padding-right: 16px; -position: relative; -text-align: left; -text-decoration: none; -transition: box-shadow .15s,transform .15s; -user-select: none; --webkit-user-select: none; -touch-action: manipulation; -white-space: nowrap; -will-change: box-shadow,transform; -font-size: 18px; + align-items: center; + appearance: none; + margin-right: 30px; + background-color: #fcfcfd; + border-radius: 4px; + border-width: 0; + box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, + rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #d6d6e7 0 -3px 0 inset; + box-sizing: border-box; + color: #36395a; + cursor: pointer; + display: inline-flex; + font-family: "JetBrains Mono", monospace; + height: 48px; + justify-content: center; + line-height: 1; + list-style: none; + overflow: hidden; + padding-left: 16px; + padding-right: 16px; + position: relative; + text-align: left; + text-decoration: none; + transition: box-shadow 0.15s, transform 0.15s; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + white-space: nowrap; + will-change: box-shadow, transform; + font-size: 18px; } .button:focus { -box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset; - + box-shadow: #d6d6e7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, + rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #d6d6e7 0 -3px 0 inset; } .button:hover { -box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset; -transform: translateY(-2px); + box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, + rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #d6d6e7 0 -3px 0 inset; + transform: translateY(-2px); } .button:active { -box-shadow: #D6D6E7 0 3px 7px inset; -transform: translateY(2px); + box-shadow: #d6d6e7 0 3px 7px inset; + transform: translateY(2px); } -.start-button:hover{ - background-color: #D2FDAE ; +.start-button:hover { + background-color: #d2fdae; } -.start-button:active{ - background-color: #29BF2E ; - +.start-button:active { + background-color: #29bf2e; } -.reset-button:hover{ - background-color: #DE5B4E; +.reset-button:hover { + background-color: #de5b4e; } -.reset-button:active{ - background-color: #F0420F ; - +.reset-button:active { + background-color: #f0420f; } - - /* CSS for the popup and backdrop */ - .popup-overlay { +/* CSS for the popup and backdrop */ +.popup-overlay { position: fixed; top: 0; left: 0; @@ -532,17 +572,17 @@ transform: translateY(2px); .popup-overlay.hidden { display: none; } -.keyContainer{ - display:flex; - width:70vw; +.keyContainer { + display: flex; + width: 70vw; justify-content: space-around; - color:white; + color: white; font-size: 20px; } -.wrTeller{ +.wrTeller { font-size: 20px; font-weight: 700; - color:white; + color: white; } /* Custom countdown message styles */ From 5d5dbc4108f40c6de7ddc1a5153e4c9300c0d59c Mon Sep 17 00:00:00 2001 From: Anirudh Sharma Date: Tue, 18 Jun 2024 02:07:46 +0530 Subject: [PATCH 2/3] fix: master type instruction color visibility --- Games/Master_Typing/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Games/Master_Typing/style.css b/Games/Master_Typing/style.css index bea3dda0e2..883b31a625 100644 --- a/Games/Master_Typing/style.css +++ b/Games/Master_Typing/style.css @@ -81,7 +81,7 @@ body { .menu { /* background-color: white; */ - color: #ffffff; + color: #4c4c4c; padding: 10px; cursor: pointer; /* border: 2px solid #202639; From 7a0d4423134c12b00214f9e9a1f5f051eb5091cf Mon Sep 17 00:00:00 2001 From: Anirudh Sharma Date: Tue, 18 Jun 2024 02:12:01 +0530 Subject: [PATCH 3/3] fix: master typing ui --- Games/Master_Typing/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Games/Master_Typing/style.css b/Games/Master_Typing/style.css index 883b31a625..7dad24c2b8 100644 --- a/Games/Master_Typing/style.css +++ b/Games/Master_Typing/style.css @@ -44,6 +44,7 @@ body { text-align: center; cursor: pointer; margin-bottom: 20px; + color: white; } .Back-button:hover { transform: scale(1.05); @@ -81,7 +82,7 @@ body { .menu { /* background-color: white; */ - color: #4c4c4c; + color: #181818; padding: 10px; cursor: pointer; /* border: 2px solid #202639;