重命名客户端程序文件

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 {
+    }
+})

public/game.js

@@ -1,5 +0,0 @@
-const client = io()
-
-client.on('message', (message) => {
-    console.log(message)
-})

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>

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;