Merge pull request #4930 from sivaprasath2004/sivaprasath-closes-issu…

…e-4917 [Enhancement]: World Chain Game mismatch logic
kunjgit · Jul 24, 2024 · 31db616 · 31db616
2 parents 19a274d + 2ab1c5a
commit 31db616
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 38 deletions.
diff --git a/Games/WordChain/assets/Screencast from 2024-07-22 16-29-11.webm b/Games/WordChain/assets/Screencast from 2024-07-22 16-29-11.webm
diff --git a/Games/WordChain/assets/Screenshot from 2024-07-22 16-29-53.png b/Games/WordChain/assets/Screenshot from 2024-07-22 16-29-53.png
diff --git a/Games/WordChain/index.html b/Games/WordChain/index.html
@@ -5,6 +5,10 @@
   <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
+<div id="Intro_page">
+    <h1>Hello Welcome to Word Chain Game</h1>
+    <h2>Check your Score..🚀</h2>
+</div>
   <h1><img src="heading.png"></img></h1>
   <div id="word-chain">
     <p id="message"></p>

diff --git a/Games/WordChain/script.js b/Games/WordChain/script.js
@@ -2,70 +2,71 @@
 let timelimit = 30;
 let time = 0;
 var threading;
-let previousWord = '';
-const wordList = document.getElementById('word-list');
-const message = document.getElementById('message');
+let previousWord = "";
+const wordList = document.getElementById("word-list");
+const message = document.getElementById("message");
 let score = 0;
-
-
+setTimeout(()=>{
+    let Intro_page=document.getElementById('Intro_page')
+    Intro_page.style.transform="translateX(-100%)"
+},3000)
 function playTurn() {
-  const inputWord = document.getElementById('input-word').value;
-    clearInterval(threading);
-    threading=setInterval(function() {
+  const inputWord = document.getElementById("input-word").value;
+  clearInterval(threading);
+  threading = setInterval(function () {
     time += 0.01;
-    if(time>=timelimit)
-    {
-        clearInterval(threading);
-        document.getElementById("countdown").innerHTML = "";
-        message.textContent = `Game Over! Your score is ${score}.`;
-    }
-    else
-        document.getElementById("countdown").innerHTML=time.toPrecision(4);
-}, 10);
-  if (inputWord === '') {
-    message.textContent = 'Please enter a word.';
+    if (time >= timelimit) {
+      clearInterval(threading);
+      document.getElementById("countdown").innerHTML = "";
+      message.textContent = `Game Over! Your score is ${score}.`;
+    } else document.getElementById("countdown").innerHTML = time.toPrecision(4);
+  }, 10);
+  if (inputWord === "") {
+    message.textContent = "Please enter a word.";
     return;
   }
-  
-  if (previousWord === '') {
+
+  if (previousWord === "") {
     previousWord = inputWord;
     addWordToList(inputWord);
-    document.getElementById('input-word').value = '';
-    message.textContent = '';
+    document.getElementById("input-word").value = "";
+    message.textContent = "";
   } else {
     const lastChar = previousWord.charAt(previousWord.length - 1);
     const firstChar = inputWord.charAt(0);
     if (lastChar.toLowerCase() === firstChar.toLowerCase()) {
-      score++;
       previousWord = inputWord;
       addWordToList(inputWord);
-      document.getElementById('input-word').value = '';
-      message.textContent = '';
+      document.getElementById("input-word").value = "";
+      message.textContent = "";
     } else {
       // clearInterval(threading);
+      score=`${(100 - time)/10}`
+      console.log(time,score)
       document.getElementById("countdown").innerHTML = "";
-      time = 0;
       clearInterval(threading);
       document.getElementById("countdown").innerHTML = "";
-      message.textContent = `Game Over! Your score is ${score}.`;
+      message.textContent = `Game Over! Your score is ${score.slice(0,4)}`;
+      time = 0;
+      score=0
     }
   }
 }
 
 function addWordToList(word) {
-  const listItem = document.createElement('li');
+  const listItem = document.createElement("li");
   listItem.textContent = word;
   wordList.appendChild(listItem);
 }
 
-function restart(){
-  time=0;
-  previousWord = '';
-  wordList.innerHTML = '';
-  document.getElementById('input-word').value = '';
-  message.textContent = '';
+function restart() {
+  time = 0;
+  previousWord = "";
+  wordList.innerHTML = "";
+  document.getElementById("input-word").value = "";
+  message.textContent = "";
   score = 0;
   document.getElementById("countdown").innerHTML = "";
   clearInterval(threading);
   //document.getElementById('word-list').style.display = 'none';
-}
+}
diff --git a/Games/WordChain/style.css b/Games/WordChain/style.css
@@ -1,5 +1,14 @@
+*{
+  padding: 0;
+  margin: 0;
+}
 body {
     text-align: center;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
   }
 
   h1 {
@@ -14,7 +23,22 @@ body {
     padding: 5px;
     font-size: 16px;
   }
-
+#Intro_page{
+  position: fixed;
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: black;
+  transition: 0.3s ease-in;
+  flex-direction: column;
+}
+#Intro_page h1,  #Intro_page h2{
+  color: white;
+  font-family: monospace;
+  font-size: 2.2rem;
+}
 #input-word {
     margin-top: 0px;
     margin-bottom: 10px;
@@ -28,6 +52,7 @@ body {
   #message {
     color: #6b2222;
     font-weight: bold;
+    margin: 1rem 0;
     margin-right: 4%;
     font-weight: bolder;
     font-family: cursive;
@@ -104,4 +129,4 @@ body {
 
 img{
   margin-right: 8%;
-}
+}