update tooling

.github/workflows/main.yml

@@ -7,19 +7,17 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2.3.3
-      - uses: actions/setup-node@v1.4.4
-        with:
-          node-version: 16
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
 
-      - uses: bahmutov/npm-install@v1.4.3
+      - run: bun install --frozen-lockfile
 
-      - run: yarn type
-      - run: yarn lint
-      - run: yarn test
-      - run: yarn build
-      - run: cp doc/* ./build/
-      - run: yarn surge ./build yAR-htzee-platane.surge.sh
+      - run: bun type
+      - run: bun lint
+      - run: bun jest
+      - run: bunx vite build
+      - run: cp doc/* ./dist/
+      - run: bunx surge ./dist yAR-htzee-platane.surge.sh
         env:
           SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
           SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }}

.gitignore

@@ -1,4 +1,3 @@
 node_modules
-web_modules
-build
-.env
+dist
+.env

public/index.html → index.html

@@ -14,6 +14,6 @@
     "
   >
     <div id="root"></div>
-    <script type="module" src="/_dist_/index.js"></script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

package.json

@@ -6,47 +6,36 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@loadable/component": "5.14.1",
-    "@react-three/drei": "4.3.3",
-    "@react-three/fiber": "6.0.19",
-    "cannon-es": "0.17.0",
-    "nanoevents": "6.0.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "three": "0.128.0",
+    "@loadable/component": "5.16.4",
+    "@react-three/drei": "9.109.5",
+    "@react-three/fiber": "8.17.5",
+    "cannon-es": "0.20.0",
+    "nanoevents": "9.0.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "three": "0.167.1",
     "use-asset": "1.0.4",
-    "zustand": "3.4.2"
+    "zustand": "4.5.4"
   },
   "devDependencies": {
-    "@snowpack/plugin-optimize": "0.2.13",
-    "@snowpack/plugin-typescript": "1.2.1",
-    "@snowpack/plugin-webpack": "2.3.1",
-    "@types/jest": "26.0.23",
-    "@types/loadable__component": "5.13.3",
-    "@types/react": "17.0.5",
-    "@types/react-dom": "17.0.3",
-    "@types/three": "0.127.1",
-    "dotenv": "9.0.0",
-    "jest": "26.6.3",
-    "prettier": "2.2.1",
+    "vite": "5.4.0",
+    "@types/jest": "29.5.12",
+    "@types/loadable__component": "5.13.9",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "@types/three": "0.167.1",
+    "@types/webxr": "0.5.19",
+    "jest": "29.7.0",
+    "prettier": "2.8.8",
     "react-touch-visualizer": "0.0.1",
-    "rollup-plugin-terser": "7.0.2",
-    "rollup-plugin-visualizer": "5.5.0",
-    "serve": "11.3.2",
-    "snowpack": "3.2.2",
-    "snowpack-plugin-replace": "1.0.4",
-    "snowpack-plugin-rollup-bundle": "0.4.4",
-    "surge": "0.23.0",
-    "ts-jest": "26.5.6",
-    "typescript": "4.2.4",
-    "webpack-bundle-analyzer": "4.4.1"
+    "surge": "0.24.5",
+    "ts-jest": "29.2.4",
+    "typescript": "5.5.4"
   },
   "scripts": {
     "type": "tsc --noEmit",
     "lint": "prettier -c '**/*.{ts,tsx,js,jsx,json,md,html}' '!**/{build,web_modules}/**'",
-    "dev": "snowpack dev",
-    "test": "jest",
-    "build": "snowpack build",
-    "serve": "serve --ssl-cert snowpack.crt --ssl-key snowpack.key build"
+    "dev": "vite",
+    "test": "jest"
   }
 }

src/App/App.tsx

@@ -13,14 +13,14 @@ import { PickHint } from "./Ui/Hints/PickHint";
 import { PullHint } from "./Ui/Hints/PullHint";
 import { useDelay } from "./Ui/useDelay";
 import { GithubLogo } from "./Ui/GithubLogo";
-import { Canvas } from "@react-three/fiber";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
 import { XR8Controls } from "../XR8Canvas/XR8Controls";
 import { useXR8 } from "../XR8Canvas/useXR8";
 // @ts-ignore
 import { Visualizer } from "react-touch-visualizer";
 import { xr8Hosted } from "../XR8Canvas/getXR8";
 
-const xr8ApiKey = process.env.XR8_API_KEY!;
+const xr8ApiKey: string = ""; //process.env.XR8_API_KEY!;
 const touchSupported = "ontouchend" in document;
 
 type Props = {
@@ -195,10 +195,9 @@ export const App = ({ onReady, onProgress, started }: Props) => {
   );
 };
 
-// <Board placed={placed} />
-
 class ErrorBoundary extends React.Component<{
   onError: (error: Error) => void;
+  children: any;
 }> {
   static getDerivedStateFromError = (error: Error) => ({ error });
 

src/App/Boot.tsx

@@ -35,7 +35,7 @@ export const Boot = () => {
   );
 };
 
-class ErrorBoundary extends React.Component {
+class ErrorBoundary extends React.Component<{ children: any }> {
   state: { error?: Error } = {};
 
   static getDerivedStateFromError(error: Error) {

src/App/Scene/Board.tsx

@@ -24,8 +24,8 @@ export const Board = ({
   toggleDiceReroll,
   dicesToReroll,
 }: Props) => {
-  const dicesRef = React.useRef<THREE.Object3D>();
-  const hintsRef = React.useRef<THREE.Object3D>();
+  const dicesRef = React.useRef<THREE.Group | null>(null);
+  const hintsRef = React.useRef<THREE.Group | null>(null);
 
   const [dragging, setDragging] = React.useState(false);
 

src/App/Scene/Dice.tsx

@@ -17,19 +17,18 @@ type Props = {
  * 1x1x1 dice
  */
 export const Dice = ({ selected, ...props }: Props) => {
-  const { nodes, materials } = useGLTF(diceUrl);
+  const { nodes } = useGLTF(diceUrl);
 
-  const mat = materials.Dice as THREE.MeshStandardMaterial;
+  const mesh = nodes.mesh_0 as THREE.Mesh;
 
   return (
     <mesh
       {...props}
       castShadow
-      geometry={(nodes.mesh_0 as any).geometry}
+      geometry={mesh.geometry}
+      material={mesh.material}
       scale={scale}
       dispose={null}
-    >
-      <meshStandardMaterial {...mat} color={selected ? "hotpink" : mat.color} />
-    </mesh>
+    />
   );
 };

src/App/Scene/Ground.tsx

@@ -10,7 +10,7 @@ export const Ground = () => {
       position={[0, -0.001, 0]}
       receiveShadow
     >
-      <planeBufferGeometry args={[100, 100]} />
+      <planeGeometry args={[100, 100]} />
       <shadowMaterial opacity={0.4} />
     </mesh>
   );

src/App/Scene/ScaleOnPulse.tsx

@@ -9,7 +9,7 @@ type Props = {
 };
 
 export const ScaleOnPulse = ({ pulse, children }: Props) => {
-  const ref = React.useRef<THREE.Object3D>();
+  const ref = React.useRef<THREE.Group | null>(null);
   const spring = React.useRef({ x: 0, v: 0, target: 0 });
   React.useEffect(() => {
     if (pulse) spring.current.target = 1;