chore(tiktaktoe): công việc cần làm

[danielphan2003]

Sau đây là các công việc cần làm. Các công việc con được xếp theo mức độ quan trọng cao đến thấp.

Front end (Client)

Chung (Shared)

• [ ] Page background chung: Các page khác sẽ sử dụng layout page này làm nền
  • [ ] Background như PROXX dùng animation: thao khảo component có sẵn trên mạng
• [ ] Các component chung:
  • [ ] Header: như header lúc start game PROXX nhưng là rỗng
  • [ ] Footer: như footer lúc start game PROXX nhưng là rỗng
  • [ ] GameName: dạng Text, là tên game (Tiktaktoe) kèm chế độ game. Ví dụ Tictaktoe :infinity: (truyền thống) hoặc Tiktaktoe :sparkles: (mạo hiểm)
  • [ ] NotificationMenu: button có icon là cái chuông. Hiển thị thông báo người dùng nhận được. Giống dropdown menu. Khi click nó sẽ hiện danh sách một trong các loại thông báo sau:
  • [ ] ServerAnnounceNotif: card thông báo từ server
    • [ ] Text hiển thị thông báo từ server
  • [ ] ProfileMenu: button có background là avatar của người. Giống dropdown menu. Khi click nó sẽ hiện:
  • [ ] Button Profile của tôi
    • [ ] Thiết kế trang quản lý thông tin người dùng đã xác thực trong Client
    • [ ] Chỉnh sửa/Hiển thị tên/email của người dùng
    • [ ] Xoá tài khoản
  • [ ] Button Settings
  • [ ] Button Logout: (backend) chỉ hiển thị nếu người dùng đã login

Pages

• [ ] Landing page: xem https://proxx.app tham khảo

  • [ ] Header: không có thanh ngang
  • [ ] NotificationMenu: căn phải
  • [ ] ProfileMenu: căn phải
    • [ ] Dùng overlay để hiển thị profile của tôi hoặc settings.
  • [ ] Body: căn giữa
  • [ ] Logo game TiktakToe
  • [ ] Input chọn bản đồ: truyền thống (Traditional) với mạo hiểm (Adventure)
  • [ ] Input nhập số cột (Width) và số hàng (Height) của bản đồ
  • [ ] Input nhập Player count (số người chơi): (Backend) Player count phải bằng 2 nếu bản đồ là truyển thống, còn mạo hiểm thì tối thiểu 2 người, tối đa 6 người
    • [ ] Vùng button chọn kiểu chơi:
    • [ ] Button chơi offline bên trái
    • [ ] Button chơi online bên phải
  • [ ] Footer:
  • [ ] Button thông tin và cách chơi game (Help & About): icon chữ i, nền trong suốt. Căn trái. Di chuột qua thì icon được phóng đại lên 1.25x
  • [ ] Button toàn màn hình (Full screen): icon hình vuông bị cắt giữa cạnh, nền trong suốt. Căn phải. Di chuột qua thì icon được phóng đại lên 1.25x

• [ ] Pre game page: tuỳ biến người chơi trước khi vào game

  • [ ] Header:
  • [ ] GameName: căn giữa
  • [ ] NotificationMenu: căn phải
  • [ ] ProfileMenu: căn phải
    • [ ] Dùng side bar phải trên body để hiển thị profile của tôi hoặc settings.
  • [ ] Body:
  • [ ] Banner hiển thị game join code
  • [ ] Banner chọn ký tự đại diện của người chơi:
    • [ ] Liệt kê các ký tự mặc định: 'x', 'o', '@', '=', '#', '&' và mục Custom trên cùng một hàng. Sau đó người dùng click vào lựa chọn thì toggle sẽ dịch sang bên ký tự đó. Chi tiết xem thêm trên mạng.
  • [ ] Button start game
  • [ ] Footer:
  • [ ] Button quay lại trang trước đó
  • [ ] Button toàn màn hình

