Merge pull request #611 from Sped0n/fix-432

Fix 432

Author: Sped0n

assets/ts/configState.tsx

@@ -0,0 +1,91 @@
+import {
+  createContext,
+  createMemo,
+  createSignal,
+  useContext,
+  type Accessor,
+  type JSX
+} from 'solid-js'
+import invariant from 'tiny-invariant'
+
+import { getThresholdSessionIndex } from './utils'
+
+export interface ThresholdRelated {
+  threshold: number
+  trailLength: number
+}
+
+export interface ConfigState {
+  thresholdIndex: number
+  threshold: number
+  trailLength: number
+}
+
+export type ConfigStateContextType = readonly [
+  Accessor<ConfigState>,
+  {
+    readonly incThreshold: () => void
+    readonly decThreshold: () => void
+  }
+]
+
+const thresholds: ThresholdRelated[] = [
+  { threshold: 20, trailLength: 20 },
+  { threshold: 40, trailLength: 10 },
+  { threshold: 80, trailLength: 5 },
+  { threshold: 140, trailLength: 5 },
+  { threshold: 200, trailLength: 5 }
+]
+
+const ConfigStateContext = createContext<ConfigStateContextType>()
+
+function getSafeThresholdIndex(): number {
+  const index = getThresholdSessionIndex()
+  if (index < 0 || index >= thresholds.length) return 2
+  return index
+}
+
+export function ConfigStateProvider(props: { children?: JSX.Element }): JSX.Element {
+  const [thresholdIndex, setThresholdIndex] = createSignal(getSafeThresholdIndex())
+
+  const state = createMemo<ConfigState>(() => {
+    const current = thresholds[thresholdIndex()]
+
+    return {
+      thresholdIndex: thresholdIndex(),
+      threshold: current.threshold,
+      trailLength: current.trailLength
+    }
+  })
+
+  const updateThreshold = (stride: number): void => {
+    const nextIndex = thresholdIndex() + stride
+    if (nextIndex < 0 || nextIndex >= thresholds.length) return
+    sessionStorage.setItem('thresholdsIndex', nextIndex.toString())
+    setThresholdIndex(nextIndex)
+  }
+
+  return (
+    <ConfigStateContext.Provider
+      value={[
+        state,
+        {
+          incThreshold: () => {
+            updateThreshold(1)
+          },
+          decThreshold: () => {
+            updateThreshold(-1)
+          }
+        }
+      ]}
+    >
+      {props.children}
+    </ConfigStateContext.Provider>
+  )
+}
+
+export function useConfigState(): ConfigStateContextType {
+  const context = useContext(ConfigStateContext)
+  invariant(context, 'undefined config context')
+  return context
+}

assets/ts/desktop/customCursor.tsx

