Initial Release

pancakz-v3-beam/application/include/secret-sprites/banner.ts

@@ -0,0 +1,67 @@
+const soundActive = document.querySelector<HTMLAudioElement>('audio#active')!
+const soundBounce = document.querySelector<HTMLAudioElement>('audio#bounce')!
+const canvas = document.querySelector<HTMLCanvasElement>('canvas#sprites')!
+
+if (canvas && soundActive && soundBounce) {
+    const C = {
+        TEXTURE_WIDTH: 68,
+        TEXTURE_HEIGHT: 78,
+        TEXTURE_SCALE: 0.5,
+        RENDER_WIDTH: 256,
+        RENDER_HEIGHT: 256,
+        GRAVITY: 0.67,
+        BOUNCE: 0.75,
+        JUMP: 8,
+        COUNT: 3,
+    }
+    const TEXTURE = new Image()
+    const SPRITES = new Array()
+    const OFFSET = (C.RENDER_WIDTH - C.COUNT * (C.TEXTURE_WIDTH * C.TEXTURE_SCALE)) / C.COUNT
+
+    for (let i = 0; i < C.COUNT; i++) {
+        SPRITES.push({
+            x: OFFSET / 2 + OFFSET * i + C.TEXTURE_WIDTH * C.TEXTURE_SCALE * i,
+            v: 0,
+            y: 0,
+        })
+    }
+
+    const ctx = canvas.getContext('2d')!
+    TEXTURE.src = document.querySelector<HTMLLinkElement>('link[rel=texture')!.href
+    canvas.style.imageRendering = 'pixelated'
+    canvas.style.width = `${C.RENDER_WIDTH}px`
+    canvas.style.height = `${C.RENDER_HEIGHT}px`
+    canvas.width = C.RENDER_WIDTH
+    canvas.height = C.RENDER_HEIGHT
+    soundBounce.playbackRate = 2
+    soundBounce.volume = 0.5
+
+    canvas.addEventListener('click', () => {
+        for (let i = 0; i < C.COUNT; i++) {
+            SPRITES[i].v += C.JUMP + Math.random() * (C.JUMP / 2)
+        }
+    })
+
+    setInterval(() => {
+        ctx.clearRect(0, 0, C.RENDER_WIDTH, C.RENDER_HEIGHT)
+        for (let i = 0; i < SPRITES.length; i++) {
+            let oy = C.RENDER_HEIGHT - C.TEXTURE_HEIGHT * C.TEXTURE_SCALE
+            let s = SPRITES[i]
+            s.v -= C.GRAVITY
+            s.y += s.v
+
+            if (s.y < 0) {
+                s.y = 0
+                s.v = -s.v * C.BOUNCE
+                if (Math.abs(s.v) < 0.8) {
+                    s.v = 0
+                } else {
+                    soundBounce.currentTime = 0
+                    soundBounce.play()
+                }
+            }
+
+            ctx.drawImage(TEXTURE, s.x, oy - s.y, C.TEXTURE_WIDTH * C.TEXTURE_SCALE, C.TEXTURE_HEIGHT * C.TEXTURE_SCALE)
+        }
+    }, 1000 / 60)
+}

pancakz-v3-beam/application/include/secret-sprites/main.css

@@ -0,0 +1,94 @@
+:root {
+    --accent: #4d58ff;
+}
+
+body {
+    background-color: black;
+    padding: 0;
+    margin: 0;
+}
+
+a,
+p {
+    display: inline-block;
+    font-family: 'Poppins', sans-serif;
+    line-height: 1.5em;
+    font-weight: 400;
+    color: #f0f0f0;
+    padding: 0 16px;
+    margin: 0;
+    text-align: justify;
+    box-sizing: border-box;
+}
+
+/* Layout */
+
+div.layout-section {
+    width: 100%;
+    max-width: 640px;
+    margin: 16px auto;
+    padding: 16px;
+    box-sizing: border-box;
+    display: grid;
+    gap: 16px;
+}
+
+img.article-banner {
+    width: 100%;
+    image-rendering: pixelated;
+    aspect-ratio: 3.4;
+}
+
+/* Effects */
+
+.effect-caution {
+    position: relative;
+    border: 4px solid var(--accent);
+    background-color: black;
+    margin-bottom: 12px;
+    margin-right: 12px;
+}
+
+.effect-caution::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: -16px;
+    bottom: -16px;
+    box-sizing: border-box;
+    filter: brightness(0.5);
+    background: repeating-linear-gradient(45deg, var(--accent) 0, var(--accent) 8px, black 8px, black 16px);
+    clip-path: polygon(calc(100% - 11px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - 11px), calc(100% - 11px) calc(100% - 11px));
+}
+
+.effect-rhombus {
+    position: relative;
+    font-weight: 500;
+    padding: 0 16px;
+    z-index: 1;
+    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);
+}
+
+.effect-rhombus::before {
+    position: absolute;
+    content: '';
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    background: var(--accent);
+    z-index: -1;
+}
+
+/* Mobile */
+@media only screen and (max-width: 600px) {
+    div.layout-section {
+        margin: 0;
+    }
+
+    .effect-caution::before {
+        display: none;
+    }
+}