feat: 多人游戏功能初步预览版 v2.4.0

.gitignore

@@ -1,5 +1,7 @@
 node_modules/
 dist/
+server/node_modules/
+server/dist/
 .idea/
 .claude/
 CLAUDE.md
@@ -11,4 +13,11 @@ toWebFile.sh
 doc/
 issue.md
 Trace-20260118T203317.json
-temp.md
+temp.md
+upgrade.md
+.ace-tool/
+plan.md
+plan2.md
+.vscode/
+.env
+ISS.md

README.md

@@ -1,6 +1,6 @@
 # ⚔️ HITWAR: 炮塔战争
 
-注意：目前2.3.1版本为预览版。**可能存在Bug**！！如遇，请反馈给 ck@hitmux.org or caokai674@gmail.com 或者提交issue
+注意：目前2.4.0版本为预览版。**可能存在Bug**！！如遇，请反馈给 ck@hitmux.org or caokai674@gmail.com 或者提交issue
 
 ## **官方预览**: [Hitmux Game](https://game.hitmux.org)
 

count-lines.sh

@@ -0,0 +1,143 @@
+#!/bin/bash
+
+# Code line counter script for CannonWar project
+# Usage: ./count-lines.sh
+
+set -e
+
+PROJECT_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+# Colors for output
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+YELLOW='\033[1;33m'
+CYAN='\033[0;36m'
+NC='\033[0m' # No Color
+
+# Excluded directories
+EXCLUDE_DIRS="-not -path '*/node_modules/*' -not -path '*/dist/*' -not -path '*/.git/*'"
+
+# Function to count lines in a directory (returns only the number)
+get_line_count() {
+    local dir="$1"
+    local pattern="$2"
+    local maxdepth="$3"
+
+    if [ ! -d "$PROJECT_ROOT/$dir" ]; then
+        echo "0"
+        return
+    fi
+
+    local depth_opt=""
+    if [ -n "$maxdepth" ]; then
+        depth_opt="-maxdepth $maxdepth"
+    fi
+
+    local count=$(eval "find '$PROJECT_ROOT/$dir' $depth_opt -type f -name '$pattern' ! -name '*.d.ts' $EXCLUDE_DIRS 2>/dev/null" | xargs wc -l 2>/dev/null | tail -1 | awk '{print $1}')
+    echo "${count:-0}"
+}
+
+# Function to count files
+get_file_count() {
+    local dir="$1"
+    local maxdepth="$2"
+
+    if [ ! -d "$PROJECT_ROOT/$dir" ]; then
+        echo "0"
+        return
+    fi
+
+    local depth_opt=""
+    if [ -n "$maxdepth" ]; then
+        depth_opt="-maxdepth $maxdepth"
+    fi
+
+    eval "find '$PROJECT_ROOT/$dir' $depth_opt -type f \( -name '*.ts' -o -name '*.tsx' -o -name '*.js' -o -name '*.jsx' -o -name '*.less' -o -name '*.css' -o -name '*.html' \) ! -name '*.d.ts' $EXCLUDE_DIRS 2>/dev/null" | wc -l
+}
+
+# Function to display directory stats
+show_dir_stats() {
+    local dir="$1"
+    local label="$2"
+    local maxdepth="$3"
+
+    if [ ! -d "$PROJECT_ROOT/$dir" ]; then
+        echo -e "${YELLOW}Directory $dir does not exist${NC}"
+        return
+    fi
+
+    local ts_count=$(get_line_count "$dir" "*.ts" "$maxdepth")
+    local tsx_count=$(get_line_count "$dir" "*.tsx" "$maxdepth")
+    local js_count=$(get_line_count "$dir" "*.js" "$maxdepth")
+    local less_count=$(get_line_count "$dir" "*.less" "$maxdepth")
+    local css_count=$(get_line_count "$dir" "*.css" "$maxdepth")
+    local html_count=$(get_line_count "$dir" "*.html" "$maxdepth")
+
+    local ts_total=$((ts_count + tsx_count))
+    local total=$((ts_total + js_count + less_count + css_count + html_count))
+
+    echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    echo -e "${GREEN}📁 $label${NC}"
+    echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    printf "  %-20s %'10d lines\n" "TypeScript:" "$ts_total"
+    printf "  %-20s %'10d lines\n" "JavaScript:" "$js_count"
+    printf "  %-20s %'10d lines\n" "HTML:" "$html_count"
+    printf "  %-20s %'10d lines\n" "LESS:" "$less_count"
+    printf "  %-20s %'10d lines\n" "CSS:" "$css_count"
+    echo -e "  ${CYAN}─────────────────────────────────────${NC}"
+    printf "  ${YELLOW}%-20s %'10d lines${NC}\n" "Subtotal:" "$total"
+    echo ""
+}
+
+# Calculate total for a directory
+calc_total() {
+    local dir="$1"
+    local maxdepth="$2"
+
+    local ts=$(($(get_line_count "$dir" "*.ts" "$maxdepth") + $(get_line_count "$dir" "*.tsx" "$maxdepth")))
+    local js=$(get_line_count "$dir" "*.js" "$maxdepth")
+    local less=$(get_line_count "$dir" "*.less" "$maxdepth")
+    local css=$(get_line_count "$dir" "*.css" "$maxdepth")
+    local html=$(get_line_count "$dir" "*.html" "$maxdepth")
+    echo $((ts + js + less + css + html))
+}
+
+echo ""
+echo -e "${GREEN}╔════════════════════════════════════════════╗${NC}"
+echo -e "${GREEN}║     CannonWar Code Line Counter            ║${NC}"
+echo -e "${GREEN}╚════════════════════════════════════════════╝${NC}"
+echo -e "${CYAN}  (excludes node_modules, dist directories)${NC}"
+echo ""
+
+# Show stats for each directory
+show_dir_stats "." "Root Files" "1"
+show_dir_stats "src" "Source Code (src/)"
+show_dir_stats "server" "Server Code (server/)"
+show_dir_stats "shared" "Shared Code (shared/)"
+
+# Calculate totals
+root_total=$(calc_total "." "1")
+src_total=$(calc_total "src")
+server_total=$(calc_total "server")
+shared_total=$(calc_total "shared")
+
+grand_total=$((root_total + src_total + server_total + shared_total))
+
+# Count files
+root_files=$(get_file_count "." "1")
+src_files=$(get_file_count "src")
+server_files=$(get_file_count "server")
+shared_files=$(get_file_count "shared")
+total_files=$((root_files + src_files + server_files + shared_files))
+
+echo -e "${GREEN}╔════════════════════════════════════════════╗${NC}"
+echo -e "${GREEN}║              SUMMARY                       ║${NC}"
+echo -e "${GREEN}╚════════════════════════════════════════════╝${NC}"
+echo ""
+printf "  %-15s %'10d lines  (%d files)\n" "root/" "$root_total" "$root_files"
+printf "  %-15s %'10d lines  (%d files)\n" "src/" "$src_total" "$src_files"
+printf "  %-15s %'10d lines  (%d files)\n" "server/" "$server_total" "$server_files"
+printf "  %-15s %'10d lines  (%d files)\n" "shared/" "$shared_total" "$shared_files"
+echo -e "  ${CYAN}─────────────────────────────────────────${NC}"
+printf "  ${YELLOW}%-15s %'10d lines  (%d files)${NC}\n" "TOTAL:" "$grand_total" "$total_files"
+echo ""

