OCS-31 persist critical settings in database

src-tauri/migrations/2023-10-06-205928_init/down.sql

@@ -1,4 +1,3 @@
--- This file should undo anything in `up.sql`
 drop table if exists studies;
 drop table if exists chapters;
 drop table if exists lines;

src-tauri/migrations/2023-12-06-212527_add_settings_table/down.sql

@@ -0,0 +1 @@
+drop table if exists settings;

src-tauri/migrations/2023-12-06-212527_add_settings_table/up.sql

@@ -0,0 +1,5 @@
+create table if not exists settings (
+  key text not null,
+  value text not null,
+  primary key (key)
+);

src/composables/useGameTree.ts

@@ -47,7 +47,15 @@ export function useGameTree() {
   const root = ref<PositionNode>();
   const activeNode = ref<PositionNode>();
 
-  function addNode(fen: string, options?: AddMoveOptions): PositionNode {
+  /**
+   * Add a new node to the tree
+   *
+   * @param fen FEN string of the position
+   * @param options Options for the move
+   * @param force force move to be added, even if it already exists on current node
+   * @returns newly added node
+   */
+  function addNode(fen: string, options?: AddMoveOptions, force: boolean = false): PositionNode {
     const nodeId = window.crypto.randomUUID();
     const newNode: PositionNode = {
       id: nodeId,
@@ -63,7 +71,7 @@ export function useGameTree() {
     if (!root.value) root.value = newNode;
     if (activeNode.value) {
       // check if move node exists in tree
-      if (activeNode.value.nextPosition && activeNode.value.nextPosition.move?.san === newNode.move?.san) {
+      if (activeNode.value.nextPosition && activeNode.value.nextPosition.move?.san === newNode.move?.san && !force) {
         setActiveNode(activeNode.value.nextPosition);
         return newNode;
       } else if (activeNode.value.variations.length) {
@@ -145,25 +153,29 @@ export function useGameTree() {
       const isNullMove = child.data.san === "--";
       const move = parseSan(position, child.data.san) as NormalMove | undefined;
       if ((!isNullMove && !move) || (isNullMove && !previousMove)) return; //illegal move
-      if (!isNullMove) position.play(move);
+      if (!isNullMove) position.play(move!);
       const fen = makeFen(position.toSetup());
-      const node = addNode(fen, {
-        move: {
-          source: isNullMove ? makeSquare(previousMove!.from) : makeSquare(move!.from),
-          destination: isNullMove ? makeSquare(previousMove!.to) : makeSquare(move!.to),
-          san: child.data.san,
-          isCapture: child.data.san.includes("x"),
-          isCheck: child.data.san.includes("+"),
-          piece: {
-            role: isNullMove ? pos.board.getRole(previousMove!.from)! : pos.board.getRole(move!.from)!,
-            color: pos.turn,
-            promoted: isNullMove ? !!previousMove!.promotion : !!move!.promotion,
+      const node = addNode(
+        fen,
+        {
+          move: {
+            source: isNullMove ? makeSquare(previousMove!.from) : makeSquare(move!.from),
+            destination: isNullMove ? makeSquare(previousMove!.to) : makeSquare(move!.to),
+            san: child.data.san,
+            isCapture: child.data.san.includes("x"),
+            isCheck: child.data.san.includes("+"),
+            piece: {
+              role: isNullMove ? pos.board.getRole(previousMove!.from)! : pos.board.getRole(move!.from)!,
+              color: pos.turn,
+              promoted: isNullMove ? !!previousMove!.promotion : !!move!.promotion,
+            },
+            annotations: child.data.nags,
           },
-          annotations: child.data.nags,
+          comment: child.data.comments && formatComment(child.data.comments.join("")),
+          startingComment: child.data.startingComments && formatComment(child.data.startingComments.join("")),
         },
-        comment: child.data.comments && formatComment(child.data.comments.join("")),
-        startingComment: child.data.startingComments && formatComment(child.data.startingComments.join("")),
-      });
+        true
+      );
 
       setActiveNode(node!);
       if (child.children.length === 0) return;

src/composables/useSetting.ts

@@ -0,0 +1,31 @@
+import { db, execute, selectFirst } from "@services/database";
+import { StorageLikeAsync, useStorageAsync } from "@vueuse/core";
+
+export function useSetting(key: string, initialValue: string) {
+  const getItem = async (key: string) => {
+    const query = db.selectFrom("settings").select("value").where("key", "=", key).compile();
+    return (await selectFirst(query))?.value ?? null;
+  };
+
+  const setItem = async (key: string, value: string) => {
+    const query = db
+      .insertInto("settings")
+      .values({ key, value })
+      .onConflict((oc) => oc.column("key").doUpdateSet({ value: value }))
+      .compile();
+    await execute(query);
+  };
+
+  const removeItem = async (key: string) => {
+    const query = db.deleteFrom("settings").where("key", "=", key).compile();
+    await execute(query);
+  };
+
+  const storage: StorageLikeAsync = {
+    getItem,
+    setItem,
+    removeItem,
+  };
+
+  return useStorageAsync(key, initialValue, storage);
+}

src/database.d.ts

@@ -5,45 +5,45 @@ export type Generated<T> = T extends ColumnType<infer S, infer I, infer U>
   : ColumnType<T, T | undefined, T>;
 
 export interface Chapters {
-  id: Generated<number>;
   created_at: Generated<string>;
-  study: number;
+  id: number;
   name: string;
+  study: number;
 }
 
 export interface Lines {
-  id: Generated<number>;
+  chapter: number;
   created_at: Generated<string>;
+  id: number;
+  moves: string;
   name: string;
+  orientation: Generated<string>;
   pgn: string;
-  chapter: number;
-  moves: string;
   study: number;
-  orientation: Generated<string>;
 }
 
 export interface Positions {
-  id: Generated<number>;
+  chapter: number | null;
   created_at: Generated<string>;
+  destination: Generated<string>;
   fen: string;
-  study: number | null;
-  chapter: number | null;
+  id: number;
   line: number | null;
   san: string;
   source: Generated<string>;
-  destination: Generated<string>;
+  study: number | null;
 }
 
 export interface Settings {
-  setting_key: string;
-  setting_value: string;
+  key: string;
+  value: string;
 }
 
 export interface Studies {
-  id: Generated<number>;
   created_at: Generated<string>;
-  name: string;
   description: string | null;
+  id: number;
+  name: string;
 }
 
 export interface DB {

src/pages/settings/index.vue

@@ -18,7 +18,7 @@
               name="token"
               class="flex-grow"
               label="Personal API Access Token"
-              v-model.trim="lichessToken"
+              v-model.trim="lichess.personalAccessToken"
               :schema="lichessTokenSchema"
               :async-schema="lichessTokenAsyncSchema"
             />
@@ -40,7 +40,7 @@
               id="chessdotcom-username"
               name="chessdotcom-username"
               class="flex-grow"
-              v-model.trim="chessdotcomUsername"
+              v-model.trim="chessdotcom.username"
               :schema="chessdotcomUsernameSchema"
               :async-schema="chessdotcomUsernameAsyncSchema"
             />
@@ -68,7 +68,6 @@ import { useBreadcrumbs } from "@stores/useBreadcrumbs";
 import { useChessDotCom } from "@stores/useChessDotCom";
 import { useLichess } from "@stores/useLichess";
 import { open } from "@tauri-apps/api/shell";
-import { ref } from "vue";
 import { definePage } from "vue-router/auto";
 import { z } from "zod";
 
@@ -88,7 +87,6 @@ setBreadcrumbs([
 ]);
 
 const lichess = useLichess();
-const lichessToken = ref(lichess.personalAccessToken);
 const lichessTokenSchema = z
   .string()
   .min(1)
@@ -101,7 +99,6 @@ const lichessTokenAsyncSchema = z.string().refine(
 );
 
 const chessdotcom = useChessDotCom();
-const chessdotcomUsername = ref(chessdotcom.username);
 const chessdotcomUsernameSchema = z
   .string()
   .min(1)

src/services/lichess.ts

@@ -72,7 +72,12 @@ interface ExportGameByIdQueryParameters {
 export type LichessGame = z.infer<typeof GameSchema>;
 export type MasterGameCollection = z.infer<typeof MasterGamesSchema>;
 
-export function LichessClient(personalAccessToken: string) {
+export function LichessClient(token: string) {
+  let personalAccessToken = token;
+  function setPersonalAccessToken(newToken: string) {
+    personalAccessToken = newToken;
+  }
+
   /**
    * @see https://lichess.org/api#tag/Games/operation/apiGamesUser
    */
@@ -172,7 +177,7 @@ export function LichessClient(personalAccessToken: string) {
   }
 
   return {
-    personalAccessToken,
+    setPersonalAccessToken,
     exportGamesByUser,
     exportGameById,
     getCurrentAccount,

src/stores/useChessDotCom.ts

@@ -1,10 +1,10 @@
+import { useSetting } from "@composables/useSetting";
 import { ChessDotComClient } from "@services/chessdotcom";
-import { useLocalStorage } from "@vueuse/core";
 import { defineStore } from "pinia";
 
 export const useChessDotCom = defineStore("chessDotCom", () => {
   const client = ChessDotComClient();
-  const username = useLocalStorage("chessdotcomUsername", "");
+  const username = useSetting("chessdotcomUsername", "");
 
   async function validateAndSetUsername(player: string) {
     const response = await client.getPlayer(player);

src/stores/useLichess.ts

@@ -1,24 +1,24 @@
+import { useSetting } from "@composables/useSetting";
 import { LichessClient } from "@services/lichess";
-import { useLocalStorage } from "@vueuse/core";
 import { defineStore } from "pinia";
 
 export const useLichess = defineStore("lichess", () => {
-  const personalAccessToken = useLocalStorage("lichessToken", "");
-  const username = useLocalStorage("lichessUsername", "");
+  const personalAccessToken = useSetting("lichessToken", "");
+  const username = useSetting("lichessUsername", "");
   const client = LichessClient(personalAccessToken.value);
 
   async function validateAndSetPersonalAccessToken(token: string) {
-    client.personalAccessToken = token;
+    client.setPersonalAccessToken(token);
     const response = await client.getCurrentAccount();
     if (response.error) {
       // reset token to previous one
       username.value = response.username;
-      client.personalAccessToken = personalAccessToken.value;
+      client.setPersonalAccessToken(personalAccessToken.value);
       return false;
     }
 
     username.value = response.username;
-    client.personalAccessToken = token;
+    client.setPersonalAccessToken(token);
     personalAccessToken.value = token;
     return true;
   }

src/utilities/comment.spec.ts

@@ -29,7 +29,7 @@ describe("formatComment", () => {
     expect(formatComment("b7-b5")).toBe("<b>b7</b>-<b>b5</b>");
     expect(formatComment("0-0")).toBe("<b>0-0</b>");
     expect(formatComment("0-0-0")).toBe("<b>0-0-0</b>");
-    // expect(formatComment("O-O")).toBe("<b>O-O</b>");
-    // expect(formatComment("O-O-O")).toBe("<b>O-O-O</b>");
+    expect(formatComment("O-O")).toBe("<b>O-O</b>");
+    expect(formatComment("O-O-O")).toBe("<b>O-O-O</b>");
   });
 });

src/utilities/comment.ts

@@ -11,7 +11,8 @@ export function formatComment(comment: string) {
   const fenPattern = /@@StartFEN@@[^@]+?@@EndFEN@@/g;
   comment_ = comment_.replaceAll(fenPattern, "");
   // highlight chess moves
-  const chessMovePattern = /(([\d]{0,3}\.)?(\.{2,3})?[KQBNRP]?[a-h]?[1-8]?[x]?[a-h][1-8](=[NBRQK])?[+#]?)|0-0(-0)?/g;
+  const chessMovePattern =
+    /(([\d]{0,3}\.)?(\.{2,3})?[KQBNRP]?[a-h]?[1-8]?[x]?[a-h][1-8](=[NBRQK])?[+#]?|[0O]-[0O](-[0O])?)/g;
   comment_ = comment_.replace(chessMovePattern, "<b>$1</b>");
   comment_ = comment_.trim();