hide and seek

vtbag · Nov 14, 2024 · a553979 · a553979
1 parent 87dda3f
commit a553979
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 7 deletions.
diff --git a/public/hide-and-seek-og.png b/public/hide-and-seek-og.png
diff --git a/src/content/docs/tips/hide-and-seek.mdx b/src/content/docs/tips/hide-and-seek.mdx
@@ -1,6 +1,11 @@
 ---
 title: Hide and Seek
 description: Making the most of view transitions while awaiting nested groups
+head:
+  - tag: meta
+    attrs:
+      property: "og:image"
+      content: "/hide-and-seek-og.png"
 ---
 The much-anticipated nested view transition groups are already defined in the [Level 2 spec](/basics/api/#w3c-drafts), but to my knowledge they are [not yet supported](/basics/test-page/) by any browser.
 

diff --git a/src/pages/tips/hide-and-seek/problem.astro b/src/pages/tips/hide-and-seek/problem.astro
@@ -6,8 +6,19 @@ import "./_problem_styles.css";
 <html lang="en" data-vtbag-x="#window @scrollTop">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/bag3.png" type="image/png" />
+    <meta
+      property="og:description"
+      content="Without nested groups, view transition images break out of their captivity as soon as the opportunity arises."
+    />
+    <meta property="og:image" content="/hide-and-seek-og.png" />
+    <meta property="og:url" content="/tips/hide-and-seek/" />
+    <meta property="og:title" content="Hide and Seek" />
+    <meta property="og:type" content="article" />
+    <meta property="og:site_name" content="@vtbag" />
+    <meta name="twitter:card" content="summary_large_image" />
+
     <script is:inline>
       const cyberItems = [
         "Quantum Neural Interface",
@@ -33,7 +44,13 @@ import "./_problem_styles.css";
       ];
 
       addEventListener("pagereveal", (event) => {
-
+        const from = new URL(navigation.activation.from.url, location.href);
+        if (
+          event.viewTransition &&
+          from.pathname !== "/tips/hide-and-seek/problem/"
+        ) {
+          event.viewTransition.skipTransition?.();
+        }
         const scrollInfo = JSON.parse(
           sessionStorage.getItem("vtbag-hide-seek") ||
             '{"scrollTop":0, "scrollY":0}'
@@ -77,8 +94,17 @@ import "./_problem_styles.css";
         <h1>CYBER<span class="glitch-effect">TECH</span> INVENTORY</h1>
         <ul class="cyber-list"></ul>
         <button class="-glitch-effect">RANDOMIZE</button>
-        <p style="max-width:640px">Oh what a mess! All items of the list define a transition group to show how the items are shuffled. But with the start of the view transition, they are all thrown on the screen, even if they were clipped before. What a mess!<br/>
-          [<a href="/tips/hide-and-seek/#naive-scrollable-list">Back to the Hide and Seek page</a>]</p>
+        <p style="max-width:640px">
+          Oh what a mess! All items of the list define a transition group to
+          show how the items are shuffled. But with the start of the view
+          transition, they are all thrown on the screen, even if they were
+          clipped before. Can we <a href="/tips/hide-and-seek/solution/"
+            >do better</a
+          >?<br />
+           [<a href="/tips/hide-and-seek/#naive-scrollable-list"
+            >Back to the Hide and Seek page</a
+          >]
+        </p>
       </div>
       <div id="d2"></div>
     </div>
@@ -91,6 +117,18 @@ import "./_problem_styles.css";
         );
         location.href = "/tips/hide-and-seek/problem/";
       });
+      addEventListener("pageswap", (event) => {
+        // @ts-ignore
+        if (event.viewTransition) {
+          // @ts-ignore
+          const url = new URL(event.activation.entry.url, location.href);
+          console.log(url.pathname);
+          if (url.pathname !== "/tips/hide-and-seek/problem/") {
+            // @ts-ignore
+            event.viewTransition.skipTransition?.();
+          }
+        }
+      });
     </script>
   </body>
 </html>
diff --git a/src/pages/tips/hide-and-seek/solution.astro b/src/pages/tips/hide-and-seek/solution.astro
@@ -6,8 +6,18 @@ import "./_solution_styles.css";
 <html lang="en" data-vtbag-x="#window @scrollTop">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/bag3.png" type="image/png" />
+    <meta
+      property="og:description"
+      content="Desperately waiting for nested view transition groups... Clipping these transitions shouldn't be this hard! 🙏"
+    />
+    <meta property="og:image" content="/hide-and-seek-og.png" />
+    <meta property="og:url" content="/tips/hide-and-seek/" />
+    <meta property="og:title" content="Hide and Seek" />
+    <meta property="og:type" content="article" />
+    <meta property="og:site_name" content="@vtbag" />
+    <meta name="twitter:card" content="summary_large_image" />
     <script is:inline>
       const cyberItems = [
         "Quantum Neural Interface",
@@ -33,6 +43,13 @@ import "./_solution_styles.css";
       ];
 
       addEventListener("pagereveal", (event) => {
+        const from = new URL(navigation.activation.from.url, location.href);
+        if (
+          event.viewTransition &&
+          from.pathname !== "/tips/hide-and-seek/solution/"
+        ) {
+          event.viewTransition.skipTransition?.();
+        }
         const scrollInfo = JSON.parse(
           sessionStorage.getItem("vtbag-hide-seek") ||
             '{"scrollTop":0, "scrollY":0}'
@@ -61,7 +78,7 @@ import "./_solution_styles.css";
         document.head.insertAdjacentHTML(
           "beforeend",
           `<style>::view-transition-new(root) {
-          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="${innerWidth}" height="${innerHeight}"><rect x="0" y="0" width="${innerWidth}" height="${ul.top +1}" fill="black"/><rect x="0" y="${ul.bottom -1}" width="${innerWidth}" height="${innerHeight - ul.bottom+1}" fill="black"/><rect x="0" y="0" width="${ul.left + 1}" height="${innerHeight}" fill="black"/><rect x="${ul.right - 11}" y="0" width="${innerWidth - ul.right}" height="${innerHeight}" fill="black"/></svg>');
+          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="${innerWidth}" height="${innerHeight}"><rect x="0" y="0" width="${innerWidth}" height="${ul.top + 1}" fill="black"/><rect x="0" y="${ul.bottom - 1}" width="${innerWidth}" height="${innerHeight - ul.bottom + 1}" fill="black"/><rect x="0" y="0" width="${ul.left + 1}" height="${innerHeight}" fill="black"/><rect x="${ul.right - 11}" y="0" width="${innerWidth - ul.right}" height="${innerHeight}" fill="black"/></svg>');
           }</style>`
         );
       });
@@ -90,7 +107,14 @@ import "./_solution_styles.css";
         <h1>CYBER<span class="glitch-effect">TECH</span> INVENTORY</h1>
         <ul class="cyber-list"></ul>
         <button class="-glitch-effect">RANDOMIZE</button>
-        <p style="max-width:640px">Ok, it kind of seems to work! This is demo is a rather crude force attack to to problem. Keep in mind that view transitions were introduced to make things simple. This wasn't. Give us nested groups, please! ;-)<br/>[<a href="/tips/hide-and-seek/#playing-hide--seek">Back to the Hide and Seek page</a>]</p>
+        <p style="max-width:640px">
+          Ok, it kind of seems to work! This is demo is a rather crude force
+          attack to to problem. Keep in mind that view transitions were
+          introduced to make things simple. This wasn't. Give us nested groups,
+          please! ;-)<br />[<a href="/tips/hide-and-seek/#playing-hide--seek"
+            >Back to the Hide and Seek page</a
+          >]
+        </p>
       </div>
       <div id="d2"></div>
     </div>
@@ -103,6 +127,18 @@ import "./_solution_styles.css";
         );
         location.href = "/tips/hide-and-seek/solution/";
       });
+      addEventListener("pageswap", (event) => {
+        // @ts-ignore
+        if (event.viewTransition) {
+          // @ts-ignore
+          const url = new URL(event.activation.entry.url, location.href);
+          console.log(url.pathname);
+          if (url.pathname !== "/tips/hide-and-seek/solution/") {
+            // @ts-ignore
+            event.viewTransition.skipTransition?.();
+          }
+        }
+      });
     </script>
   </body>
 </html>