wip: 2024-11-26T08:29:42+0100 (1732606182)

public/assets/css/pages/playground/index.css

@@ -0,0 +1,69 @@
+:root {
+	--primer-color-accent: 255, 255, 255;
+	--color-accent: rgb(var(--primer-color-accent));
+}
+
+body {
+	background-color: #06c;
+	background-image: 
+		linear-gradient(rgba(255,255,255,0.2) 2px, transparent 2px),
+		linear-gradient(90deg, rgba(255,255,255,0.2) 2px, transparent 1px),
+		linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
+		linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px)
+	;
+	background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
+	background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
+}
+
+header {
+	background-color: transparent;
+}
+
+img {
+	image-rendering: pixelated;
+}
+
+/* # Sections */
+
+/* ## Title */
+
+section.title {
+	gap: var(--padding);
+	display: grid;
+	align-items: center;
+	justify-items: center;
+	grid-template-columns: repeat(10, 1fr);
+	min-height: 30vh;
+}
+
+section.title img {
+	--outline-width: 5px;
+	--outline-color: black;
+
+	width: 100%;
+	transform: translateY(-10px);
+	animation: bouncy 1s infinite alternate ease-in-out;
+	filter: 
+		drop-shadow(0 10px 0 blue)
+		drop-shadow(0 vaR(--outline-width) 0 var(--outline-color))
+		drop-shadow(0 calc(var(--outline-width) * -1) 0 var(--outline-color))
+		drop-shadow(vaR(--outline-width) 0 0 var(--outline-color))
+		drop-shadow(calc(var(--outline-width) * -1) 0 0 var(--outline-color))
+	;
+}
+
+@keyframes bouncy {
+	25% { transform: translateY(10px); }
+	100% { transform: translateY(10px); }
+}
+
+/* ## Coffee */
+
+section.coffee {
+	display: grid;
+	grid-template-columns: 100px 1fr;
+}
+
+section.coffee img {
+	height: 100%;
+}

public/assets/css/pages/playground/super-secret-settings.css

@@ -0,0 +1,52 @@
+/* # Sections */
+
+super-secret-settings {
+	position: fixed;
+	top: 5px;
+	left: 5px;
+	width: 400px;
+	fill: white;
+	color: white;
+	z-index: 1000;
+	border: solid 1px white;
+	background-color: rgb(0, 102, 204);
+	box-shadow:
+		0 0 0 5px black,
+		0 0 40px 10px rgba(0, 0, 0, .4);
+}
+
+/* ## Header */
+
+super-secret-settings section.header {
+	display: grid;
+	align-items: center;
+	border-bottom: solid 1px white;
+	grid-template-columns: 1fr repeat(2, var(--running-size));
+	height: var(--running-size);
+	cursor: grab;
+}
+
+super-secret-settings section.header:active {
+	cursor: grabbing;
+}
+
+super-secret-settings section.header p {
+	pointer-events: none;
+	padding: 0 var(--padding);
+}
+
+super-secret-settings section.header svg {
+	width: calc(var(--padding) * 1.5);
+	margin: auto;
+}
+
+super-secret-settings section.header button {
+	height: 100%;
+	border-left: solid 1px var(--border-color);
+}
+
+/* ## Body */
+
+super-secret-settings section.body {
+	padding: var(--padding);
+}

public/assets/js/pages/playground/index.js

@@ -0,0 +1,16 @@
+import { Elevent } from "/assets/js/modules/npm/Elevent.mjs";
+
+new Elevent("click", document.querySelector("section.sss button"), () => {
+	const SSS_TAG_NAME = "super-secret-settings";
+
+	let sssElement = document.querySelector(SSS_TAG_NAME);
+
+	// Create SSS element if one does not exist
+	if (!sssElement) {
+		sssElement = document.createElement(SSS_TAG_NAME);
+		document.body.appendChild(sssElement);
+	}
+
+	// Navigate SSS element to playground page
+	new vegvisir.Navigation("/playground/super-secret-settings").navigate(sssElement);
+});

public/assets/js/pages/playground/super-secret-settings.js

@@ -0,0 +1,37 @@
+import { Elevent } from "/assets/js/modules/npm/Elevent.mjs";
+
+const sssElement = document.querySelector("super-secret-settings");
+sssElement._size = sssElement.getBoundingClientRect();
+
+const borderWidth = 5;
+const clampRight = (window.innerWidth - sssElement._size.width) - (borderWidth * 3);
+const clampBottom = (window.innerHeight - sssElement._size.height) - (borderWidth * 3);
+
+const moveWindow = new Elevent("mousemove", null, (event) => {
+	const y = Math.max(borderWidth, Math.min(clampBottom, (event.clientY - 40)));
+	const x = Math.max(borderWidth, Math.min(clampRight, event.clientX - (sssElement._size.width / 2)));
+
+	sssElement.style.transform = `translate(${x}px, ${y}px)`;
+})
+
+new Elevent("mousedown", sssElement.querySelector(".header"), (event) => {
+	event.stopPropagation();
+
+	if (event.target !== sssElement.querySelector(".header")) {
+		return;
+	}
+
+	// Prevent element selection while dragging
+	document.body.style.userSelect = "none";
+
+	// Bind mousemove on body
+	moveWindow.bind(document.body);
+
+	// Unbind mousemove and restore state
+	new Elevent("mouseup", document.body, () => {
+		document.body.style.userSelect = null;
+		moveWindow.remove(document.body);
+	});
+});
+
+new Elevent("click", sssElement.querySelector(".header button"), () => sssElement.remove());

public/playground/index.php

@@ -0,0 +1,20 @@
+<style><?= VV::css("public/assets/css/pages/playground/index") ?></style>
+<section class="title">
+
+	<?php // I was listening to https://www.youtube.com/watch?v=DsUb4Lq6DBE when I made the dancing letters ?>
+	<?php foreach (str_split("playground") as $idx => $char): ?>
+		<img src="data:image/gif;base64,<?= base64_encode(VV::embed("public/assets/media/playground/{$char}.gif")) ?>" style="animation-delay:<?= ($idx % rand(2, 4)) * 500 ?>ms">
+	<?php endforeach; ?>
+
+</section>
+<section class="sss">
+	<button class="inline">Super Secret Settings</button>
+</section>
+<section class="coffee">
+	<img src="data:image/gif;base64,<?= base64_encode(VV::embed("public/assets/media/playground/coffee.gif")) ?>">
+	<div>
+		<h1>How much coffee is enough coffee?</h1>
+		<p>Woah, I 've had 4 cups of coffee today (counting from and to midnight). That's about the average amount for me (from the last 30 days)</p>
+	</div>
+</section>
+<script type="module"><?= VV::js("public/assets/js/pages/playground/index") ?></script>

public/playground/super-secret-settings.php

@@ -0,0 +1,11 @@
+<style><?= VV::css("public/assets/css/pages/playground/super-secret-settings") ?></style>
+<section class="header">
+	<p>Super Secret Settings</p>
+	<button><?= VV::embed("public/assets/media/icons/chevron.svg") ?></button>
+	<button><?= VV::embed("public/assets/media/icons/close.svg") ?></button>
+</section>
+<section class="body">
+	<p>Do you have what it takes to click this button?</p>
+	<button class="inline">I'm feeling lucky</button>
+</section>
+<script type="module"><?= VV::js("public/assets/js/pages/playground/super-secret-settings") ?></script>