From c95e04c34b4512bbd3ac2712f66266471a0bd3f2 Mon Sep 17 00:00:00 2001
From: Zhao Xin <7176466@qq.com>
Date: Fri, 5 Aug 2022 10:08:31 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=E5=AE=A2=E6=88=B7?=
 =?UTF-8?q?=E7=AB=AF=E7=A8=8B=E5=BA=8F=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/client.js  | 25 +++++++++++++++++++++++++
 public/game.js    |  5 -----
 public/index.html | 22 +++++++++++-----------
 public/style.css  |  5 +++--
 4 files changed, 39 insertions(+), 18 deletions(-)
 create mode 100644 public/client.js
 delete mode 100644 public/game.js

diff --git a/public/client.js b/public/client.js
new file mode 100644
index 0000000..6aa32ba
--- /dev/null
+++ b/public/client.js
@@ -0,0 +1,25 @@
+const client = io()
+
+client.on('message', (message) => {
+    console.log('[系统消息]:', message)
+})
+
+client.on('alert', (message) => {
+    alert(message)
+})
+
+client.on('joined', ({ player, ip }) => {
+    document.getElementById(player).innerText = ip
+})
+
+setInterval(() => {
+    const now = new Date()
+    timeNow.innerText = now.toLocaleTimeString()
+}, 500)
+
+document.body.addEventListener('click', (e) => {
+    if (e.target.id == 'buttonJoin') {
+        client.emit('join')
+    } else {
+    }
+})
diff --git a/public/game.js b/public/game.js
deleted file mode 100644
index a71ecb1..0000000
--- a/public/game.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const client = io()
-
-client.on('message', (message) => {
-    console.log(message)
-})
diff --git a/public/index.html b/public/index.html
index eeed98b..a248d52 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,18 +19,18 @@
         <div id="sidebar">
             <div id="display">
                 <h1>陆 战 棋</h1>
-                <h2 class="player1">黑方: 10.10.10.20</h2>
-                <h2 class="player2">红方: </h2>
-                <h2>当前时间: 12 : 25</h2>
-                <h2>本局时间: 00 : 00</h2>
-                <div id="buttons-container">
-                    <button>参 战</button>
-                    <button>就 绪</button>
-                    <button>认 输</button>
-                    <button>离 开</button>
+                <h2>当前时间: <time id="timeNow">00 : 00</time></h2>
+                <h2>本局时间: <time id="timeGame">00 : 00</time></h2>
+                <h2 class="player1">黑方: <span id="player1"></span></h2>
+                <h2 class="player2">红方: <span id="player2"></span></h2>
+                <div id="buttonContainer">
+                    <button id="buttonJoin">参 战</button>
+                    <button id="buttonReady">就 绪</button>
+                    <button id="buttonSurrender">认 输</button>
+                    <button id="buttonLeave">离 开</button>
                 </div>
             </div>
-            <div id="pieces-container">
+            <div id="pieceContainer">
                 <div class="title">棋 子 </div>
                 <div class="piece player2">军 旗</div>
                 <div class="piece player2">司 令</div>
@@ -61,7 +61,7 @@
         </div>
     </div>
     <script src="/socket.io/socket.io.min.js"></script>
-    <script src="game.js"></script>
+    <script src="client.js"></script>
 </body>
 
 </html>
diff --git a/public/style.css b/public/style.css
index 772e6fe..d0de868 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,6 +1,7 @@
 * {
     margin: 0px;
     padding: 0px;
+    user-select: none;
     box-sizing: border-box;
     font-family: 'Noto Serif SC', serif;
 }
@@ -37,8 +38,8 @@ body {
     gap: 20px;
 }
 
-#buttons-container,
-#pieces-container {
+#buttonContainer,
+#pieceContainer {
     width: 240px;
     padding: 20px;
     gap: 20px;