generated from nhcarrigan/template
feat: add the playroom page for social media game templates
✨ This feature was built with help from Hikari~ 🌸
This commit is contained in:
@@ -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 };
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user