feat: add dialogue

css/game.css

@@ -51,14 +51,28 @@
     left: 1050px;
     display: none;
   }
-  #dialogueBox img{
+  #dialogueBox {
     position: absolute;
     width: 512px;
     height: 512px;
     top: 50px;
     left: 600px;
+  }
+  #dialogueBox img{
+    position: absolute;
+    
+    width: 512px;
+    height: 670px;
     display: none;
   }
+  #dialogueText {
+    position: absolute;
+    top: 200px;
+    left: 100px;
+    width: 340px;
+    height: 128px;
+    font-size: 40px;
+  }
   #customer1 img{ /* 中年男 */
     display: none;
   }

game.html

@@ -31,7 +31,11 @@
       <!-- customers elements -->
       <div id="dialogueBox" class="dialogueBox">
         <img src="asset/pic/qinshihuang/DialogueBox.png" alt="对话框">
+        <div id="dialogueText" class="dialogueText">
+
         </div>
+      </div>
+
       <div id="customer1" class="customer">
         <img src="asset/pic/qinshihuang/Customer1_YoungMan.png" alt="中年男">
       </div>

js/game.js

@@ -5,8 +5,6 @@
         element.style.display = 'block';
     }
 }
-document.addEventListener("DOMContentLoaded", function() {
-    
 
 // Function to randomly select a customer
 function showRandomCustomer() {
@@ -15,6 +13,21 @@ document.addEventListener("DOMContentLoaded", function() {
     showElement(customers[randomIndex]);
 }
 
+var questions = [
+        "如何建立统一的度量衡体系以加强中央集权？",
+        "如何制定合理的税收政策来增强国库？",
+        "如何组织和动员资源建造长城以防御外敌？",
+        "如何执行禁止私人持有武器的政策？",
+        "如何推广统一的书写系统来加强文化统一？",
+        "如何合理征召士兵并保持军队的高效运作？",
+        "如何处理与儒家思想相关的政治异见？",
+        "如何加强皇帝的集权制度？",
+        "如何建立和维护一个有效的道路交通网络？",
+        "如何处理与周边国家的外交关系？"
+    ];
+document.addEventListener("DOMContentLoaded", function() {
+    
+
     // Show dialogue box
     showElement("#dialogueBox img");
 
@@ -30,4 +43,8 @@ document.addEventListener("DOMContentLoaded", function() {
 
     // Show normal Qin Shi Huang
     showElement('#qinshihuang img');
+
+    // Show random question
+    var randomQuestion = questions[Math.floor(Math.random() * questions.length)];
+    document.getElementById("dialogueText").innerHTML = randomQuestion;
 });