feat(tans-theorem): unify animation progress bar

JMaio · Sep 6, 2021 · 1612234 · 1612234
1 parent d88acd3
commit 1612234
Show file tree

Hide file tree

Showing 12 changed files with 466 additions and 489 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -53,14 +53,11 @@ import {
   PreperiodicPoint,
   similarPoints,
 } from './components/tans_theorem/tansTheoremUtils';
-import SimilarityAnimationCard from './components/tans_theorem/SimilarityAnimationCard';
-import PointsMenuJulia from './components/tans_theorem/PointsMenuJulia';
-import PointsMenuMandelbrot from './components/tans_theorem/PointsMenuMandelbrot';
 import MapMarkerManager from './components/tans_theorem/MapMarkerManager';
-import ZoomMenu from './components/tans_theorem/ZoomMenu';
 import NearestMisiurewiczCard from './components/tans_theorem/NearestMisiurewiczCard';
 import SelfSimilaritySlider from './components/tans_theorem/SelfSimilaritySlider';
-import IntroCard from './components/tans_theorem/IntroDialog';
+import IntroDialog from './components/tans_theorem/IntroDialog';
+import TansTheoremProgressCard from './components/tans_theorem/TansTheoremProgressCard';
 import { misiurewiczPairs } from './components/tans_theorem/MPoints';
 
 const MISIUREWICZ_POINTS: PreperiodicPoint[] = misiurewiczPairs
