一、專案核心理念
本專案針對高中職 APCS（中高級/高級）打造沉浸式線上學習平台。以哈利波特復古魔法風格 (Dark Academia) 的 RPG 冒險，取代傳統枯燥刷題系統（OJ），核心主打 Vibe Coding、圖形化沙盒互動，以及兩階段大魔王測資戰鬥。
《頑扣魔法學院：源代碼的覺醒》最終開發與教學企劃書
APCS 沉浸式 RPG 學習平台的完整教學與產品藍圖。
Funnycoding Academy: Awakening of the Source Code - Master Blueprint
《頑扣魔法學院：源代碼的覺醒》最終開發與教學企劃書
二、系統技術架構
- 核心框架：Next.js (App Router) + TypeScript
- UI 與樣式：Tailwind CSS（深色魔法學院色系 #1E1B4B, #172554, #FBBF24）
- 動畫引擎：Framer Motion（魔法光影與 UI 轉場）
- 編輯器核心：@monaco-editor/react（Python 語法高亮與打碼體驗）
- 編譯器核心：Pyodide（瀏覽器端直接執行 Python，免後端）
- 狀態管理：Zustand（管理關卡進度、魔王血量與戰鬥 Log）
三、四大核心遊戲機制
沉浸式詠唱台 (Vibe Editor)
具備自訂 Lofi 環境音、代碼發光粒子特效，以及防呆提示的魔法編輯器。
雙型態魔王戰 (Subtask System)
幼體魔王對應 50% 測資，允許暴力解通關；完全體魔王對應 100% 大測資，執行超過 50ms 觸發 TLE 反擊，迫使玩家重構最佳化演算法。
全知魔法書 (Interactive Grimoire)
玩家卡關時可展開互動式知識沙盒，將 Stack、Queue、DFS 等抽象概念轉為可拖拉的視覺化物件。
等級與稱號系統
根據推進進度解鎖見習法師、陣法使、時空術士、傳說大魔導士等階段稱號。
四、15 週魔法課綱與關卡圖鑑
本課綱可直接作為前端專案 `constants/gameData.ts` 的資料來源。
第一區：見習法師之塔（奠基期，對應基礎語法）
- W1：空間召喚術 (List/Dict/Set)｜劇情：用容器分類史萊姆掉落物｜魔王：史萊姆群
- W2：時空分身與迴溯 (函式與遞迴 Base Case)｜劇情：寫出停止條件，封印無限分裂的石像鬼｜魔王：碎形石像鬼
- W3：魔像創造術 (OOP 與 Big O)｜劇情：用 class 創造使魔，並計算效能複雜度｜魔王：失控魔像
第二區：星界迷陣（起步期，對應線性結構與 APCS 3 級分）
- W4：次元收納與折躍 (Stack & Queue)｜劇情：用 LIFO 特性解開遺跡的括號對稱符文鎖｜魔王：符文守衛
- W5：靈魂鏈結與超視距 (Linked List & 二分搜)｜劇情：將靈魂串接，用二分搜砍半鎖定隱形敵人｜魔王：隱形幽靈
- W6：魔力共鳴與震盪 (前綴和 & 差分陣列)｜劇情：用 O(1) 查詢範圍傷害，秒殺海量敵軍｜魔王：哥布林軍團
- W7：雙星凝視 (雙指標 & 滑動窗口)｜劇情：用兩顆光球在陣列滑動，鎖定魔力最密集的連續區塊｜魔王：星界蠕蟲
第三區：幽暗密林（突破期，對應非線性結構與 APCS 4 級分）
- W8：生命之樹的低語 (二元搜尋樹 BST)｜劇情：依序走訪古樹，找回迷失的法器｜魔王：樹靈長老
- W9：潛行與全知之眼 (DFS & BFS)｜劇情：在迷霧幻境的迷宮中，找出最短逃生路線｜魔王：迷霧幻獸
- W10：次元裁決者 (分治法與進階排序)｜劇情：將混沌大軍切割、合併、重新排序擊破｜魔王：混沌領主
- W11：時之刃 (掃描線演算法 Sweep Line)｜劇情：防護結界遭重疊時段攻擊，用掃描線算出總覆蓋時間｜魔王：時空吞噬者
第四區：禁忌魔王城（高手期，對應最佳化與 APCS 5 級分）
- W12：貪婪之手與記憶銘文 (Greedy & DP 記憶化)｜劇情：記住算過的遞迴結果，拯救超時的護盾｜魔王：記憶吞噬者
- W13：等價交換法陣 (動態規劃 / 背包問題)｜劇情：在有限法力重量下，組合最大價值的禁咒｜魔王：貪婪惡魔
- W14：血脈契約 (並查集 Union-Find)｜劇情：瞬間辨識陣營，將中立生物強制連通為同盟｜魔王：背叛者
- W15：大魔導士試煉 (APCS 實戰與除錯)｜劇情：面對 TLE 惡龍，綜合運用所有魔法完成零 Bug 擊殺｜終極魔王：TLE 惡龍
五、Vibe Coding 開發咒語指南
咒語 1：建構魔法 UI 外殼與佈局
目標：建立 Next.js 專案，設定 Tailwind 深紫星空色系。左側放戰情觀測區（劇情與魔王狀態），右側放魔法詠唱區（程式碼預留區）。
咒語 2：建立 gameData.ts 與動態選單
目標：將 15 週課綱寫成 TypeScript 陣列，並在左側加上關卡切換下拉選單，讓劇情文本動態連動。
咒語 3：整合 @monaco-editor/react
目標：在右側引入 VS Code 等級編輯器（標記 use client），套用 vs-dark 主題，設定 Python 語言。
咒語 4：實作 Pyodide 與 TLE 戰鬥判定
目標：用 Zustand 管理 bossHp。點擊發動魔法時，用 Pyodide 執行程式；超過 50ms 顯示 TLE 警告，答案正確則扣血並顯示爆擊字樣。
咒語 5：哈利波特風互動全知魔法書 (Grimoire)
目標：實作全螢幕 Modal 與 switch 渲染引擎，根據關卡顯示對應的 Framer Motion 動畫沙盒（如 Stack Push/Pop、掃描線重疊合併）。