feat: add the playroom page for social media game templates

✨ This feature was built with help from Hikari~ 🌸

src/data/playroom.ts

@@ -0,0 +1,32 @@
+/**
+ * Playroom template data.
+ * @file
+ * @copyright Naomi Carrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+interface PlayroomTemplate {
+  blankAlt:     string;
+  blankUrl:     string;
+  completedAlt: string;
+  completedUrl: string;
+  description:  string | null;
+  id:           string;
+  name:         string;
+}
+
+const playroomTemplates: Array<PlayroomTemplate> = [
+  {
+    blankAlt:     "A 3×3 alignment chart meme applying the D&D lawful/neutral/chaotic and top/switch/bottom axes to bedroom dynamics. The nine categories and their descriptors are: Lawful Top — knows what they want, big strap/dick energy, will cook food after; Neutral Top — spouse material, wines and dines you, will get to it as soon as you're home; Chaotic Top — way into dirty talk, keyboard smasher, wants to order pizza after; Lawful Switch — sex toy hoarder, \"making you cum is my job\", secretly wants to bottom all the time; True Switch — kinkier than you, low-key horny 24/7, aftercare monarch; Chaotic Switch — brat 24/7, always flirty, might fall asleep during sex; Lawful Bottom — desperate to please, will call you daddy/mommy, will cook food after, naked; Neutral Bottom — just happy to be topped, very soft, will take nap after; Chaotic Bottom — goblin, makes jokes during sex, demands candy after.",
+    blankUrl:     "https://cdn.nhcarrigan.com/personality/playroom/alignment-chart-top-switch-bottom-blank.png",
+    completedAlt: "A 3×3 alignment chart meme applying the D&D lawful/neutral/chaotic and top/switch/bottom axes to bedroom dynamics. Several items are highlighted in pink. Lawful Top — knows what they want ✦highlighted, big strap/dick energy, will cook food after; Neutral Top — spouse material ✦highlighted, wines and dines you ✦highlighted, will fuck you as soon as you get home ✦highlighted; Chaotic Top — way into dirty talk, keyboard smasher, wants to order pizza after ✦highlighted; Lawful Switch — sex toy hoarder ✦highlighted, \"making you cum is my job\" ✦highlighted, secretly wants to bottom all the time; True Switch — kinkier than you, low-key horny 24/7, aftercare monarch; Chaotic Switch — brat 24/7, always flirty ✦highlighted, might fall asleep during sex; Lawful Bottom — desperate to please, will call you daddy/mommy, will cook food after naked; Neutral Bottom — just happy to be topped, very soft, will take nap after; Chaotic Bottom — goblin, makes jokes during sex, demands candy after.",
+    completedUrl: "https://cdn.nhcarrigan.com/personality/playroom/alignment-chart-top-switch-bottom-naomi.png",
+    description:  "The classic top/switch/bottom alignment chart - which traits hit a little too close to home~",
+    id:           "alignment-chart-top-switch-bottom",
+    name:         "Top/Switch/Bottom Alignment Chart",
+  },
+];
+
+export type { PlayroomTemplate };
+export { playroomTemplates };

src/pages/index.astro

@@ -40,6 +40,14 @@ import Base from "../layouts/Base.astro";
         </p>
       </a>
 
+      <a href="/playroom" class="nav-card">
+        <h2>🎴 The Playroom</h2>
+        <p>
+          Alignment charts, bingo cards, and social media games - grab the
+          blank and fill it out~
+        </p>
+      </a>
+
       <a href="https://manual.nhcarrigan.com" class="nav-card">
         <h2>📖 User Manual</h2>
         <p>

src/pages/playroom.astro

@@ -0,0 +1,151 @@
+---
+import Base from "../layouts/Base.astro";
+import { playroomTemplates } from "../data/playroom";
+---
+
+<Base
+  title="The Playroom"
+  description="Naomi Carrigan's filled-out social media templates and games."
+>
+  <main>
+    <div class="page-header">
+      <h1>🎴 The Playroom</h1>
+      <a href="/" class="back-link">← Back</a>
+    </div>
+    <p class="intro">
+      Alignment charts, bingo cards, and all kinds of social media games - my
+      completed results live here. Grab the blank template, fill it out, and
+      make it yours~
+    </p>
+
+    {
+      playroomTemplates.length === 0 ? (
+        <p class="empty">Nothing here yet - check back soon!</p>
+      ) : (
+        <div class="templates-grid">
+          {playroomTemplates.map((template) => (
+            <div class="template-card">
+              <h2 class="template-name">{template.name}</h2>
+              {template.description && (
+                <p class="template-description">{template.description}</p>
+              )}
+              <div class="images">
+                <div class="image-block">
+                  <p class="image-label">My result</p>
+                  <img
+                    src={template.completedUrl}
+                    alt={template.completedAlt}
+                    class="template-image"
+                    loading="lazy"
+                  />
+                </div>
+                <div class="image-block">
+                  <p class="image-label">Grab the blank~</p>
+                  <img
+                    src={template.blankUrl}
+                    alt={template.blankAlt}
+                    class="template-image"
+                    loading="lazy"
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )
+    }
+  </main>
+</Base>
+
+<style>
+  .page-header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .back-link {
+    color: var(--accent);
+    text-decoration: none;
+    font-size: 0.95rem;
+  }
+
+  .back-link:hover {
+    text-decoration: underline;
+  }
+
+  .intro {
+    font-size: 1.05rem;
+    line-height: 1.7;
+    opacity: 0.85;
+    margin-bottom: 2rem;
+  }
+
+  .empty {
+    font-size: 1rem;
+    opacity: 0.5;
+    font-style: italic;
+    text-align: center;
+    margin-top: 4rem;
+  }
+
+  .templates-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+  }
+
+  .template-card {
+    padding: 1.5rem;
+    background: var(--background);
+    border: 2px solid var(--border);
+    border-radius: 10px;
+  }
+
+  .template-name {
+    font-size: 1.3rem;
+    margin: 0 0 0.5rem;
+    color: var(--accent);
+  }
+
+  .template-description {
+    font-size: 0.95rem;
+    line-height: 1.6;
+    opacity: 0.8;
+    margin: 0 0 1.25rem;
+  }
+
+  .images {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+  }
+
+  .image-block {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .image-label {
+    font-size: 0.85rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    opacity: 0.6;
+    margin: 0;
+  }
+
+  .template-image {
+    width: 100%;
+    height: auto;
+    border-radius: 6px;
+    border: 1px solid var(--border);
+  }
+</style>