fix: building working, (lots of bugs)

2026-06-06 11:44:40 +00:00 · 2024-09-02 21:46:48 +10:00
parent 99a3166fa4
commit 2f08d6ee08
107 changed files with 1113 additions and 37 deletions
@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let onClick: () => void;
+  export let text: string;
+</script>
+
+<button on:click={onClick} class='px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md'>
+  {text}
+</button>
@@ -0,0 +1,129 @@
+<!-- <script lang="ts">
+  import { onMount } from 'svelte';
+  import iro from '@jaames/iro';
+
+  type GradientStop = { color: string; position: number };
+
+  let ColorPicker: iro.ColorPicker;
+  let gradientStops: GradientStop[] = [
+    { color: '#ff0000', position: 0 },
+    { color: '#00ff00', position: 0.5 },
+    { color: '#0000ff', position: 1 },
+  ];
+  let currentStop = 0;
+  let draggingStop = -1;
+  let initialDragPosition = 0;
+
+  onMount(() => {
+    ColorPicker = new (iro.ColorPicker as any)('#picker', {
+      width: 320,
+      color: gradientStops[0].color,
+      layout: [
+        {
+          component: iro.ui.Box,
+        },
+        {
+          component: iro.ui.Slider,
+          options: {
+            id: 'hue-slider',
+            sliderType: 'hue',
+          },
+        },
+        {
+          component: iro.ui.Slider,
+          options: {
+            id: 'alpha-slider',
+            sliderType: 'alpha',
+          },
+        },
+      ],
+    });
+
+    ColorPicker.on('color:change', () => {
+      gradientStops[currentStop].color = ColorPicker.color.rgbaString;
+    });
+
+    console.log(ColorPicker.color.rgba);
+  });
+
+  function handleDragStart(event: PointerEvent, index: number) {
+    if (draggingStop !== -1) {
+      // Prevent starting a new drag if one is already in progress.
+      event.preventDefault(); // This stops the pointerdown event from taking any effect.
+      return;
+    }
+
+    draggingStop = index; // Mark this stop as being dragged.
+    initialDragPosition = event.clientX;
+  }
+
+  function handleDragMove(event: PointerEvent) {
+    if (draggingStop === -1) return;
+
+    const container = event.currentTarget as HTMLDivElement;
+    const stopWidth = container.offsetWidth;
+    const containerOffset = container.getBoundingClientRect().left;
+    const relativePosition = (event.clientX - containerOffset) / stopWidth;
+
+    const sortedStops = [...gradientStops];
+    sortedStops.sort((a, b) => a.position - b.position);
+
+    const prevStopIndex = sortedStops.findIndex(
+      (stop, index) => index < draggingStop && stop.position < relativePosition
+    );
+    const nextStopIndex = sortedStops.findIndex(
+      (stop, index) => index > draggingStop && stop.position > relativePosition
+    );
+
+    const prevStop = prevStopIndex >= 0 ? sortedStops[prevStopIndex] : { position: 0 };
+    const nextStop = nextStopIndex >= 0 ? sortedStops[nextStopIndex] : { position: 1 };
+
+    const clampedPosition = Math.max(prevStop.position, Math.min(nextStop.position, relativePosition));
+
+    const newGradientStops = gradientStops.slice();
+    newGradientStops.sort((a, b) => a.position - b.position);
+
+    const draggedStop = newGradientStops[draggingStop];
+    newGradientStops.splice(draggingStop, 1);
+
+    const insertIndex = newGradientStops.findIndex(stop => stop.position >= clampedPosition);
+    newGradientStops.splice(insertIndex, 0, { ...draggedStop, position: clampedPosition });
+
+    gradientStops = newGradientStops;
+  }
+
+  function handleDragEnd() {
+    draggingStop = -1;
+  }
+</script>
+
+<div
+  class="w-16 h-8 rounded-md swatch"
+  style="background: linear-gradient(to right, {gradientStops
+    .map(({ color, position }) => `${color} ${position * 100}%`)
+    .join(', ')});"
+></div>
+<div class="fixed top-0 left-0 z-20 flex flex-col w-48 h-32 gap-8">
+  <div id="picker"></div>
+
+  <div
+    class="w-[320px] h-4 relative"
+    style={`background: linear-gradient(to right, ${gradientStops
+      .map(({ color, position }) => `${color} ${position * 100}%`)
+      .join(', ')});`}
+    on:pointermove={handleDragMove}
+    on:pointerup={handleDragEnd}
+  >
+    <span class="opacity-0">This makes the gradient show up</span>
+    {#each gradientStops as { position }, index}
+      <button
+        class="absolute w-4 h-4 bg-white rounded-md top-1/2"
+        style={`left: ${position * 100}%; transform: translate(-50%, -50%);`}
+        on:click={() => (currentStop = index)}
+        on:pointerdown={(event) => handleDragStart(event, index)}
+      ></button>
+    {/each}
+  </div>
+</div> -->
+
+<script></script>
@@ -0,0 +1,36 @@
+<script lang="ts">
+  export let state: number;
+  export let onChange: (value: number) => void;
+</script>
+
+<div class="relative w-full max-w-lg py-8 mx-auto">
+  <input
+    type="range"
+    min="0"
+    max="100"
+    bind:value={state}
+    on:change={(e) => onChange(Number(e.currentTarget.value))}
+    class="w-full h-1 rounded-full appearance-none cursor-pointer dark:bg-[#38373D] bg-[#DDDDDD] slider"
+  />
+</div>
+
+<style>
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 24px;
+    height: 24px;
+    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+    background: white;
+    cursor: pointer;
+    border-radius: 50%;
+  }
+
+  .slider::-moz-range-thumb {
+    width: 24px;
+    height: 24px;
+    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+    background: white;
+    cursor: pointer;
+    border-radius: 50%;
+  }
+</style>
@@ -0,0 +1,4 @@
+.dark .switch[data-ison="true"],
+.switch[data-ison="true"] {
+  background-color: #30D259;
+}
@@ -0,0 +1,64 @@
+<script>
+	import { settingsState } from '../state/SettingsState.ts';
+  import { animate, spring } from 'motion';
+  import './Switch.css'
+  import { onMount } from "svelte"
+  import { delay } from "../../seqta/utils/delay"
+
+  export let setting;
+  export let onChange = () => {}
+
+  const toggleSwitch = () => {
+    const newIsOn = !$settingsState[setting]
+    onChange(newIsOn)
+  }
+
+  const springParams = {
+    type: 'spring',
+    stiffness: 700,
+    damping: 30,
+  }
+
+  let handle;
+
+  const animation = (enabled) => {
+    if (handle) {
+      animate(
+        handle,
+        {
+          x: enabled ? 24 : 0,
+        },
+        {
+          easing: spring({ stiffness: 500, damping: 30 })
+        }
+      )
+    }
+  }
+
+  $: ((enabled) => {
+      if (handle) {
+        animate(
+          handle,
+          { x: enabled ? 24 : 0 },
+          { easing: spring({ stiffness: 500, damping: 30 }) }
+        )
+      }
+    })($settingsState[setting])
+
+</script>
+
+<div
+  id={setting}
+  class="flex w-14 p-1 cursor-pointer transition rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch"
+  data-ison={$settingsState[setting]}
+  on:click={toggleSwitch}
+  on:keydown={(e) => e.key === "Enter" && toggleSwitch()}
+  role="switch"
+  aria-checked={$settingsState[setting]}
+  tabindex="0"
+>
+  <div
+    bind:this={handle}
+    class="w-6 h-6 bg-white dark:bg-[#FEFEFE] rounded-full drop-shadow-md"
+  />
+</div>
@@ -0,0 +1,3 @@
+.tab-width {
+  width: var(--tab-width);
+}
@@ -0,0 +1,83 @@
+<script>
+  import { MotionDiv } from 'svelte-motion';
+  import { onMount, onDestroy } from 'svelte';
+  import { writable, derived } from 'svelte/store';
+  import './TabbedContainer.css';
+
+  export let tabs = [];
+
+  let activeTab = writable(0);
+  const hoveredTab = writable(null);
+  const position = writable(0);
+  let tabWidth = 0;
+  let containerRef;
+
+  const springTransition = { type: 'spring', stiffness: 250, damping: 25 };
+
+  // Calculate tabWidth dynamically based on tabs length
+  onMount(() => {
+    if (containerRef) {
+
+      tabWidth = 100 / tabs.length;
+      document.documentElement.style.setProperty('--tab-width', `${tabWidth}%`);
+
+      calcXPos = (index) => tabWidth * (index !== null ? index : $activeTab) * (containerRef !== null ? containerRef.getBoundingClientRect().width : 0) / 100;
+    }
+
+    // Listen for messages
+    const handleMessage = (event) => {
+      if (event.data === "popupClosed") {
+        activeTab.set(0);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  });
+
+  let calcXPos = (index) => tabWidth * (index !== null ? index : $activeTab);
+</script>
+
+<div bind:this={containerRef} class="top-0 z-10 text-[0.875rem] pb-0.5 mx-4">
+  <div class="hidden tab-width"></div>
+  <div class="relative flex">
+    <MotionDiv
+      class="absolute top-0 left-0 z-0 h-full bg-[#DDDDDD] dark:bg-[#38373D] tab-width rounded-full opacity-40"
+      animate={{ x: calcXPos($hoveredTab) }}
+      transition={springTransition}
+    />
+    {#each tabs as { title }, index}
+      <button
+        class="relative z-10 flex-1 px-4 py-2"
+        on:click={() => activeTab.set(index)}
+        on:mouseenter={() => hoveredTab.set(index)}
+        on:mouseleave={() => hoveredTab.set(null)}
+      >
+        {title}
+      </button>
+    {/each}
+  </div>
+</div>
+<div class="h-full px-4 overflow-y-scroll overflow-x-clip">
+  <MotionDiv
+    animate={{ x: `${-$activeTab * 100}%` }}
+    transition={springTransition}
+  >
+    <div class="flex">
+      {#each tabs as { content }, index}
+      <div class="absolute w-full transition-opacity duration-300 pb-4 {$activeTab === index ? 'opacity-100' : 'opacity-0'}"
+        style="left: {index * 100}%;">
+        <svelte:component this={content} />
+      </div>
+      {/each}
+    </div>
+  </MotionDiv>
+</div>
+
+<style>
+  :root {
+    --tab-width: 0px;
+  }
+</style>