Added good game ending instead of looping

css/style.css

@@ -43,7 +43,8 @@ body {
     left: 0px;
     width: 100vw;
     height: 100vh;
-    z-index: 1; /*hide baby*/
+    z-index: 1;
+    /*hide baby*/
 }
 
 #playBegin {
@@ -67,6 +68,7 @@ body {
 
     display: none;
 }
+
 .floatright {
     position: absolute;
     right: 2%;
@@ -104,7 +106,9 @@ body {
     z-index: 2;
 }
 
-#mao>img, #xi>img, #square>img {
+#mao>img,
+#xi>img,
+#square>img {
     width: 30vw;
     margin-top: 10vh;
 }
@@ -113,4 +117,14 @@ body {
     background-color: black;
     display: none;
     z-index: 10;
+    font-size: 30px;
+    padding-top: 20vh;
+}
+
+#win {
+    background-color: red;
+    display: none;
+    z-index: 10;
+    font-size: 30px;
+    padding-top: 20vh;
 }

index.html

@@ -76,6 +76,13 @@
             <i>Thanks for playing</i><br />
             <a href="javascript:location.reload()">Play again</a>
         </div>
+        <div id="win" class="floattop">
+            <h1>Congratulations!</h1>
+            <p>Your social credit score is high enough</p>
+            <p>You are worthy of the Chinese Dream</p>
+            <i>Thanks for playing</i><br />
+            <a href="javascript:location.reload()">Play again</a>
+        </div>
     </div>
     <script src="js/jquery-3.6.0.min.js"></script>
     <script src="js/util.js"></script>

js/main.js

@@ -77,9 +77,11 @@ function displayQuestion() {
             indexesProgress++;
         }
         else {
-            shuffle(indexeslist);
-            indexesProgress = 0;
-            index = 0;
+            audio.pause();
+            sef("applause");
+            audio = new Audio('assets/music/march_vol_charged.mp3');
+            audio.play();
+            $("#win").show();
         }
         cQuestion = data["questions"][index];
         $("[data-ans=1]").html(data["questions"][index]["answers"][0]["text"]);