-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtien-len.html
More file actions
237 lines (209 loc) · 14.3 KB
/
Copy pathtien-len.html
File metadata and controls
237 lines (209 loc) · 14.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!DOCTYPE html>
<html lang="vi" data-theme="dark" data-lang="vi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title data-vi="Tiến Lên Miền Nam – Điền Nguyễn (Iyu)" data-en="Tien Len Game – Dien Nguyen (Iyu)">Tiến Lên Miền Nam – Điền Nguyễn (Iyu)</title>
<script>(function(){var t=localStorage.getItem('theme')||'dark';document.documentElement.setAttribute('data-theme',t);})()</script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link rel="stylesheet" href="assets/styles/style.css" />
<link rel="stylesheet" href="assets/styles/game-common.css" />
<link rel="stylesheet" href="assets/styles/tien-len.css" />
<!-- Socket.IO Client -->
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
</head>
<body class="game-page">
<!-- Connecting Overlay -->
<div id="connectingOverlay" class="connecting-overlay">
<div class="spinner"></div>
<p data-vi="Đang kết nối đến server..." data-en="Connecting to server...">Đang kết nối đến server...</p>
</div>
<nav id="navbar" class="scrolled">
<div class="nav-container">
<a href="index.html" class="nav-logo">iyu<span class="logo-dot">.</span></a>
<ul class="nav-links" id="navLinks">
<li><a href="about.html" class="nav-link" data-vi="Về tôi" data-en="About">Về tôi</a></li>
<li><a href="experience.html" class="nav-link" data-vi="Kinh nghiệm" data-en="Experience">Kinh nghiệm</a></li>
<li><a href="skills.html" class="nav-link" data-vi="Kỹ năng" data-en="Skills">Kỹ năng</a></li>
<li><a href="collection.html" class="nav-link active" data-vi="Bộ sưu tập" data-en="Collection">Bộ sưu tập</a></li>
<li><a href="contact.html" class="nav-link" data-vi="Liên hệ" data-en="Contact">Liên hệ</a></li>
</ul>
<div class="nav-controls">
<button id="langToggle" class="nav-ctrl-btn" title="Switch language">EN</button>
<button id="themeToggle" class="nav-ctrl-btn" title="Toggle theme"><i class="fa-solid fa-sun"></i></button>
<button class="hamburger" id="hamburger" aria-label="Menu"><span></span><span></span><span></span></button>
</div>
</div>
</nav>
<div class="page-wrapper">
<section class="game-section">
<div class="container game-container" style="display:flex; flex-direction:column; align-items:center;">
<!-- Header -->
<div class="game-header text-center">
<span class="section-tag" data-vi="Online Multiplayer" data-en="Online Multiplayer">Online Multiplayer</span>
<h1 class="section-title" data-vi="Tiến Lên Miền Nam" data-en="Tien Len Mien Nam">Tiến Lên Miền Nam</h1>
<p class="game-subtitle" data-vi="Đánh bài tiến lên 4 người." data-en="4-player card game.">Đánh bài tiến lên 4 người.</p>
<button class="btn-rules mt-2" onclick="document.getElementById('rulesModal').classList.add('active')">
<i class="fa-solid fa-circle-question"></i> <span data-vi="Luật chơi" data-en="Rules">Luật chơi</span>
</button>
</div>
<!-- APP SCREENS -->
<div class="game-card">
<!-- 1. Setup / Lobby Screen -->
<div id="lobbyScreen" class="game-screen active">
<!-- Name Input Step -->
<div id="lobbyNameStep">
<h2 class="screen-title" data-vi="Tham gia Multiplayer" data-en="Join Multiplayer">Tham gia Multiplayer</h2>
<div class="input-group">
<label for="onlineName" data-vi="Tên hiển thị của bạn:" data-en="Your display name:">Tên hiển thị của bạn:</label>
<input type="text" id="onlineName" class="game-input" placeholder="Ví dụ: Player123" maxlength="15" />
</div>
<div class="online-actions">
<button class="game-btn btn-primary" id="btnCreateRoom">
<i class="fa-solid fa-plus"></i> <span data-vi="Tạo Phòng Mới" data-en="Create New Room">Tạo Phòng Mới</span>
</button>
<div class="divider">
<span data-vi="HOẶC" data-en="OR">HOẶC</span>
</div>
<button class="game-btn btn-outline" id="btnShowJoin">
<i class="fa-solid fa-right-to-bracket"></i> <span data-vi="Tham Gia Bằng Mã" data-en="Join By Code">Tham Gia Bằng Mã</span>
</button>
</div>
<div class="join-room-group" id="joinRoomGroup">
<input type="text" class="game-input" id="roomCodeInput" placeholder="Nhập mã phòng (vd: ABCD12)" maxlength="6" style="text-transform: uppercase;" />
<button class="game-btn btn-primary" id="btnJoinRoom">
<span data-vi="Vào Phòng" data-en="Enter Room">Vào Phòng</span>
</button>
</div>
<div id="lobbyStatus" class="status-message"></div>
</div>
<!-- Waiting / Room Info Step -->
<div id="lobbyWaitStep" style="display:none;">
<h2 class="screen-title" data-vi="Phòng Chờ" data-en="Waiting Room">Phòng Chờ</h2>
<div class="room-info-card">
<p data-vi="Mã phòng của bạn:" data-en="Your Room Code:">Mã phòng của bạn:</p>
<div class="room-code-display" id="roomCodeDisplay">
<span id="roomCodeText">------</span>
<button class="copy-btn" id="btnCopyCode" title="Copy"><i class="fa-regular fa-copy"></i></button>
</div>
<p class="small-text mt-1 text-muted" data-vi="Thời gian tạo: " data-en="Code for friends">Gửi mã này cho bạn bè để họ tham gia.</p>
</div>
<div class="lobby-players">
<h3><span data-vi="Người Chơi (" data-en="Players (">Người Chơi (</span><span id="playerCountLabel">0</span>/4)</h3>
<ul id="lobbyPlayerList">
</ul>
</div>
<!-- Thêm Lịch Sử Ván Đấu -->
<div class="lobby-history mt-3" id="lobbyHistory" style="display:none; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px;">
<h4 style="font-size: 0.9rem; margin-bottom: 5px; color: var(--primary-color);"><i class="fa-solid fa-trophy"></i> <span data-vi="Lịch sử người thắng" data-en="Winner History">Lịch sử người thắng</span></h4>
<ul id="historyWinnerList" style="list-style: none; padding: 0; margin: 0; font-size: 0.85rem; max-height: 100px; overflow-y: auto;">
<!-- JS sẽ dọn chỗ này -->
</ul>
</div>
<div id="lobbyWaitStatus" class="status-message"></div>
<div class="button-group mt-3" style="gap:1rem; flex-wrap: wrap;">
<button class="game-btn btn-outline" id="btnLeaveLobby" style="flex:1;">
<i class="fa-solid fa-arrow-left"></i> <span data-vi="Rời Phòng" data-en="Leave">Rời Phòng</span>
</button>
<button class="game-btn btn-primary" id="btnStartOnline" disabled style="flex:1;">
<span data-vi="Chia Bài" data-en="Deal Cards">Chia Bài</span> <i class="fa-solid fa-play"></i>
</button>
<div id="waitHostMessage" style="display:none; width:100%; text-align:center; padding: 12px; background: rgba(99,102,241,0.1); border-radius: 8px; border: 1px dashed rgba(99,102,241,0.3); color: var(--text-primary); font-weight: 500;">
<i class="fa-solid fa-hourglass-half fa-spin" style="color: var(--primary-color);"></i> <span data-vi="Đang chờ chủ phòng bắt đầu..." data-en="Waiting for host to start...">Đang chờ chủ phòng bắt đầu...</span>
</div>
</div>
</div>
</div>
<!-- 2. Play Screen -->
<div id="playScreen" class="game-screen">
<div class="play-header">
<span class="room-badge" id="roomBadge" style="display:none;" title="Room Code">🎮 ROOM</span>
<div class="turn-indicator" id="turnIndicator" data-vi="Lượt của: " data-en="Turn: ">
Lượt của: ---
</div>
</div>
<!-- Thanh tiến trình thời gian -->
<div class="timer-bar-container" style="width: 100%; height: 6px; background: rgba(0,0,0,0.1); border-radius: 3px; overflow: hidden; margin-top: 5px;">
<div id="timerBar" style="height: 100%; width: 100%; background: #22c55e; transition: width 0.1s linear, background-color 0.3s ease;"></div>
</div>
<div class="tien-len-play-content mt-3">
<!-- Opponents area -->
<div class="opponents-area" id="opponentsArea">
<!-- JS sẽ dọn chỗ này -->
</div>
<!-- Bàn cờ giữa -->
<div class="table-area" id="tableArea">
<div class="played-cards-container" id="playedCardsContainer">
<!-- Lá bài vừa đánh ra ở đây -->
</div>
</div>
<!-- Nút điều khiển -->
<div class="action-bar" id="actionBar">
<button class="game-btn btn-outline" id="btnPass">Bỏ lượt (Pass)</button>
<button class="game-btn btn-primary" id="btnPlaySelected">Đánh (Play)</button>
<button class="game-btn btn-primary" id="btnContinueGame" style="display:none;">
<span data-vi="Tiếp Tục" data-en="Continue">Tiếp Tục</span> <i class="fa-solid fa-arrow-right"></i>
</button>
</div>
<!-- Bài trên tay -->
<div class="my-hand-area" id="myHandArea">
<!-- JS vẽ bài vào đây -->
</div>
</div>
<div class="history-panel mt-4">
<h3 data-vi="Nhật ký trận đấu" data-en="Match History">Nhật ký trận đấu</h3>
<div class="history-log" id="historyLog" style="max-height: 150px;">
<!-- Logs appended here -->
</div>
</div>
</div>
<!-- 3. Game Over Screen -->
<div id="gameOverScreen" class="game-screen text-center">
<h2 class="screen-title mb-2 text-gradient" data-vi="Kết Thúc!" data-en="Game Over!">Kết Thúc!</h2>
<div class="winner-box p-3 mb-3" style="background: rgba(var(--primary-rgb), 0.1); border-radius: 12px; border: 1px solid var(--primary-color);">
<h3 id="winnerMessage" style="color: var(--primary-color); font-size: 1.5rem; margin: 0;"></h3>
</div>
<button class="game-btn btn-primary mt-2" id="btnRestart">
<i class="fa-solid fa-rotate-right"></i> <span data-vi="Chơi lại" data-en="Play Again">Chơi lại</span>
</button>
</div>
</div>
</div>
</section>
<!-- Bottom Nav -->
<div class="page-nav-bar">
<div class="container">
<a href="games.html" class="page-nav-btn btn-ghost"><i class="fa-solid fa-arrow-left"></i> <span data-vi="Trò chơi" data-en="Games">Trò chơi</span></a>
</div>
</div>
</div>
<!-- Rules Modal -->
<div class="game-modal-overlay" id="rulesModal" onclick="if(event.target===this) this.classList.remove('active')">
<div class="game-modal-content">
<button class="game-modal-close" onclick="document.getElementById('rulesModal').classList.remove('active')"><i class="fa-solid fa-times"></i></button>
<h2 class="game-modal-title" data-vi="Luật Bài Tiến Lên" data-en="Tien Len Rules">Luật Bài Tiến Lên</h2>
<div class="game-rules-list">
<ul>
<li data-vi="<b>Số người:</b> Hỗ trợ từ 2 đến 4 người chơi với bộ bài tây 52 lá." data-en="<b>Players:</b> 2 to 4 players using a standard 52-card deck."><b>Số người:</b> Hỗ trợ từ 2 đến 4 người chơi với bộ bài tây 52 lá.</li>
<li data-vi="<b>Cách thắng:</b> Đánh hết bài trên tay đầu tiên. Game tiếp diễn cho đến khi chỉ còn 1 người." data-en="<b>Winning:</b> Be the first to empty your hand. Game continues until only 1 player remains."><b>Cách thắng:</b> Đánh hết bài trên tay đầu tiên. Game tiếp diễn cho đến khi chỉ còn 1 người.</li>
<li data-vi="<b>Luật đánh:</b> Hỗ trợ Rác, Đôi, Ba, Sảnh. 3 Đôi Thông chặt 1 Heo..." data-en="<b>Plays:</b> Singles, Pairs, Triples, Straights. 3 straight pairs chop a 2..."><b>Luật đánh:</b> Hỗ trợ Rác, Đôi, Ba, Sảnh. Lượt đánh tự động pass nếu quá 30 giây thời gian cho phép. (Đang cập nhật thêm luật chặt heo).</li>
<li data-vi="<b>Bỏ lượt:</b> Khi bị chặn hoặc muốn bỏ chặng, bạn nhấn Pass. Sau khi vòng kết thúc, bạn mới có quyền đi tiếp." data-en="<b>Pass:</b> Skip your turn. You can't play until a new round starts."><b>Bỏ lượt:</b> Khi bạn Pass, bạn sẽ mất quyền tham gia vòng đó cho tới khi vòng mới bắt đầu.</li>
</ul>
</div>
</div>
</div>
<script src="assets/js/shared/preferences/theme.js"></script>
<script src="assets/js/shared/preferences/language.js"></script>
<script src="assets/js/shared/preferences/boot.js"></script>
<script src="assets/js/shared/site/navbar.js"></script>
<script src="assets/js/shared/site/mobile-menu.js"></script>
<script src="assets/js/shared/site/observers.js"></script>
<script src="assets/js/shared/site/effects.js"></script>
<script src="assets/js/shared/site/transitions.js"></script>
<script src="assets/js/shared/site/boot.js"></script>
<script type="module" src="assets/js/games/tien-len/main.js"></script>
</body>
</html>