From f7e7e1c6c137875ee37993a894075745e11a5c20 Mon Sep 17 00:00:00 2001
From: Sacha Morgese <sachamorgese@gmail.com>
Date: Fri, 17 Nov 2023 14:49:34 +0000
Subject: [PATCH] Fixed missing shadows when base scene enabled Fixed bug
 happening on events because of missing div

---
 src/components/ExampleView/ExampleFloatingClient.tsx | 4 +++-
 src/pages/docs/reference/events/[event-id].tsx       | 5 ++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/ExampleView/ExampleFloatingClient.tsx b/src/components/ExampleView/ExampleFloatingClient.tsx
index ac8fe01..2b9946d 100644
--- a/src/components/ExampleView/ExampleFloatingClient.tsx
+++ b/src/components/ExampleView/ExampleFloatingClient.tsx
@@ -33,10 +33,12 @@ export const ExampleFloatingClient = React.memo(function ExampleClient(props: {
       if (props.baseScene) {
         const pointLight = new THREE.PointLight(0xffffff, 1, 100);
         pointLight.position.set(10, 10, 10);
+        pointLight.castShadow = true;
         const plane = new THREE.Mesh(
           new THREE.PlaneGeometry(20, 20),
-          new THREE.MeshPhongMaterial({ color: 0xffffff }),
+          new THREE.MeshStandardMaterial({ color: 0xffffff }),
         );
+        plane.receiveShadow = true;
         plane.rotation.x = -Math.PI / 2;
         mmlScene.getThreeScene().add(plane);
         mmlScene.getThreeScene().add(pointLight);
diff --git a/src/pages/docs/reference/events/[event-id].tsx b/src/pages/docs/reference/events/[event-id].tsx
index 06f7185..c73a99d 100644
--- a/src/pages/docs/reference/events/[event-id].tsx
+++ b/src/pages/docs/reference/events/[event-id].tsx
@@ -111,20 +111,19 @@ const DocsPage = ({ eventId }: { eventId: string }) => {
               <TypeDocComment comment={eventClassDefinition.comment} />
             )}
             {primaryExample && (
-              <>
+              <div>
                 <h2 className="mb-4 mt-8 scroll-m-20 text-3xl font-medium" id="try it">
                   Try it
                 </h2>
                 <ExampleView
                   description={primaryExample.description}
-                  key={`${eventId}-primary`}
                   baseScene={
                     primaryExample.baseSceneOn !== undefined ? primaryExample.baseSceneOn : true
                   }
                   code={primaryExample.code}
                   initialClients={primaryExample.clients ?? [CLIENT_TYPES.FLOATING]}
                 />
-              </>
+              </div>
             )}
             <h2 className="mb-4 mt-6 scroll-m-20 text-3xl font-medium" id="properties">
               Properties