• [ ] Game page:

  • [ ] Header:
  • [ ] Text hiển thị số ô chưa được khám phá trên tổng số ô của bản đồ: căn trái
  • [ ] Text hiển thị thời gian đã trôi qua: căn phải
  • [ ] NotificationMenu: căn phải
  • [ ] ProfileMenu: căn phải
    • [ ] Dùng side bar trên body để hiển thị profile của tôi hoặc settings. Có nút quay lại trên đầu side bar.
  • [ ] Body:
  • [ ] Bản đồ game: căn giữa
  • [ ] Side bar:
    • [ ] Card hiển thị leaderboard:
    • [ ] UserOverview kèm theo vương miện trên avatar cho top 3. Căn trái. Nếu UserOverview là người chơi hiện tại thì thêm viền xung quanh
    • [ ] Text hiển thị số ô đã đánh/số ô đã khám phá (nếu bản đồ là mạo hiểm)/số lần trúng mìn (nếu bản đồ là mạo hiểm)
    • [ ] Khung chat: giao diện chat giống liên minh nhưng thêm avatar của người chat vô.
    • [ ] Input để gửi tin nhắn, kèm theo button gửi tin nhắn (icon mũi tên phải hoặc icon mail)
  • [ ] Footer:
  • [ ] Button quay lại trang trước đó
  • [ ] Button toàn màn hình

Client side (Backend)

Tham khảo code của https://github.com/servicetitan/Stl.Fusion.Samples/tree/master/src/Blazor/UI

App Logic + Socket Logic (5đ) (Backend)

• [ ] Dùng template Blazor Hybrid (Winforms + BlazorWebView): https://github.com/egvijayanand/blazor-project-templates
• [ ] Tích hợp Stl.Fusion vào Client: Xem cách thực hiện https://github.com/servicetitan/Stl.Fusion.Samples/blob/master/docs/tutorial/Part06.md#real-time-ui-in-blazor-hybrid-apps

I/O (File, Network, ...): REST API + WebSocket (Backend)

Xem https://github.com/servicetitan/Stl.Fusion.Samples/blob/653dc9a5dcc9fef6391f5aaf738c4cb883a51457/src/Blazor/UI/Program.cs#L38-L50

Sign up/Sign in: Đăng ký, đăng nhập, lưu trữ trạng thái (Backend)

Auth0 sẽ tự quản lý các phần sau: Sign up, Sign in, Password Reset, Login bằng Google/Microsoft v.v.

• [ ] Thiết lập Auth0: https://auth0.com/blog/add-authentication-to-blazor-hybrid-apps-in-dotnet-maui/
  • [ ] Mở trang Sign up/Sign in của Auth0 trong trình duyệt mặc định của người dung
  • [ ] Mở port trên localhost để làm Redirect URI chuyển hướng người dùng từ Auth0 sang Client
  • [ ] Thiết lập Callback URL tới server để thêm thông tin người dùng mới tạo.
• [ ] Lưu trữ trạng thái đăng nhập: file, session token, v.v

Single Client: Có một Client hoạt động trong mô hình (Backend)

• [ ] Test 1 Client chạy một mình và chơi offline

Multi Client: Có nhiều Client hoạt động trong mô hình (Backend)

• [ ] Test 2 Client chạy song song và chơi online.
• [ ] Test 4 Client chạy song song và chơi online.

Demo via LAN: Demo sử dụng mạng LAN

• [ ] Test Server có thể chạy trên mạng LAN
• [ ] Test Client có thể kết nối tới Server trong localhost: thêm mục Server URL trong trang Cài đặt của Client.

Demo via Internet: Demo sử dụng mạng Internet

• [ ] REST API
• [ ] Server
• [ ] Client

Server side (Backend)

Tham khảo code của https://github.com/servicetitan/Stl.Fusion.Samples/tree/master/src/Blazor/Server

I/O (File, Network, ...)

• [ ] REST endpoints
  • [ ] Game state
  • [ ] Login state
  • [ ] User state
• [ ] TBD

Database

Sử dụng SQLite và replicate file SQLite lên Amazon S3 bucket bằng https://litestream.io/

• [ ] Viết schema cho tình huống game
  • [ ] Traditional
  • [ ] Adventure
• [ ] Thiết lập Amazon S3 bucket
  • [ ] Thiết lập region gần nhất nước mình
  • [ ] Thiết lập replication

Thread: Áp dụng đa luồng

• [ ] Xử lý nhiều Client trên nhiều thread: thường là mặc định trên .NET

Multi Server: Có nhiều Server trong mô hình hoạt động (Backend)

• [ ] Server xác thực người dùng: Auth0
• [ ] Server xử lý trạng thái game: Xem mục Server

Cryptography: Mã hoá dữ liệu để bảo mật thông tin (Backend)

• [ ] Secure Server đằng sau fly.io
  • [ ] REST API: kiểm tra HTTPS thông qua https://www.ssllabs.com/ssltest/
  • [ ] Secure storage trên fly.io
• [ ] Secure Amazon S3 bucket

Load Balancing (1đ): Phân chia công việc hợp lý cho các Server

• [ ] TBD

[danielphan2003]

Superseded by https://github.com/uwurity/tiktaktoe/issues/2