Platane · Platane · Aug 22, 2024 · Sep 7, 2024
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -17,7 +17,7 @@ jobs:
       - 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 }}
+      # - run: bunx surge ./dist yAR-htzee-platane.surge.sh
+      #   env:
+      #     SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
+      #     SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }}
diff --git a/README.md b/README.md
@@ -42,3 +42,8 @@ yarn dev
 
 - ["Dice"](https://skfb.ly/6RtsC) by tnRaro is licensed under [CC BY 4.0](http://creativecommons.org/licenses/by/4.0/).
 - ["Lebombo"](https://hdrihaven.com/hdri/?c=indoor&h=lebombo) by Greg Zaal is licensed under [CC0](https://creativecommons.org/share-your-work/public-domain/cc0/)
+
+# TODO
+
+- framebuffer swapping seems ok-ish
+- touch detection is broken
diff --git a/index.html b/index.html
@@ -1,19 +1,35 @@
 <!DOCTYPE html>
+
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+
     <title>🎲</title>
-    <style></style>
+
+    <style>
+      body {
+        margin: 0;
+        user-select: none;
+        font-family: system-ui, helvetica, Arial;
+      }
+
+      #overlay {
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+      }
+    </style>
   </head>
-  <body
-    style="
-      margin: 0;
-      user-select: none;
-      font-family: system-ui, helvetica, Arial;
-    "
-  >
+
+  <body>
     <div id="root"></div>
+    <div id="overlay"></div>
+
     <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/src/App/App.tsx b/src/App/App.tsx
@@ -19,11 +19,14 @@ import { useXR8 } from "../XR8Canvas/useXR8";
 // @ts-ignore
 import { Visualizer } from "react-touch-visualizer";
 import { xr8Hosted } from "../XR8Canvas/getXR8";
+import { WebXRControls } from "../WebXRCanvas/WebXRControls";
+import { createPortal } from "react-dom";
 
 const xr8ApiKey: string = ""; //process.env.XR8_API_KEY!;
 const touchSupported = "ontouchend" in document;
 
 type Props = {
+  webXRSession?: XRSession;
   started: boolean;
   onReady: () => void;
   onProgress?: (x: number) => void;
@@ -40,7 +43,7 @@ const useHint = ({ status, k, dicesToReroll, roundKey }: any) => {
   }
 };
 
-export const App = ({ onReady, onProgress, started }: Props) => {
+export const App = ({ onReady, onProgress, webXRSession, started }: Props) => {
   const [error, setError] = React.useState<Error>();
   if (error) throw error;
 
@@ -111,6 +114,13 @@ export const App = ({ onReady, onProgress, started }: Props) => {
         <ErrorBoundary onError={setError}>
           {xr8 && <XR8Controls xr8={xr8} onReady={() => setXr8Ready(true)} />}
 
+          {webXRSession && (
+            <WebXRControls
+              webXRSession={webXRSession}
+              onPoseFound={() => console.log("pose found")}
+            />
+          )}
+
           <React.Suspense fallback={null}>
             <Environment path={"assets/"} files={"lebombo_1k.hdr"} />
 
@@ -131,66 +141,70 @@ export const App = ({ onReady, onProgress, started }: Props) => {
         </ErrorBoundary>
       </Canvas>
 
-      {started && (
-        <>
-          <Header
-            k={k}
-            status={status}
-            roll={roll}
-            toggleDiceReroll={toggleDiceReroll}
-          />
-
-          {!scoreSheetOpened && (
-            <button
-              style={{
-                position: "absolute",
-                width: "160px",
-                height: "40px",
-                bottom: "10px",
-                right: "60px",
-                zIndex: 1,
-              }}
-              onClick={openScoreSheet}
-            >
-              score sheet
-            </button>
-          )}
-
-          <a href="https://github.com/platane/yAR-htzee" title="github">
-            <button
-              style={{
-                position: "absolute",
-                width: "40px",
-                height: "40px",
-                bottom: "10px",
-                right: "10px",
-                zIndex: 1,
-              }}
-            >
-              <GithubLogo />
-            </button>
-          </a>
-
-          {scoreSheetOpened && (
-            <Overlay>
-              <ScoreSheet
-                style={{ width: "calc( 100% - 40px )", maxWidth: "600px" }}
-                scoreSheet={scoreSheet}
-                onClose={closeScoreSheet}
-                onSelectCategory={
-                  status === "picking" ? selectCategoryForRoll : undefined
-                }
-                rollCandidate={roll}
-                reset={reset}
-              />
-            </Overlay>
-          )}
+      {started &&
+        createPortal(
+          <>
+            <Header
+              k={k}
+              status={status}
+              roll={roll}
+              toggleDiceReroll={toggleDiceReroll}
+            />
 
-          {hint === "throw" && <ThrowHint />}
-          {hint === "pick" && <PickHint />}
-          {hint === "pull" && <PullHint />}
-        </>
-      )}
+            {!scoreSheetOpened && (
+              <button
+                style={{
+                  position: "absolute",
+                  width: "160px",
+                  height: "40px",
+                  bottom: "10px",
+                  right: "60px",
+                  zIndex: 1,
+                  pointerEvents: "auto",
+                }}
+                onClick={openScoreSheet}
+              >
+                score sheet
+              </button>
+            )}
+
+            <a href="https://github.com/platane/yAR-htzee" title="github">
+              <button
+                style={{
+                  position: "absolute",
+                  width: "40px",
+                  height: "40px",
+                  bottom: "10px",
+                  right: "10px",
+                  zIndex: 1,
+                  pointerEvents: "auto",
+                }}
+              >
+                <GithubLogo />
+              </button>
+            </a>
+
+            {scoreSheetOpened && (
+              <Overlay>
+                <ScoreSheet
+                  style={{ width: "calc( 100% - 40px )", maxWidth: "600px" }}
+                  scoreSheet={scoreSheet}
+                  onClose={closeScoreSheet}
+                  onSelectCategory={
+                    status === "picking" ? selectCategoryForRoll : undefined
+                  }
+                  rollCandidate={roll}
+                  reset={reset}
+                />
+              </Overlay>
+            )}
+
+            {hint === "throw" && <ThrowHint />}
+            {hint === "pick" && <PickHint />}
+            {hint === "pull" && <PullHint />}
+          </>,
+          document.getElementById("overlay")!
+        )}
     </>
   );
 };

diff --git a/src/App/Boot.tsx b/src/App/Boot.tsx
@@ -1,6 +1,10 @@
 import * as React from "react";
 import { LoadingScreen } from "./Ui/LoadingScreen";
 import loadable from "@loadable/component";
+import {
+  useIsWebXRSupported,
+  useWebXRSession,
+} from "../WebXRCanvas/WebXRControls";
 
 const LazyApp = loadable(() => import("./App"));
 
@@ -10,11 +14,24 @@ export const Boot = () => {
   >({ progress: 0 });
   const [started, setStarted] = React.useState(false);
 
+  const arSupported = useIsWebXRSupported();
+
+  const webXR = useWebXRSession({
+    optionalFeatures: [
+      "dom-overlay",
+      "local-floor",
+      // "light-estimation",
+      // "hit-test",
+    ],
+    domOverlay: { root: document.getElementById("overlay")! },
+  });
+
   return (
     <ErrorBoundary>
       <React.Suspense fallback={null}>
         <LazyApp
           started={started}
+          webXRSession={webXR.session}
           onReady={() => setLoadingStatus("ready")}
           onProgress={(progress) =>
             setLoadingStatus((s) => (s === "ready" ? s : { progress }))
@@ -24,11 +41,15 @@ export const Boot = () => {
 
       {!started && (
         <LoadingScreen
-          loading={loadingStatus !== "ready"}
+          arSupported={arSupported}
+          loading={loadingStatus !== "ready" || arSupported === "loading"}
           loadingProgress={
             loadingStatus !== "ready" ? loadingStatus.progress : 1
           }
-          onClose={() => setStarted(true)}
+          onStart={async (ar: boolean) => {
+            if (ar) await webXR.init();
+            setStarted(true);
+          }}
         />
       )}
     </ErrorBoundary>

diff --git a/src/App/Scene/Board.tsx b/src/App/Scene/Board.tsx
@@ -63,6 +63,8 @@ export const Board = ({
               onClick={
                 toggleDiceReroll &&
                 ((event: Event) => {
+                  console.log("click on dice");
+
                   event.stopPropagation();
                   toggleDiceReroll(i);
                 })

diff --git a/src/App/Ui/LoadingScreen.tsx b/src/App/Ui/LoadingScreen.tsx
@@ -1,9 +1,19 @@
 import * as React from "react";
 import { PageRules } from "./PageRules";
 
-type Props = { onClose: () => void; loading: boolean; loadingProgress: number };
+type Props = {
+  onStart: (ar: boolean) => void;
+  loading: boolean;
+  loadingProgress: number;
+  arSupported: boolean | "loading";
+};
 
-export const LoadingScreen = ({ onClose, loading, loadingProgress }: Props) => (
+export const LoadingScreen = ({
+  onStart,
+  loading,
+  loadingProgress,
+  arSupported,
+}: Props) => (
   <div
     style={{
       padding: "10px",
@@ -15,19 +25,38 @@ export const LoadingScreen = ({ onClose, loading, loadingProgress }: Props) => (
   >
     <PageRules />
 
-    <button
-      style={{
-        width: "160px",
-        height: "40px",
-        marginTop: "60px",
-        alignSelf: "center",
-      }}
-      onClick={loading ? undefined : onClose}
-      disabled={loading}
-    >
-      {loading &&
-        `loading ${(loadingProgress * 100).toFixed(0).padStart(3, " ")}% ...`}
-      {!loading && "Start"}
-    </button>
+    {loading && (
+      <Button disabled>{`loading ${(loadingProgress * 100)
+        .toFixed(0)
+        .padStart(3, " ")}% ...`}</Button>
+    )}
+
+    {!loading && !arSupported && (
+      <Button onClick={() => onStart(false)}>Start</Button>
+    )}
+
+    {!loading && arSupported && (
+      <>
+        <Button onClick={() => onStart(true)}>Start AR</Button>
+        <Button onClick={() => onStart(false)} style={{ opacity: 0.7 }}>
+          Start flat
+        </Button>
+      </>
+    )}
   </div>
 );
+
+const Button = ({ children, style, ...props }: any) => (
+  <button
+    {...props}
+    style={{
+      width: "160px",
+      height: "40px",
+      marginTop: "60px",
+      alignSelf: "center",
+      ...style,
+    }}
+  >
+    {children}
+  </button>
+);
diff --git a/src/App/Ui/Overlay.tsx b/src/App/Ui/Overlay.tsx
@@ -16,6 +16,7 @@ export const Overlay = ({ children }: any) => (
       height: "100%",
       backgroundColor: "rgba(0,0,0,0.1)",
       overflow: "auto",
+      pointerEvents: "auto",
     }}
   >
     {children}