pw2/src/pages/main/Contact.tsx

import React from "react";
import { css, cx } from "@emotion/css";
import { useEffect, useState } from "react";
import Container from "../../components/Container";
import { setupCursorTracking } from "../../util";
import { ReactComponent as Logo } from "../../assets/logo.svg";
import { DraggableButton } from "../../components/DraggableButton";
import { Flippable } from "../../components/Flippable";
import { AnimateEntry } from "../../components/AnimateEntry";

const A = css`
	text-decoration: none;
`;

type Contact = {
	[k: string]: {
		value: string;
		link?: string;
		replacer?: Record<string, string>;
	};
};

const CONTACT: Contact = {
	"Email": {
		value: "һі@mκr.рw",
		link: "mailto:һі@mκr.рw",
		replacer: {
			һ: "h",
			і: "i",
			κ: "k",
			р: "p",
		},
	},
	"GitHub": { value: "MKRhere", link: "https://github.com/MKRhere" },
	"Twitter/𝕏": { value: "MKRhere", link: "https://twitter.com/MKRhere" },
	"Phone": {
		value: "+9Ι Γ8Δ5 Γ9 8Δ88",
		link: "tel:+91Γ8Δ5Γ98Δ88",
		replacer: {
			Ι: "1",
			Δ: "4",
			Γ: "7",
		},
	},
	"Blog": { value: "→", link: "https://MKRhere.com" },
};

// slightly random rotations within -20 to 20 degrees
const cardRotations = Array.from({ length: 5 }, (_, i) => {
	const rotation = Math.random() * 40 - 20;
	return rotation;
});

const Contact: React.FC = () => {
	const [contact, setContact] = useState<Contact>(CONTACT);
	const [visible, setVisible] = useState(cardRotations.length);

	useEffect(() => {
		const deob = () => {
			Object.keys(contact).forEach(key => {
				const sect = contact[key];
				const replacers = sect.replacer;
				if (replacers) {
					sect.value = sect.value.replace(
						new RegExp(Object.keys(replacers).join("|"), "g"),
						r => replacers[r] || r,
					);
					if (sect.link)
						sect.link = sect.link.replace(
							new RegExp(Object.keys(replacers).join("|"), "g"),
							r => replacers[r] || r,
						);
				}
			});

			setContact({ ...contact });
		};

		document.addEventListener("mousemove", deob, { once: true });
		document.addEventListener("scroll", deob, { once: true });
		document.addEventListener("click", deob, { once: true });
		document.addEventListener("touchstart", deob, { once: true });
		document.addEventListener("keydown", deob, { once: true });

		return () => {
			document.removeEventListener("mousemove", deob);
			document.removeEventListener("scroll", deob);
			document.removeEventListener("click", deob);
			document.removeEventListener("touchstart", deob);
			document.removeEventListener("keydown", deob);
		};
	}, []);

	return (
		<Container
			className={css`
				min-height: 50vh;
				display: flex;
				flex-direction: column;
				position: relative;
			`}>
			<h1>MKRhere</h1>
			{visible < 1 && (
				<AnimateEntry as="article" delay={500}>
					<p>Great, You've distributed all the cards!</p>
					<p>What now?</p>
					<br />
					<a href="/">Start over?</a>
				</AnimateEntry>
			)}
			{cardRotations.map((rot, i) => (
				<DraggableButton
					key={i}
					onOutsideViewport={() => setVisible(v => v - 1)}
					className={css`
						width: 22rem;
						height: auto;
						aspect-ratio: 3 / 2;

						position: absolute;
						bottom: 0;
						left: 0;

						rotate: ${rot}deg;

						padding: 0;
						background: transparent;
					`}
					ref={setupCursorTracking}>
					<Flippable
						defaultFlipped={i !== cardRotations.length - 1}
						front={
							<main
								className={css`
									height: 100%;
									width: 100%;

									overflow: hidden;
									border-radius: 0.5rem;
									background: var(--card-bg);

									box-shadow: 0 0 50rem 0 rgba(0, 0, 0, 0.8);

									display: flex;
									align-items: center;
									justify-content: center;
									gap: 1rem;
									font-size: 1rem;

									padding: 1rem 2.8em;

									ul {
										padding: 0;
										display: flex;
										flex-direction: column;
										gap: 0.5rem;
										max-width: 50vw;

										li {
											list-style: none;
											min-width: 4rem;
											max-width: 100%;
										}

										li a {
											display: block;
											max-width: 100%;
											white-space: nowrap;
											text-overflow: ellipsis;
											overflow: hidden;
										}

										/* Blog entry */
										li:last-child {
											margin-block-start: 1rem;
										}
									}
								`}>
								<div className="dynamic-gradient" />
								<ul
									className={css`
										text-align: right;
									`}>
									{Object.keys(contact).map(key => (
										<li key={key}>
											<b>{key}.</b>
										</li>
									))}
								</ul>
								<ul>
									{Object.keys(contact).map(key => {
										const value = contact[key];

										return (
											<li key={key}>
												{value.link ? (
													<a
														className={A}
														href={value.link}
														target="_blank"
														rel="noreferrer"
														style={{ width: "fit-content" }}>
														{value.value}
													</a>
												) : (
													value.value
												)}
											</li>
										);
									})}
								</ul>
							</main>
						}
						back={
							<main
								className={css`
									width: 100%;
									height: 100%;

									overflow: hidden;
									border-radius: 0.5rem;
									background: var(--card-active);
									border: 1px solid var(--card-active-border);

									display: flex;
									align-items: center;
									justify-content: center;
								`}>
								<Logo width={100} />
							</main>
						}
					/>
				</DraggableButton>
			))}
		</Container>
	);
};

export default Contact;