migrate web to svelte 5

2025-12-25 05:37:21 +00:00
parent 50d6ee3111
commit 334c67f22a
63 changed files with 621 additions and 479 deletions
@@ -6,8 +6,8 @@
    src: string;
  }

-  let isAddIcon = false;
-  let hoveredIndex: number | null = null;
+  let isAddIcon = $state(false);
+  let hoveredIndex: number | null = $state(null);

  let avatars: Avatar[] = [
    { src: 'avatar_a' },
@@ -48,14 +48,14 @@
    <div class="flex flex-wrap justify-evenly gap-y-3 mt-3">
      {#each avatars as avatar, index}
        <button
-          on:click={() => {
+          onclick={() => {
            selectAvatar(avatar);
          }}
-          on:mouseenter={() => {
+          onmouseenter={() => {
            hoveredIndex = index;
            isAddIcon = true;
          }}
-          on:mouseleave={() => {
+          onmouseleave={() => {
            hoveredIndex = null;
            isAddIcon = false;
          }}
@@ -63,7 +63,7 @@
    >
      {#each backgrounds as background}
        <button
-          on:click={() => {
+          onclick={() => {
            selectBackground(background);
          }}
          class="flex w-[30%] items-center shadow-sm hover:scale-110 transition-all duration-300"
@@ -3,9 +3,13 @@
  import { nodeStore, htmlBody, openModal } from './store';
  import { Button } from '@cio/ui/base/button';

-  export let isDisabled: boolean;
-  export let isDownloading: boolean;
-  export let text: string = 'Generate Progress Report';
+  interface Props {
+    isDisabled: boolean;
+    isDownloading: boolean;
+    text?: string;
+  }
+
+  let { isDisabled, isDownloading = $bindable(), text = 'Generate Progress Report' }: Props = $props();

  function convertToPng() {
    isDownloading = true;
@@ -75,7 +75,7 @@
    <div class="flex flex-wrap justify-between gap-y-3 mt-3">
      {#each moods as mood}
        <button
-          on:click={() => {
+          onclick={() => {
            selectMood(mood);
          }}
          class="flex gap-3 items-center shadow-sm rounded-full px-4 py-1 bg-[#F1F6FF] hover:bg-[#0233BD] hover:text-white transition-all duration-700"
@@ -26,11 +26,13 @@

  let node: any;

-  $: nodeStore.set(node);
+  $effect(() => {
+    nodeStore.set(node);
+  });

-  $: rootBgImage = `https://assets.cdn.clsrio.com/progress-report/backgrounds/${
+  let rootBgImage = $derived(`https://assets.cdn.clsrio.com/progress-report/backgrounds/${
    $htmlBody.background || 'blue_tetiary_background'
-  }.webp`;
+  }.webp`);
 </script>

 <div
@@ -43,7 +45,7 @@
    {#if $openModal.fullscreen}
      <button
        type="button"
-        on:click={() => ($openModal.fullscreen = !$openModal.fullscreen)}
+        onclick={() => ($openModal.fullscreen = !$openModal.fullscreen)}
        class="absolute top-4 right-4 p-1.5 rounded-full hover:scale-90 transition-all duration-300 bg-white"
      >
        <img src="/free-tools/progress-report/close-icon.svg" alt="" class="" />
@@ -51,7 +53,7 @@
    {:else}
      <button
        type="button"
-        on:click={() => ($openModal.fullscreen = !$openModal.fullscreen)}
+        onclick={() => ($openModal.fullscreen = !$openModal.fullscreen)}
        class="absolute top-4 right-4 w-7 hover:scale-90 transition-all duration-300"
      >
        <img src="/free-tools/progress-report/full-screen-icon.svg" alt="" class="" />
@@ -118,7 +120,7 @@
            <div
              class="progress-range rounded-full w-full h-full"
              style="background: {$backgroundColor}; width: {$htmlBody.progress}%"
-            />
+></div>
          </div>
          <p class="text-[12px] font-semibold mt-1">Progress Achieved: {$htmlBody.progress}%</p>
        </div>
@@ -2,22 +2,36 @@
  import { sineInOut } from 'svelte/easing';
  import { fly } from 'svelte/transition';

-  export let activityName: string;
-  export let formattedTime: string;
-  export let displayTime: string;
-  export let resetTimer: () => void;
-  export let toggleSound: () => void;
-  export let toggleTimer: () => void;
-  export let restartTimer: () => void;
-  export let isPaused: boolean;
-  export let soundOn: boolean;
+  interface Props {
+    activityName: string;
+    formattedTime: string;
+    displayTime: string;
+    resetTimer: () => void;
+    toggleSound: () => void;
+    toggleTimer: () => void;
+    restartTimer: () => void;
+    isPaused: boolean;
+    soundOn: boolean;
+  }
+
+  let {
+    activityName,
+    formattedTime,
+    displayTime,
+    resetTimer,
+    toggleSound,
+    toggleTimer,
+    restartTimer,
+    isPaused,
+    soundOn
+  }: Props = $props();
 </script>

 <div transition:fly={{ y: 100, delay: 0, easing: sineInOut }}>
  <div class="px-6 pt-8 text-center">
    <button
      type="button"
-      on:click={resetTimer}
+      onclick={resetTimer}
      class="text-[10px] text-[#656565] font-semibold uppercase underline"
      >set timer for another activity</button
    >
@@ -36,7 +50,7 @@
  <div class="flex">
    <button
      type="button"
-      on:click={toggleSound}
+      onclick={toggleSound}
      class="bg-[#F7F7F7] w-[34%] flex flex-col gap-1 items-center uppercase text-[10px] py-5 md:py-10 rounded-bl-md hover:bg-[#F1F6FF] transition-all duration-500"
    >
      {#if soundOn}
@@ -48,7 +62,7 @@
    >
    <button
      type="button"
-      on:click={toggleTimer}
+      onclick={toggleTimer}
      class="bg-[#0F62FE] text-white w-[34%] flex flex-col gap-1 items-center uppercase text-[10px] py-5 md:py-10"
    >
      {#if isPaused}
@@ -60,7 +74,7 @@
    >
    <button
      type="button"
-      on:click={restartTimer}
+      onclick={restartTimer}
      class="bg-[#F7F7F7] w-[34%] flex flex-col gap-1 items-center uppercase text-[10px] py-5 md:py-10 rounded-br-md hover:bg-[#F1F6FF] transition-all duration-500"
    >
      <img src="/free-tools/stopwatch/reset-icon.svg" alt="" class="w-7 md:w-12" />
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
  import { sineInOut } from 'svelte/easing';
  import { fly } from 'svelte/transition';
  import WinningLine from './winning-line.svelte';
@@ -9,18 +11,22 @@
    click: (rowIndex: number, columnIndex: number) => Game;
  }

-  export let game: Game;
-  export let winner = null;
+  interface Props {
+    game: Game;
+    winner?: any;
+  }

-  let customDelay: number;
+  let { game = $bindable(), winner = null }: Props = $props();

-  $: {
+  let customDelay: number = $state();
+
+  run(() => {
    if ($changeToComputer.change) {
      customDelay = 400;
    } else {
      customDelay = 0;
    }
-  }
+  });
 </script>

 <div class="relative">
@@ -31,7 +37,7 @@
          {#each row as column, columnIndex}
            <td
              class="cursor-pointer text-center h-25 w-[1.5em] border-r-10 border-b-10 border-white last:border-r-0"
-              on:click={() => {
+              onclick={() => {
                game = game.click(rowIndex, columnIndex);
              }}
            >
@@ -10,7 +10,7 @@ changeToComputer.subscribe((value) => {
  }
 });

-export function TicTacToe({ onWin, onTie }: { onWin: (winner: any) => void, onTie: () => void }) {
+export function TicTacToe({ onWin, onTie }: { onWin: (winner: any) => void; onTie: () => void }) {
  const board = [
    ['', '', ''],
    ['', '', ''],
@@ -23,7 +23,7 @@ export function TicTacToe({ onWin, onTie }: { onWin: (winner: any) => void, onTi
  return {
    board,

-    click(rowIndex:number, columnIndex:number) {
+    click(rowIndex: number, columnIndex: number) {
      if (!done && !board[rowIndex][columnIndex]) {
        board[rowIndex][columnIndex] = turn;
        turn = turn === 'X' ? 'O' : 'X';
@@ -43,25 +43,24 @@ export function TicTacToe({ onWin, onTie }: { onWin: (winner: any) => void, onTi
          if (activateComp) {
            const aiMove = getBestMove(board);
            if (aiMove) {
-                board[aiMove.row][aiMove.column] = 'O';
-                turn = 'X';
-        
-                const aiWinner = getWinner(board);
-                if (aiWinner) {
-                    onWin(aiWinner);
-                    done = true;
-                } else if (isBoardFull(board)) {
-                    onTie();
-                    scores.update((currentScores) => {
-                        return { ...currentScores, draw: currentScores.draw + 1 };
-                    });
-                    done = true;
-                }
+              board[aiMove.row][aiMove.column] = 'O';
+              turn = 'X';
+
+              const aiWinner = getWinner(board);
+              if (aiWinner) {
+                onWin(aiWinner);
+                done = true;
+              } else if (isBoardFull(board)) {
+                onTie();
+                scores.update((currentScores) => {
+                  return { ...currentScores, draw: currentScores.draw + 1 };
+                });
+                done = true;
+              }
            } else {
-                console.error("AI could not find a valid move.");
+              console.error('AI could not find a valid move.');
            }
-        }
-        
+          }
        }
      }

@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store';
-import type {Writable} from 'svelte/store'
+import type { Writable } from 'svelte/store';

 interface Scores {
  X: number;
@@ -1,6 +1,12 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
  import { fade } from 'svelte/transition';
-  export let winner: Winner | null = null;
+  interface Props {
+    winner?: Winner | null;
+  }
+
+  let { winner = null }: Props = $props();

  interface Winner {
    direction: 'horizontal' | 'vertical' | 'diagonal';
@@ -9,13 +15,15 @@
    diagonal?: 'top-left-to-bottom-right' | 'top-right-to-bottom-left';
  }

-  $: if (winner) {
-    if (winner.direction === 'vertical' && winner.column !== undefined) {
-      document.documentElement.style.setProperty('--col-index', winner.column.toString());
-    } else if (winner.direction === 'horizontal' && winner.row !== undefined) {
-      document.documentElement.style.setProperty('--row-index', winner.row.toString());
+  run(() => {
+    if (winner) {
+      if (winner.direction === 'vertical' && winner.column !== undefined) {
+        document.documentElement.style.setProperty('--col-index', winner.column.toString());
+      } else if (winner.direction === 'horizontal' && winner.row !== undefined) {
+        document.documentElement.style.setProperty('--row-index', winner.row.toString());
+      }
    }
-  }
+  });
 </script>

 {#if winner}