From e3ce3c90c779921c20be1f55cb2e80afad24c647 Mon Sep 17 00:00:00 2001
From: Gnarwhal <git.aspect893@passmail.net>
Date: Fri, 27 Sep 2024 17:03:57 +0000
Subject: [PATCH] Proper marquee. Line endings??? Uhhhh....layout. I forgor.

---
 .../airstrip_one/0/components/BeegText.css.ts | 68 +++++++-------
 .../airstrip_one/0/components/BeegText.tsx    | 32 +++----
 .../airstrip_one/0/components/Marquee.css.ts  | 68 +++++++-------
 src/app/airstrip_one/0/components/Marquee.tsx | 60 ++++++++++---
 src/app/airstrip_one/0/layout.css.ts          | 17 ++++
 src/app/airstrip_one/0/layout.tsx             | 13 +++
 .../0/ministry_of_truth/components/Input.tsx  | 15 +++-
 .../0/ministry_of_truth/layout.tsx            | 18 ++--
 .../0/ministry_of_truth/page.css.ts           | 42 +++------
 .../airstrip_one/0/ministry_of_truth/page.tsx | 43 ++++-----
 src/app/airstrip_one/0/page.css.ts            | 89 ++++++++-----------
 src/app/airstrip_one/0/page.tsx               | 52 +++++------
 src/app/global.css.ts                         | 18 ++--
 src/app/layout.tsx                            |  6 +-
 14 files changed, 285 insertions(+), 256 deletions(-)
 create mode 100644 src/app/airstrip_one/0/layout.css.ts
 create mode 100644 src/app/airstrip_one/0/layout.tsx

