new templates and components

xanderjl · Sep 5, 2022 · 43bd739 · 43bd739
1 parent cb04c33
commit 43bd739
Show file tree

Hide file tree

Showing 12 changed files with 1,343 additions and 863 deletions.
diff --git a/_templates/a4/new/index.ejs.t b/_templates/a4/new/index.ejs.t
@@ -0,0 +1,26 @@
+---
+to: src/pages/sketches/<%= name %>.tsx
+---
+import SketchWrapper from 'components/SketchWrapper'
+import { NextPage } from 'next'
+import { ColorValue, Draw } from 'types/CustomP5'
+import { getDimensions } from 'util/canvasSizes'
+
+const <%= h.changeCase.pascal(name) %>: NextPage = () => {
+  const dimensions: number[] = getDimensions('A4')
+  const padding: number[] = [40]
+  const background: ColorValue = [255, 253, 252]
+
+  const draw: Draw = p5 => {}
+
+  return (
+    <SketchWrapper
+      draw={draw}
+      dimensions={dimensions}
+      padding={padding}
+      background={background}
+    />
+  )
+}
+
+export default <%= h.changeCase.pascal(name) %>
diff --git a/_templates/fullscreen/new/index.ejs.t b/_templates/fullscreen/new/index.ejs.t
@@ -5,8 +5,12 @@ import SketchWrapper from 'components/SketchWrapper'
 import { NextPage } from 'next'
 import { Draw } from 'types/CustomP5'
 
-const draw: Draw = p5 => {}
 
-const <%= h.changeCase.pascal(name) %>: NextPage = () => <SketchWrapper draw={draw} />
+const <%= h.changeCase.pascal(name) %>: NextPage = () => {
+
+  const draw: Draw = p5 => {}
+
+  return <SketchWrapper draw={draw} />
+}
 
 export default <%= h.changeCase.pascal(name) %>
diff --git a/_templates/square/new/index.ejs.t b/_templates/square/new/index.ejs.t
@@ -5,21 +5,23 @@ import SketchWrapper from 'components/SketchWrapper'
 import { NextPage } from 'next'
 import { ColorValue, Draw } from 'types/CustomP5'
 
-const width: number = 2048
-const height: number = 2048
-const dimensions: number[] = [width, height]
-const padding: number[] = [40]
-const background: ColorValue = [255, 253, 252]
+const <%= h.changeCase.pascal(name) %>: NextPage = () => {
+  const width: number = 2048
+  const height: number = 2048
+  const dimensions: number[] = [width, height]
+  const padding: number[] = [40]
+  const background: ColorValue = [255, 253, 252]
 
-const draw: Draw = p5 => {}
+  const draw: Draw = p5 => {}
 
-const <%= h.changeCase.pascal(name) %>: NextPage = () => (
-  <SketchWrapper
-    draw={draw}
-    dimensions={dimensions}
-    padding={padding}
-    background={background}
-  />
-)
+  return (
+    <SketchWrapper
+      draw={draw}
+      dimensions={dimensions}
+      padding={padding}
+      background={background}
+    />
+  )
+}
 
 export default <%= h.changeCase.pascal(name) %>
diff --git a/package.json b/package.json
@@ -1,40 +1,41 @@
 {
-  "name": "p5-starter",
-  "version": "0.1.1",
+  "name": "p5-next",
+  "version": "0.1.2",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "new:sketch:fullscreen": "npx hygen fullscreen new --name",
     "new:sketch:square": "npx hygen square new --name",
+    "new:sketch:a4": "npx hygen a4 new --name",
     "lint": "next lint",
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.2.1",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
-    "date-fns": "^2.28.0",
-    "framer-motion": "^6",
+    "@chakra-ui/react": "^2.3.1",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "date-fns": "^2.29.2",
+    "framer-motion": "^7.2.1",
     "fuse.js": "^6.6.2",
     "lodash": "^4.17.21",
-    "next": "12.1.6",
+    "next": "12.2.5",
     "nice-color-palettes": "^3.0.0",
-    "p5": "^1.4.1",
+    "p5": "^1.4.2",
     "p5.drawer": "^2.0.0",
     "p5.js-svg": "^1.3.3",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-p5": "^1.3.30"
   },
   "devDependencies": {
-    "@types/node": "17.0.42",
-    "@types/react": "18.0.12",
-    "@types/react-dom": "18.0.5",
-    "eslint": "8.17.0",
-    "eslint-config-next": "12.1.6",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "typescript": "4.7.3"
+    "@types/node": "18.7.15",
+    "@types/react": "18.0.18",
+    "@types/react-dom": "18.0.6",
+    "eslint": "8.23.0",
+    "eslint-config-next": "12.2.5",
+    "eslint-plugin-simple-import-sort": "^8.0.0",
+    "typescript": "4.8.2"
   }
 }
diff --git a/src/components/FuseSearch.tsx b/src/components/FuseSearch.tsx
@@ -1,4 +1,4 @@
-import { Input, InputProps, List, ListItem } from '@chakra-ui/react'
+import { CSSObject, Input, InputProps, List, ListItem } from '@chakra-ui/react'
 import { Link } from '@chakra-ui/react'
 import Fuse from 'fuse.js'
 import React, { FC, useState } from 'react'