@@ -349,27 +346,13 @@ function App({ settings }: { settings: settingsDefinitionsType }): JSX.Element {
   useInterval(updateAspectRatio, 1000);
 
   const handleNearest = (xy: XYType) => {
-    const mPoint = findNearestMisiurewiczPoint(xy, 1000);
+    const mPoint = findNearestMisiurewiczPoint(xy, 10000);
     if (mPoint[0] !== 0 && mPoint[1] !== 0) {
       const p = new PreperiodicPoint(mPoint, mPoint, false);
       handleMisiurewiczPointSelection(p);
     }
   };
 
-  const handleMisiurewiczGo = () => {
-    setAnimationState(AnimationStatus.SELECT_JULIA_POINT);
-    warpToPoint(mandelbrotControls, {
-      xy: focusedPointMandelbrot.point,
-      z: 1,
-      theta: 0,
-    });
-    warpToPoint(juliaControls, {
-      xy: [0, 0],
-      z: 0.5,
-      theta: 0,
-    });
-  };
-
   return (
     <>
       <Grid container>
@@ -399,7 +382,7 @@ function App({ settings }: { settings: settingsDefinitionsType }): JSX.Element {
                 top: 0,
               }}
             >
-              <IntroCard
+              <IntroDialog
                 show={animationState === AnimationStatus.INTRO}
                 handleGo={() => {
                   setAnimationState(AnimationStatus.SELECT_MANDELBROT_POINT);
@@ -414,20 +397,12 @@ function App({ settings }: { settings: settingsDefinitionsType }): JSX.Element {
                 AnimationStatus.ROTATE_M,
                 AnimationStatus.ROTATE_J,
               ].includes(animationState) ? (
-                <SimilarityAnimationCard
-                  show={
-                    showTan &&
-                    [
-                      AnimationStatus.INTRO,
-                      AnimationStatus.SELECT_MANDELBROT_POINT,
-                      AnimationStatus.SELECT_JULIA_POINT,
-                      AnimationStatus.ZOOM_M,
-                      AnimationStatus.ZOOM_J,
-                      AnimationStatus.ROTATE_M,
-                      AnimationStatus.ROTATE_J,
-                    ].includes(animationState)
-                  }
+                <TansTheoremProgressCard
+                  handleQuit={handleQuit}
+                  mandelbrotControls={mandelbrotControls}
+                  juliaControls={juliaControls}
                   animationState={animationState}
+                  setAnimationState={setAnimationState}
                   focusedPointMandelbrot={focusedPointMandelbrot}
                   focusedPointJulia={focusedPointJulia}
                   pointsMandelbrot={
@@ -447,47 +422,6 @@ function App({ settings }: { settings: settingsDefinitionsType }): JSX.Element {
                   handlePointSelectionJulia={handleSimilarPointSelection}
                 />
               ) : null}
-              {animationState === AnimationStatus.SELECT_MANDELBROT_POINT ? (
-                <PointsMenuMandelbrot
-                  show={true}
-                  handleQuit={handleQuit}
-                  handleGo={handleMisiurewiczGo}
-                />
-              ) : null}
-              {animationState === AnimationStatus.SELECT_JULIA_POINT ? (
-                <PointsMenuJulia
-                  show={true}
-                  handleQuit={handleReset}
-                  handleGo={() => {
-                    setAnimationState(AnimationStatus.ZOOM_M);
-                    warpToPoint(juliaControls, {
-                      xy: focusedPointJulia.point,
-                      z: 1,
-                      theta: 0,
-                    });
-                  }}
-                />
-              ) : null}
-              {[
-                AnimationStatus.ZOOM_M,
-                AnimationStatus.ZOOM_J,
-                AnimationStatus.ROTATE_M,
-                AnimationStatus.ROTATE_J,
-              ].includes(animationState) ? (
-                <ZoomMenu
-                  handleGo={() => {
-                    return;
-                  }}
-                  handleQuit={handleReset}
-                  show={true}
-                  mandelbrotControls={mandelbrotControls}
-                  juliaControls={juliaControls}
-                  animationState={animationState}
-                  setAnimationState={setAnimationState}
-                  focusedPointMandelbrot={focusedPointMandelbrot}
-                  focusedPointJulia={focusedPointJulia}
-                />
-              ) : null}
               <AnimationFinalCard
                 show={animationState === AnimationStatus.PLAY}
                 handleQuit={handleReset}

diff --git a/src/common/render.ts b/src/common/render.ts
@@ -1,7 +1,6 @@
 import { CanvasHTMLAttributes } from 'react';
 import { RgbColor } from 'react-colorful';
 import { OpaqueInterpolation } from 'react-spring';
-import { OrbitFlag } from '../components/tans_theorem/tansTheoremUtils';
 import { AnimationStatus } from '../components/tans_theorem/AnimationFinalCard';
 import {
   MandelbrotMapsWebGLUniforms,

diff --git a/src/common/tans.ts b/src/common/tans.ts
@@ -5,6 +5,7 @@ import { ViewerControlSprings } from './types';
 export interface NearestMisiurewiczCardProps {
   onClick: () => void;
 }
+
 export interface MarkerManagerProps {
   show: boolean;
   aspectRatio: number;
@@ -28,36 +29,43 @@ export interface SelectMenuProps {
   handleGo: () => void;
 }
 
-export interface TansDialogsProps {
-  show: boolean;
-  animationState: AnimationStatus;
-  setAnimationState: React.Dispatch<React.SetStateAction<AnimationStatus>>;
-  handleQuit: () => void;
-}
-
 export interface PointsListProps {
   focusedPoint: PreperiodicPoint;
   points: PreperiodicPoint[];
   displayText: (c: PreperiodicPoint) => string;
   handleSelection: (point: PreperiodicPoint) => void;
 }
 
-export interface ZoomCardProps extends SelectMenuProps {
-  mandelbrotControls: ViewerControlSprings;
-  juliaControls: ViewerControlSprings;
+export interface SelfSimilaritySliderProps {
+  focusedPointMandelbrot: PreperiodicPoint;
+  magnification: number;
+}
+
+export interface TansTheoremProgressCardProps {
   animationState: AnimationStatus;
-  setAnimationState: React.Dispatch<React.SetStateAction<AnimationStatus>>;
   focusedPointMandelbrot: PreperiodicPoint;
   focusedPointJulia: PreperiodicPoint;
+  mandelbrotControls: ViewerControlSprings;
+  juliaControls: ViewerControlSprings;
+  setAnimationState: React.Dispatch<React.SetStateAction<AnimationStatus>>;
+  handleQuit: () => void;
+  pointsMandelbrot: PreperiodicPoint[];
+  pointsJulia: PreperiodicPoint[];
+  handlePointSelectionMandelbrot: (focusedPoint: PreperiodicPoint) => void;
+  handlePointSelectionJulia: (focusedPoint: PreperiodicPoint) => void;
 }
 
-export interface PlayCardProps {
+export interface ZoomCardProps {
+  animationState: AnimationStatus;
   focusedPointMandelbrot: PreperiodicPoint;
-  magnification: number;
+  focusedPointJulia: PreperiodicPoint;
+  mandelbrotControls: ViewerControlSprings;
+  juliaControls: ViewerControlSprings;
+  setAnimationState: React.Dispatch<React.SetStateAction<AnimationStatus>>;
+  handleQuit: () => void;
 }
 
 export interface SimilarityAnimationProps {
-  show: boolean;
   animationState: AnimationStatus;
   focusedPointMandelbrot: PreperiodicPoint;
   focusedPointJulia: PreperiodicPoint;

diff --git a/src/components/tans_theorem/IntroDialog.tsx b/src/components/tans_theorem/IntroDialog.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { SelectMenuProps } from '../../common/tans';
 import { DialogContent, DialogTitle } from '../custom/DialogComponents';
 
-const IntroCard = (props: SelectMenuProps): JSX.Element => {
+const IntroDialog = (props: SelectMenuProps): JSX.Element => {
   const [open, setOpen] = React.useState(true);
 
   if (props.show) {
@@ -60,4 +60,4 @@ const IntroCard = (props: SelectMenuProps): JSX.Element => {
   );
 };
 
-export default IntroCard;
+export default IntroDialog;
diff --git a/src/components/tans_theorem/PointsMenuJulia.tsx b/src/components/tans_theorem/PointsMenuJulia.tsx
diff --git a/src/components/tans_theorem/PointsMenuMandelbrot.tsx b/src/components/tans_theorem/PointsMenuMandelbrot.tsx
diff --git a/src/components/tans_theorem/SelfSimilaritySlider.tsx b/src/components/tans_theorem/SelfSimilaritySlider.tsx
@@ -1,12 +1,12 @@
 import { Card, Slider } from '@material-ui/core';
 import React from 'react';
-import { PlayCardProps } from '../../common/tans';
+import { SelfSimilaritySliderProps } from '../../common/tans';
 
 const gen = (x: number) => {
   const y = Math.abs(x) % 1;
   return x < 0 ? 1 - y : y;
 };
-const SelfSimilaritySlider = (props: PlayCardProps): JSX.Element => {
+const SelfSimilaritySlider = (props: SelfSimilaritySliderProps): JSX.Element => {
   const x =
     Math.log(props.magnification) /
     Math.log(props.focusedPointMandelbrot.selfSimilarityFactorMagnitude);