Added some comments to the code

package.json

@@ -14,7 +14,7 @@
   "devDependencies": {
     "@neodrag/svelte": "^2.0.3",
     "@sveltejs/adapter-static": "^1.0.1",
-    "@sveltejs/kit": "1.3.0",
+    "@sveltejs/kit": "^1.11.0",
     "@tailwindcss/forms": "^0.5.3",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",

src/lib/components/AddForm.svelte

@@ -3,10 +3,15 @@
   import { randomID } from "$lib/id";
   let team = "";
   let match = "";
+
+  //This is called onFormSubmit but its really for creating a form?
+  //I guess because youre submitting like a mini form with team and match number
   function onFormSubmit() {
     if (!error) {
+      //assigns it an ID and puts it in activeResponses
       const id = randomID();
       $activeResponses[id] = {
+        //data is an array of components by their IDs
         data: {},
         id: id,
         scout: $scout,

src/lib/sheet.ts

@@ -1,3 +1,5 @@
+//The name and code suggests this file does the spreadsheet/server stuff
+
 import { form, keys, lastGet, matches, teams } from "$lib/store";
 import type {
   Group,
@@ -13,6 +15,7 @@ import type {
 import { get as getStore } from "svelte/store";
 import { PUBLIC_API_URL } from "$env/static/public";
 
+//gets data from spreadsheet
 export const get = async () => {
   try {
     const response = await fetch(PUBLIC_API_URL);
@@ -35,6 +38,7 @@ export const get = async () => {
   }
 };
 
+//Formats app data so it can be sent to the spreadsheet
 export const append = async (responseQueue: Response[]) => {
   try {
     await fetch(PUBLIC_API_URL, {
@@ -59,6 +63,8 @@ export const append = async (responseQueue: Response[]) => {
     return false;
   }
 };
+
+//this is where the form gets set
 const setForm = (
   sections: string[][],
   config: string[][],
@@ -201,5 +207,6 @@ const setMatches = (match_array: number[][]) => {
   matches.set(match_obj);
 };
 
+//Im not really sure what this does but it is necessary for setform
 const transpose = <T>(matrix: T[][]) =>
   matrix[0].map((_, i) => matrix.map((array) => array[i]));

src/lib/store.ts

@@ -3,24 +3,50 @@ import type { Form, Response, Team, Match, Field } from "$lib/types";
 import { persisted } from "svelte-local-storage-store";
 import { extractGroups } from "./serialize";
 
+//Details of which type of form is being used
 export const form = persisted<Form | null>("form", null);
+
+//for autofilling form creation data
 export const scout = persisted<string>("scout", "");
 export const teams = persisted<Record<number, Team>>("teams", {});
 export const matches = persisted<Record<number, Match>>("matches", {});
+
+//The currently active response (the one the user sees on the form page)
 export const response = persisted<number | null>("response", null);
+
+//ID of the response we are displaying the QR code of
 export const code = persisted<number | null>("code", null);
+
+//list of responses which are "active" eg. can be edited (not yet submitted)
+//Structured as a map of ids to responses
 export const activeResponses = persisted<Record<number, Response>>(
   "activeResponses",
   {}
 );
+
+//something to do with grid, shouldn't be necessary this year
 export const fields = persisted<Record<number, Record<string, Field>>>(
   "fields",
   {}
 );
+
+//This is used for formatting responses before they are sent to the server (not quite sure how though)
 export const keys = persisted<string[]>("keys", []);
+
+//list of QRs that have already been scanned so they don't get scanned twice
 export const scans = persisted<number[]>("scans", []);
+
+//list of submitted responses waiting to go to server
 export const responseQueue = persisted<Response[]>("responseQueue", []);
+
+//the time that the get function was last called? not sure what get does yet
 export const lastGet = persisted("lastGet", 0);
+
+//check is device connected to internet (writable only works online)
 export const online = writable(true);
+
+//colour theme stuff, not necessary
 export const theme = persisted("theme", "arctos");
+
+//looks like a list of IDs and boolean values for whether or not those forms have errors?
 export const errors = persisted<Record<number, boolean>>("errors", {});

src/routes/+layout.svelte

@@ -24,6 +24,8 @@
     if (Date.now() - $lastGet > 60 * 60 * 1000) {
       get();
     }
+
+    //Sends form to spreadsheet
     function sync() {
       setTimeout(async () => {
         if ($responseQueue.length != 0) {

src/routes/code/+page.svelte

@@ -20,3 +20,4 @@
     </div>
   </div>
 {/if}
+

src/routes/form/+page.svelte

@@ -5,6 +5,8 @@
 </script>
 
 {#if $form && $response}
+  <!--This should be the component that shows the actual form questions-->
+  <!--I assume its not working right now because form isn't set-->
   <FormFlow />
 {:else}
   <FormsList />