diff --git a/public/fear/fonts/vcr.ttf b/public/fear/fonts/vcr.ttf new file mode 100644 index 0000000..dcca687 Binary files /dev/null and b/public/fear/fonts/vcr.ttf differ diff --git a/src/app/fear/page.tsx b/src/app/fear/page.tsx index 064de8c..ce57259 100644 --- a/src/app/fear/page.tsx +++ b/src/app/fear/page.tsx @@ -15,6 +15,7 @@ import Player from './scene-components/player'; import Hallway from './scene-components/hallway'; import { AudioListener } from 'three'; +import FinaleText from './scene-components/finale-text'; function PostProcessing() { const [wasCaught, setWasCaught] = useState(fearState.wasCaught); @@ -94,7 +95,7 @@ export default function Fear() { - + : null} + + ) } \ No newline at end of file diff --git a/src/app/fear/scene-components/finale-text.css b/src/app/fear/scene-components/finale-text.css new file mode 100644 index 0000000..0d80da6 --- /dev/null +++ b/src/app/fear/scene-components/finale-text.css @@ -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); + +} \ No newline at end of file diff --git a/src/app/fear/scene-components/finale-text.tsx b/src/app/fear/scene-components/finale-text.tsx new file mode 100644 index 0000000..9fc0220 --- /dev/null +++ b/src/app/fear/scene-components/finale-text.tsx @@ -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 = []; + + for (let x = 0; x < elementCount; x++) + testElements.push(the deal has been sealed) + + + if (wasCaught) + return (<> +
+ {testElements} +
+
+ ) + + return <> +} \ No newline at end of file diff --git a/src/app/fear/state.ts b/src/app/fear/state.ts index 0ce2159..7baeb93 100644 --- a/src/app/fear/state.ts +++ b/src/app/fear/state.ts @@ -12,7 +12,10 @@ export const FEAR_SETTINGS = { EVENT_NARROW_LOOP_COUNT: 2, EVENT_RUST_LOOP_COUNT: 4, - EVENT_FINALE_LOOP_COUNT: 5 + EVENT_FINALE_LOOP_COUNT: 5, + + EVENT_FINALE_DURATION: 3, + EVENT_FINALE_TEXT_COUNT: 128 }; const listeners = new Set<() => void>(); @@ -23,6 +26,7 @@ export const fearState = { isRustActive: false, finaleTriggered: false, wasCaught: false, + finaleProgression: 0, subscribe(listener: () => void) { listeners.add(listener); @@ -39,8 +43,12 @@ export const fearState = { if (Math.abs(this.currentWidth - newWidth) > 0.001) { this.currentWidth = newWidth; - this.emit(); } + + if (this.wasCaught && this.finaleProgression < FEAR_SETTINGS.EVENT_FINALE_DURATION) + this.finaleProgression = Math.min(this.finaleProgression + delta, FEAR_SETTINGS.EVENT_FINALE_DURATION); + + this.emit(); }, registerLoop(direction: 'forward' | 'backward') {