feat(tans-theorem): ui overhaul

JMaio · Sep 6, 2021 · ab10890 · ab10890
1 parent b7d6f2e
commit ab10890
Show file tree

Hide file tree

Showing 17 changed files with 697 additions and 889 deletions.
diff --git a/src/App.tsx b/src/App.tsx
diff --git a/src/common/tans.ts b/src/common/tans.ts
@@ -2,11 +2,6 @@ import { AnimationStatus } from '../components/tans_theorem/AnimationFinalCard';
 import { PreperiodicPoint } from '../components/tans_theorem/tansTheoremUtils';
 import { ViewerControlSprings } from './types';
 
-export interface AnimationFinalCardProps {
-  animationState: AnimationStatus;
-  handleReset: () => void;
-}
-
 export interface MarkerManagerProps {
   show: boolean;
   aspectRatio: number;
@@ -16,16 +11,25 @@ export interface MarkerManagerProps {
   points: PreperiodicPoint[];
 }
 
-export interface InfoCardProps {
+export interface ComplexNumberMarkerProps {
+  aspectRatio: number;
+  m: PreperiodicPoint;
+  viewerControl: ViewerControlSprings;
+  onClick: () => void;
+  isFocused: boolean;
+}
+
+export interface SelectMenuProps {
+  show: boolean;
+  handleQuit: () => void;
+  handleGo: () => void;
+}
+
+export interface TansDialogsProps {
   show: boolean;
-  mandelbrot: ViewerControlSprings;
-  julia: ViewerControlSprings;
   animationState: AnimationStatus;
   setAnimationState: React.Dispatch<React.SetStateAction<AnimationStatus>>;
-  focusedPointMandelbrot: PreperiodicPoint;
-  focusedPointJulia: PreperiodicPoint;
-  handleMandelbrotSelection: (focusedPointMandelbrot: PreperiodicPoint) => void;
-  quitButton: () => JSX.Element;
+  handleQuit: () => void;
 }
 
 export interface PointsListProps {
@@ -35,66 +39,27 @@ export interface PointsListProps {
   handleSelection: (point: PreperiodicPoint) => void;
 }
 
-export interface MisiurewiczDomainsMenuProps {
-  show: boolean;
-  mandelbrot: ViewerControlSprings;
-  julia: ViewerControlSprings;
-  setAnimationState: React.Dispatch<React.SetStateAction<AnimationStatus>>;
-  focusedPointMandelbrot: PreperiodicPoint;
-  focusedPointJulia: PreperiodicPoint;
-  quitButton: () => JSX.Element;
-}
-
-export interface ZoomCardProps {
-  show: boolean;
-  mandelbrot: ViewerControlSprings;
-  julia: ViewerControlSprings;
+export interface ZoomCardProps extends SelectMenuProps {
+  mandelbrotControls: ViewerControlSprings;
+  juliaControls: ViewerControlSprings;
   animationState: AnimationStatus;
   setAnimationState: React.Dispatch<React.SetStateAction<AnimationStatus>>;
   focusedPointMandelbrot: PreperiodicPoint;
   focusedPointJulia: PreperiodicPoint;
-  backButton: () => JSX.Element;
 }
 
 export interface PlayCardProps {
   focusedPointMandelbrot: PreperiodicPoint;
   magnification: number;
 }
 
-export interface ComplexNumberMarkerProps {
-  aspectRatio: number;
-  m: PreperiodicPoint;
-  viewerControl: ViewerControlSprings;
-  onClick: () => void;
-  isFocused: boolean;
-}
-
 export interface SimilarityAnimationProps {
   show: boolean;
   animationState: AnimationStatus;
-  focusedPoint: PreperiodicPoint;
-  focusedPointJulia: PreperiodicPoint;
-}
-
-export interface SimilarityMenuProps {
-  show: boolean;
-  julia: ViewerControlSprings;
-  setAnimationState: React.Dispatch<React.SetStateAction<AnimationStatus>>;
-  focusedPointMandelbrot: PreperiodicPoint;
-  focusedPointJulia: PreperiodicPoint;
-  handleSimilarPointSelection: (focusedPointJulia: PreperiodicPoint) => void;
-  similarPointsJulia: PreperiodicPoint[];
-  backButton: () => JSX.Element;
-}
-
-export interface IntroCardProps {
-  show: boolean;
-  mandelbrot: ViewerControlSprings;
-  julia: ViewerControlSprings;
-  animationState: AnimationStatus;
-  setAnimationState: React.Dispatch<React.SetStateAction<AnimationStatus>>;
   focusedPointMandelbrot: PreperiodicPoint;
   focusedPointJulia: PreperiodicPoint;
-  handleMandelbrotSelection: (focusedPointMandelbrot: PreperiodicPoint) => void;
-  quitButton: () => JSX.Element;
+  pointsMandelbrot: PreperiodicPoint[];
+  pointsJulia: PreperiodicPoint[];
+  handlePointSelectionMandelbrot: (focusedPoint: PreperiodicPoint) => void;
+  handlePointSelectionJulia: (focusedPoint: PreperiodicPoint) => void;
 }
diff --git a/src/components/tans_theorem/AnimationFinalCard.tsx b/src/components/tans_theorem/AnimationFinalCard.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
-import { AnimationFinalCardProps } from '../../common/tans';
-import { Card, Grid, IconButton, Typography, Box } from '@material-ui/core';
-import { PreperiodicPoint } from './tansTheoremUtils';
-import { misiurewiczPairs } from './MPoints';
-import ArrowBackwardIcon from '@material-ui/icons/ArrowBack';
+import { SelectMenuProps } from '../../common/tans';
+import { Card, Button, Typography, Box } from '@material-ui/core';
+import { KeyboardArrowLeft } from '@material-ui/icons';
 
 export enum AnimationStatus {
   INTRO = -1,
@@ -16,47 +14,31 @@ export enum AnimationStatus {
   PLAY = 6,
 }
 
-export const MISIUREWICZ_POINTS: PreperiodicPoint[] = misiurewiczPairs
-  .slice(0, 200)
-  .map((p) => new PreperiodicPoint(p, p, false))
-  .sort((a, b) => a.factorMagnitude - b.factorMagnitude);
-
-const AnimationFinalCard = (props: AnimationFinalCardProps): JSX.Element => {
-  const BackButton = () => {
-    return (
-      // eslint-disable-next-line react/prop-types
-      <IconButton style={{ width: 50 }} onClick={props.handleReset}>
-        <ArrowBackwardIcon />
-      </IconButton>
-    );
-  };
-
+const AnimationFinalCard = (props: SelectMenuProps): JSX.Element => {
   return (
     <>
-      {props.animationState === AnimationStatus.PLAY ? (
+      {props.show ? (
         <Card
           style={{
-            padding: 12,
             zIndex: 100,
             display: 'flex',
-            flexDirection: 'column',
+            flexDirection: 'row',
             flexShrink: 1,
             fontSize: '0.8rem',
           }}
         >
-          <Grid container direction="row">
-            <Grid item>{BackButton()}</Grid>
-            <Grid item>
-              <Typography gutterBottom>
-                You are now free to continue magnifying.
-              </Typography>
-              <Typography gutterBottom>
-                <Box fontWeight="fontWeightBold" m={0} textAlign="left">
-                  higher magnification &#8594; stronger similarity
-                </Box>
-              </Typography>
-            </Grid>
-          </Grid>
+          <Button onClick={props.handleQuit}>
+            <KeyboardArrowLeft />
+            Back
+          </Button>
+          <div style={{ padding: 8, marginLeft: 12 }}>
+            <Typography gutterBottom>You are now free to continue magnifying.</Typography>
+            <Typography gutterBottom>
+              <Box fontWeight="fontWeightBold" m={0} textAlign="left">
+                higher magnification &#8594; stronger similarity
+              </Box>
+            </Typography>
+          </div>
         </Card>
       ) : null}
     </>

diff --git a/src/components/tans_theorem/ComplexNumberMarker.tsx b/src/components/tans_theorem/ComplexNumberMarker.tsx
@@ -45,7 +45,7 @@ const ComplexNumberMarker = (props: ComplexNumberMarkerProps): JSX.Element => {
   return (
     <div
       style={{
-        zIndex: 2,
+        zIndex: 1,
         position: 'absolute',
         left: `${coord[0] * 100}%`,
         bottom: `${coord[1] * 100}%`,

diff --git a/src/components/tans_theorem/IntroCard.tsx b/src/components/tans_theorem/IntroCard.tsx
diff --git a/src/components/tans_theorem/IntroDialog.tsx b/src/components/tans_theorem/IntroDialog.tsx
@@ -0,0 +1,63 @@
+import { Typography, Box, Dialog } from '@material-ui/core';
+import React from 'react';
+import { SelectMenuProps } from '../../common/tans';
+import { DialogContent, DialogTitle } from '../custom/DialogComponents';
+
+const IntroCard = (props: SelectMenuProps): JSX.Element => {
+  const [open, setOpen] = React.useState(true);
+
+  if (props.show) {
+    props.handleGo();
+  }
+
+  const onClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <Dialog
+      style={{ zIndex: 1500 }}
+      onClose={onClose}
+      aria-labelledby="simple-dialog-title"
+      open={open}
+    >
+      <DialogTitle onClose={onClose}>Welcome to the Tans theorem explorer!</DialogTitle>
+      <DialogContent dividers>
+        <div style={{ margin: 16 }}>
+          <Typography
+            style={{
+              marginBottom: 8,
+            }}
+            gutterBottom
+          >
+            Tan&apos;s theorem states that, at particular points, the Mandelbrot set and
+            the corresponding Julia set are almost{' '}
+            <Box fontWeight="fontWeightBold" m={0} display="inline">
+              indistinguishable
+            </Box>
+            .
+          </Typography>
+          <Typography
+            style={{
+              marginBottom: 8,
+            }}
+            gutterBottom
+          >
+            This feature will take you through the process of selecting a point on each
+            set, then magnifying and rotating them to best show the similarity.
+          </Typography>
+          <Typography
+            style={{
+              marginBottom: 8,
+            }}
+            gutterBottom
+          >
+            To start, simply exit this popup then follow the steps provided.
+          </Typography>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default IntroCard;
diff --git a/src/components/tans_theorem/MapMarkerManager.tsx b/src/components/tans_theorem/MapMarkerManager.tsx
@@ -4,7 +4,7 @@ import { XYType, ViewerControlSprings } from '../../common/types';
 import ComplexNumberMarker from './ComplexNumberMarker';
 import { PreperiodicPoint } from './tansTheoremUtils';
 
-const MAX_MARKERS = 5;
+const MAX_MARKERS = 8;
 
 /**
  * Check if a point is within a given "bounding" box.