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

Added the ministry of truth

Browse source
This commit is contained in:
Gnarwhal 2024-07-05 16:06:02 +00:00
parent 071079b061
commit 92cb7977ef
Signed by: Gnarwhal
GPG key ID: 0989A73D8C421174
11 changed files with 186 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/big_brother_screen.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 MiB

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

@ -0,0 +1,29 @@
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: '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',
}])

16
src/app/airstrip_one/0/components/BeegText.tsx Normal file
View file

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

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

@ -0,0 +1,25 @@
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: '1em',
color: 'magenta',
whiteSpace: 'nowrap',
animationName: scroll_marquee,
animationDuration: '8s',
animationTimingFunction: 'linear',
animationIterationCount: 'infinite',
})

13
src/app/airstrip_one/0/components/Marquee.tsx Normal file
View file

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

10
src/app/airstrip_one/0/ministry_of_truth/layout.tsx Normal file
View file

@ -0,0 +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}</>
}

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

@ -0,0 +1,40 @@
import { keyframes, style } from "@vanilla-extract/css";
export const center_vertical = style({
position: 'relative',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
margin: 'auto',
width: '50%',
border: '0.3em solid purple'
})
export const border = style({
width: '60%',
marginBottom: '4em',
border: '0.3em solid purple',
})
export const big_brother_style = style({
display: 'block',
width: '100%',
height: 'auto',
})
export const message_style = style({
boxSizing: 'border-box',
width: '100%',
height: 'max-content',
margin: 0,
border: 'none',
padding: '0.5em',
fontSize: '2em',
color: 'magenta',
backgroundColor: 'black',
overflowWrap: 'break-word',
textAlign: 'center',
':focus': {
outline: 'none',
}
})

47
src/app/airstrip_one/0/ministry_of_truth/page.tsx Normal file
View file

@ -0,0 +1,47 @@
'use client'
import { useEffect, useRef } from 'react'
import Image from 'next/image'
import { useSearchParams } from 'next/navigation'
import BeegText from '../components/BeegText'
import Marquee from '../components/Marquee'
import {
center_vertical,
border,
big_brother_style,
message_style,
} from './page.css'
export default function Home() {
const search_params = useSearchParams()
const input_ref = useRef<HTMLParagraphElement>(null)
const set_message = (message: string) => {
const encoded = btoa(message)
const new_url = `${window.location.protocol}//${window.location.host}${window.location.pathname}?e=${encoded}`
window.history.replaceState('', '', new_url)
}
const message = search_params.get('e') ?
atob(search_params.get('e')!) :
(
search_params.get('m')
?? '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(() => {
set_message(message)
})
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' />
<p ref={input_ref} className={message_style} onInput={() => set_message(input_ref.current!.textContent ?? '')} contentEditable>{message}</p>
</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>
)
}

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

@ -10,58 +10,6 @@ export const center_vertical = style({
border: '0.3em solid purple'
})
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: '1em',
color: 'magenta',
whiteSpace: 'nowrap',
animationName: scroll_marquee,
animationDuration: '8s',
animationTimingFunction: 'linear',
animationIterationCount: 'infinite',
})
export const beeg_container = style({
position: 'relative',
width: 'max-content',
height: 'max-content',
})
const beeg = style({
position: 'absolute',
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',
}])
export const big_brother_style = style({
width: '40%',
height: 'auto',

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

@ -1,36 +1,19 @@
import { Metadata } from 'next'
import Image from 'next/image'
import Marquee from './components/Marquee'
import BeegText from './components/BeegText'
import {
center_vertical,
marquee_container,
marquee_content,
beeg_container,
beeg_foreground,
beeg_background,
big_brother_style,
cats_div,
subcats_div,
reverse_subcats_div,
cat,
beeg_dummy,
} from './page.css'
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>
)
}
function Marquee({ children }: { children: React.ReactNode }) {
return (
<div className={marquee_container}>
<p className={marquee_content}>{children}</p>
<p className={marquee_content}>{children}</p>
</div>
)
export const metadata: Metadata = {
title: 'The Snack is Watching You',
description: 'The Snack is Watching You',
}
export default function Home() {

5
src/app/layout.tsx
View file

@ -2,11 +2,6 @@ import type { Metadata } from 'next'
import localFont from 'next/font/local'
import './global.css'
export const metadata: Metadata = {
title: 'The Snack is Watching You',
description: 'The Snack is Watching You',
}
const comic_sans = localFont({
src: './comic.ttf',
weight: '100',