index.html

@@ -37,6 +37,7 @@ <h2>炮塔战争</h2>
         <div class="version-info" id="versionInfo"></div>
         <div class="btnList">
             <button class="startGame">开始游戏</button>
+            <button class="multiplayerMode">多人模式</button>
             <button class="help">帮助说明</button>
             <button class="wiki">游戏图鉴</button>
         </div>
@@ -66,6 +67,114 @@ <h2>炮塔战争</h2>
             </button>
         </div>
     </div>
+
+    <!-- Multiplayer Connect Interface -->
+    <div class="multiplayer-connect-interface interface" style="display: none">
+        <h1>Multiplayer</h1>
+        <h2>多人模式</h2>
+        <div class="multiplayer-content">
+            <div class="input-group">
+                <label for="playerNameInput">玩家名称</label>
+                <input type="text" id="playerNameInput" placeholder="输入你的名字" maxlength="20">
+            </div>
+            <div class="input-group">
+                <label for="serverUrlInput">服务器地址</label>
+                <input type="text" id="serverUrlInput" placeholder="ws://localhost:2567">
+            </div>
+            <button id="connectBtn" class="connect-btn">连接服务器</button>
+            <div id="connectionStatus" class="connection-status">未连接</div>
+        </div>
+        <div class="leftTopArea">
+            <button class="backPage">返回</button>
+        </div>
+    </div>
+
+    <!-- Multiplayer Lobby Interface -->
+    <div class="multiplayer-lobby-interface interface" style="display: none">
+        <h1>Game Lobby</h1>
+        <h2>游戏大厅</h2>
+        <div class="lobby-header">
+            <span class="lobby-player-label">玩家: <span id="lobbyPlayerName">-</span></span>
+        </div>
+        <div class="lobby-content">
+            <div class="room-list-section">
+                <div class="room-list-header">
+                    <span>房间列表</span>
+                    <button id="refreshRoomsBtn" class="refresh-btn">刷新</button>
+                </div>
+                <div id="roomListContainer" class="room-list-container">
+                    <div class="empty-room-list">暂无房间，创建一个吧！</div>
+                </div>
+            </div>
+            <div class="lobby-actions">
+                <button id="createRoomBtn" class="lobby-btn primary">创建房间</button>
+                <button id="quickMatchBtn" class="lobby-btn">快速匹配</button>
+            </div>
+            <div id="matchStatus" class="match-status">--</div>
+        </div>
+        <div class="leftTopArea">
+            <button class="backPage">断开连接</button>
+        </div>
+
+        <!-- Create Room Dialog -->
+        <div id="createRoomDialog" class="multiplayer-dialog" style="display: none;">
+            <div class="dialog-content">
+                <h3>创建房间</h3>
+                <div class="dialog-body">
+                    <div class="input-group">
+                        <label for="roomNameInput">房间名称</label>
+                        <input type="text" id="roomNameInput" placeholder="我的房间" maxlength="30">
+                    </div>
+                    <div class="map-size-group">
+                        <label>地图大小</label>
+                        <div class="radio-options">
+                            <label class="radio-option">
+                                <input type="radio" name="mapSize" value="small">
+                                <span>小 (4000×3000) - 快节奏</span>
+                            </label>
+                            <label class="radio-option">
+                                <input type="radio" name="mapSize" value="medium" checked>
+                                <span>中 (6000×4000) - 推荐</span>
+                            </label>
+                            <label class="radio-option">
+                                <input type="radio" name="mapSize" value="large">
+                                <span>大 (8000×5000) - 持久战</span>
+                            </label>
+                        </div>
+                    </div>
+                    <div class="checkbox-group">
+                        <label>
+                            <input type="checkbox" id="privateRoomCheckbox">
+                            <span>私密房间</span>
+                        </label>
+                    </div>
+                </div>
+                <div class="dialog-buttons">
+                    <button id="cancelCreateRoom" class="dialog-btn cancel">取消</button>
+                    <button id="confirmCreateRoom" class="dialog-btn">创建</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Multiplayer Waiting Room Interface -->
+    <div class="multiplayer-waiting-interface interface" style="display: none">
+        <h1>Waiting Room</h1>
+        <h2>等待玩家加入</h2>
+        <div id="waitingRoomInfo" class="waiting-room-info">房间信息</div>
+        <div class="waiting-content">
+            <div id="waitingPlayerList" class="waiting-player-list">
+                <!-- Player slots will be rendered here -->
+            </div>
+            <button id="readyBtn" class="ready-btn">准备</button>
+            <div id="gameCountdown" class="game-countdown" style="display: none;"></div>
+            <div id="waitingHint" class="waiting-hint">所有玩家准备后游戏将开始</div>
+        </div>
+        <div class="leftTopArea">
+            <button class="backPage">离开房间</button>
+        </div>
+    </div>
+
     <div class="help-interface interface" style="display: none">
 
         <div class="content">