Proper marquee. Line endings??? Uhhhh....layout. I forgor.

src/app/airstrip_one/0/components/BeegText.css.ts

@@ -1,34 +1,34 @@
-import { style } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
-
+
-export const beeg_container = style({
+export const beeg_container = style({
-	position: 'relative',
+	position: 'relative',
-	width:    'max-content',
+	width:    'max-content',
-	height:   'max-content',
+	height:   'max-content',
-});
+});
-
+
-const beeg = style({
+const beeg = style({
-	position: 'absolute',
+	position: 'absolute',
-	fontSize: '1.75em',
+	fontSize: '1.75em',
-	'@media': {
+	'@media': {
-		'screen and (min-width: 768px)': {
+		'screen and (min-width: 768px)': {
-			fontSize: '3em',
+			fontSize: '3em',
-		}
+		}
-	}
+	}
-});
+});
-
+
-export const beeg_dummy = style([beeg, {
+export const beeg_dummy = style([beeg, {
-	position: 'static',
+	position: 'static',
-	color:    'transparent',
+	color:    'transparent',
-}]);
+}]);
-
+
-export const beeg_foreground = style([beeg, {
+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%)',
+	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',
+	backgroundClip: 'text',
-	color:          'transparent',
+	color:          'transparent',
-}]);
+}]);
-
+
-export const beeg_background = style([beeg, {
+export const beeg_background = style([beeg, {
-	left:           '-0.1em',
+	left:           '-0.1em',
-	top:            ' 0.1em',
+	top:            ' 0.1em',
-	color:          'black',
+	color:          'black',
-}]);
+}]);

src/app/airstrip_one/0/components/BeegText.tsx

@@ -1,16 +1,16 @@
-import {
+import {
-	beeg_container,
+	beeg_container,
-	beeg_dummy,
+	beeg_dummy,
-	beeg_foreground,
+	beeg_foreground,
-	beeg_background,
+	beeg_background,
-} from './BeegText.css';
+} from './BeegText.css';
-
+
-export default function BeegText({ children }: { children: React.ReactNode }) {
+export default function BeegText({ children }: { children: React.ReactNode }) {
-	return (
+	return (
-		<div className={beeg_container}>
+		<div className={beeg_container}>
-			<p className={beeg_background}>{children}</p>
+			<p className={beeg_background}>{children}</p>
-			<p className={beeg_foreground}>{children}</p>
+			<p className={beeg_foreground}>{children}</p>
-			<p className={beeg_dummy}     >{children}</p>
+			<p className={beeg_dummy}     >{children}</p>
-		</div>
+		</div>
-	);
+	);
-}
+}

src/app/airstrip_one/0/components/Marquee.css.ts

@@ -1,30 +1,38 @@
-import { style, keyframes } from '@vanilla-extract/css';
+import { style, keyframes } from '@vanilla-extract/css';
-
+
-export const marquee_container = style({
+export const marquee_container = style({
-	display:         'flex',
+	display:         'flex',
-	width:           '100%',
+	width:           '100%',
-	height:          'max-content',
+	height:          'max-content',
-	overflow:        'hidden',
+	overflow:        'hidden',
-	backgroundColor: 'black',
+	backgroundColor: 'black',
-});
+	fontSize:        '0.75em',
-
+	'@media': {
-const scroll_marquee = keyframes({
+		'screen and (min-width: 768px)': {
-	'0%':   { left: '   0%' },
+			fontSize: '1em',
-	'100%': { left: '-100%' },
+		}
-});
+	}
-
+});
-export const marquee_content = style({
+
-	position:                'relative',
+export const marquee_sneaky = style({
-	fontSize:                '0.75em',
+	position:   'absolute',
-	color:                   'magenta',
+	visibility: 'hidden',
-	whiteSpace:              'nowrap',
+	whiteSpace: 'pre',
-	animationName:            scroll_marquee,
+	width:      'max-content',
-	animationDuration:       '8s',
+});
-	animationTimingFunction: 'linear',
+
-	animationIterationCount: 'infinite',
+const scroll_marquee = keyframes({
-	'@media': {
+	'0%':   { left: '   0%' },
-		'screen and (min-width: 768px)': {
+	'100%': { left: '-100%' },
-			fontSize: '1em',
+});
-		}
+
-	}
+export const marquee_content = style({
-});
+	position:                'relative',
+	color:                   'magenta',
+	whiteSpace:              'pre',
+	width:                   'max-content',
+	animationName:            scroll_marquee,
+	animationDuration:       '2s',
+	animationTimingFunction: 'linear',
+	animationIterationCount: 'infinite',
+});

src/app/airstrip_one/0/components/Marquee.tsx