@@ -12,32 +12,40 @@ const FuseSearch: FC<FuseSearchProps> = ({ sketches }) => {
   const fuse = new Fuse(sketches, { includeScore: true })
   const filteredSketches = fuse.search(value)
 
+  const focusStyles: CSSObject = {
+    border: '2px solid',
+    borderRadius: 8,
+    borderColor: 'red.100',
+    py: 1,
+    px: 3,
+  }
+
   return (
     <>
       <Input
         mb={4}
-        borderColor="black"
+        borderColor='black'
         value={value}
         onChange={e => setValue(e.target.value)}
       />
       <List>
         {value !== ''
           ? filteredSketches.map(({ item }, i) => {
               return (
-                <Link key={item + i} href={`/sketches/${item}`}>
-                  <ListItem fontSize="2xl">
+                <ListItem key={item + i} fontSize='2xl'>
+                  <Link href={`/sketches/${item}`} _focus={focusStyles}>
                     {item.replaceAll('-', ' ')}
-                  </ListItem>
-                </Link>
+                  </Link>
+                </ListItem>
               )
             })
           : sketches.map((sketch, i) => {
               return (
-                <Link key={sketch + i} href={`/sketches/${sketch}`}>
-                  <ListItem fontSize="2xl">
+                <ListItem key={sketch + i} fontSize='2xl'>
+                  <Link href={`/sketches/${sketch}`} _focus={focusStyles}>
                     {sketch.replaceAll('-', ' ')}
-                  </ListItem>
-                </Link>
+                  </Link>
+                </ListItem>
               )
             })}
       </List>

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -10,7 +10,7 @@ const Layout: FC<LayoutProps> = ({ children }) => {
   return (
     <>
       <Head>
-        <title>Xandy's p5 playground</title>
+        <title>p5 playground</title>
         <link rel="icon" type="image/icon" href="/favicon.svg" />
       </Head>
       <Box position="relative" overflow="hidden">

diff --git a/src/components/SketchWrapper.tsx b/src/components/SketchWrapper.tsx
@@ -9,6 +9,7 @@ import {
   KeyPressed,
   MouseClicked,
   P5,
+  P5Function,
   Setup,
   WindowResized,
 } from 'types/CustomP5'
@@ -50,6 +51,7 @@ const Sketch = dynamic<SketchWrapperProps>(
 
 const SketchWrapper: FC<SketchWrapperProps> = ({
   setup,
+  draw,
   windowResized,
   keyPressed,
   suffix,
@@ -83,6 +85,15 @@ const SketchWrapper: FC<SketchWrapperProps> = ({
     setup && setup(p5, canvasParentRef)
   }
 
+  const defaultDraw: P5Function = p5 => {
+    if (typeof seed !== 'undefined') {
+      p5.noiseSeed(seed)
+      p5.randomSeed(seed)
+    }
+
+    draw && draw(p5)
+  }
+
   const defaultWindowResized = (p5: P5) => {
     windowResizedDefaults({
       p5,
@@ -123,7 +134,7 @@ const SketchWrapper: FC<SketchWrapperProps> = ({
   return (
     <Box
       css={{
-        '&:first-of-type': {
+        '.canvas-wrapper': {
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
@@ -136,7 +147,9 @@ const SketchWrapper: FC<SketchWrapperProps> = ({
       }}
     >
       <Sketch
+        className="canvas-wrapper"
         setup={defaultSetup}
+        draw={defaultDraw}
         windowResized={defaultWindowResized}
         keyPressed={defaultKeyPressed}
         {...rest}

diff --git a/src/components/UI.tsx b/src/components/UI.tsx
@@ -0,0 +1,93 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  HStack,
+  Input,
+  Slider,
+  SliderFilledTrack,
+  SliderThumb,
+  SliderTrack,
+  Text,
+  VStack,
+} from '@chakra-ui/react'
+import { Dispatch, FC, SetStateAction } from 'react'
+
+export interface UIValue {
+  label: string
+  value: number
+  setValue: Dispatch<SetStateAction<number>>
+  max?: number
+}
+
+export interface UIProps {
+  values: UIValue[]
+}
+const UI: FC<UIProps> = ({ values }) => {
+  return (
+    <Accordion
+      position='absolute'
+      maxW='max-content'
+      mt={6}
+      ml={6}
+      p={3}
+      bg='white'
+      borderRadius={8}
+      borderWidth={1}
+      borderColor='gray.200'
+      boxShadow='md'
+      allowToggle
+      transition='opacity 200ms ease-out'
+    >
+      <AccordionItem border='none'>
+        <AccordionButton>
+          <Box flex={1} textAlign='left'>
+            UI
+          </Box>
+          <AccordionIcon />
+        </AccordionButton>
+        <AccordionPanel>
+          <VStack align='stretch' spacing={6}>
+            {values.map((v, i) => {
+              const { label, value, setValue, max } = v
+
+              return (
+                <VStack key={i} align='flex-start'>
+                  <HStack>
+                    <Text whiteSpace='nowrap'>{label}:</Text>
+                    <Input
+                      type='number'
+                      value={value}
+                      onChange={e => setValue(parseInt(e.target.value))}
+                      maxW={`${Math.floor(value.toString().length * 2)}ch`}
+                      p={0}
+                      textAlign='center'
+                    />
+                  </HStack>
+                  <Slider
+                    colorScheme='red'
+                    focusThumbOnChange={false}
+                    defaultValue={value}
+                    value={value}
+                    max={max}
+                    onChange={v => setValue(v)}
+                  >
+                    <SliderTrack>
+                      <SliderFilledTrack />
+                    </SliderTrack>
+                    <SliderThumb />
+                  </Slider>
+                </VStack>
+              )
+            })}
+          </VStack>
+        </AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  )
+}
+
+export default UI
diff --git a/src/pages/sketches/my-new-sketch.tsx b/src/pages/sketches/my-new-sketch.tsx