moved to typescript

the-curve-consulting · Mar 21, 2022 · ce84b9c · ce84b9c
1 parent 4a8b3e1
commit ce84b9c
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 44 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,5 @@ web-build/
 
 # macOS
 .DS_Store
+
+.idea
diff --git a/App.js → App.tsx b/App.js → App.tsx
@@ -1,16 +1,20 @@
-import React, {useEffect, useRef, useState} from 'react'
-import {Canvas, useFrame, useThree} from '@react-three/fiber/native'
+import React, {MutableRefObject, useEffect, useRef, useState} from 'react'
+import {Canvas, MeshProps, useFrame, useThree} from '@react-three/fiber/native'
 import {Text, View} from "react-native";
 
-function Box(props) {
+function Box(props: MeshProps) {
   const mesh = useRef(null)
   const [hovered, setHover] = useState(false)
   const [active, setActive] = useState(false)
   const [tumble, setTumble] = useState(0.02);
 
   useFrame((state, delta) => {
-    mesh.current.rotation.x += tumble;
-    mesh.current.rotation.y += tumble;
+    if(mesh != null) {
+      // @ts-ignore
+      mesh.current.rotation.x += tumble;
+      // @ts-ignore
+      mesh.current.rotation.y += tumble;
+    }
   })
 
   return (
@@ -30,31 +34,37 @@ function Box(props) {
   )
 }
 
-function Circle(props) {
+function Circle(props: MeshProps) {
   const mesh = useRef(null)
   const [hovered, setHover] = useState(false)
   const [active, setActive] = useState(false)
   const [tumble, setTumble] = useState(0.0);
   const [deltaX, setDeltaX] = useState(0.1);
   const [deltaY, setDeltaY] = useState(0.15);
 
-  const bounds = {left: -2, right: 2, top: -2, bottom: 2};
+  const bounds = {left: -4, right: 4, top: -2, bottom: 2};
 
   //useFrame((state, delta) => {mesh.current.rotation.x += tumble; mesh.current.rotation.y += tumble; })
   useFrame((state, delta) => {
-    if(mesh.current.position.x < bounds.left)  {
+// @ts-ignore
+    if (mesh.current.position.x < bounds.left) {
       setDeltaX(0.24);
     }
-    if(mesh.current.position.x > bounds.right)  {
+// @ts-ignore
+    if (mesh.current.position.x > bounds.right) {
       setDeltaX(-0.23);
     }
-    if(mesh.current.position.y < bounds.top)  {
+// @ts-ignore
+    if (mesh.current.position.y < bounds.top) {
       setDeltaY(0.22);
     }
-    if(mesh.current.position.y > bounds.bottom)  {
+// @ts-ignore
+    if (mesh.current.position.y > bounds.bottom) {
       setDeltaY(-0.21);
     }
+// @ts-ignore
     mesh.current.position.x += deltaX;
+// @ts-ignore
     mesh.current.position.y += deltaY;
   });
 
@@ -76,32 +86,39 @@ function Circle(props) {
   )
 }
 
-function Torus(props) {
+function Torus(props: MeshProps) {
   const mesh = useRef(null)
   const [hovered, setHover] = useState(false)
   const [active, setActive] = useState(false)
   const [tumble, setTumble] = useState(0.0);
-  const [deltaX, setDeltaX] = useState(0.1);
-  const [deltaY, setDeltaY] = useState(0.15);
+  const [deltaX, setDeltaX] = useState(1);
+  const [deltaY, setDeltaY] = useState(1);
 
-  const bounds = {left: -2, right: 2, top: -2, bottom: 2};
+  const bounds = {left: -5, right: 5, top: -2, bottom: 2};
 
   //useFrame((state, delta) => {mesh.current.rotation.x += tumble; mesh.current.rotation.y += tumble; })
   useFrame((state, delta) => {
+    //console.log(state, delta);
+// @ts-ignore
     if(mesh.current.position.x < bounds.left)  {
-      setDeltaX(0.04);
+      setDeltaX(1);
     }
+// @ts-ignore
     if(mesh.current.position.x > bounds.right)  {
-      setDeltaX(-0.03);
+      setDeltaX(-1);
     }
+// @ts-ignore
     if(mesh.current.position.y < bounds.top)  {
-      setDeltaY(0.02);
+      setDeltaY(1);
     }
+// @ts-ignore
     if(mesh.current.position.y > bounds.bottom)  {
-      setDeltaY(-0.01);
+      setDeltaY(-1);
     }
-    mesh.current.position.x += deltaX;
-    mesh.current.position.y += deltaY;
+// @ts-ignore
+    mesh.current.position.x += deltaX * delta * 1;
+// @ts-ignore
+    mesh.current.position.y += deltaY * delta * 1;
   });
 
   return (
@@ -113,28 +130,17 @@ function Torus(props) {
         setActive(!active);
         setTumble(0.0);
       }}
-      /*      onPointerOver={(event) => setHover(true)}
-            onPointerOut={(event) => setHover(false)}*/>
-      <torusGeometry args={[2, 0.2, 8, 24]}/>
-      <meshStandardMaterial color={hovered ? 'blue' : 'grey'}/>
+            onPointerOver={(event) => setHover(true)}
+            onPointerOut={(event) => setHover(false)}>
+      <torusGeometry args={[2, .2, 16, 48]}/>
+      <meshStandardMaterial color={hovered ? 'blue' : 'teal'}/>
     </mesh>
   )
 }
 
-function Camera(props) {
-  const ref = useRef()
-  const { setDefaultCamera } = useThree()
-  // Make the camera known to the system
-  useEffect(() => void setDefaultCamera(ref.current), [])
-  // Update it every frame
-  useFrame(() => ref.current.updateMatrixWorld())
-  return <perspectiveCamera ref={ref} {...props} />
-}
-
 export default function App() {
   return (
-      <Canvas >
-        <Camera position={[0, 0, 10]} />
+      <Canvas orthographic camera={{ zoom: 100, position: [0, 0, 100] }}>
         <ambientLight/>
         {/*<pointLight position={[10, 10, 10]}/>*/}
         <directionalLight position={[10, 10, 10]}/>
@@ -143,11 +149,11 @@ export default function App() {
         <Box position={[-1.2, 0, 0]}/>
         <Box position={[1.2, 0, 0]}/>
         <Box position={[1.2, 1, 0]}/>
-        <Box position={[1.2, 1, 0]}/>
-        <Box position={[1.2, 0, 1]}/>
-        <Box position={[1.2, 0, 1]}/>
-        <Box position={[1.2, 0, 2]}/>
-        <Box position={[1.2, 0, 2]}/>
+        <Box position={[-1.4, 1, 0]}/>
+        <Box position={[-0.8, 0, 1]}/>
+        <Box position={[1.8, 0, 1]}/>
+        <Box position={[1.7, 0, 2]}/>
+        <Box position={[1.6, 0, 2]}/>
       </Canvas>
   );
 }

diff --git a/package.json b/package.json
@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@react-three/fiber": "^8.0.0-beta.3",
+    "@types/react": "^17.0.41",
+    "@types/react-native": "^0.67.3",
     "expo": "~44.0.0",
     "expo-gl": "^11.1.2",
     "expo-status-bar": "~1.2.0",
@@ -21,7 +23,9 @@
     "three": "^0.138.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9"
+    "@babel/core": "^7.12.9",
+    "@babel/preset-env": "^7.16.11",
+    "typescript": "~4.3.5"
   },
   "private": true
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -893,7 +893,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/preset-env@^7.12.9":
+"@babel/preset-env@^7.12.9", "@babel/preset-env@^7.16.11":
   version "7.16.11"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.16.11.tgz#5dd88fd885fae36f88fd7c8342475c9f0abe2982"
   integrity sha512-qcmWG8R7ZW6WBRPZK//y+E3Cli151B20W1Rv7ln27vuPaXU/8TKms6jFdiJtF7UDTxcrb7mZd88tAeK9LjdT8g==
@@ -1486,6 +1486,32 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.21.tgz#864b987c0c68d07b4345845c3e63b75edd143644"
   integrity sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==
 
+"@types/prop-types@*":
+  version "15.7.4"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
+  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
+
+"@types/react-native@^0.67.3":
+  version "0.67.3"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.67.3.tgz#baba111c8ce1a45a6034c15f6f0ad98826239780"
+  integrity sha512-hF4uOZFl2PPQtGWOtLoafrlCJeU815X3PgfVePM+7EhOIZhYXKH7+p3R3cZSnwVnrU5Ep/JfiHimMDliY3o8oQ==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^17.0.41":
+  version "17.0.41"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.41.tgz#6e179590d276394de1e357b3f89d05d7d3da8b85"
+  integrity sha512-chYZ9ogWUodyC7VUTRBfblysKLjnohhFY9bGLwvnUFFy48+vB9DikmB3lW0qTFmBcKSzmdglcvkHK71IioOlDA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@types/yargs-parser@*":
   version "21.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
@@ -2239,6 +2265,11 @@ css-in-js-utils@^2.0.0:
     hyphenate-style-name "^1.0.2"
     isobject "^3.0.1"
 
+csstype@^3.0.2:
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
+  integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
+
 dayjs@^1.8.15:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.0.tgz#009bf7ef2e2ea2d5db2e6583d2d39a4b5061e805"
@@ -5223,6 +5254,11 @@ type-fest@^0.7.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.7.1.tgz#8dda65feaf03ed78f0a3f9678f1869147f7c5c48"
   integrity sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==
 
+typescript@~4.3.5:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
+  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
+
 ua-parser-js@^0.7.30:
   version "0.7.31"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"