docs: game-client

thangved · Dec 13, 2023 · 9f02098 · 9f02098
1 parent 1825f5e
commit 9f02098
Show file tree

Hide file tree

Showing 20 changed files with 193 additions and 0 deletions.
diff --git a/docs/game-client/0-index.md b/docs/game-client/0-index.md
@@ -0,0 +1,17 @@
+---
+icon: simple/react
+---
+
+# Giới thiệu Procon 2023 Game client
+
+## Thông tin chung
+
+**CTU.Word2Vec Procon 2023 Game client** được sử dụng thi đấu trong kì thi OLP tin học 2023 nội dung Procon.
+Client này được viết bằng Reactjs và source nè húp đi [https://github.com/CTU-Word2Vec/procon2023](https://github.com/CTU-Word2Vec/procon2023)
+
+![](../demo.png)
+
+## Thử nghiệm
+
+- Các bạn có thể thử nghiệm client này tại: [https://procon23.thangved.com](https://procon23.thangved.com)
+- Địa chỉ máy chủ thử nghiệm tại: [https://api.procon23.thangved.com](https://api.procon23.thangved.com) (Xem hướng dẫn máy chủ tại [đây](../game-server/0-index.md))
diff --git a/docs/game-client/1-ui.md b/docs/game-client/1-ui.md
@@ -0,0 +1,61 @@
+---
+icon: material/monitor-screenshot
+---
+
+# Tổng quan về giao diện
+
+## Bố cục
+
+Giao diện game gồm có các phần sau:
+
+- Phần đầu trang (header)
+- Phần hiển thị trạng thái game
+- Phần hiển thị điểm số
+- Phần điều khiển chính
+
+![](./ui.png)
+
+## Phần đầu trang
+
+Phần này sẽ có vài thứ linh ta linh tinh như logo và tên của game client, ngoài ra bên phải có cái nút khi mà nhấn vào đó sẽ hiện ra bảng cấu hình game.
+
+=== "Đây là phần đầu trang"
+
+    ![](./header.png)
+
+=== "Cái này là logo"
+
+    ![](./header-logo.png)
+
+=== "Phần này để cấu hình client"
+
+    ![](./header-config.png)
+
+## Phần hiển thị trạng thái game
+
+Đây là phần mà chúng ta có thể quan sát được trạng thái game một cách trực quan như vị trí thợ xây, lâu đài, lãnh thổ...
+
+![](./game-state.png)
+
+!!! tip "Mẹo"
+
+    Có thể nhấn vào nút :octicons-zoom-in-16: để phóng to và :octicons-zoom-out-16: để thu nhỏ bản đồ cho dễ quan sát.
+
+## Phần hiển thị điểm số
+
+Đây là phần hiển thị điểm số của 2 đội bao gồm điểm chi tiết như tường, lâu đài, lãnh thổ và điểm tổng.
+Ngoài ra tại đây còn hiển thị sự thay đổi của điểm số của 2 đội.
+
+![](./scores.png)
+
+## Phần điều khiển chính
+
+Đây là khu vực điều khiển và cấu hình chính khi chơi game, phần này sẽ được giới thiệu chi tiết trong phần sau.
+
+=== "Phần điều khiển chế độ chơi thật"
+
+    ![](./controls-real.png)
+
+=== "Phần điều khiến chế độ thử nghiệm"
+
+    ![](./controls-test.png)
diff --git a/docs/game-client/2-test-mode.md b/docs/game-client/2-test-mode.md
@@ -0,0 +1,45 @@
+---
+icon: material/flash-outline
+---
+
+# Chế độ thử nghiệm
+
+## Giới thiệu
+
+Chế độ này được sử dụng cho mục đích triển khai thử nghiệm nhanh các giải thuật mới mà **không cần phải kết nối với máy chủ**.
+
+## Hướng dẫn sử dụng
+
+Để sử dụng chế độ này, bạn chuyển bảng điều khiển sang tab thử nghiệm
+
+![](./controls-test.png)
+
+### Tạo một game ngẫu nhiên
+
+Tại đây, ta sẽ tạo một map game ngẫu nhiên với các thông số có thể điều chỉnh như:
+
+| Tên               | Mô tả                                 | Mặc định |
+| ----------------- | ------------------------------------- | -------- |
+| Chiều rộng        | Chiều rộng của map                    | `15`     |
+| Chiều cao         | Chiều cao của map                     | `15`     |
+| Số lâu đài        | Số lâu đài xuất hiện trên map         | `3`      |
+| Số thợ xây        | Số thợ xây mỗi đội                    | `4`      |
+| Số ao             | Số ao xuất hiện trên bản đồ           | `15`     |
+| Điểm cho lâu đài  | Điểm dành cho đội chiếm được lâu đài  | `10`     |
+| Điểm cho lãnh thổ | Điểm dành cho đội chiếm được lãnh thổ | `1`      |
+| Điểm tường        | Điểm dành mỗi bức tường của mỗi đội   | `1`      |
+
+=== "Thông số"
+
+    Tạo một game ngẫu nhiên với các thông số sau
+    ![](./random-game-1.png)
+
+=== "Kết quả"
+
+    ![](./random-game-2.png)
+
+### Chọn giải thuật
+
+Sau khi đã tạo game, bạn có thể chọn giải thuật cho đội A và đội B và bắt đầu cho chúng đấu với nhau.
+
+![](./select-algorithm.png)
diff --git a/docs/game-client/3-real-mode.md b/docs/game-client/3-real-mode.md
@@ -0,0 +1,31 @@
+---
+icon: material/play-circle-outline
+---
+
+# Chế độ thật sự chơi
+
+!!! warning "Lưu ý"
+
+    Với chế độ này, bạn cần phải cấu hình máy chủ theo hướng dẫn sau [đây](./4-server-config.md)
+
+## Giới thiệu
+
+Đây là chế độ dùng trong thi đấu, 2 đội sẽ cùng kết nối tới 1 game server để thực hiện các hành động để giành chiến thắng.
+
+## Hướng dẫn
+
+### Tải thông tin game
+
+Để tải thông tin game, bạn nhập id game vào và nhấn ++enter++ trên bàn phím hoặc bấm vào nút tải trên màn hình.
+
+<video autoplay loop>
+    <source src="./load-game.webm" />
+</video>
+
+### Bắt đầu chơi
+
+Để bắt đầu chơi, các bạn nhấn chọn team và giải thuật sử dụng và nhấn nút ++play++.
+
+<video autoplay loop>
+    <source src="./real-play.webm" />
+</video>
diff --git a/docs/game-client/4-server-config.md b/docs/game-client/4-server-config.md
@@ -0,0 +1,31 @@
+---
+icon: material/cog-outline
+---
+
+# Cấu hình máy chủ
+
+Để mở bảng cấu hình, bạn nhấn vào nút **:material-cog-outline: Cấu hình** ở góc trên bên phải màn hình.
+
+<video autoplay loop>
+    <source src="./open-config.webm" />
+</video>
+
+## Token
+
+!!! info
+
+    Cấu hình này sử dụng cho chế độ **chơi thật sự**
+
+Access token của team (nếu bạn sử dụng máy chủ thử nghiệm thì không cần).
+
+## Điểm cuối API
+
+!!! info
+
+    Cấu hình này sử dụng cho chế độ **chơi thật sự**
+
+Địa chỉ API Endpoint, ví dụ: `https://api.procon23.thangved.com/api`
+
+## Deplay time
+
+Thời gian chờ mỗi lượt khi replay và thử nghiệm.
diff --git a/docs/game-client/controls-real.png b/docs/game-client/controls-real.png
diff --git a/docs/game-client/controls-test.png b/docs/game-client/controls-test.png
diff --git a/docs/game-client/game-state.png b/docs/game-client/game-state.png
diff --git a/docs/game-client/header-config.png b/docs/game-client/header-config.png
diff --git a/docs/game-client/header-logo.png b/docs/game-client/header-logo.png
diff --git a/docs/game-client/header.png b/docs/game-client/header.png
diff --git a/docs/game-client/load-game.webm b/docs/game-client/load-game.webm
diff --git a/docs/game-client/open-config.webm b/docs/game-client/open-config.webm
diff --git a/docs/game-client/random-game-1.png b/docs/game-client/random-game-1.png
diff --git a/docs/game-client/random-game-2.png b/docs/game-client/random-game-2.png
diff --git a/docs/game-client/real-play.webm b/docs/game-client/real-play.webm
diff --git a/docs/game-client/scores.png b/docs/game-client/scores.png
diff --git a/docs/game-client/select-algorithm.png b/docs/game-client/select-algorithm.png
diff --git a/docs/game-client/ui.png b/docs/game-client/ui.png
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -46,3 +46,11 @@ markdown_extensions:
       alternate_style: true
   - admonition
   - pymdownx.details
+  - pymdownx.emoji:
+      emoji_index: !!python/name:material.extensions.emoji.twemoji
+      emoji_generator: !!python/name:material.extensions.emoji.to_svg
+  - pymdownx.critic
+  - pymdownx.caret
+  - pymdownx.keys
+  - pymdownx.mark
+  - pymdownx.tilde