前回の入力をキャッシュする程度の機能

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+package-lock.json

frontend/src/App.svelte

@@ -5,15 +5,22 @@
   import Message from "./components/Message.svelte";
 
   import { Loader } from "@lucide/svelte";
-  import { type Problem } from "./utils/types";
+  import { type Problem, type ClosedRange, createValidRange } from "./utils/types";
+  import { cacheInput, loadLastInput } from "./cacher";
 
-  let under_diff = $state<string>("0");
-  let over_diff = $state<string>("3854");
+  const MIN_DIFF: number = 0;
+  const MAX_DIFF: number = 3854;
+
+  let cachedInput : ClosedRange | null = loadLastInput();
+  let currentInput : ClosedRange | null;
+
+  let under_diff = $state<number>(cachedInput ? cachedInput.min : MIN_DIFF);
+  let over_diff = $state<number>(cachedInput ? cachedInput.max : MAX_DIFF);
 
   let errors = $derived({
-    rangeError: parseInt(under_diff) > parseInt(over_diff),
-    isMinusUnderDiff: parseInt(under_diff) < 0,
-    isMinusOverDiff: parseInt(over_diff) < 0,
+    rangeError: !(currentInput = createValidRange(under_diff, over_diff)),
+    isMinusUnderDiff: under_diff < 0,
+    isMinusOverDiff: over_diff < 0,
   });
 
   let result = $state<Problem | null>(null);
@@ -74,7 +81,7 @@
     <div class="flex items-center gap-2">
       <Input type="number" placeholder="最低Diffを入力してください。" isErrors={errors} bind:value={under_diff} />
       <Input type="number" placeholder="最高Diffを入力してください。" isErrors={errors} bind:value={over_diff} />
-      <Button onclick={sendQuery} class="shrink-0 w-24 h-12 flex justify-center items-center" disabled={loading}>
+       <Button onclick={() =>{sendQuery(), cacheInput(currentInput!)}} class="shrink-0 w-24 h-12 flex justify-center items-center" disabled={loading}>
         {#if loading}
           <div class="animate-spin [animation-duration: 1.05s]">
             <Loader size="1.5rem" />

frontend/src/cacher.ts

@@ -0,0 +1,11 @@
+import type { ClosedRange } from './utils/types';
+
+const rangeKey : string = 'lastDiff';
+
+export const cacheInput = (range : ClosedRange): void => {
+  localStorage.setItem(rangeKey, JSON.stringify(range));
+}
+export const loadLastInput = (): ClosedRange | null => {
+  const data = localStorage.getItem(rangeKey);
+  return data ? JSON.parse(data) as ClosedRange : null;
+}

frontend/src/utils/types.ts

@@ -3,4 +3,14 @@ export interface Problem {
 	contest_id: string;
 	name: string;
 	difficulty: number;
-};
+};
+
+export type ClosedRange = {
+  min: number;
+  max: number;
+} & { readonly __brand: unique symbol }; 
+
+// for validation
+export const createValidRange = (min: number, max: number): ClosedRange | null => {
+  return min>max ? null : {min, max, __brand: Symbol('ClosedRange') as never};
+}

frontend/tsconfig.app.json

@@ -1,6 +1,7 @@
 {
   "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
+    "composite": true,
     "target": "ES2022",
     "useDefineForClassFields": true,
     "module": "ESNext",

frontend/tsconfig.node.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "composite": true,
     "target": "ES2023",
     "lib": ["ES2023"],
     "module": "ESNext",
@@ -11,7 +12,7 @@
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
     "moduleDetection": "force",
-    "noEmit": true,
+    "noEmit": false,
 
     /* Linting */
     "strict": true,