Support a share panel

public/game.css

@@ -1,4 +1,5 @@
-@import url("game-win-animations.css") not (prefers-reduced-motion);
+@import url("game-win-animations.css") screen and (update: fast) and
+  (not (prefers-reduced-motion));
 
 :root {
   font-family: sans-serif;
@@ -74,7 +75,7 @@ h1 {
   margin: 0;
 }
 
-nav > button,
+button,
 nav > a {
   background: none;
   border: none;
@@ -176,3 +177,15 @@ dialog > div {
   gap: 1em;
   text-align: center;
 }
+
+.share-supported {
+  display: none;
+}
+
+:root.supports-share .share-supported {
+  display: initial;
+}
+
+:root.supports-share .share-not-supported {
+  display: none;
+}

public/game.html

@@ -101,7 +101,11 @@ <h1>Maze</h1>
     <dialog id="winDialog" aria-label="Congratulations dialog">
       <div>
         <p>Amazing work!</p>
-        <p>If you enjoyed this, please share it with your friends.</p>
+        <p>
+          If you enjoyed this, please
+          <button value="share" class="share-supported">share</button>
+          <span class="share-not-supported">share</span> it with your friends.
+        </p>
       </div>
     </dialog>
   </body>

src/game/app.ts

@@ -20,6 +20,9 @@ interface WindowType {
     replaceState: Window["history"]["replaceState"];
     state: Window["history"]["state"];
   };
+  navigator: {
+    share: Window["navigator"]["share"];
+  };
   location: {
     hash: Window["location"]["hash"];
     href: Window["location"]["href"];
@@ -146,6 +149,11 @@ function clickHandlerFactory(
       const value = ev.target.value;
       if (value === "new") {
         newMaze(app);
+      } else if (value === "share") {
+        app.window.navigator.share({
+          url: app.window.location.href,
+          title: "Maze puzzle",
+        });
       }
     } else if (ev.target instanceof Node && app.mazeSvg.contains(ev.target)) {
       move(app, ev.x, ev.y);
@@ -276,5 +284,7 @@ export async function initialiseApp(window: WindowType) {
     navigate(app, app.window.location.hash, false);
   }
 
+  app.root.classList.toggle("supports-share", "share" in window.navigator);
+
   newMaze(app);
 }