只需動動手指，就能在無聊時候打發時間的線上拉霸小遊戲
啦八機 LaBaG Web 是經典拉霸機遊戲「啦八機」的 Web 版前端，使用 Next.js App Router 建構。玩家可透過 Google 或 GitHub 登入，進行轉動、累積金幣，並在排行榜上與其他玩家競爭。
本專案解決的是：將原本 MIT App Inventor 製作的行動端小遊戲，以現代 Web 技術重構為可跨裝置存取、支援 PWA 安裝、具備社群分享與排行榜功能的完整 Web 應用。
適合對象：
- 想快速體驗輕量休閒小遊戲的一般使用者
- 對 Next.js App Router、OAuth 登入、外部 API 串接有興趣的前端開發者
- 需要參考 PWA、主題切換、遊戲 UI 實作的開源貢獻者
- 🎮 拉霸遊戲核心 — 三軸轉動、下注選擇、逐格揭示動畫，整合
labag遊戲邏輯套件 - 🔐 OAuth 登入 — 支援 Google、GitHub 第三方登入，含 Access / Refresh Token 自動刷新
- 🏆 即時排行榜 — 依「總金幣數」與「轉動次數」分類排名，含頒獎台與完整榜單
- 🔗 分享獎勵機制 — 登入用戶可產生分享連結，連結被點擊後可獲得金幣獎勵
- 🎨 多主題切換 — 內建 Normal、SuperHHH、GreenWei、PiKaChu 等視覺主題
- 🔊 音效與音樂設定 — 可獨立開關背景音樂與遊戲音效，設定持久化至 localStorage
- 📱 PWA 支援 — 提供 Web App Manifest，可安裝至主畫面離線快捷啟動
- 📖 遊戲說明頁 — 含開發歷程、符號賠率表、技術架構等 Markdown 內容
| 類別 | 技術 |
|---|---|
| 前端框架 | Next.js 16（App Router） |
| UI 函式庫 | React 19 |
| 語言 | TypeScript 5 |
| CSS / UI | Tailwind CSS 4、Ant Design Icons |
| 共用元件 | fanyucomponents |
| API / 資料 | 外部 REST API（Supabase 後端），透過 fetch 封裝 |
| SEO | Next.js Metadata API、sitemap.ts、robots.ts |
| 部署 | Vercel |
text
| 目錄 | 用途 |
|---|---|
src/app/ | Next.js App Router 頁面與路由，每個資料夾對應一個 URL 路徑 |
src/components/ | 可複用的 React UI 元件，依功能模組分子目錄 |
src/contexts/ | 全域狀態管理（使用者登入、遊戲設定、Modal 控制） |
src/libs/ | 站點 metadata、路由定義、後端常數等靜態設定 |
src/utils/backend.tsx | 後端 REST API 呼叫封裝（遊戲、使用者、排行榜、分享） |
src/middleware.ts | 攔截 /share/:id 路徑，記錄點擊後重導向至首頁 |
- Node.js 18.17 或以上
- npm（或 yarn / pnpm / bun）
bash
開啟 http://localhost:3000 即可預覽。
bash
在專案根目錄建立 .env.local 檔案，並填入以下變數：
text
| 變數名稱 | 必填 | 說明 |
|---|---|---|
NEXT_PUBLIC_BACKEND_URL | ✅ | 後端 REST API 的根 URL，前端所有 API 請求皆以此為 base |
注意： 以
NEXT_PUBLIC_為前綴的變數會暴露至瀏覽器端，請勿存放機密金鑰。
本專案預設部署於 Vercel，正式環境網址：https://labag.vercel.app
- 將此 repository 連結至 Vercel 專案
- 在 Vercel Dashboard → Settings → Environment Variables 中設定
NEXT_PUBLIC_BACKEND_URL - 推送至 main 分支，Vercel 將自動觸發 build 與部署
亦可部署至任何支援 Next.js 的平台（如 Netlify、Railway、自架 Node.js 伺服器），只需確保：
- 執行
npm run build後以npm run start啟動 - 環境變數
NEXT_PUBLIC_BACKEND_URL已正確設定
本專案以 MIT License 授權釋出。