diff --git a/src/app/airstrip_one/0/components/BeegText.css.ts b/src/app/airstrip_one/0/components/BeegText.css.ts
index 58d2d13..41cfa18 100644
--- a/src/app/airstrip_one/0/components/BeegText.css.ts
+++ b/src/app/airstrip_one/0/components/BeegText.css.ts
@@ -1,34 +1,34 @@
-import { style } from '@vanilla-extract/css';
-
-export const beeg_container = style({
-	position: 'relative',
-	width:    'max-content',
-	height:   'max-content',
-});
-
-const beeg = style({
-	position: 'absolute',
-	fontSize: '1.75em',
-	'@media': {
-		'screen and (min-width: 768px)': {
-			fontSize: '3em',
-		}
-	}
-});
-
-export const beeg_dummy = style([beeg, {
-	position: 'static',
-	color:    'transparent',
-}]);
-
-export const beeg_foreground = style([beeg, {
-	background:     'linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,255,0,1) 16%, rgba(0,255,0,1) 33%, rgba(0,255,255,1) 50%, rgba(0,0,255,1) 66%, rgba(255,0,255,1) 83%, rgba(255,0,0,1) 100%)',
-	backgroundClip: 'text',
-	color:          'transparent',
-}]);
-
-export const beeg_background = style([beeg, {
-	left:           '-0.1em',
-	top:            ' 0.1em',
-	color:          'black',
-}]);
+import { style } from '@vanilla-extract/css';
+
+export const beeg_container = style({
+	position: 'relative',
+	width:    'max-content',
+	height:   'max-content',
+});
+
+const beeg = style({
+	position: 'absolute',
+	fontSize: '1.75em',
+	'@media': {
+		'screen and (min-width: 768px)': {
+			fontSize: '3em',
+		}
+	}
+});
+
+export const beeg_dummy = style([beeg, {
+	position: 'static',
+	color:    'transparent',
+}]);
+
+export const beeg_foreground = style([beeg, {
+	background:     'linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,255,0,1) 16%, rgba(0,255,0,1) 33%, rgba(0,255,255,1) 50%, rgba(0,0,255,1) 66%, rgba(255,0,255,1) 83%, rgba(255,0,0,1) 100%)',
+	backgroundClip: 'text',
+	color:          'transparent',
+}]);
+
+export const beeg_background = style([beeg, {
+	left:           '-0.1em',
+	top:            ' 0.1em',
+	color:          'black',
+}]);
diff --git a/src/app/airstrip_one/0/components/BeegText.tsx b/src/app/airstrip_one/0/components/BeegText.tsx
index c4c71de..5ed9701 100644
--- a/src/app/airstrip_one/0/components/BeegText.tsx
+++ b/src/app/airstrip_one/0/components/BeegText.tsx
@@ -1,16 +1,16 @@
-import {
-	beeg_container,
-	beeg_dummy,
-	beeg_foreground,
-	beeg_background,
-} from './BeegText.css';
-
-export default function BeegText({ children }: { children: React.ReactNode }) {
-	return (
-		<div className={beeg_container}>
-			<p className={beeg_background}>{children}</p>
-			<p className={beeg_foreground}>{children}</p>
-			<p className={beeg_dummy}     >{children}</p>
-		</div>
-	);
-}
+import {
+	beeg_container,
+	beeg_dummy,
+	beeg_foreground,
+	beeg_background,
+} from './BeegText.css';
+
+export default function BeegText({ children }: { children: React.ReactNode }) {
+	return (
+		<div className={beeg_container}>
+			<p className={beeg_background}>{children}</p>
+			<p className={beeg_foreground}>{children}</p>
+			<p className={beeg_dummy}     >{children}</p>
+		</div>
+	);
+}
diff --git a/src/app/airstrip_one/0/components/Marquee.css.ts b/src/app/airstrip_one/0/components/Marquee.css.ts
index 45f9a1e..a25eebe 100644
--- a/src/app/airstrip_one/0/components/Marquee.css.ts
+++ b/src/app/airstrip_one/0/components/Marquee.css.ts
@@ -1,30 +1,38 @@
-import { style, keyframes } from '@vanilla-extract/css';
-
-export const marquee_container = style({
-	display:         'flex',
-	width:           '100%',
-	height:          'max-content',
-	overflow:        'hidden',
-	backgroundColor: 'black',
-});
-
-const scroll_marquee = keyframes({
-	'0%':   { left: '   0%' },
-	'100%': { left: '-100%' },
-});
-
-export const marquee_content = style({
-	position:                'relative',
-	fontSize:                '0.75em',
-	color:                   'magenta',
-	whiteSpace:              'nowrap',
-	animationName:            scroll_marquee,
-	animationDuration:       '8s',
-	animationTimingFunction: 'linear',
-	animationIterationCount: 'infinite',
-	'@media': {
-		'screen and (min-width: 768px)': {
-			fontSize: '1em',
-		}
-	}
-});
+import { style, keyframes } from '@vanilla-extract/css';
+
+export const marquee_container = style({
+	display:         'flex',
+	width:           '100%',
+	height:          'max-content',
+	overflow:        'hidden',
+	backgroundColor: 'black',
+	fontSize:        '0.75em',
+	'@media': {
+		'screen and (min-width: 768px)': {
+			fontSize: '1em',
+		}
+	}
+});
+
+export const marquee_sneaky = style({
+	position:   'absolute',
+	visibility: 'hidden',
+	whiteSpace: 'pre',
+	width:      'max-content',
+});
+
+const scroll_marquee = keyframes({
+	'0%':   { left: '   0%' },
+	'100%': { left: '-100%' },
+});
+
+export const marquee_content = style({
+	position:                'relative',
+	color:                   'magenta',
+	whiteSpace:              'pre',
+	width:                   'max-content',
+	animationName:            scroll_marquee,
+	animationDuration:       '2s',
+	animationTimingFunction: 'linear',
+	animationIterationCount: 'infinite',
+});
diff --git a/src/app/airstrip_one/0/components/Marquee.tsx b/src/app/airstrip_one/0/components/Marquee.tsx
index 2c3d1b5..bf8b931 100644
--- a/src/app/airstrip_one/0/components/Marquee.tsx
+++ b/src/app/airstrip_one/0/components/Marquee.tsx
@@ -1,13 +1,47 @@
-import {
-	marquee_container,
-	marquee_content,
-} from './Marquee.css';
-
-export default function Marquee({ children }: { children: React.ReactNode }) {
-	return (
-		<div className={marquee_container}>
-			<p className={marquee_content}>{children}</p>
-			<p className={marquee_content}>{children}</p>
-		</div>
-	);
-}
+'use client'
+
+import { useRef, useEffect, useLayoutEffect } from 'react';
+
+import * as style from './Marquee.css';
+
+export default function Marquee({ children }: { children: React.ReactNode }) {
+	const target_ref        = useRef<HTMLDivElement       | null>(null);
+	const scroll_ref        = useRef<HTMLDivElement       | null>(null);
+	const sneaky_ref        = useRef<HTMLParagraphElement | null>(null);
+	const not_so_sneaky_ref = useRef<HTMLParagraphElement | null>(null);
+
+	function expand_content() {
+		function strip_px(px: string) {
+			return Number(px.substring(0, px.length - 2));
+		}
+		const text         = `${children}`;
+		let   content      = text;
+		const sneaky_width = strip_px(window.getComputedStyle(sneaky_ref.current!).getPropertyValue("width"));
+		let   target_width = strip_px(window.getComputedStyle(target_ref.current!).getPropertyValue("width"));
+		while (target_width > 0) {
+			content += text;
+			target_width -= sneaky_width;
+		}
+		scroll_ref.current!.style.width = `${sneaky_width}px`;
+		not_so_sneaky_ref.current!.textContent = content;
+	}
+
+	useLayoutEffect(expand_content);
+
+	useEffect(() => {
+		window.addEventListener("resize", expand_content);
+
+		return () => {
+			window.removeEventListener("resize", expand_content);
+		}
+	});
+
+	return (
+		<div ref={target_ref} className={style.marquee_container}>
+			<p ref={sneaky_ref} className={style.marquee_sneaky}>{children}</p>
+			<div ref={scroll_ref}>
+				<p ref={not_so_sneaky_ref} className={style.marquee_content}></p>
+			</div>
+		</div>
+	);
+}
diff --git a/src/app/airstrip_one/0/layout.css.ts b/src/app/airstrip_one/0/layout.css.ts
new file mode 100644
index 0000000..4a8b208
--- /dev/null
+++ b/src/app/airstrip_one/0/layout.css.ts
@@ -0,0 +1,17 @@
+import { style } from '@vanilla-extract/css';
+
+export const center_vertical = style({
+	position:      'relative',
+	display:       'flex',
+	flexDirection: 'column',
+	alignItems:    'center',
+	margin:        'auto',
+	width:         '100%',
+	border:        '0.3em solid purple',
+	'@media': {
+		'screen and (min-width: 768px)': {
+			width: '50%',
+		}
+	}
+});
+
diff --git a/src/app/airstrip_one/0/layout.tsx b/src/app/airstrip_one/0/layout.tsx
new file mode 100644
index 0000000..4ed155e
--- /dev/null
+++ b/src/app/airstrip_one/0/layout.tsx
@@ -0,0 +1,13 @@
+import Marquee from './components/Marquee';
+
+import * as style from './layout.css';
+
+export default function ExcellentLayout({ children }: { children: React.ReactNode }) {
+	return (
+		<div className={style.center_vertical}>
+			<Marquee>THE SNACK IS WATCHING YOU </Marquee>
+			{children}
+			<Marquee>THE SNACK IS WATCHING YOU </Marquee>
+		</div>
+	);
+}
diff --git a/src/app/airstrip_one/0/ministry_of_truth/components/Input.tsx b/src/app/airstrip_one/0/ministry_of_truth/components/Input.tsx
index c36f302..6317a1a 100644
--- a/src/app/airstrip_one/0/ministry_of_truth/components/Input.tsx
+++ b/src/app/airstrip_one/0/ministry_of_truth/components/Input.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useLayoutEffect, useRef } from 'react';
+import { useRef, useEffect, useLayoutEffect } from 'react';
 import { useSearchParams } from 'next/navigation';
 
 import comic_sans from '../../../../comic.ts';
