multiple small improvements

frontend/package.json

@@ -22,7 +22,8 @@
     "@codemirror/view": "^6.34.1",
     "@lezer/highlight": "^1.2.1",
     "@sweetalert2/theme-dark": "^5.0.18",
-    "confettis": "^0.3.6",
+    "appwrite": "^16.0.2",
+    "confettis": "^0.3.7",
     "idb-keyval": "^6.2.1",
     "lz-string": "^1.5.0",
     "magic-regexp": "^0.8.0",

frontend/src/components/Feedback/Feedback.ts

@@ -10,7 +10,8 @@ export class FeedbackElement extends HTMLElement {
     cancel.addEventListener("click", () => dialog.close());
     const submit = $("#submit", form);
     submit.innerHTML = "Submit";
-
+
+    // TODO: Fix feedbacker
     form.onsubmit = async () => {
       // e.preventDefault();
       const data = {

frontend/src/components/Hint.astro

@@ -4,6 +4,7 @@ interface Props {
 }
 
 const { visible = false } = Astro.props;
+const id = `hint-${Math.random().toString(36).substring(2, 10)}`;
 ---
 
 <x-hint {visible}>

frontend/src/components/WIP.astro

@@ -0,0 +1,16 @@
+---
+import { Aside } from "@astrojs/starlight/components";
+
+type Props = {
+  testing: boolean
+};
+const { testing = false } = Astro.props;
+
+
+const title = testing ? "Page In Testing Phase" : "Work In Progress";
+const message = testing ? 
+  "This page should be finished, but there might be some bugs or things that are hard to understand.<br>Proceed with caution!" :
+  "<b>This chapter is not yet finished, stay tuned for more!</b>";
+---
+
+<Aside type="danger" title={title} set:html={message} />

frontend/src/content/docs/en/first-steps/4-enrolling.mdx

@@ -10,7 +10,7 @@ import Highlight from "@components/Highlight.astro";
 import Checkpoint from "@components/Checkpoint/Checkpoint.astro";
 import Progress from "@components/Progress/Progress.astro";
 import Feedback from "@components/Feedback/Feedback.astro";
-import { Content as WIP } from "@components/WIP.mdx";
+import WIP from "@components/WIP.astro";
 
 export function Guild(props) {
     return <Portrait 
@@ -19,13 +19,12 @@ export function Guild(props) {
     />
 }
 
-:::danger[Page in testing phase]
-This page should be finished, but there might be some bugs or things that are hard to understand.  
-Proceed with caution!
-:::
+<WIP testing />
 
 :::caution[Data collection?]
-**DATA WILL NOT BE COLLECTED** in any way, it's just for the exercise.  
+Everything is stored locally, **DATA WILL NOT BE COLLECTED**.  
+
+When using the Cloud Save feature your code snippets will be preserved, so *some* information may be stored.  
 If you're worried about it, use dummy values that don't match your real data.
 :::
 

frontend/src/content/docs/en/first-steps/5-killing-some-slimes.mdx

@@ -15,7 +15,7 @@ import Feedback from "@components/Feedback/Feedback.astro";
 import RobotGame from "@components/RobotGame/RobotGame.astro";
 import Hint from "@components/Hint.astro";
 import Comic from "@components/Comic.astro";
-import { Content as WIP } from "@components/WIP.mdx";
+import WIP from "@components/WIP.astro";
 
 <WIP />
 

frontend/src/content/docs/en/first-steps/6-quality-control.mdx

@@ -14,7 +14,7 @@ import Progress from "@components/Progress/Progress.astro";
 import Feedback from "@components/Feedback/Feedback.astro";
 import Hint from "@components/Hint.astro";
 import Comic from "@components/Comic.astro";
-import { Content as WIP } from "@components/WIP.mdx";
+import WIP from "@components/WIP.astro";
 
 export function Guild(props) {
   return <Portrait 
@@ -29,9 +29,7 @@ export function Fish(props) {
   />
 }
 
-:::danger[Work in progress]
-**This chapter is not yet finished, stay tuned for more!**
-:::
+<WIP />
 
 After the intense mission from yesterday, you're feeling a bit worn out, so you decide to take it easy and opt for something less demanding.
 

frontend/src/content/questions/CodeQuestion.ts

@@ -9,10 +9,8 @@ export const rustRandomNum = `{
 
 export const replace = "Replace ? with your answer.";
 export const codeMess = `Seems like you've messed up the code, click the "Reset" button to return it back to its original state.`;
-export const codeMessQuestion = `${codeMess}
-Remember to only modify the ? symbol.`;
-export const codeMessBlanks = `${codeMess}
-Remember to only modify the blank spaces.`;
+export const codeMessQuestion = `${codeMess}\nRemember to only modify the ? symbol.`;
+export const codeMessBlanks = `${codeMess}\nRemember to only modify the blank spaces.`;
 export const codeMessLines = (lines: number[]) => {
   let msg = codeMess;
   if (lines.length === 0) return msg;
@@ -40,14 +38,10 @@ export function getAnswer(s: string, value: string): string {
   return value.substring(f, value.indexOf(";", f)).trim();
 }
 
-/** Dynamically imports a question from  */
+/** Dynamically imports a question from `id` */
 export async function importQuestion(id: string): Promise<CodeQuestion> {
-  const module: { question: CodeQuestion } | { default: CodeQuestion } =
-    await import(`../questions/${id}.ts`);
-  if ("question" in module) {
-    return module.question;
-  }
-  return module.default;
+  const module = await import(`../questions/${id}.ts`);
+  return ("question" in module) ? module.question : module.default;
 }
 
 export async function importRobotQuestion(id: string): Promise<RobotGameProps> {

frontend/src/styles/custom.css

@@ -1,60 +1,23 @@
-/* Disabled due to distorting caused by Checkpoint, unknown reason */
-/*
-@view-transition { 
-  navigation: auto
-}
-
-.main-pane {
-  view-transition-name: main-pane;
-}
-
-:root::view-transition-old(main-pane),
-:root::view-transition-new(main-pane) {
-  position: absolute;
-  inset-block-start: 0;
-  inline-size: 100%;
-  block-size: auto;
-  
-  animation-duration: inherit;
-  animation-fill-mode: inherit;
-  animation-delay: inherit;
-}
-
-@keyframes -ua-mix-blend-mode-plus-lighter {
-  from {
-    mix-blend-mode: plus-lighter;
-  }
-  to {
-    mix-blend-mode: plus-lighter;
-  }
-}
-
-@keyframes -ua-view-transition-fade-in {
-  from {
-    opacity: 0;
-  }
-} */
-
-
 /* Dark mode colors. */
 :root {
   --sl-color-accent-low: #460b05;
   --sl-color-accent: #c60e00;
   --sl-color-accent-high: #f57b00;
-  --sl-color-white: #ffffff;
-  --sl-color-gray-1: #f3ecea;
-  --sl-color-gray-2: #c8c0be;
-  --sl-color-gray-3: #978784;
-  --sl-color-gray-4: #635451;
-  --sl-color-gray-5: #423432;
-  --sl-color-gray-6: #302321;
-  --sl-color-black: #1d1715;
+	--sl-color-white: #ffffff;
+	--sl-color-gray-1: #f3ecea;
+	--sl-color-gray-2: #cfc6c4;
+	--sl-color-gray-3: #b0a09d;
+	--sl-color-gray-4: #635451;
+	--sl-color-gray-5: #423432;
+	--sl-color-gray-6: #302321;
+	--sl-color-black: #1d1715;
   --sl-color-text: #ebe3e2;
 
   --color-paper: #302321;
   --card-padding: 0.5rem;
   --border-radius: 0.25rem;
 }
+
 /* Light mode colors. */
 :root[data-theme="light"] {
   --sl-color-accent-low: #ffc8be;

frontend/src/utils/saveData.ts

@@ -11,14 +11,22 @@ import { compressToUint8Array, decompressFromUint8Array } from "lz-string";
 type SaveData = {
   checkpoints: string;
   userCodes: string;
+  localStorage: string;
 };
 
 export async function importData(data: Uint8Array) {
   const json = decompressFromUint8Array(data);
   const save: SaveData = JSON.parse(json);
+  const local: Storage = JSON.parse(save.localStorage);
+  console.log({local});
 
-  Promise.all([setCheckpoints(save.checkpoints), setUserCodes(save.userCodes)]);
-
+  Promise.allSettled([
+    setCheckpoints(save.checkpoints), 
+    setUserCodes(save.userCodes),
+  ]);
+  for (const [key, value] of Object.entries(local)) {
+    localStorage.setItem(key, value);
+  }
   location.reload();
 }
 
@@ -27,7 +35,7 @@ export async function exportData(): Promise<Uint8Array> {
     getCheckpoints(),
     getUserCodes(),
   ]);
-  const save: SaveData = { checkpoints, userCodes };
+  const save: SaveData = { checkpoints, userCodes, localStorage: JSON.stringify(localStorage) };
   const json = JSON.stringify(save);
   return compressToUint8Array(json);
 }
@@ -42,7 +50,7 @@ export async function importDataFromFile() {
     const file = this.files[0];
     const data = new Uint8Array(await file.arrayBuffer());
     importData(data);
-
+    
     input.remove();
   });
 
@@ -56,4 +64,4 @@ export async function exportDataToFile() {
   link.href = window.URL.createObjectURL(blob);
   link.download = "RustQuest.sav";
   link.click();
-}
+}