2021-12-14 23:45:00 +01:00
|
|
|
import type { NextPage } from "next";
|
2021-12-17 18:55:00 +01:00
|
|
|
import Head from "next/head";
|
2021-12-17 20:55:14 +01:00
|
|
|
import { GithubLogo, InstagramLogo, DiscordLogo, GameController } from "phosphor-react";
|
2022-06-12 14:22:15 +02:00
|
|
|
import { useEffect, useRef,useCallback } from "react";
|
|
|
|
|
import { useCommands } from "../components/contexts/CommandInterface";
|
|
|
|
|
import { useModalFunctions } from "../components/contexts/ModalFunctions";
|
2022-01-14 14:27:19 +01:00
|
|
|
import ProjectModal from "../components/ProjectModal";
|
2021-12-15 18:56:32 +01:00
|
|
|
import REPL from "../components/REPL";
|
2021-12-16 01:03:54 +01:00
|
|
|
import styles from "../styles/Home.module.css";
|
2021-11-30 23:48:54 +01:00
|
|
|
|
|
|
|
|
const Home: NextPage = () => {
|
2022-02-05 00:47:36 +01:00
|
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
2022-06-12 14:22:15 +02:00
|
|
|
const { modalFunctions } = useModalFunctions();
|
|
|
|
|
const { setContents } = useCommands();
|
|
|
|
|
|
|
|
|
|
const updateProjects = useCallback(async () => {
|
|
|
|
|
try {
|
|
|
|
|
const res = await fetch("/content/list.json");
|
|
|
|
|
const projects = await res.json();
|
|
|
|
|
setContents(projects);
|
|
|
|
|
} catch {}
|
|
|
|
|
}, [setContents]);
|
|
|
|
|
|
|
|
|
|
updateProjects();
|
2021-12-26 16:51:35 +01:00
|
|
|
|
2022-01-14 14:27:19 +01:00
|
|
|
const focusInput = () => { if (inputRef.current) inputRef.current.focus(); };
|
|
|
|
|
|
|
|
|
|
const hideModalOnEsc = (e: React.KeyboardEvent) => {
|
|
|
|
|
if (e.key === "Escape") {
|
|
|
|
|
e.preventDefault();
|
2022-06-12 14:22:15 +02:00
|
|
|
if(modalFunctions.setVisible) modalFunctions.setVisible(false);
|
2022-01-14 14:27:19 +01:00
|
|
|
}
|
2022-01-14 17:17:55 +01:00
|
|
|
};
|
2022-01-14 14:27:19 +01:00
|
|
|
|
2022-06-12 14:22:15 +02:00
|
|
|
useEffect(() => {
|
|
|
|
|
const interval = setInterval(updateProjects, 30 * 1000);
|
|
|
|
|
return () => clearInterval(interval);
|
|
|
|
|
}, [updateProjects]);
|
|
|
|
|
|
2022-02-05 00:11:59 +01:00
|
|
|
return (<main onKeyDown={hideModalOnEsc} tabIndex={-1}>
|
2022-01-14 14:27:19 +01:00
|
|
|
<Head>
|
|
|
|
|
<title>c0ntroller.de</title>
|
|
|
|
|
</Head>
|
2022-06-12 14:22:15 +02:00
|
|
|
<ProjectModal />
|
2022-01-14 14:27:19 +01:00
|
|
|
<div className={styles.container}>
|
|
|
|
|
<div className={styles.header}>
|
|
|
|
|
<span className={styles.spacer} onClick={focusInput}> </span>
|
2022-03-14 11:06:13 +01:00
|
|
|
<a href="https://github.com/C0ntroller/c0ntroller.de" target="_blank" rel="noreferrer">Source</a>
|
2022-01-14 14:27:19 +01:00
|
|
|
<span className={styles.divider}>|</span>
|
2022-03-14 11:06:13 +01:00
|
|
|
<a href="https://github.com/C0ntroller/c0ntroller.de/issues/new" target="_blank" rel="noreferrer">Bug?</a>
|
2022-01-14 14:27:19 +01:00
|
|
|
<span className={styles.divider}>|</span>
|
2022-03-14 11:06:13 +01:00
|
|
|
<a href="https://github.com/C0ntroller" target="_blank" rel="noreferrer"><GithubLogo color="var(--repl-color)" className={styles.iconLink} /></a>
|
2022-01-14 14:27:19 +01:00
|
|
|
<span className={styles.divider}>|</span>
|
2022-03-14 11:06:13 +01:00
|
|
|
<a href="https://www.instagram.com/c0ntroller/" target="_blank" rel="noreferrer"><InstagramLogo color="var(--repl-color)" className={styles.iconLink} /></a>
|
2022-01-14 14:27:19 +01:00
|
|
|
<span className={styles.divider}>|</span>
|
2022-03-14 11:06:13 +01:00
|
|
|
<a href="https://steamcommunity.com/id/c0ntroller/" target="_blank" rel="noreferrer"><GameController color="var(--repl-color)" className={styles.iconLink} /></a>
|
2022-01-14 14:27:19 +01:00
|
|
|
<span className={styles.divider}>|</span>
|
2022-03-14 11:06:13 +01:00
|
|
|
<a href="https://discordapp.com/users/224208617820127233" target="_blank" rel="noreferrer">
|
2022-01-14 14:27:19 +01:00
|
|
|
<span className={styles.tooltip} style={{ cursor: "pointer" }}>
|
|
|
|
|
<DiscordLogo color="var(--repl-color)" className={styles.iconLink} />
|
|
|
|
|
<span className={styles.tooltiptext}>
|
|
|
|
|
C0ntroller_Z#3883
|
|
|
|
|
</span>
|
|
|
|
|
</span>
|
2022-03-14 10:57:06 +01:00
|
|
|
</a><span className={styles.spacer} onClick={focusInput}> </span>
|
2022-01-14 14:27:19 +01:00
|
|
|
</div>
|
2022-06-12 14:22:15 +02:00
|
|
|
<REPL inputRef={inputRef} />
|
2022-01-14 14:27:19 +01:00
|
|
|
</div>
|
|
|
|
|
</main>);
|
2021-12-14 23:45:00 +01:00
|
|
|
};
|
2021-11-30 23:48:54 +01:00
|
|
|
|
2021-12-14 23:45:00 +01:00
|
|
|
export default Home;
|
