Update 13/04/2023

adman/docs/tutorial-minigame/5-game-page/code/template-demo.md

@@ -0,0 +1,69 @@
+---
+sidebar_position: 2
+---
+
+# Dùng template mẫu
+
+Template có sẵn giao diện và các chức năng cơ bản của **Minigame**. Dùng để kiểm tra dữ liệu bạn đã thêm trước đó.
+
+- Ấn <button className="btn btn-add">Dùng template mẫu</button> để nạp template mẫu vào **Game Page**, sau đó ấn <button className="btn btn-submit">Cập nhật</button> để lưu lại.
+- Ấn <button className="btn btn-add">Xem trước</button> để xem giao diện hiện thị hiện tại.
+
+:::tip
+
+Sau khi **Tạo template mẫu**, bạn có thể copy `toàn bộ code` về **Code Editor (VS Code, Sublime Text, Atom...)** và chỉnh sửa và chạy ngay trên đó (với **VS Code** là Extension `Live Server`,...)
+
+Sau khi hoàn thiện, quay lại **Adman** và sao chép lại `code` vào **Game Page**.
+
+:::
+
+## Giao diện vòng quay - Canvas
+
+:::caution
+
+Vòng quay được vẽ bằng **Canvas**, phụ thuộc vào kích thước của **Hình ảnh giải thưởng trên vòng quay** - **Pizza Piece** &#127829;
+
+Ví dụ:
+
+- &#127829; của bạn có `chiều cao` là `300`, thì `300` này chính là bán kính vòng quay đó. Lúc này **Canvas** sẽ có `chiều dài(width)` và `chiều cao(heigh)` là `300 * 2 = 600`.
+- Trong **Code Editor** của **Game Page**, sử dụng tìm kiếm `Ctrl + F` với từ khóa `Canvas` để thay đổi lại `width` và `height` phù hợp với hiển thị ngoài giao diện.
+
+```jsx
+// highlight-next-line
+<canvas id="canvas" width="600" height="600" style="width:100%">
+  <p style="{color: white}" align="center">
+    Sorry, your browser doesn't support canvas. Please try another.
+  </p>
+</canvas>
+```
+
+:::
+
+## Kết quả
+
+![Minigame Template 3](./img/minigame-startup-gamepage-3.png)
+
+:::tip SUCCESS
+
+Nếu bạn thấy giao diện như hình bên trên bao gồm (có thể bị lỗi giao diện 1 chút):
+
+- **Thời gian hết hạn:** đúng ngày kết thúc đã cài đặt.
+- **Số người đang online:** bằng 1, chính là bạn đang online.
+- **Vòng quay:** hiển thị **đúng và đủ** các **Hình ảnh giải thưởng vòng quay** trong tab **Cài đặt vòng quay**.
+
+Xin chúc mừng bạn, Minigame bước đầu đã hiển thị ngoài giao diện thành công. Việc tiếp theo là **Lập trình giao diện đẹp và phù hợp hơn theo Thiết kế của bạn (HTML5, CSS3)**.
+Sau đó là **Lập trình chức năng để Minigame hoạt động hoàn hảo (Javascript)**.
+
+:::
+
+:::danger ERROR
+
+Nếu Minigame có lỗi vui lòng kiểm tra lại một số lỗi cơ bản sau:
+
+- **Minigame không chạy:**
+  - Kiểm tra tại tab **[Quy định chơi/Thời gian kết thúc](../../policy)**: thời gian cần cài đặt `sau thời điểm hiện tại`.
+  - Kiểm tra tại tab **[Thông tin cơ bản/Trạng thái game](../../startup)**: tích `Cho chạy chính thức`.
+- **Vòng quay không hiển thị, hiển thị lỗi:**
+  - Kiểm tra tại tab **[Cài đặt vòng quay](../../4-wheel.md)**: cài đặt `Hình ảnh vòng quay` và đủ số lượng như thiết kế.
+
+:::