feat: add finale text

2026-06-01 22:02:22 -03:00
parent b9eeed848b
commit 8c4080f10c
5 changed files with 102 additions and 3 deletions
@@ -0,0 +1,52 @@
+@font-face {
+    font-family: 'VCR';
+    src: url('/fear/fonts/vcr.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+.finale-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0vh;
+
+    display: grid;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    overflow: hidden;
+
+    grid-auto-rows: 2.5vh;
+    /* grid-template-columns: 0; */
+    grid-template-rows: repeat(auto-fit, max-content);
+
+    user-select: none;
+}
+
+.finale-text {
+    font-family: 'VCR', sans-serif;
+    height: 0px;
+    width: 100%;
+    color: rgb(255, 255, 255);
+    font-size: 5vh;
+
+    text-align: center;
+    white-space: nowrap;
+}
+
+.scanlines {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 900;
+    background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px,
+            rgba(0, 0, 0, 0) 2px,
+            rgba(0, 0, 0, 0.3) 2px,
+            rgba(0, 0, 0, 0.3) 4px);
+
+}
@@ -0,0 +1,36 @@
+import { JSX, useEffect, useState } from "react"
+import { FEAR_SETTINGS, fearState } from "../state"
+
+import './finale-text.css';
+
+export default function FinaleText() {
+    const [progression, setProgression] = useState(fearState.finaleProgression);
+    const [wasCaught, setWasCaught] = useState(fearState.isRustActive);
+
+    useEffect(() => {
+        const unsubscribe = fearState.subscribe(() => {
+            setProgression(fearState.finaleProgression);
+            setWasCaught(fearState.wasCaught)
+        });
+        return () => unsubscribe();
+    });
+
+
+    let elementCount = (FEAR_SETTINGS.EVENT_FINALE_TEXT_COUNT / FEAR_SETTINGS.EVENT_FINALE_DURATION) * progression;
+
+    let testElements: Array<JSX.Element> = [];
+
+    for (let x = 0; x < elementCount; x++)
+        testElements.push(<span className="finale-text" key={x}>the deal has been sealed</span>)
+
+
+    if (wasCaught)
+        return (<>
+            <div className="finale-container">
+                {testElements}
+            </div>
+            <div className="scanlines" />
+        </>)
+
+    return <></>
+}