Added handler for WebGL disabled error

src/components/dice/DiceInteraction.js

@@ -1,4 +1,5 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState } from "react";
+import { Box, Text } from "theme-ui";
 import { Engine } from "@babylonjs/core/Engines/engine";
 import { Scene } from "@babylonjs/core/scene";
 import { Vector3, Color4, Matrix } from "@babylonjs/core/Maths/math";
@@ -18,60 +19,68 @@ import ReactResizeDetector from "react-resize-detector";
 
 import usePreventTouch from "../../hooks/usePreventTouch";
 
+import Banner from "../Banner";
+
 const diceThrowSpeed = 2;
 
 function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
+  const [error, setError] = useState();
+
   const sceneRef = useRef();
   const engineRef = useRef();
   const canvasRef = useRef();
   const containerRef = useRef();
 
   useEffect(() => {
-    const canvas = canvasRef.current;
+    try {
-    const engine = new Engine(canvas, true, {
+      const canvas = canvasRef.current;
-      preserveDrawingBuffer: true,
+      const engine = new Engine(canvas, true, {
-      stencil: true,
+        preserveDrawingBuffer: true,
-    });
+        stencil: true,
-    const scene = new Scene(engine);
+      });
-    scene.clearColor = new Color4(0, 0, 0, 0);
+      const scene = new Scene(engine);
-    // Enable physics
+      scene.clearColor = new Color4(0, 0, 0, 0);
-    scene.enablePhysics(new Vector3(0, -98, 0), new AmmoJSPlugin(true, AMMO));
+      // Enable physics
+      scene.enablePhysics(new Vector3(0, -98, 0), new AmmoJSPlugin(true, AMMO));
 
-    let camera = new TargetCamera("camera", new Vector3(0, 33.5, 0), scene);
+      let camera = new TargetCamera("camera", new Vector3(0, 33.5, 0), scene);
-    camera.fov = 0.65;
+      camera.fov = 0.65;
-    camera.setTarget(Vector3.Zero());
+      camera.setTarget(Vector3.Zero());
 
-    onSceneMount && onSceneMount({ scene, engine, canvas });
+      onSceneMount && onSceneMount({ scene, engine, canvas });
 
-    engineRef.current = engine;
+      engineRef.current = engine;
-    sceneRef.current = scene;
+      sceneRef.current = scene;
 
-    engine.runRenderLoop(() => {
+      engine.runRenderLoop(() => {
-      const scene = sceneRef.current;
+        const scene = sceneRef.current;
-      const selectedMesh = selectedMeshRef.current;
+        const selectedMesh = selectedMeshRef.current;
-      if (selectedMesh && scene) {
+        if (selectedMesh && scene) {
-        const ray = scene.createPickingRay(
+          const ray = scene.createPickingRay(
-          scene.pointerX,
+            scene.pointerX,
-          scene.pointerY,
+            scene.pointerY,
-          Matrix.Identity(),
+            Matrix.Identity(),
-          camera
+            camera
-        );
+          );
-        const currentPosition = selectedMesh.getAbsolutePosition();
+          const currentPosition = selectedMesh.getAbsolutePosition();
-        let newPosition = ray.origin.scale(camera.globalPosition.y);
+          let newPosition = ray.origin.scale(camera.globalPosition.y);
-        newPosition.y = currentPosition.y;
+          newPosition.y = currentPosition.y;
-        const delta = newPosition.subtract(currentPosition);
+          const delta = newPosition.subtract(currentPosition);
-        selectedMesh.setAbsolutePosition(newPosition);
+          selectedMesh.setAbsolutePosition(newPosition);
-        const velocity = delta.scale(1000 / scene.deltaTime);
+          const velocity = delta.scale(1000 / scene.deltaTime);
-        selectedMeshVelocityWindowRef.current = selectedMeshVelocityWindowRef.current.slice(
+          selectedMeshVelocityWindowRef.current = selectedMeshVelocityWindowRef.current.slice(
-          Math.max(
+            Math.max(
-            selectedMeshVelocityWindowRef.current.length -
+              selectedMeshVelocityWindowRef.current.length -
-              selectedMeshVelocityWindowSize,
+                selectedMeshVelocityWindowSize,
-            0
+              0
-          )
+            )
-        );
+          );
-        selectedMeshVelocityWindowRef.current.push(velocity);
+          selectedMeshVelocityWindowRef.current.push(velocity);
-      }
+        }
-    });
+      });
+    } catch (error) {
+      setError(error);
+    }
   }, [onSceneMount]);
 
   const selectedMeshRef = useRef();
@@ -128,9 +137,11 @@ function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
 
   function handleResize(width, height) {
     const engine = engineRef.current;
-    engine.resize();
+    if (engine) {
-    canvasRef.current.width = width;
+      engine.resize();
-    canvasRef.current.height = height;
+      canvasRef.current.width = width;
+      canvasRef.current.height = height;
+    }
   }
 
   usePreventTouch(containerRef);
@@ -155,6 +166,13 @@ function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
           style={{ outline: "none" }}
         />
       </ReactResizeDetector>
+      <Banner isOpen={!!error} onRequestClose={() => setError()}>
+        <Box p={1}>
+          <Text as="p" variant="body2">
+            Error: {error && error.message}
+          </Text>
+        </Box>
+      </Banner>
     </div>
   );
 }