---
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ế.

:::