LiamMyles · LiamMyles · Nov 7, 2024 · Nov 8, 2024 · Nov 15, 2024
diff --git a/pages/drawing-n-gon-lines.tsx b/pages/drawing-n-gon-lines.tsx
@@ -0,0 +1,3 @@
+import { DrawingNGonLines } from "Pages/drawing-n-gon-lines"
+
+export default DrawingNGonLines
diff --git a/src/pages/drawing-n-gon-lines/drawing-n-gon-lines.tsx b/src/pages/drawing-n-gon-lines/drawing-n-gon-lines.tsx
@@ -0,0 +1,272 @@
+import { InputSlider } from "Components/InputSlider"
+import { Navigation } from "Components/Navigation"
+import { P5Canvas } from "Components/P5Canvas"
+import { PolygonJumps } from "Components/PolygonJumps"
+import { PolygonMetaTitle } from "Components/PolygonMetaTitle"
+import { GetServerSideProps } from "next"
+import Head from "next/head"
+import { useRouter } from "next/router"
+import type typeP5 from "p5"
+import { NGonToLines } from "PolygonBuilders/nGonToLines"
+import React, { useRef, useState } from "react"
+import CopyToClipboard from "react-copy-to-clipboard"
+import { getUrl } from "Src/helpers/getUrl"
+import { NGonLineDrawer } from "Src/sketches/nGonLineDrawer"
+import styled from "styled-components"
+
+const ContainerDiv = styled.div`
+  display: grid;
+  grid-gap: 10px;
+  width: 600px;
+  margin: 10px auto;
+`
+
+export const StyledP5Canvas = styled(P5Canvas)`
+  margin: 10px auto;
+  width: 600px;
+  height: 600px;
+`
+
+const LayoutDiv = styled.div`
+  display: grid;
+  margin: 10px 0;
+  grid-gap: 10px;
+  grid-template-columns: repeat(auto-fit, minmax(620px, 1fr));
+
+  @media screen and (min-width: 1250px) {
+    & > *:first-child {
+      justify-self: right;
+    }
+    & > *:last-child {
+      justify-self: left;
+    }
+    ${StyledP5Canvas} {
+      margin: 0;
+    }
+  }
+`
+
+interface Props {
+  initialVertices: number | null
+  initialSubdivisions: number | null
+  initialPoints: number | null
+  initialJumps: number[] | null
+}
+
+export function DrawingNGonLines({
+  initialVertices,
+  initialPoints,
+  initialSubdivisions,
+  initialJumps,
+}: Props): React.ReactElement {
+  const NGonClass = useRef<NGonToLines>(new NGonToLines())
+  const NGonDrawerSketch = useRef<NGonLineDrawer>(
+    new NGonLineDrawer({
+      NGon: NGonClass.current,
+    })
+  )
+  const NGonSketch = useRef<(p5: typeP5) => void>(
+    NGonDrawerSketch.current.initializeSketch()
+  )
+
+  const [vertices, setVertex] = NGonClass.current.useVertices(
+    initialVertices ?? 8
+  )
+
+  const [subdivisions, setSubdivisions] = NGonClass.current.useSubdivisions(
+    initialSubdivisions ?? 1
+  )
+  const [points, setPoints] = NGonClass.current.usePoints(initialPoints ?? 1)
+  const [jValue, setJValue] = NGonClass.current.useJValue(1)
+  const [kValue, setKValue] = NGonClass.current.useKValue(1)
+  const [vValue, setVValue] = NGonClass.current.useVValue(1)
+  const [wValue, setWValue] = NGonClass.current.useWValue(1)
+
+  const [totalJumps, setTotalJumps] = useState(initialJumps?.length ?? 0)
+  const [jumps, setJumps] = NGonClass.current.useJumps(initialJumps ?? [])
+
+  const { basePath, pathname } = useRouter()
+
+  return (
+    <>
+      <Head>
+        <title>Playing With Polygons</title>
+        <meta
+          name="description"
+          content="Maths, Polygons and Adventures to be had"
+        />
+        <link rel="icon" href={`${basePath}/favicon.ico`} />
+        <link
+          rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
+          integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw=="
+          crossOrigin="anonymous"
+        />
+      </Head>
+
+      <Navigation />
+      <LayoutDiv>
+        {NGonSketch.current && <StyledP5Canvas sketch={NGonSketch.current} />}
+        <div>
+          <PolygonMetaTitle
+            vertices={vertices}
+            subdivisions={subdivisions}
+            points={points}
+            jumps={jumps}
+          />
+          <div>
+            <span style={{ color: "red" }}>J Lines</span>
+            <span> - </span>
+            <span style={{ color: "blue" }}>K Lines</span>
+            <span> - </span>
+            <span style={{ color: "green" }}>V-W Lines</span>
+          </div>
+          <InputSlider
+            title="N-Gon"
+            setter={(value: number) => {
+              setVertex(value)
+            }}
+            min={1}
+            max={36}
+            currentValue={vertices}
+          />
+          <InputSlider
+            title="Subdivision"
+            min={1}
+            max={50}
+            setter={(value: number) => {
+              setSubdivisions(value)
+            }}
+            currentValue={subdivisions}
+          />
+          <InputSlider
+            title="Points"
+            min={1}
+            max={Math.floor((vertices * subdivisions) / 2)}
+            setter={(value: number) => {
+              setPoints(value)
+            }}
+            currentValue={points}
+          />
+          <InputSlider
+            title="JValue"
+            min={1}
+            max={Math.floor(vertices * subdivisions)}
+            setter={(value: number) => {
+              setJValue(value)
+            }}
+            currentValue={jValue}
+          />
+          <InputSlider
+            title="KValue"
+            min={1}
+            max={Math.floor(vertices * subdivisions)}
+            setter={(value: number) => {
+              setKValue(value)
+            }}
+            currentValue={kValue}
+          />
+          <InputSlider
+            title="VValue"
+            min={1}
+            max={Math.floor(vertices * subdivisions)}
+            setter={(value: number) => {
+              setVValue(value)
+            }}
+            currentValue={vValue}
+          />
+          <InputSlider
+            title="WValue"
+            min={1}
+            max={Math.floor(vertices * subdivisions)}
+            setter={(value: number) => {
+              setWValue(value)
+            }}
+            currentValue={wValue}
+          />
+          <PolygonJumps
+            NGonClass={NGonClass.current}
+            totalJumps={totalJumps}
+            setTotalJumps={setTotalJumps}
+            setJumps={setJumps}
+            jumps={jumps}
+          />
+          <ContainerDiv>
+            <CopyToClipboard
+              text={getUrl({
+                path: `${basePath}${pathname}`,
+                vertices,
+                subdivisions,
+                points,
+                jumps,
+              })}
+            >
+              <button>Copy Link To Shape</button>
+            </CopyToClipboard>
+          </ContainerDiv>
+          <ContainerDiv>
+            <button
+              onClick={() => {
+                NGonDrawerSketch.current.toggleVertices()
+              }}
+            >
+              Toggle Vertices
+            </button>
+            <button
+              onClick={() => {
+                NGonDrawerSketch.current.toggleSubdivisions()
+              }}
+            >
+              Toggle Subdivisions
+            </button>
+          </ContainerDiv>
+        </div>
+      </LayoutDiv>
+    </>
+  )
+}
+
+function validateToNumber(value: string | string[] | undefined): number | null {
+  if (typeof value === "string") {
+    if (!isNaN(parseInt(value))) {
+      return parseInt(value) ?? null
+    }
+  }
+  return null
+}
+
+function validateToNumberArray(
+  value: string | string[] | undefined
+): number[] | null {
+  if (Array.isArray(value)) {
+    const result = value
+      .map(validateToNumber)
+      .filter(
+        (numberOrUndefined): numberOrUndefined is number =>
+          numberOrUndefined !== null
+      )
+    return result
+  } else if (typeof value === "string") {
+    const validValue = validateToNumber(value)
+    if (validValue !== null) {
+      return [validValue]
+    }
+  }
+
+  return null
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async (
+  context
+) => {
+  const { vertex, subdivisions, points, jumps } = context.query
+
+  return {
+    props: {
+      initialVertices: validateToNumber(vertex),
+      initialSubdivisions: validateToNumber(subdivisions),
+      initialPoints: validateToNumber(points),
+      initialJumps: validateToNumberArray(jumps),
+    },
+  }
+}
diff --git a/src/pages/drawing-n-gon-lines/index.tsx b/src/pages/drawing-n-gon-lines/index.tsx
@@ -0,0 +1 @@
+export * from "./drawing-n-gon-lines"
diff --git a/src/pages/drawing-spirals/drawing-spirals.tsx b/src/pages/drawing-spirals/drawing-spirals.tsx
@@ -66,7 +66,7 @@ export function Spirals({
   initialReduction,
 }: Props): React.ReactElement {
   const [lineDensity, setLineDensity] = useState(0)
-  console.log(lineDensity)
+
   const NGonClass = useRef<NGonSpirals>(new NGonSpirals({ setLineDensity }))
   const NGonDrawer = useRef<SpiralDrawer>(
     new SpiralDrawer({

diff --git a/src/pages/spirals/spirals.tsx b/src/pages/spirals/spirals.tsx
@@ -67,7 +67,7 @@ export function Spirals({
   initialReduction,
 }: Props): React.ReactElement {
   const [lineDensity, setLineDensity] = useState(0)
-  console.log(lineDensity)
+
   const NGonClass = useRef<NGonSpirals>(new NGonSpirals({ setLineDensity }))
   const NGonDrawer = useRef<SpiralAnimator>(
     new SpiralAnimator({

diff --git a/src/polygonBuilders/nGonToLines/index.ts b/src/polygonBuilders/nGonToLines/index.ts
@@ -0,0 +1 @@
+export * from "./nGonToLines"
diff --git a/src/polygonBuilders/nGonToLines/nGonToLines.spec.ts b/src/polygonBuilders/nGonToLines/nGonToLines.spec.ts
@@ -0,0 +1,7 @@
+import { NGonToLines } from "./nGonToLines"
+
+it("should world", () => {
+  const NGonInstance = new NGonToLines()
+  NGonInstance.setVertices(8)
+  NGonInstance.calculateVertexMatrix()
+})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { DrawingNGonLines } from "Pages/drawing-n-gon-lines"

		export default DrawingNGonLines