From 15dc6da418673f65c2c0a4d94a508d49832ef19b Mon Sep 17 00:00:00 2001 From: Justin Tervay Date: Sat, 25 Jul 2026 16:25:27 -0400 Subject: [PATCH 1/2] Chain pitch input --- app/lib/math/chains.test.ts | 113 ++++++++++++++---- app/lib/math/chains.ts | 21 ++-- app/routes/chains.tsx | 83 +++++++++---- playwright-tests/chains.spec.ts | 3 +- ...hain-unit-changed-Google-Chrome-linux.yaml | 11 +- ...magnitude-changed-Google-Chrome-linux.yaml | 11 +- ...nter-unit-changed-Google-Chrome-linux.yaml | 11 +- ...magnitude-changed-Google-Chrome-linux.yaml | 11 +- ...nter-unit-changed-Google-Chrome-linux.yaml | 11 +- ...rget-unit-changed-Google-Chrome-linux.yaml | 11 +- ...rDistance-changed-Google-Chrome-linux.yaml | 11 +- ...hDiameter-changed-Google-Chrome-linux.yaml | 11 +- .../p1Teeth-changed-Google-Chrome-linux.yaml | 11 +- ...hDiameter-changed-Google-Chrome-linux.yaml | 11 +- .../p2Teeth-changed-Google-Chrome-linux.yaml | 11 +- ...rget-unit-changed-Google-Chrome-linux.yaml | 11 +- ...rDistance-changed-Google-Chrome-linux.yaml | 11 +- playwright-tests/copy-link.spec.ts | 3 +- .../chains-restored-Google-Chrome-linux.yaml | 11 +- 19 files changed, 275 insertions(+), 102 deletions(-) diff --git a/app/lib/math/chains.test.ts b/app/lib/math/chains.test.ts index 0502abf03..7c390752b 100644 --- a/app/lib/math/chains.test.ts +++ b/app/lib/math/chains.test.ts @@ -5,39 +5,79 @@ import Measurement from '~/lib/models/Measurement'; describe('calculateCenterDistance', () => { it('calculates center distance correctly', () => { - const result = calculateCenterDistance('#25', 20, 30, 50); + const result = calculateCenterDistance( + new Measurement(0.25, 'in'), + 20, + 30, + 50, + ); expect(result.to('in').scalar).toBeCloseTo(3.099, 3); }); it('handles zero teeth for p1', () => { - const result = calculateCenterDistance('#25', 0, 30, 50); + const result = calculateCenterDistance( + new Measurement(0.25, 'in'), + 0, + 30, + 50, + ); expect(result.to('in').scalar).toBeCloseTo(4.206, 3); }); it('handles zero teeth for p2', () => { - const result = calculateCenterDistance('#25', 20, 0, 50); + const result = calculateCenterDistance( + new Measurement(0.25, 'in'), + 20, + 0, + 50, + ); expect(result.to('in').scalar).toBeCloseTo(4.936, 3); }); it('handles zero links', () => { - const result = calculateCenterDistance('#25', 20, 30, 0); + const result = calculateCenterDistance( + new Measurement(0.25, 'in'), + 20, + 30, + 0, + ); expect(result.to('in').scalar).toBeCloseTo(-0.026, 3); }); it('handles equal sprockets', () => { - const result = calculateCenterDistance('#25', 20, 20, 50); + const result = calculateCenterDistance( + new Measurement(0.25, 'in'), + 20, + 20, + 50, + ); expect(result.to('in').scalar).toBeCloseTo(3.75, 3); }); it('works with different chain types', () => { - const result25 = calculateCenterDistance('#25', 20, 30, 50); - const result35 = calculateCenterDistance('#35', 20, 30, 50); - const result40 = calculateCenterDistance('#40', 20, 30, 50); + const result25 = calculateCenterDistance( + new Measurement(0.25, 'in'), + 20, + 30, + 50, + ); + const result35 = calculateCenterDistance( + new Measurement(0.375, 'in'), + 20, + 30, + 50, + ); + const result40 = calculateCenterDistance( + new Measurement(0.5, 'in'), + 20, + 30, + 50, + ); expect(result25.to('in').scalar).toBeCloseTo(3.099, 3); expect(result35.to('in').scalar).toBeCloseTo(4.649, 3); @@ -46,13 +86,23 @@ describe('calculateCenterDistance', () => { }); it('handles very small number of links', () => { - const result = calculateCenterDistance('#25', 20, 30, 10); + const result = calculateCenterDistance( + new Measurement(0.25, 'in'), + 20, + 30, + 10, + ); expect(result.to('in').scalar).toBeCloseTo(-0.043, 3); }); it('handles large number of links', () => { - const result = calculateCenterDistance('#25', 20, 30, 200); + const result = calculateCenterDistance( + new Measurement(0.25, 'in'), + 20, + 30, + 200, + ); expect(result.to('in').scalar).toBeCloseTo(21.871, 3); }); @@ -61,7 +111,7 @@ describe('calculateCenterDistance', () => { describe('calculateCenters', () => { it('calculates centers correctly', () => { const result = calculateCenters( - '#25', + new Measurement(0.25, 'in'), 20, 30, new Measurement(10, 'in'), @@ -76,7 +126,7 @@ describe('calculateCenters', () => { it('handles zero desired center', () => { const result = calculateCenters( - '#25', + new Measurement(0.25, 'in'), 20, 30, new Measurement(0, 'in'), @@ -89,9 +139,24 @@ describe('calculateCenters', () => { expect(result.smaller.links).toBe(0); }); + it('handles zero pitch', () => { + const result = calculateCenters( + new Measurement(0, 'in'), + 20, + 30, + new Measurement(10, 'in'), + false, + ); + + expect(result.larger.distance.to('in').scalar).toBe(0); + expect(result.smaller.distance.to('in').scalar).toBe(0); + expect(result.larger.links).toBe(0); + expect(result.smaller.links).toBe(0); + }); + it('handles zero teeth for p1', () => { const result = calculateCenters( - '#25', + new Measurement(0.25, 'in'), 0, 30, new Measurement(10, 'in'), @@ -106,7 +171,7 @@ describe('calculateCenters', () => { it('handles zero teeth for p2', () => { const result = calculateCenters( - '#25', + new Measurement(0.25, 'in'), 20, 0, new Measurement(10, 'in'), @@ -121,7 +186,7 @@ describe('calculateCenters', () => { it('handles invalid configuration (pitch diameter too large)', () => { const result = calculateCenters( - '#25', + new Measurement(0.25, 'in'), 200, 200, new Measurement(1, 'in'), @@ -136,7 +201,7 @@ describe('calculateCenters', () => { it('works with allowHalfLinks true', () => { const result = calculateCenters( - '#25', + new Measurement(0.25, 'in'), 20, 30, new Measurement(10, 'in'), @@ -151,7 +216,7 @@ describe('calculateCenters', () => { it('works with allowHalfLinks false (rounds to even)', () => { const result = calculateCenters( - '#25', + new Measurement(0.25, 'in'), 20, 30, new Measurement(10, 'in'), @@ -166,7 +231,7 @@ describe('calculateCenters', () => { it('handles equal sprockets', () => { const result = calculateCenters( - '#25', + new Measurement(0.25, 'in'), 20, 20, new Measurement(10, 'in'), @@ -179,7 +244,7 @@ describe('calculateCenters', () => { it('handles very small desired center', () => { const result = calculateCenters( - '#25', + new Measurement(0.25, 'in'), 20, 30, new Measurement(0.1, 'in'), @@ -192,7 +257,7 @@ describe('calculateCenters', () => { it('handles very large desired center', () => { const result = calculateCenters( - '#25', + new Measurement(0.25, 'in'), 20, 30, new Measurement(100, 'in'), @@ -205,7 +270,13 @@ describe('calculateCenters', () => { it('calculates difference from target correctly', () => { const desiredCenter = new Measurement(10, 'in'); - const result = calculateCenters('#25', 20, 30, desiredCenter, false); + const result = calculateCenters( + new Measurement(0.25, 'in'), + 20, + 30, + desiredCenter, + false, + ); expect(result.larger.differenceFromTarget.to('in').scalar).toBeCloseTo( 0.117, diff --git a/app/lib/math/chains.ts b/app/lib/math/chains.ts index 64bf5940c..0e0ce8cfa 100644 --- a/app/lib/math/chains.ts +++ b/app/lib/math/chains.ts @@ -1,13 +1,12 @@ import Measurement from '~/lib/models/Measurement'; -import { SimpleSprocket } from '~/lib/models/Sprocket'; export function calculateCenterDistance( - chainType: string, + pitch: Measurement, p1Teeth: number, p2Teeth: number, links: number, ): Measurement { - const P = new SimpleSprocket(p1Teeth, chainType).pitch; + const P = pitch; const N = Math.max(p1Teeth, p2Teeth); const n = Math.min(p1Teeth, p2Teeth); const t1_ = 2 * links - N - n; @@ -26,17 +25,19 @@ export type ChainClosestCentersResult = { larger: Result; }; export function calculateCenters( - chainType: string, + pitch: Measurement, p1Teeth: number, p2Teeth: number, desiredCenter: Measurement, allowHalfLinks: boolean, ): ChainClosestCentersResult { if ( - [desiredCenter.scalar, p1Teeth, p2Teeth].includes(0) || - new SimpleSprocket(p1Teeth, chainType).pitchDiameter + [desiredCenter.scalar, p1Teeth, p2Teeth, pitch.scalar].includes(0) || + pitch + .mul(p1Teeth) + .div(Math.PI) .div(2) - .add(new SimpleSprocket(p2Teeth, chainType).pitchDiameter.div(2)) + .add(pitch.mul(p2Teeth).div(Math.PI).div(2)) .gt(desiredCenter) ) { return { @@ -56,7 +57,7 @@ export function calculateCenters( const z1 = p1Teeth; const z2 = p2Teeth; const c0 = desiredCenter; - const p = new SimpleSprocket(p1Teeth, chainType).pitch; + const p = pitch; const t1 = c0.mul(2).div(p); const t2 = (z1 + z2) / 2; const t3 = p.mul(Math.pow(Math.abs(z2 - z1) / (2 * Math.PI), 2)).div(c0); @@ -68,13 +69,13 @@ export function calculateCenters( allowHalfLinks ? Math.floor(n) : Math.floor(n / 2) * 2; const smallerDistance = calculateCenterDistance( - chainType, + pitch, z1, z2, roundLinksDown(x0), ); const largerDistance = calculateCenterDistance( - chainType, + pitch, z1, z2, roundLinksUp(x0), diff --git a/app/routes/chains.tsx b/app/routes/chains.tsx index aa89c3258..c17208474 100644 --- a/app/routes/chains.tsx +++ b/app/routes/chains.tsx @@ -9,20 +9,19 @@ import { MeasurementOutput, } from '~/components/recalc/io/measurement'; import NumberInput, { NumberOutput } from '~/components/recalc/io/number'; -import { StringSelectInput } from '~/components/recalc/io/stringSelect'; import { SprocketTable } from '~/components/recalc/sprocketTable'; +import { Button } from '~/components/ui/button'; +import { ButtonGroup } from '~/components/ui/button-group'; import { Card, CardContent, CardHeader, CardTitle } from '~/components/ui/card'; import { useQueryParams, useSerializedState } from '~/lib/hooks'; import { buildCalculatorApp, buildJsonLd, buildWebPage } from '~/lib/jsonld'; import { calculateCenters } from '~/lib/math/chains'; import Measurement from '~/lib/models/Measurement'; -import { SimpleSprocket } from '~/lib/models/Sprocket'; import { buildMeta, pageUrl } from '~/lib/seo'; import { BooleanParam, MeasurementParam, NumberParam, - StringParam, } from '~/lib/types/queryParams'; const CHAINS_PATH = '/chains'; @@ -57,7 +56,7 @@ export function meta() { } const DEFAULT_PARAMS = { - chain: StringParam.withDefault('#25'), + pitch: MeasurementParam.withDefault(new Measurement(0.25, 'in')), p1Teeth: NumberParam.withDefault(16), p2Teeth: NumberParam.withDefault(36), desiredCenter: MeasurementParam.withDefault(new Measurement(5, 'in')), @@ -68,7 +67,7 @@ const DEFAULT_PARAMS = { export default function Chains() { const queryParams = useQueryParams(DEFAULT_PARAMS); - const [chain, setChain] = useState(queryParams.chain); + const [pitch, setPitch] = useState(queryParams.pitch); const [p1Teeth, setP1Teeth] = useState(queryParams.p1Teeth); const [p2Teeth, setP2Teeth] = useState(queryParams.p2Teeth); const [desiredCenter, setDesiredCenter] = useState(queryParams.desiredCenter); @@ -77,18 +76,25 @@ export default function Chains() { queryParams.allowHalfLinks, ); + const activeChainType = useMemo(() => { + if (pitch.eq(new Measurement(0.25, 'in'))) return '#25'; + if (pitch.eq(new Measurement(0.375, 'in'))) return '#35'; + if (pitch.eq(new Measurement(8, 'mm'))) return '8mm'; + return null; + }, [pitch]); + const p1PitchDiameter = useMemo(() => { - return new SimpleSprocket(p1Teeth, chain).pitchDiameter; - }, [p1Teeth, chain]); + return pitch.mul(p1Teeth).div(Math.PI); + }, [p1Teeth, pitch]); const p2PitchDiameter = useMemo(() => { - return new SimpleSprocket(p2Teeth, chain).pitchDiameter; - }, [p2Teeth, chain]); + return pitch.mul(p2Teeth).div(Math.PI); + }, [p2Teeth, pitch]); const results = useMemo( () => - calculateCenters(chain, p1Teeth, p2Teeth, desiredCenter, allowHalfLinks), - [chain, p1Teeth, p2Teeth, desiredCenter, allowHalfLinks], + calculateCenters(pitch, p1Teeth, p2Teeth, desiredCenter, allowHalfLinks), + [pitch, p1Teeth, p2Teeth, desiredCenter, allowHalfLinks], ); const isSmallerChainSuggested = useMemo( @@ -100,7 +106,7 @@ export default function Chains() { ); const serializedState = useSerializedState(DEFAULT_PARAMS, { - chain, + pitch, p1Teeth, p2Teeth, desiredCenter, @@ -126,20 +132,47 @@ export default function Chains() {
+
+ + + + + +
+ - - +
+
+ {' '} +
+
+ +
+
@@ -273,7 +306,7 @@ export default function Chains() {
- sprocket.chainType === chain && + sprocket.pitch.eq(pitch) && (sprocket.teeth === p1Teeth || sprocket.teeth === p2Teeth) } /> diff --git a/playwright-tests/chains.spec.ts b/playwright-tests/chains.spec.ts index 1c2af93d7..bd5a7d97e 100644 --- a/playwright-tests/chains.spec.ts +++ b/playwright-tests/chains.spec.ts @@ -58,8 +58,7 @@ test.describe('Chain Calculator', () => { }); test('should match snapshot with chain changed', async ({ page }) => { - await page.getByTestId('chainType').click(); - await page.getByRole('option', { name: '#35' }).click(); + await page.getByRole('button', { name: '#35' }).click(); await page.waitForTimeout(100); expect(await page.getByTestId('entrypoint').ariaSnapshot()).toMatchSnapshot( { diff --git a/playwright-tests/chains.spec.ts-snapshots/chain-unit-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/chain-unit-changed-Google-Chrome-linux.yaml index 16cf0038d..fe0eb5c7c 100644 --- a/playwright-tests/chains.spec.ts-snapshots/chain-unit-changed-Google-Chrome-linux.yaml +++ b/playwright-tests/chains.spec.ts-snapshots/chain-unit-changed-Google-Chrome-linux.yaml @@ -3,11 +3,16 @@ - img - img - text: Copy Link -- text: Chain Type -- combobox: "#35" +- group: + - button "#25" + - button "#35" + - button "8mm" +- text: Pitch +- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.375" +- combobox: in - switch "Allow Half Links" - text: Allow Half Links Desired Center -- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5" +- spinbutton: "5" - combobox: in - text: Extra Center - spinbutton: "0" diff --git a/playwright-tests/chains.spec.ts-snapshots/desiredCenter-magnitude-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/desiredCenter-magnitude-changed-Google-Chrome-linux.yaml index 5cf509bde..712e8ca2a 100644 --- a/playwright-tests/chains.spec.ts-snapshots/desiredCenter-magnitude-changed-Google-Chrome-linux.yaml +++ b/playwright-tests/chains.spec.ts-snapshots/desiredCenter-magnitude-changed-Google-Chrome-linux.yaml @@ -3,11 +3,16 @@ - img - img - text: Copy Link -- text: Chain Type -- combobox: "#25" +- group: + - button "#25" + - button "#35" + - button "8mm" +- text: Pitch +- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25" +- combobox: in - switch "Allow Half Links" - text: Allow Half Links Desired Center -- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "10" +- spinbutton: "10" - combobox: in - text: Extra Center - spinbutton: "0" diff --git a/playwright-tests/chains.spec.ts-snapshots/desiredCenter-unit-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/desiredCenter-unit-changed-Google-Chrome-linux.yaml index a4c022275..b48f9259f 100644 --- a/playwright-tests/chains.spec.ts-snapshots/desiredCenter-unit-changed-Google-Chrome-linux.yaml +++ b/playwright-tests/chains.spec.ts-snapshots/desiredCenter-unit-changed-Google-Chrome-linux.yaml @@ -3,11 +3,16 @@ - img - img - text: Copy Link -- text: Chain Type -- combobox: "#25" +- group: + - button "#25" + - button "#35" + - button "8mm" +- text: Pitch +- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25" +- combobox: in - switch "Allow Half Links" - text: Allow Half Links Desired Center -- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5" +- spinbutton: "5" - combobox: ft - text: Extra Center - spinbutton: "0" diff --git a/playwright-tests/chains.spec.ts-snapshots/extraCenter-magnitude-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/extraCenter-magnitude-changed-Google-Chrome-linux.yaml index 359a061a5..92cc5e3af 100644 --- a/playwright-tests/chains.spec.ts-snapshots/extraCenter-magnitude-changed-Google-Chrome-linux.yaml +++ b/playwright-tests/chains.spec.ts-snapshots/extraCenter-magnitude-changed-Google-Chrome-linux.yaml @@ -3,11 +3,16 @@ - img - img - text: Copy Link -- text: Chain Type -- combobox: "#25" +- group: + - button "#25" + - button "#35" + - button "8mm" +- text: Pitch +- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25" +- combobox: in - switch "Allow Half Links" - text: Allow Half Links Desired Center -- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5" +- spinbutton: "5" - combobox: in - text: Extra Center - spinbutton: "1" diff --git a/playwright-tests/chains.spec.ts-snapshots/extraCenter-unit-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/extraCenter-unit-changed-Google-Chrome-linux.yaml index 647b5c2e3..b13086e96 100644 --- a/playwright-tests/chains.spec.ts-snapshots/extraCenter-unit-changed-Google-Chrome-linux.yaml +++ b/playwright-tests/chains.spec.ts-snapshots/extraCenter-unit-changed-Google-Chrome-linux.yaml @@ -3,11 +3,16 @@ - img - img - text: Copy Link -- text: Chain Type -- combobox: "#25" +- group: + - button "#25" + - button "#35" + - button "8mm" +- text: Pitch +- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25" +- combobox: in - switch "Allow Half Links" - text: Allow Half Links Desired Center -- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5" +- spinbutton: "5" - combobox: in - text: Extra Center - spinbutton: "1" diff --git a/playwright-tests/chains.spec.ts-snapshots/largerDiffFromTarget-unit-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/largerDiffFromTarget-unit-changed-Google-Chrome-linux.yaml index 6c470bfae..6dbbc8a78 100644 --- a/playwright-tests/chains.spec.ts-snapshots/largerDiffFromTarget-unit-changed-Google-Chrome-linux.yaml +++ b/playwright-tests/chains.spec.ts-snapshots/largerDiffFromTarget-unit-changed-Google-Chrome-linux.yaml @@ -3,11 +3,16 @@ - img - img - text: Copy Link -- text: Chain Type -- combobox: "#25" +- group: + - button "#25" + - button "#35" + - button "8mm" +- text: Pitch +- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25" +- combobox: in - switch "Allow Half Links" - text: Allow Half Links Desired Center -- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5" +- spinbutton: "5" - combobox: in - text: Extra Center - spinbutton: "0" diff --git a/playwright-tests/chains.spec.ts-snapshots/largerDistance-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/largerDistance-changed-Google-Chrome-linux.yaml index 11d5f9230..85e757344 100644 --- a/playwright-tests/chains.spec.ts-snapshots/largerDistance-changed-Google-Chrome-linux.yaml +++ b/playwright-tests/chains.spec.ts-snapshots/largerDistance-changed-Google-Chrome-linux.yaml @@ -3,11 +3,16 @@ - img - img - text: Copy Link -- text: Chain Type -- combobox: "#25" +- group: + - button "#25" + - button "#35" + - button "8mm" +- text: Pitch +- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25" +- combobox: in - switch "Allow Half Links" - text: Allow Half Links Desired Center -- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5" +- spinbutton: "5" - combobox: in - text: Extra Center - spinbutton: "0" diff --git a/playwright-tests/chains.spec.ts-snapshots/p1PitchDiameter-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/p1PitchDiameter-changed-Google-Chrome-linux.yaml index 5ffe3bd93..6c9ddd9e3 100644 --- a/playwright-tests/chains.spec.ts-snapshots/p1PitchDiameter-changed-Google-Chrome-linux.yaml +++ b/playwright-tests/chains.spec.ts-snapshots/p1PitchDiameter-changed-Google-Chrome-linux.yaml @@ -3,11 +3,16 @@ - img - img - text: Copy Link -- text: Chain Type -- combobox: "#25" +- group: + - button "#25" + - button "#35" + - button "8mm" +- text: Pitch +- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25" +- combobox: in - switch "Allow Half Links" - text: Allow Half Links Desired Center -- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5" +- spinbutton: "5" - combobox: in - text: Extra Center - spinbutton: "0" diff --git a/playwright-tests/chains.spec.ts-snapshots/p1Teeth-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/p1Teeth-changed-Google-Chrome-linux.yaml index f937130a7..95867b794 100644 --- a/playwright-tests/chains.spec.ts-snapshots/p1Teeth-changed-Google-Chrome-linux.yaml +++ b/playwright-tests/chains.spec.ts-snapshots/p1Teeth-changed-Google-Chrome-linux.yaml @@ -3,11 +3,16 @@ - img - img - text: Copy Link -- text: Chain Type -- combobox: "#25" +- group: + - button "#25" + - button "#35" + - button "8mm" +- text: Pitch +- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25" +- combobox: in - switch "Allow Half Links" - text: Allow Half Links Desired Center -- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5" +- spinbutton: "5" - combobox: in - text: Extra Center - spinbutton: "0" diff --git a/playwright-tests/chains.spec.ts-snapshots/p2PitchDiameter-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/p2PitchDiameter-changed-Google-Chrome-linux.yaml index 3f5989b79..30269df53 100644 --- a/playwright-tests/chains.spec.ts-snapshots/p2PitchDiameter-changed-Google-Chrome-linux.yaml +++ b/playwright-tests/chains.spec.ts-snapshots/p2PitchDiameter-changed-Google-Chrome-linux.yaml @@ -3,11 +3,16 @@ - img - img - text: Copy Link -- text: Chain Type -- combobox: "#25" +- group: + - button "#25" + - button "#35" + - button "8mm" +- text: Pitch +- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25" +- combobox: in - switch "Allow Half Links" - text: Allow Half Links Desired Center -- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5" +- spinbutton: "5" - combobox: in - text: Extra Center - spinbutton: "0" diff --git a/playwright-tests/chains.spec.ts-snapshots/p2Teeth-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/p2Teeth-changed-Google-Chrome-linux.yaml index 1f3a2fcc9..29f5eaa59 100644 --- a/playwright-tests/chains.spec.ts-snapshots/p2Teeth-changed-Google-Chrome-linux.yaml +++ b/playwright-tests/chains.spec.ts-snapshots/p2Teeth-changed-Google-Chrome-linux.yaml @@ -3,11 +3,16 @@ - img - img - text: Copy Link -- text: Chain Type -- combobox: "#25" +- group: + - button "#25" + - button "#35" + - button "8mm" +- text: Pitch +- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25" +- combobox: in - switch "Allow Half Links" - text: Allow Half Links Desired Center -- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5" +- spinbutton: "5" - combobox: in - text: Extra Center - spinbutton: "0" diff --git a/playwright-tests/chains.spec.ts-snapshots/smallerDiffFromTarget-unit-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/smallerDiffFromTarget-unit-changed-Google-Chrome-linux.yaml index f21ddc5c3..8497e58e1 100644 --- a/playwright-tests/chains.spec.ts-snapshots/smallerDiffFromTarget-unit-changed-Google-Chrome-linux.yaml +++ b/playwright-tests/chains.spec.ts-snapshots/smallerDiffFromTarget-unit-changed-Google-Chrome-linux.yaml @@ -3,11 +3,16 @@ - img - img - text: Copy Link -- text: Chain Type -- combobox: "#25" +- group: + - button "#25" + - button "#35" + - button "8mm" +- text: Pitch +- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25" +- combobox: in - switch "Allow Half Links" - text: Allow Half Links Desired Center -- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5" +- spinbutton: "5" - combobox: in - text: Extra Center - spinbutton: "0" diff --git a/playwright-tests/chains.spec.ts-snapshots/smallerDistance-changed-Google-Chrome-linux.yaml b/playwright-tests/chains.spec.ts-snapshots/smallerDistance-changed-Google-Chrome-linux.yaml index b0537a1fc..bbc3ec598 100644 --- a/playwright-tests/chains.spec.ts-snapshots/smallerDistance-changed-Google-Chrome-linux.yaml +++ b/playwright-tests/chains.spec.ts-snapshots/smallerDistance-changed-Google-Chrome-linux.yaml @@ -3,11 +3,16 @@ - img - img - text: Copy Link -- text: Chain Type -- combobox: "#25" +- group: + - button "#25" + - button "#35" + - button "8mm" +- text: Pitch +- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.25" +- combobox: in - switch "Allow Half Links" - text: Allow Half Links Desired Center -- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "5" +- spinbutton: "5" - combobox: in - text: Extra Center - spinbutton: "0" diff --git a/playwright-tests/copy-link.spec.ts b/playwright-tests/copy-link.spec.ts index 3b2ae5b9a..3089d72d8 100644 --- a/playwright-tests/copy-link.spec.ts +++ b/playwright-tests/copy-link.spec.ts @@ -51,8 +51,7 @@ test.describe('Copy Link', () => { await page.goto('/chains'); await page.waitForLoadState('networkidle'); - await page.getByTestId('chainType').click(); - await page.getByRole('option', { name: '#35' }).click(); + await page.getByRole('button', { name: '#35' }).click(); await page.getByTestId('p1Teeth').fill('20'); await page.getByTestId('p2Teeth').fill('40'); await page.getByTestId('desiredCenter').fill('8'); diff --git a/playwright-tests/copy-link.spec.ts-snapshots/chains-restored-Google-Chrome-linux.yaml b/playwright-tests/copy-link.spec.ts-snapshots/chains-restored-Google-Chrome-linux.yaml index 5a9fab7e2..19bcbbff1 100644 --- a/playwright-tests/copy-link.spec.ts-snapshots/chains-restored-Google-Chrome-linux.yaml +++ b/playwright-tests/copy-link.spec.ts-snapshots/chains-restored-Google-Chrome-linux.yaml @@ -3,11 +3,16 @@ - img - img - text: Copy Link -- text: Chain Type -- combobox: "#35" +- group: + - button "#25" + - button "#35" + - button "8mm" +- text: Pitch +- spinbutton "Pitch Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "0.375" +- combobox: in - switch "Allow Half Links" [checked] - text: Allow Half Links Desired Center -- spinbutton "Desired Center Extra Center Pitch Diameter Pitch Diameter Chain Links Center Distance Difference From Target Chain Links Center Distance Difference From Target": "8" +- spinbutton: "8" - combobox: in - text: Extra Center - spinbutton: "1" From f64fca19388872b2e82e388c91a8e9e0da7c3d00 Mon Sep 17 00:00:00 2001 From: Justin Tervay Date: Sat, 25 Jul 2026 17:25:13 -0400 Subject: [PATCH 2/2] fix mobile --- app/components/recalc/calcHeading.tsx | 6 ++- app/root.tsx | 5 +- app/routes/arm.tsx | 12 +++-- app/routes/chains.tsx | 4 +- app/routes/flywheel.tsx | 16 ++++--- app/routes/intake.tsx | 16 ++++--- app/routes/linear.tsx | 69 +++++++++++++++++---------- 7 files changed, 80 insertions(+), 48 deletions(-) diff --git a/app/components/recalc/calcHeading.tsx b/app/components/recalc/calcHeading.tsx index b7e6cfe58..62f072fd8 100644 --- a/app/components/recalc/calcHeading.tsx +++ b/app/components/recalc/calcHeading.tsx @@ -41,8 +41,10 @@ export default function CalcHeading({ }, [copied]); return ( -
-

{title}

+
+

+ {title} +