@@ -25,6 +25,19 @@ export default function Input() {
 			?? 'At the apex of the pyramid comes Big Brother. Big Brother is infallible and all-powerful. Every success, every achievement, every victory, every scientific discovery, all knowledge, all wisdom, all happiness, all virtue, are held to issue directly from his leadership and inspiration.'
 		);
 
+	useEffect(() => {
+		function resize_handler() {
+			input_ref.current!.style.height = "";
+			input_ref.current!.style.height = `${input_ref.current!.scrollHeight}px`;
+		}
+
+		window.addEventListener("resize", resize_handler);
+
+		return () => {
+			window.removeEventListener("resize", resize_handler);
+		};
+	});
+
 	useLayoutEffect(() => {
 		set_message(message);
 	});
diff --git a/src/app/airstrip_one/0/ministry_of_truth/layout.tsx b/src/app/airstrip_one/0/ministry_of_truth/layout.tsx
index 1945c94..a9ebaa3 100644
--- a/src/app/airstrip_one/0/ministry_of_truth/layout.tsx
+++ b/src/app/airstrip_one/0/ministry_of_truth/layout.tsx
@@ -1,10 +1,10 @@
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-	title: 'The Ministry of Truth',
-	description: 'The Ministry of Truth',
-}
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-	return <>{children}</>
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+	title: 'The Ministry of Truth',
+	description: 'The Ministry of Truth',
+}
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+	return <>{children}</>
 }
