[O] Use course data

frontend/src/index.sass

@@ -128,6 +128,8 @@ h2
   gap: 1em
   width: 100%
 
+  margin-bottom: 60px
+
   &.non-center
     justify-content: flex-start
 
@@ -256,4 +258,4 @@ h2
     color: white
     display: flex
     align-items: center
-    justify-content: center
+    justify-content: center

frontend/src/logic/sdk.ts

@@ -2,6 +2,7 @@
 import MandarinChinese from '../assets/img/lang/zh.svg'
 import Japanese from '../assets/img/lang/ja.svg'
 import English from '../assets/img/lang/en.svg'
+import {Chapter, chapters_jp} from "./CourseData";
 
 // db.users: Signup table map<username, password>
 // db.user: Current logged-in user
@@ -13,12 +14,13 @@ export interface Lang {
   name: string
   code: string
   icon: string
+  data: Chapter[]
 }
 
 export const possibleLangs: Lang[] = [
-  {name: 'Mandarin Chinese', code: 'zh', icon: MandarinChinese},
+  // {name: 'Mandarin Chinese', code: 'zh', icon: MandarinChinese, data: []},
-  {name: 'Japanese', code: 'ja', icon: Japanese},
+  {name: 'Japanese', code: 'ja', icon: Japanese, data: chapters_jp},
-  {name: 'English', code: 'en', icon: English},
+  // {name: 'English', code: 'en', icon: English, data: []},
 ]
 
 export function signup(username: string, password: string, language: string)
@@ -58,6 +60,29 @@ export function getUsername()
   return db.user
 }
 
+export function getXp()
+{
+  if (!db.completed) return 0
+  const completed = JSON.parse(db.completed)
+  return completed.length * 20
+}
+
+export function isStepCompleted(chapter: string, step: number)
+{
+  if (!db.completed) return false
+  const completed = JSON.parse(db.completed)
+  return completed.includes(`${chapter}-${step}`)
+}
+
+export function setStepCompleted(chapter: string, step: number)
+{
+  if (!db.completed)
+    db.completed = JSON.stringify([])
+  const completed = JSON.parse(db.completed)
+  completed.push(`${chapter}-${step}`)
+  db.completed = JSON.stringify(completed)
+}
+
 export function getLanguage(): Lang
 {
   const users = JSON.parse(db.users)

frontend/src/pages/Course.tsx

@@ -1,6 +1,6 @@
 import NavBar from "../components/NavBar"
 import {Icon} from "@iconify/react";
-import {getLanguage, isLoggedIn} from "../logic/sdk";
+import {getLanguage, isLoggedIn, isStepCompleted} from "../logic/sdk";
 import React from "react";
 import "./Course.sass"
 
@@ -45,21 +45,21 @@ export default function Course()
           <span>1</span>
         </div>
       </div>
-      <div className="box green">
-        <div>Chapter 1, Section 1</div>
-        <div className="font-bold">Say hello and goodbye, use numbers</div>
-      </div>
 
-      <div className="v-layout non-center items-center gap2">
+      {lang.data.map((chapter, i) => <>
-        <CourseButton state={'completed'} index={0}/>
+        <div className="box green">
-        <CourseButton state={'active'} index={1}/>
+          <div>Chapter 1, Section 1</div>
-        <CourseButton state={'locked'} index={2}/>
+          <div className="font-bold">{chapter.name}</div>
-        <CourseButton state={'locked'} index={3}/>
+        </div>
-        <CourseButton state={'locked'} index={4}/>
-        <CourseButton state={'locked'} index={5}/>
-      </div>
 
-      <NavBar/>
+        <div className="v-layout non-center items-center gap2">
+          {chapter.steps.map((step, i) =>
+            <CourseButton state={isStepCompleted(chapter.name, i) ? 'completed' : i == 0 || isStepCompleted(chapter.name, i - 1) ? 'active' : 'locked'}
+                          index={i} key={i}/>)}
+        </div>
+
+        <NavBar/>
+      </>)}
     </div>
   )