@@ -4,7 +4,6 @@ export default function CustomCursor(props: {
   children?: JSX.Element
   active: Accessor<boolean>
   cursorText: Accessor<string>
-  isOpen: Accessor<boolean>
 }): JSX.Element {
   // types
   interface XY {

assets/ts/desktop/layout.tsx

@@ -1,12 +1,12 @@
-import { Show, createMemo, createSignal, type JSX } from 'solid-js'
+import { Show, createMemo, type JSX } from 'solid-js'
 
-import type { ImageJSON } from '../resources'
-import type { Vector } from '../utils'
+import { useImageState } from '../imageState'
 
 import CustomCursor from './customCursor'
 import Nav from './nav'
 import Stage from './stage'
 import StageNav from './stageNav'
+import { useDesktopState } from './state'
 
 /**
  * interfaces and types
@@ -23,65 +23,36 @@ export interface DesktopImage extends HTMLImageElement {
   }
 }
 
-export interface HistoryItem {
-  i: number
-  x: number
-  y: number
-}
-
 /**
  * components
  */
 
 export default function Desktop(props: {
   children?: JSX.Element
-  ijs: ImageJSON[]
   prevText: string
   closeText: string
   nextText: string
   loadingText: string
 }): JSX.Element {
-  const [cordHist, setCordHist] = createSignal<HistoryItem[]>([])
-  const [isLoading, setIsLoading] = createSignal(false)
-  const [isOpen, setIsOpen] = createSignal(false)
-  const [isAnimating, setIsAnimating] = createSignal(false)
-  const [hoverText, setHoverText] = createSignal('')
-  const [navVector, setNavVector] = createSignal<Vector>('none')
+  const imageState = useImageState()
+  const [desktop] = useDesktopState()
 
-  const active = createMemo(() => isOpen() && !isAnimating())
-  const cursorText = createMemo(() => (isLoading() ? props.loadingText : hoverText()))
+  const active = createMemo(() => desktop.isOpen() && !desktop.isAnimating())
+  const cursorText = createMemo(() =>
+    desktop.isLoading() ? props.loadingText : desktop.hoverText()
+  )
 
   return (
     <>
       <Nav />
-      <Show when={props.ijs.length > 0}>
-        <Stage
-          ijs={props.ijs}
-          setIsLoading={setIsLoading}
-          isOpen={isOpen}
-          setIsOpen={setIsOpen}
-          isAnimating={isAnimating}
-          setIsAnimating={setIsAnimating}
-          cordHist={cordHist}
-          setCordHist={setCordHist}
-          navVector={navVector}
-          setNavVector={setNavVector}
-        />
-        <Show when={isOpen()}>
-          <CustomCursor cursorText={cursorText} active={active} isOpen={isOpen} />
+      <Show when={imageState().length > 0}>
+        <Stage />
+        <Show when={desktop.isOpen()}>
+          <CustomCursor cursorText={cursorText} active={active} />
           <StageNav
             prevText={props.prevText}
             closeText={props.closeText}
             nextText={props.nextText}
-            loadingText={props.loadingText}
-            active={active}
-            isAnimating={isAnimating}
-            setCordHist={setCordHist}
-            isOpen={isOpen}
-            setIsOpen={setIsOpen}
-            setHoverText={setHoverText}
-            navVector={navVector}
-            setNavVector={setNavVector}
           />
         </Show>
       </Show>

assets/ts/desktop/nav.tsx

@@ -1,66 +1,68 @@
-import { createEffect } from 'solid-js'
+import { createEffect, onCleanup, onMount } from 'solid-js'
 
-import { useState } from '../state'
+import { useConfigState } from '../configState'
+import { useImageState } from '../imageState'
 import { expand } from '../utils'
 
-/**
- * constants
- */
+import { useDesktopState } from './state'
 
-// threshold div
-const thresholdDiv = document.getElementsByClassName('threshold')[0] as HTMLDivElement
-// threshold nums span
-const thresholdDispNums = Array.from(
-  thresholdDiv.getElementsByClassName('num')
-) as HTMLSpanElement[]
-// threshold buttons
-const decButton = thresholdDiv
-  .getElementsByClassName('dec')
-  .item(0) as HTMLButtonElement
-const incButton = thresholdDiv
-  .getElementsByClassName('inc')
-  .item(0) as HTMLButtonElement
-// index div
-const indexDiv = document.getElementsByClassName('index').item(0) as HTMLDivElement
-// index nums span
-const indexDispNums = Array.from(
-  indexDiv.getElementsByClassName('num')
-) as HTMLSpanElement[]
+export default function Nav(): null {
+  let thresholdNums: HTMLSpanElement[] = []
+  let indexNums: HTMLSpanElement[] = []
+  let decButton: HTMLButtonElement | undefined
+  let incButton: HTMLButtonElement | undefined
+  let controller: AbortController | undefined
 
-/**
- * helper functions
- */
+  const imageState = useImageState()
+  const [config, { incThreshold, decThreshold }] = useConfigState()
+  const [desktop] = useDesktopState()
 
-function updateThresholdText(thresholdValue: string): void {
-  thresholdDispNums.forEach((e: HTMLSpanElement, i: number) => {
-    e.innerText = thresholdValue[i]
-  })
-}
+  const updateThresholdText = (thresholdValue: string): void => {
+    thresholdNums.forEach((element, i) => {
+      element.innerText = thresholdValue[i]
+    })
+  }
 
-function updateIndexText(indexValue: string, indexLength: string): void {
-  indexDispNums.forEach((e: HTMLSpanElement, i: number) => {
-    if (i < 4) {
-      e.innerText = indexValue[i]
-    } else {
-      e.innerText = indexLength[i - 4]
-    }
-  })
-}
+  const updateIndexText = (indexValue: string, indexLength: string): void => {
+    indexNums.forEach((element, i) => {
+      if (i < 4) {
+        element.innerText = indexValue[i]
+      } else {
+        element.innerText = indexLength[i - 4]
+      }
+    })
+  }
 
-/**
- * Nav component
- */
+  onMount(() => {
+    const thresholdDiv = document.getElementsByClassName(
+      'threshold'
+    )[0] as HTMLDivElement
+    const indexDiv = document.getElementsByClassName('index').item(0) as HTMLDivElement
 
-export default function Nav(): null {
-  const [state, { incThreshold, decThreshold }] = useState()
+    thresholdNums = Array.from(
+      thresholdDiv.getElementsByClassName('num')
+    ) as HTMLSpanElement[]
+    indexNums = Array.from(indexDiv.getElementsByClassName('num')) as HTMLSpanElement[]
+    decButton = thresholdDiv.getElementsByClassName('dec').item(0) as HTMLButtonElement
+    incButton = thresholdDiv.getElementsByClassName('inc').item(0) as HTMLButtonElement
+
+    controller = new AbortController()
+    const signal = controller.signal
+
+    decButton.addEventListener('click', decThreshold, { signal })
+    incButton.addEventListener('click', incThreshold, { signal })
+  })
 
   createEffect(() => {
-    updateIndexText(expand(state().index + 1), expand(state().length))
-    updateThresholdText(expand(state().threshold))
+    if (thresholdNums.length === 0 || indexNums.length === 0) return
+
+    updateIndexText(expand(desktop.index() + 1), expand(imageState().length))
+    updateThresholdText(expand(config().threshold))
   })
 
-  decButton.onclick = decThreshold
-  incButton.onclick = incThreshold
+  onCleanup(() => {
+    controller?.abort()
+  })
 
   return null
 }