\ No newline at end of file
diff --git a/src/app/airstrip_one/0/ministry_of_truth/page.css.ts b/src/app/airstrip_one/0/ministry_of_truth/page.css.ts
index d949bc2..7f10168 100644
--- a/src/app/airstrip_one/0/ministry_of_truth/page.css.ts
+++ b/src/app/airstrip_one/0/ministry_of_truth/page.css.ts
@@ -1,29 +1,13 @@
-import { keyframes, style } from "@vanilla-extract/css";
-
-export const center_vertical = style({
-	boxSizing:     'border-box',
-	position:      'relative',
-	display:       'flex',
-	flexDirection: 'column',
-	alignItems:    'center',
-	margin:        'auto',
-	width:         '100%',
-	border:        '0.3em solid purple',
-	'@media': {
-		'screen and (min-width: 768px)': {
-			width: '50%',
-		}
-	}
-});
-
-export const border = style({
-	width:        '61%',
-	marginBottom: '4em',
-	border:       '0.3em solid purple',
-});
-
-export const big_brother_style = style({
-	display: 'block',
-	width:   '100%',
-	height:  'auto',
-});
+import { keyframes, style } from "@vanilla-extract/css";
+
+export const border = style({
+	width:        '61%',
+	marginBottom: '4em',
+	border:       '0.3em solid purple',
+});
+
+export const big_brother_style = style({
+	display: 'block',
+	width:   '100%',
+	height:  'auto',
+});
diff --git a/src/app/airstrip_one/0/ministry_of_truth/page.tsx b/src/app/airstrip_one/0/ministry_of_truth/page.tsx
index 0a86ba5..f797f7b 100644
--- a/src/app/airstrip_one/0/ministry_of_truth/page.tsx
+++ b/src/app/airstrip_one/0/ministry_of_truth/page.tsx
@@ -1,26 +1,17 @@
-import React from 'react';
-import Image from 'next/image';
-import BeegText from '../components/BeegText';
-import Marquee from '../components/Marquee';
-import Input from './components/Input';
-import {
-	center_vertical,
-	border,
-	big_brother_style,
-} from './page.css';
-
-export default function Home() {
-	return (
-		<div className={center_vertical}>
-			<Marquee>THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU </Marquee>
-			<BeegText>THE MINISTRY OF TRUTH</BeegText>
-			<div className={border}>
-				<Image className={big_brother_style} width={400} height={300} src='/big_brother_screen.gif' alt='Big Brother' />
-				<React.Suspense>
-					<Input />
-				</React.Suspense>
-			</div>
-			<Marquee>THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU </Marquee>
-		</div>
-	);
-}
+import React from 'react';
+import Image from 'next/image';
+import BeegText from '../components/BeegText';
+import Input from './components/Input';
+import * as style from './page.css';
+
+export default function Home() {
+	return <>
+		<BeegText>THE MINISTRY OF TRUTH</BeegText>
+		<div className={style.border}>
+			<Image className={style.big_brother_style} width={400} height={300} src='/big_brother_screen.gif' alt='Big Brother' />
+			<React.Suspense>
+				<Input />
+			</React.Suspense>
+		</div>
+	</>;
+}
diff --git a/src/app/airstrip_one/0/page.css.ts b/src/app/airstrip_one/0/page.css.ts
index 658015f..9c56bae 100644
--- a/src/app/airstrip_one/0/page.css.ts
+++ b/src/app/airstrip_one/0/page.css.ts
@@ -1,52 +1,37 @@
-import { keyframes, style } from "@vanilla-extract/css";
-
-export const center_vertical = style({
-	position:      'relative',
-	display:       'flex',
-	flexDirection: 'column',
-	alignItems:    'center',
-	margin:        'auto',
-	width:         '100%',
-	border:        '0.3em solid purple',
-	'@media': {
-		'screen and (min-width: 768px)': {
-			width: '50%',
-		}
-	}
-});
-
-export const big_brother_style = style({
-	width:  '60%',
-	height: 'auto',
-	border: '0.3em solid purple',
-	'@media': {
-		'screen and (min-width: 768px)': {
-			width: '40%',
-		}
-	}
-});
-
-export const cats_div = style({
-	display:        'flex',
-	flexDirection:  'row',
-	justifyContent: 'space-between',
-	width:          '100%',
-	borderTop:      '0.3em solid purple'
-});
-
-export const subcats_div = style({
-	display:        'flex',
-	justifyContent: 'flex-start',
-	width:          '50%',
-	height:         'max-content',
-});
-
-export const reverse_subcats_div = style([subcats_div, {
-	transform: 'scale(-1, 1)'
-}]);
-
-export const cat = style({
-	display: 'block',
-	width:   '25%',
-	height:  'auto',
-});
+import { keyframes, style } from "@vanilla-extract/css";
+
+export const big_brother_style = style({
+	width:  '60%',
+	height: 'auto',
+	border: '0.3em solid purple',
+	'@media': {
+		'screen and (min-width: 768px)': {
+			width: '40%',
+		}
+	}
+});
+
+export const cats_div = style({
+	display:        'flex',
+	flexDirection:  'row',
+	justifyContent: 'space-between',
+	width:          '100%',
+	borderTop:      '0.3em solid purple'
+});
+
+export const subcats_div = style({
+	display:        'flex',
+	justifyContent: 'flex-start',
+	width:          '50%',
+	height:         'max-content',
+});
+
+export const reverse_subcats_div = style([subcats_div, {
+	transform: 'scale(-1, 1)'
+}]);
+
+export const cat = style({
+	display: 'block',
+	width:   '25%',
+	height:  'auto',
+});
diff --git a/src/app/airstrip_one/0/page.tsx b/src/app/airstrip_one/0/page.tsx
index 8055c2d..8e20569 100644
--- a/src/app/airstrip_one/0/page.tsx
+++ b/src/app/airstrip_one/0/page.tsx
@@ -1,41 +1,29 @@
-import { Metadata } from 'next'
-import Image from 'next/image'
-import Marquee from './components/Marquee'
-import BeegText from './components/BeegText'
-import {
-	center_vertical,
-	big_brother_style,
-	cats_div,
-	subcats_div,
-	reverse_subcats_div,
-	cat,
-} from './page.css'
+import { Metadata } from 'next';
+import Image from 'next/image';
+import BeegText from './components/BeegText';
+import * as style from './page.css';
 
 export const metadata: Metadata = {
 	title: 'The Snack is Watching You',
 	description: 'The Snack is Watching You',
-}
+};
 
 export default function Home() {
-	return (
-		<div className={center_vertical}>
-			<Marquee>THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU </Marquee>
-			<BeegText>THE SNACK IS</BeegText>
-			<Image className={big_brother_style} width={256} height={256} src='/big_brother.png' alt='Big Brother' />
-			<BeegText>WATCHING YOU</BeegText>
-			<div className={cats_div}>
-				<div className={subcats_div}>
-					<Image className={cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
-					<Image className={cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
-					<Image className={cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
-				</div>
-				<div className={reverse_subcats_div}>
-					<Image className={cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
-					<Image className={cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
-					<Image className={cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
-				</div>
+	return <>
+		<BeegText>THE SNACK IS</BeegText>
+		<Image className={style.big_brother_style} width={256} height={256} src='/big_brother.png' alt='Big Brother' />
+		<BeegText>WATCHING YOU</BeegText>
+		<div className={style.cats_div}>
+			<div className={style.subcats_div}>
+				<Image className={style.cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
+				<Image className={style.cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
+				<Image className={style.cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
+			</div>
+			<div className={style.reverse_subcats_div}>
+				<Image className={style.cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
+				<Image className={style.cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
+				<Image className={style.cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
 			</div>
-			<Marquee>THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU </Marquee>
 		</div>
-	)
+	</>;
 }
diff --git a/src/app/global.css.ts b/src/app/global.css.ts
index 78ec2bc..d18e252 100644
--- a/src/app/global.css.ts
+++ b/src/app/global.css.ts
@@ -1,9 +1,9 @@
-import { globalStyle } from "@vanilla-extract/css";
-
-export const global_style = globalStyle('html,body', {
-	margin:           '0',
-	width:            '100%',
-	height:           '100%',
-	backgroundImage:  'url("/background.png")',
-	backgroundRepeat: 'repeat'
-});
+import { globalStyle } from "@vanilla-extract/css";
+
+export const global_style = globalStyle('html,body', {
+	margin:           '0',
+	width:            '100%',
+	height:           '100%',
+	backgroundImage:  'url("/background.png")',
+	backgroundRepeat: 'repeat'
+});
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 12c1930..09480f2 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,11 +7,7 @@ const comic_sans = localFont({
 	weight: '100',
 });
 
-export default function RootLayout({
-	children,
-}: {
-	children: React.ReactNode
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
 	return (
 		<html lang="en">
 			<body className={comic_sans.className}>{children}</body>