docs: configure demos on 3d playground

fibbojs · Nov 4, 2024 · f8a7635 · f8a7635
1 parent 0fe5165
commit f8a7635
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 2 deletions.
diff --git a/apps/playground-3d/components/Navbar.ts b/apps/playground-3d/components/Navbar.ts
@@ -0,0 +1,92 @@
+export class Navbar {
+  private __DOM__: HTMLElement
+  private __DOM_TOGGLE__: HTMLElement
+
+  constructor() {
+    // Create the navbar
+    this.__DOM__ = document.createElement('nav')
+    this.__DOM__.id = 'demo-navbar'
+    this.__DOM__.innerHTML = `
+    <a href="/playground-3d/">Home</a>
+    <a href="/playground-3d/demos/rainbowls/">Rainbowls</a>
+    <style>
+      #demo-navbar {
+        position: fixed;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 1rem;
+        width: 180px;
+        height: 90vh;
+        background-color: rgba(0, 0, 0, 0.6);
+        color: white;
+        border-radius: 0 10px 10px 0;
+        transform: translateX(-100%);
+        transition: transform 0.3s ease;
+      }
+      #demo-navbar a {
+        width: 100%;
+        color: white;
+        padding: 0.5rem 1rem;
+        text-decoration: none;
+        background-color: transparent;
+        transition: background-color 0.3s ease;
+      }
+      #demo-navbar a:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+
+      /* Gets applied if supported only */
+      @supports (
+        (-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))
+      ) {
+        #demo-navbar {
+          background-color: rgba(0, 0, 0, 0.2);
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+        }
+      }
+    </style>
+    `
+
+    // Create the toggle button
+    this.__DOM_TOGGLE__ = document.createElement('div')
+    this.__DOM_TOGGLE__.id = 'demo-navbar-toggle'
+    this.__DOM_TOGGLE__.innerHTML = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="-5 -7 24 24"><path fill="currentColor" d="M1 0h5a1 1 0 1 1 0 2H1a1 1 0 1 1 0-2m7 8h5a1 1 0 0 1 0 2H8a1 1 0 1 1 0-2M1 4h12a1 1 0 0 1 0 2H1a1 1 0 1 1 0-2"/></svg>
+    <style>
+      #demo-navbar-toggle {
+        position: absolute;
+        top: 1rem;
+        left: 1rem;
+        width: 2rem;
+        height: 2rem;
+        background-color: rgba(0, 0, 0, 0.6);
+        border: none;
+        border-radius: 50%;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 1000;
+      }
+      #demo-navbar-toggle svg {
+        width: 1.5rem;
+        height: 1.5rem;
+        fill: white;
+      }
+      #demo-navbar-toggle:focus {
+        outline: none;
+      }
+    </style>
+    `
+    let toggle = false
+    this.__DOM_TOGGLE__.addEventListener('click', () => {
+      this.__DOM__.style.transform = toggle ? 'translateX(-100%)' : 'translateX(0)'
+      toggle = !toggle
+    })
+
+    document.body.appendChild(this.__DOM__)
+    document.body.appendChild(this.__DOM_TOGGLE__)
+  }
+}
diff --git a/.../playground-3d/pages/rainbowls/index.html → .../playground-3d/demos/rainbowls/index.html b/.../playground-3d/pages/rainbowls/index.html → .../playground-3d/demos/rainbowls/index.html
@@ -7,6 +7,6 @@
     <title>Vite + TS</title>
   </head>
   <body>
-    <script type="module" src="/pages/rainbowls/main.ts"></script>
+    <script type="module" src="/demos/rainbowls/main.ts"></script>
   </body>
 </html>
diff --git a/apps/playground-3d/pages/rainbowls/main.ts → apps/playground-3d/demos/rainbowls/main.ts b/apps/playground-3d/pages/rainbowls/main.ts → apps/playground-3d/demos/rainbowls/main.ts
@@ -1,10 +1,12 @@
 import '../../src/style.css'
 import { FAmbientLight, FComponentEmpty, FCuboid, FOrbitCamera, FScene, FSphere } from '@fibbojs/3d'
 import * as THREE from 'three'
+import { Navbar } from '../../components/Navbar'
 
 (async () => {
   const scene = new FScene()
   scene.init()
+  new Navbar()
 
   // Add ambient light
   new FAmbientLight(scene, {

diff --git a/apps/playground-3d/src/main.ts b/apps/playground-3d/src/main.ts
@@ -1,6 +1,7 @@
 import { FAmbientLight, FCapsule, FComponentEmpty, FCuboid, FDirectionalLight, FFBX, FGLB, FGameCamera, FOBJ, FRigidBodyType, FScene, FShapes, FSphere, FSpotLight } from '@fibbojs/3d'
 import { fDebug } from '@fibbojs/devtools'
 import { FKeyboard } from '@fibbojs/event'
+import { Navbar } from '../components/Navbar'
 import Duck from './classes/Duck'
 import GltfCube from './classes/GltfCube'
 import './style.css'
@@ -14,9 +15,9 @@ import Character from './classes/Character'
   })
   scene.init()
   await scene.initPhysics()
-  // Debug the scene
   if (import.meta.env.DEV)
     fDebug(scene)
+  new Navbar()
 
   // Add directional light to represent the sun
   new FDirectionalLight(scene, {

diff --git a/apps/playground-3d/vite.config.ts b/apps/playground-3d/vite.config.ts
@@ -1,3 +1,4 @@
+import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import wasm from 'vite-plugin-wasm'
 import topLevelAwait from 'vite-plugin-top-level-await'
@@ -10,6 +11,10 @@ export default defineConfig({
   base: '/playground-3d/',
   build: {
     rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+        rainbowls: resolve(__dirname, 'demos/rainbowls/index.html'),
+      },
       // Solution found here: https://github.com/dimforge/rapier.js/issues/278
       // Without this option, treeshaking seems to ditch required code from Rapier
       // Basically results in : "TypeError: Cannot read properties of undefined (reading 'rawintegrationparameters_new')"