Add support for a final quiz

js/packages/repo-quest/package.json

@@ -15,12 +15,14 @@
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "@wcrichto/quiz": "^0.3.8",
     "jsdom": "^25.0.0",
     "lodash": "^4.17.21",
     "mobx": "^6.13.1",
     "mobx-react": "^9.1.1",
     "normalize.css": "^8.0.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "sass": "^1.78.0"
   }
 }

js/packages/repo-quest/rust-editor-placeholder.css

@@ -0,0 +1 @@
+/* intentionally left blank */

js/packages/repo-quest/rust-editor-placeholder.js

@@ -0,0 +1,2 @@
+export let Editor = undefined;
+export let raSetup = undefined;

js/packages/repo-quest/src/index.tsx

@@ -1,4 +1,5 @@
 import * as dialog from "@tauri-apps/plugin-dialog";
+import { type Quiz, QuizView } from "@wcrichto/quiz";
 import _ from "lodash";
 import { action, makeAutoObservable } from "mobx";
 import { observer } from "mobx-react";
@@ -259,12 +260,30 @@ let NewQuest = () => {
   );
 };
 
+let QuizPage: React.FC<{ quest: QuestConfig }> = ({ quest }) => {
+  let quiz = quest.final as
+    /* biome-ignore lint/suspicious/noExplicitAny: backend guarantees that this satisfies Quiz */
+    any as Quiz;
+  return (
+    <QuizView
+      name={quest.title}
+      quiz={quiz}
+      cacheAnswers={true}
+      autoStart={true}
+      allowRetry={true}
+    />
+  );
+};
+
 let QuestView: React.FC<{
   quest: QuestConfig;
   initialState: StateDescriptor;
 }> = ({ quest, initialState }) => {
+  console.log(quest);
+
   let loader = useContext(Loader.context)!;
   let [state, setState] = useState<StateDescriptor | undefined>(initialState);
+  let [showQuiz, setShowQuiz] = useState(false);
   let setTitle = useContext(TitleContext)!;
   useEffect(() => setTitle(quest.title), [quest.title]);
 
@@ -275,7 +294,11 @@ let QuestView: React.FC<{
   let cur_stage =
     state && state.state.type === "Ongoing"
       ? state.state.stage
-      : quest.stages.length;
+      : quest.stages.length - 1;
+
+  if (showQuiz) {
+    return <QuizPage quest={quest} />;
+  }
 
   return (
     <div className="columns">
@@ -290,6 +313,18 @@ let QuestView: React.FC<{
                 state={state.state}
               />
             ))}
+            {state.state.type === "Completed" && quest.final && (
+              <li>
+                <div>
+                  <span className="stage-title">Quiz</span>
+                </div>
+                <div>
+                  <button type="button" onClick={() => setShowQuiz(true)}>
+                    Start
+                  </button>
+                </div>
+              </li>
+            )}
           </ol>
         )}
       </div>

js/packages/repo-quest/styles/index.css

@@ -1,4 +1,5 @@
 @import "normalize.css/normalize.css";
+@import "@wcrichto/quiz/lib.scss";
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
 
 :root {
@@ -132,7 +133,7 @@ input[type=file] {
   display: none;
 }
 
-button, label, input[type=submit] {
+button, input[type=submit] {
   display: inline-block;
   appearance: none;
   background: #eee;

js/packages/repo-quest/vite.config.ts

@@ -1,14 +1,22 @@
-import fs from "node:fs";
+import path from "node:path";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 
-let manifest = JSON.parse(fs.readFileSync("package.json", "utf-8"));
+let alias = {
+  "@wcrichto/rust-editor/dist/lib.css": path.resolve(
+    __dirname,
+    "rust-editor-placeholder.css"
+  ),
+  "@wcrichto/rust-editor": path.resolve(__dirname, "rust-editor-placeholder.js")
+};
+
 export default defineConfig(({ mode }) => ({
   base: "./",
   define: {
     "process.env.NODE_ENV": JSON.stringify(mode)
   },
   plugins: [react()],
+  resolve: { alias },
   test: {
     environment: "jsdom",
     setupFiles: "tests/setup.ts",