@@ -1,13 +1,47 @@
-import {
+'use client'
-	marquee_container,
+
-	marquee_content,
+import { useRef, useEffect, useLayoutEffect } from 'react';
-} from './Marquee.css';
+
-
+import * as style from './Marquee.css';
-export default function Marquee({ children }: { children: React.ReactNode }) {
+
-	return (
+export default function Marquee({ children }: { children: React.ReactNode }) {
-		<div className={marquee_container}>
+	const target_ref        = useRef<HTMLDivElement       | null>(null);
-			<p className={marquee_content}>{children}</p>
+	const scroll_ref        = useRef<HTMLDivElement       | null>(null);
-			<p className={marquee_content}>{children}</p>
+	const sneaky_ref        = useRef<HTMLParagraphElement | null>(null);
-		</div>
+	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>
+	);
+}

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%',
+		}
+	}
+});
+

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>
+	);
+}

src/app/airstrip_one/0/ministry_of_truth/components/Input.css.ts

@@ -1,4 +1,4 @@
-import { style } from "@vanilla-extract/css";
+import { style } from '@vanilla-extract/css';
 
 export const message_style = style({
 	boxSizing:       'border-box',
@@ -8,10 +8,12 @@ export const message_style = style({
 	border:          'none',
 	padding:         '0.5em',
 	fontSize:        '1em',
+	fontFamily:      'inherit',
 	color:           'magenta',
 	backgroundColor: 'black',
 	overflowWrap:    'break-word',
 	textAlign:       'center',
+	resize:          'none',
 	':focus': {
 		outline: 'none',
 	},

src/app/airstrip_one/0/ministry_of_truth/components/Input.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { useEffect, useRef } from 'react';
+import { useRef, useEffect, useLayoutEffect } from 'react';
 import { useSearchParams } from 'next/navigation';
 
+import comic_sans from '../../../../comic.ts';
 import { message_style } from '../components/Input.css';
 
 export default function Input() {
@@ -13,6 +14,8 @@ export default function Input() {
 		const encoded = btoa(message);
 		const new_url = `${window.location.protocol}//${window.location.host}${window.location.pathname}?e=${encoded}`;
 		window.history.replaceState(null, '', new_url);
+		input_ref.current!.style.height = "";
+		input_ref.current!.style.height = `${input_ref.current!.scrollHeight}px`;
 	}
 
 	const message = search_params.get('e') ?
@@ -23,17 +26,30 @@ export default function Input() {
 		);
 
 	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);
 	});
 
 	return (
-		<p
+		<textarea
 			ref={input_ref}
 			className={message_style}
+			type="text"
+			rows="1"
 			onInput={() => set_message(input_ref.current!.textContent ?? '')}
-			contentEditable
+			defaultValue={message}
-		>
+		/>
-			{message}
-		</p>
 	);
 }

src/app/airstrip_one/0/ministry_of_truth/layout.tsx

@@ -1,10 +1,10 @@
-import { Metadata } from 'next'
+import { Metadata } from 'next'
-
+
-export const metadata: Metadata = {
+export const metadata: Metadata = {
-	title: 'The Ministry of Truth',
+	title: 'The Ministry of Truth',
-	description: 'The Ministry of Truth',
+	description: 'The Ministry of Truth',
-}
+}
-
+
-export default function Layout({ children }: { children: React.ReactNode }) {
+export default function Layout({ children }: { children: React.ReactNode }) {
-	return <>{children}</>
+	return <>{children}</>
 }

src/app/airstrip_one/0/ministry_of_truth/page.css.ts

@@ -1,29 +1,13 @@
-import { keyframes, style } from "@vanilla-extract/css";
+import { keyframes, style } from "@vanilla-extract/css";
-
+
-export const center_vertical = style({
+export const border = style({
-	boxSizing:     'border-box',
+	width:        '61%',
-	position:      'relative',
+	marginBottom: '4em',
-	display:       'flex',
+	border:       '0.3em solid purple',
-	flexDirection: 'column',
+});
-	alignItems:    'center',
+
-	margin:        'auto',
+export const big_brother_style = style({
-	width:         '100%',
+	display: 'block',
-	border:        '0.3em solid purple',
+	width:   '100%',
-	'@media': {
+	height:  'auto',
-		'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',
-});

src/app/airstrip_one/0/ministry_of_truth/page.tsx

@@ -1,26 +1,17 @@
-import React from 'react';
+import React from 'react';
-import Image from 'next/image';
+import Image from 'next/image';
-import BeegText from '../components/BeegText';
+import BeegText from '../components/BeegText';
-import Marquee from '../components/Marquee';
+import Input from './components/Input';
-import Input from './components/Input';
+import * as style from './page.css';
-import {
+
-	center_vertical,
+export default function Home() {
-	border,
+	return <>
-	big_brother_style,
+		<BeegText>THE MINISTRY OF TRUTH</BeegText>
-} from './page.css';
+		<div className={style.border}>
-
+			<Image className={style.big_brother_style} width={400} height={300} src='/big_brother_screen.gif' alt='Big Brother' />
-export default function Home() {
+			<React.Suspense>
-	return (
+				<Input />
-		<div className={center_vertical}>
+			</React.Suspense>
-			<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>
-			<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>
-	);
-}

src/app/airstrip_one/0/page.css.ts

@@ -1,52 +1,37 @@
-import { keyframes, style } from "@vanilla-extract/css";
+import { keyframes, style } from "@vanilla-extract/css";
-
+
-export const center_vertical = style({
+export const big_brother_style = style({
-	position:      'relative',
+	width:  '60%',
-	display:       'flex',
+	height: 'auto',
-	flexDirection: 'column',
+	border: '0.3em solid purple',
-	alignItems:    'center',
+	'@media': {
-	margin:        'auto',
+		'screen and (min-width: 768px)': {
-	width:         '100%',
+			width: '40%',
-	border:        '0.3em solid purple',
+		}
-	'@media': {
+	}
-		'screen and (min-width: 768px)': {
+});
-			width: '50%',
+
-		}
+export const cats_div = style({
-	}
+	display:        'flex',
-});
+	flexDirection:  'row',
-
+	justifyContent: 'space-between',
-export const big_brother_style = style({
+	width:          '100%',
-	width:  '60%',
+	borderTop:      '0.3em solid purple'
-	height: 'auto',
+});
-	border: '0.3em solid purple',
+
-	'@media': {
+export const subcats_div = style({
-		'screen and (min-width: 768px)': {
+	display:        'flex',
-			width: '40%',
+	justifyContent: 'flex-start',
-		}
+	width:          '50%',
-	}
+	height:         'max-content',
-});
+});
-
+
-export const cats_div = style({
+export const reverse_subcats_div = style([subcats_div, {
-	display:        'flex',
+	transform: 'scale(-1, 1)'
-	flexDirection:  'row',
+}]);
-	justifyContent: 'space-between',
+
-	width:          '100%',
+export const cat = style({
-	borderTop:      '0.3em solid purple'
+	display: 'block',
-});
+	width:   '25%',
-
+	height:  'auto',
-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',
-});

src/app/airstrip_one/0/page.tsx

@@ -1,41 +1,29 @@
-import { Metadata } from 'next'
+import { Metadata } from 'next';
-import Image from 'next/image'
+import Image from 'next/image';
-import Marquee from './components/Marquee'
+import BeegText from './components/BeegText';
-import BeegText from './components/BeegText'
+import * as style from './page.css';
-import {
-	center_vertical,
-	big_brother_style,
-	cats_div,
-	subcats_div,
-	reverse_subcats_div,
-	cat,
-} from './page.css'
 
 export const metadata: Metadata = {
 	title: 'The Snack is Watching You',
 	description: 'The Snack is Watching You',
-}
+};
 
 export default function Home() {
-	return (
+	return <>
-		<div className={center_vertical}>
+		<BeegText>THE SNACK IS</BeegText>
-			<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>
+		<Image className={style.big_brother_style} width={256} height={256} src='/big_brother.png' alt='Big Brother' />
-			<BeegText>THE SNACK IS</BeegText>
+		<BeegText>WATCHING YOU</BeegText>
-			<Image className={big_brother_style} width={256} height={256} src='/big_brother.png' alt='Big Brother' />
+		<div className={style.cats_div}>
-			<BeegText>WATCHING YOU</BeegText>
+			<div className={style.subcats_div}>
-			<div className={cats_div}>
+				<Image className={style.cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
-				<div className={subcats_div}>
+				<Image className={style.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={style.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>
-					<Image className={cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
+			<div className={style.reverse_subcats_div}>
-				</div>
+				<Image className={style.cat} width={128} height={128} src='/praising_cat.gif' alt='Cat praising Big Brother' />
-				<div className={reverse_subcats_div}>
+				<Image className={style.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={style.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>
-			<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>
-	)
+	</>;
 }

src/app/global.css.ts

@@ -1,9 +1,9 @@
-import { globalStyle } from "@vanilla-extract/css";
+import { globalStyle } from "@vanilla-extract/css";
-
+
-export const global_style = globalStyle('html,body', {
+export const global_style = globalStyle('html,body', {
-	margin:           '0',
+	margin:           '0',
-	width:            '100%',
+	width:            '100%',
-	height:           '100%',
+	height:           '100%',
-	backgroundImage:  'url("/background.png")',
+	backgroundImage:  'url("/background.png")',
-	backgroundRepeat: 'repeat'
+	backgroundRepeat: 'repeat'
-});
+});

src/app/layout.tsx

@@ -7,11 +7,7 @@ const comic_sans = localFont({
 	weight: '100',
 });
 
-export default function RootLayout({
+export default function RootLayout({ children }: { children: React.ReactNode }) {
-	children,
-}: {
-	children: React.ReactNode
-}) {
 	return (
 		<html lang="en">
 			<body className={comic_sans.className}>{children}</body>