Gnarwhal/ode_to_snack
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: Gnarwhal:e3ce3c90c779921c20be1f55cb2e80afad24c647
Branches Tags
Gnarwhal:mia
Gnarwhal:pages
..
compare: Gnarwhal:e0fa242e6998bdbcd2a85525d42bc3786644331d
Branches Tags
Gnarwhal:pages
Gnarwhal:mia

No commits in common. "e3ce3c90c779921c20be1f55cb2e80afad24c647" and "e0fa242e6998bdbcd2a85525d42bc3786644331d" have entirely different histories.
e3ce3c90c7 ... e0fa242e69

15 changed files with 262 additions and 296 deletions
Show stats Expand all files Collapse all files

68
src/app/airstrip_one/0/components/BeegText.css.ts
View file

@ -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',
}]);

32
src/app/airstrip_one/0/components/BeegText.tsx
View file

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

68
src/app/airstrip_one/0/components/Marquee.css.ts
View file

@ -1,38 +1,30 @@
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',
});
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',
}
}
});

60
src/app/airstrip_one/0/components/Marquee.tsx
View file

@ -1,47 +1,13 @@
'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>
);
}
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>
);
}

17
src/app/airstrip_one/0/layout.css.ts
View file

@ -1,17 +0,0 @@
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%',
}
}
});

13
src/app/airstrip_one/0/layout.tsx
View file

@ -1,13 +0,0 @@
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>
);
}

4
src/app/airstrip_one/0/ministry_of_truth/components/Input.css.ts
View file

@ -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,12 +8,10 @@ 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',
},

28
src/app/airstrip_one/0/ministry_of_truth/components/Input.tsx
View file

@ -1,9 +1,8 @@
'use client'
import { useRef, useEffect, useLayoutEffect } from 'react';
import { useEffect, useRef } from 'react';
import { useSearchParams } from 'next/navigation';
import comic_sans from '../../../../comic.ts';
import { message_style } from '../components/Input.css';
export default function Input() {
@ -14,8 +13,6 @@ 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') ?
@ -26,30 +23,17 @@ 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 (
<textarea
<p
ref={input_ref}
className={message_style}
type="text"
rows="1"
onInput={() => set_message(input_ref.current!.textContent ?? '')}
defaultValue={message}
/>
contentEditable
>
{message}
</p>
);
}

18
src/app/airstrip_one/0/ministry_of_truth/layout.tsx
View file

@ -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}</>
}

42
src/app/airstrip_one/0/ministry_of_truth/page.css.ts
View file

@ -1,13 +1,29 @@
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',
});
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',
});

43
src/app/airstrip_one/0/ministry_of_truth/page.tsx
View file

@ -1,17 +1,26 @@
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>
</>;
}
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>
);
}

89
src/app/airstrip_one/0/page.css.ts
View file

@ -1,37 +1,52 @@
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',
});
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',
});

52
src/app/airstrip_one/0/page.tsx
View file

@ -1,29 +1,41 @@
import { Metadata } from 'next';
import Image from 'next/image';
import BeegText from './components/BeegText';
import * as style from './page.css';
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'
export const metadata: Metadata = {
title: 'The Snack is Watching You',
description: 'The Snack is Watching You',
};
}
export default function Home() {
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' />
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>
</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>
</>;
)
}

18
src/app/global.css.ts
View file

@ -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'
});

6
src/app/layout.tsx
View file

@ -7,7 +7,11 @@ 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>