Make improvements to experimental endpoint based on existing functionality

src/Form.tsx

@@ -2,7 +2,7 @@ import './Form.scss'
 import CheckboxInput from './inputs/Checkbox'
 import TogglableColorPicker from './inputs/TogglableColorPicker'
 import IntegerInput from './inputs/Integer'
-import { Color, SwatchConfig } from './types'
+import { Color, SwatchConfig, StaggerType } from './types'
 import { getRandomNotWhiteColor } from './colorHelpers'
 import { totalColorSequenceLength, presetPickerColors } from './colorSequenceHelpers'
 import { mod } from './numberHelpers'
@@ -14,7 +14,7 @@ function Form(
   {
     swatchData: SwatchConfig,
     setSwatchData: (data: SwatchConfig) => void,
-    staggerType?: 'normal' | 'colorStretched' | 'colorSwallowed',
+    staggerType?: StaggerType,
     showExperimentalFeatures: boolean,
     className?: string,
   }

src/Swatch.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 import { swatchMatrix, clusteredSwatchMatrix } from './swatchHelpers'
-import { StitchPattern, Color, ColorSequenceArray, ClusterConfiguration } from './types'
+import { StitchPattern, Color, ColorSequenceArray, ClusterConfiguration, StaggerType } from './types'
 import './Swatch.scss'
 
 const clusterConfiguration:Record<StitchPattern, (ClusterConfiguration | null)> = { //Todo: make this a class of some sort?
@@ -42,15 +42,15 @@ function Stitch ({color} : { color: Color}) {
 }
 
 function Swatch(
-  { colorSequence, stitchesPerRow, stitchPattern, numberOfRows = 40, colorShift = 0, staggerLengths = false, staggerType = "normal", className}
+  { colorSequence, stitchesPerRow, stitchPattern, numberOfRows = 40, colorShift = 0, staggerLengths = false, staggerType = 'normal', className}
   : {
     colorSequence: ColorSequenceArray,
     stitchesPerRow: number,
     stitchPattern: StitchPattern,
     numberOfRows?: number,
     colorShift?: number,
     staggerLengths?: boolean,
-    staggerType?: 'normal' | 'colorStretched' | 'colorSwallowed'
+    staggerType?: StaggerType,
     className?: string
   }
 ) {

src/SwatchWithForm.tsx

@@ -1,13 +1,13 @@
 import Swatch from './Swatch';
 import Form from './Form';
-import { SwatchConfig } from './types'
+import { SwatchConfig, StaggerType } from './types'
 import { useState } from 'react';
 import CheckboxInput from './inputs/Checkbox'
 
 function SwatchWithForm({swatchConfig, setSwatchConfig, staggerType, showExperimentalFeatures, showRowNumbersInitially, formClasses, swatchClasses}  : {
   swatchConfig: SwatchConfig,
   setSwatchConfig: (arg0: SwatchConfig) => void,
-  staggerType?: 'normal' | 'colorStretched' | 'colorSwallowed'
+  staggerType?: StaggerType,
   showExperimentalFeatures?: boolean,
   showRowNumbersInitially?: boolean,
   formClasses?: string,

src/inputs/Dropdown.tsx

@@ -1,12 +1,15 @@
+import ClickableTooltip from '../ClickableTooltip';
+
 function Dropdown(
-  { value, name, label, title, setValue, items }
+  { value, name, label, title, setValue, items, withTooltip }
   : {
       value: string,
       name: string,
       label: string,
       title: string,
       setValue: (value: string) => void,
       items: Array<{value: string, label: string}>,
+      withTooltip?: boolean,
     }
   ){
 
@@ -16,6 +19,7 @@ function Dropdown(
         <label htmlFor={name} title={title}>
           {label}
         </label>
+        { withTooltip ? <ClickableTooltip title={title} /> : '' }
       </div>
       <select
         onChange={

src/projects/DoloresParkTote.tsx

@@ -1,13 +1,11 @@
 import SwatchWithForm from '../SwatchWithForm';
-import { StitchPattern } from '../types'
+import { StitchPattern, StaggerType } from '../types'
 import { Fragment, useState, useEffect } from "react";
 import DropdownInput from '../inputs/Dropdown';
 import { dunaColorways, defaultDunaColorwayId } from '../colorways';
 import { totalColorSequenceLength, duplicateColorSequenceArray, matchColorwayToColorSequence } from '../colorSequenceHelpers';
 import { useSwatchConfigStateFromURLParams, useEffectToUpdateURLParamsFromSwatchConfig } from '../URLSwatchParams';
 
-type StaggerType = 'colorStretched' | 'colorSwallowed'
-
 function DoloresParkTote() {
   const initialColorway = dunaColorways[defaultDunaColorwayId]
   const initialColorSequence = duplicateColorSequenceArray(initialColorway.colorSequence)

src/projects/StretchLengths.test.tsx → src/projects/Experimental.test.tsx

@@ -1,13 +1,13 @@
 import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { MemoryRouter } from "react-router-dom";
-import StretchLengths from './StretchLengths'
+import Experimental from './Experimental'
 
-describe('StretchLengths', () => {
-  it('renders the StretchLengths component with a swatch in it', () => {
+describe('Experimental', () => {
+  it('renders the Experimental component with a swatch in it', () => {
     render(
       <MemoryRouter >
-        <StretchLengths />
+        <Experimental />
       </MemoryRouter>
     )
     expect(screen.getAllByTestId("swatch").length).toEqual(1)

src/projects/Experimental.tsx

@@ -0,0 +1,90 @@
+import SwatchWithForm from '../SwatchWithForm';
+import { StitchPattern, Color, StaggerType } from '../types'
+import { useSwatchConfigStateFromURLParams, useEffectToUpdateURLParamsFromSwatchConfig } from '../URLSwatchParams';
+import { useState } from "react";
+import ColorSequenceInfo from '../ColorSequenceInfo'
+import DropdownInput from '../inputs/Dropdown';
+import { totalColorSequenceLength } from '../colorSequenceHelpers'
+
+const red = "#ff001d" as Color;
+const cream = "#fcf7eb" as Color;
+const ltblue = "#8dd0f2" as Color;
+const navy = "#0e0e66" as Color;
+
+function Experimental() {
+  const defaultSwatchConfig = {
+    colorSequence: [
+      {color: navy, length: 3},
+      {color: red, length: 3},
+      {color: navy, length: 3},
+      {color: ltblue, length: 2},
+      {color: cream, length: 5},
+      {color: ltblue, length: 2},
+    ],
+    stitchesPerRow: 18, //Note: explicitly ok not saving zero from search params here
+    numberOfRows: 40, //Note: explicitly ok not pulling zero from search params here
+    colorShift: 0,
+    staggerLengths: false,
+    stitchPattern: StitchPattern.moss,
+  }
+
+  const { swatchConfig, setSwatchConfig, setSearchParams} = useSwatchConfigStateFromURLParams(defaultSwatchConfig);
+
+  const [staggerType, setStaggerType] = useState('normal' as StaggerType)
+
+  const setStaggerTypeFromDropdown = (newStaggerType: string) => {
+    setStaggerType(newStaggerType as StaggerType)
+  }
+
+  useEffectToUpdateURLParamsFromSwatchConfig(swatchConfig, setSearchParams)
+
+  const numStitches = swatchConfig.stitchesPerRow * swatchConfig.numberOfRows
+  const numColorSequences = numStitches/totalColorSequenceLength(swatchConfig.colorSequence)
+
+  return (
+    <div>
+      <p>This is an experimental page. It might change at anytime and URLs can break.</p>
+      <p>Here are the current features:</p>
+      <ul>
+        <li>there is a button to double your colors that makes a copy of all the colors</li>
+        <li>there&rsquo;s more info about the colors you see</li>
+        <li>you can change stagger type (not saved on url)</li>
+      </ul>
+      <p>If you don&apos;t know what I&apos;m talking about use the <a href='/'>main app.</a></p>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+        className='wide-first-column'
+      >
+        <fieldset>
+          <ColorSequenceInfo colorSequence={swatchConfig.colorSequence} colorShift={swatchConfig.colorShift}/>
+          <p>In this swatch:</p>
+          <pre>Number of stitches/clusters displayed (might be wrong with a stagger type): {numStitches}</pre>
+          <pre>Number of {swatchConfig.colorSequence.length}-color color sequences displayed: {numColorSequences.toFixed(1)}</pre>
+          <DropdownInput
+            label="Row alternating technique:"
+            name="staggerType"
+            title="This changes how the piece behaves at the boundary between the end of an even row and beginning of an odd row when the checkbox is checked"
+            value={staggerType}
+            setValue={setStaggerTypeFromDropdown}
+            withTooltip={true}
+            items={[
+              {label: 'Display odd rows and even rows with different lengths', value: 'normal'},
+              {label: 'Color stretching (increasing tension)', value: 'colorStretched'},
+              {label: 'Color swallowing (loosening tension)', value: 'colorSwallowed'},
+            ]}
+          />
+        </fieldset>
+      </form>
+      <SwatchWithForm
+        swatchConfig={swatchConfig}
+        setSwatchConfig={setSwatchConfig}
+        staggerType={staggerType}
+        showExperimentalFeatures={true}
+      />
+    </div>
+  );
+}
+
+export default Experimental;

src/projects/SwimLesson.tsx

@@ -1,14 +1,12 @@
 import './SwimLesson.scss';
 import SwatchWithForm from '../SwatchWithForm';
 import Swatch from '../Swatch';
-import { StitchPattern, ColorSequenceArray } from '../types'
+import { StitchPattern, ColorSequenceArray, StaggerType } from '../types'
 import { Fragment, useState } from "react";
 import DropdownInput from '../inputs/Dropdown';
 import { totalColorSequenceLength } from '../colorSequenceHelpers';
 import { useSwatchConfigStateFromURLParams, useEffectToUpdateURLParamsFromSwatchConfig } from '../URLSwatchParams';
 
-type StaggerType = 'colorStretched' | 'colorSwallowed'
-
 function SwimLesson() {
   const initialColorSequence = [
     { color: "#d6dfd7", length: 8 },

src/types.ts

@@ -1,5 +1,8 @@
 import { DeepReadonly } from 'ts-essentials'
 
+// consider making this an enum later. I can say `const foo = 'whatever' as StaggerType` right now.
+export type StaggerType = 'colorStretched' | 'colorSwallowed' | 'normal'
+
 export enum StitchPattern {
   unstyled = "unstyled",
   moss = "moss",

src/wrapper.tsx

@@ -6,7 +6,7 @@ import Preview from './projects/Preview'
 import Sunflower from './projects/Sunflower'
 import Doodle from './projects/Doodle'
 import LogoOption from './projects/LogoOption'
-import StretchLengths from './projects/StretchLengths'
+import Experimental from './projects/Experimental'
 import Parallax from './projects/Parallax'
 import DoloresParkTote from './projects/DoloresParkTote'
 import SwimLesson from './projects/SwimLesson'
@@ -37,7 +37,7 @@ const router = createBrowserRouter([
   },
   {
     path: "/experimental",
-    element: <StretchLengths/>
+    element: <Experimental/>
   },
   {
     path: "/parallax",