diff --git a/website/agb/.eslintrc.json b/website/agb/.eslintrc.json index bffb357a..8fd39c68 100644 --- a/website/agb/.eslintrc.json +++ b/website/agb/.eslintrc.json @@ -1,3 +1,6 @@ { - "extends": "next/core-web-vitals" + "extends": "next/core-web-vitals", + "rules": { + "func-style": ["error", "declaration", {"allowArrowFunctions": false}] + } } diff --git a/website/agb/src/app/contentBlock.tsx b/website/agb/src/app/contentBlock.tsx index 2d786d6c..8a05d749 100644 --- a/website/agb/src/app/contentBlock.tsx +++ b/website/agb/src/app/contentBlock.tsx @@ -32,12 +32,18 @@ const InnerBlock = styled.div<{ $centered?: boolean }>` margin-bottom: 40px; `; -export const ContentBlock: FC<{ +export function ContentBlock({ + color = "", + children, + uncentered = false, +}: { color?: string; uncentered?: boolean; children: ReactNode; -}> = ({ color = "", children, uncentered = false }) => ( -
- {children} -
-); +}) { + return ( +
+ {children} +
+ ); +} diff --git a/website/agb/src/app/crash/backtrace.tsx b/website/agb/src/app/crash/backtrace.tsx index 022e7137..30570fca 100644 --- a/website/agb/src/app/crash/backtrace.tsx +++ b/website/agb/src/app/crash/backtrace.tsx @@ -10,9 +10,11 @@ const BacktraceWrapper = styled.section` justify-content: center; `; -const getBacktrace = () => window.location.hash.slice(1); +function getBacktrace() { + return window.location.hash.slice(1); +} -export const BacktraceDisplay: FC = () => { +export function BacktraceDisplay() { const backtrace = useClientValue(getBacktrace) ?? ""; return ( @@ -28,4 +30,4 @@ export const BacktraceDisplay: FC = () => { ); -}; +} diff --git a/website/agb/src/app/mgba/Slider.tsx b/website/agb/src/app/mgba/Slider.tsx index c73a3b1d..44ee32e2 100644 --- a/website/agb/src/app/mgba/Slider.tsx +++ b/website/agb/src/app/mgba/Slider.tsx @@ -34,15 +34,15 @@ export function Slider({ }) { const slider = useRef(null); - const handleClick = (event: React.MouseEvent) => { + function handleClick(event: React.MouseEvent) { onChange( event.nativeEvent.offsetX / (event.target as HTMLDivElement).offsetWidth ); event.stopPropagation(); - }; + } - const handleDrag = (event: React.MouseEvent) => { + function handleDrag(event: React.MouseEvent) { const sliderRef = slider.current; if (!sliderRef || event.buttons !== 1) { @@ -56,7 +56,7 @@ export function Slider({ const clamped = Math.min(1, Math.max(0, proportion)); onChange(clamped); - }; + } return ( diff --git a/website/agb/src/app/mgba/bindings.tsx b/website/agb/src/app/mgba/bindings.tsx index 42be1c83..cd16e064 100644 --- a/website/agb/src/app/mgba/bindings.tsx +++ b/website/agb/src/app/mgba/bindings.tsx @@ -1,7 +1,7 @@ import { FC, useState } from "react"; import styled from "styled-components"; -const DefaultBindings = (): KeyBindings => { +function DefaultBindings(): KeyBindings { return { A: "Z", B: "X", @@ -14,12 +14,14 @@ const DefaultBindings = (): KeyBindings => { Left: "LEFT", Right: "RIGHT", }; -}; +} -export const DefaultBindingsSet = (): Bindings => ({ - Actual: DefaultBindings(), - Displayed: DefaultBindings(), -}); +export function DefaultBindingsSet(): Bindings { + return { + Actual: DefaultBindings(), + Displayed: DefaultBindings(), + }; +} export enum GbaKey { A = "A", @@ -69,18 +71,22 @@ export interface Bindings { Actual: KeyBindings; } -const toHumanName = (keyName: string) => { +function toHumanName(keyName: string) { return keyName.replace("Arrow", ""); -}; +} -export const BindingsControl: FC<{ +export function BindingsControl({ + bindings, + setBindings, + setPaused, +}: { bindings: Bindings; setBindings: (a: Bindings) => void; setPaused: (pause: boolean) => void; -}> = ({ bindings, setBindings, setPaused }) => { +}) { const [buttonToChange, setButtonToChange] = useState(null); - const setKey = (key: string) => { + function setKey(key: string) { if (buttonToChange === null) return; const nextBindings = { @@ -94,12 +100,12 @@ export const BindingsControl: FC<{ setButtonToChange(null); setBindings(nextBindings); setPaused(false); - }; + } - const onSelectButtonClick = (key: GbaKey) => { + function onSelectButtonClick(key: GbaKey) { setPaused(true); setButtonToChange(key); - }; + } return ( setKey(evt.key)}> @@ -116,4 +122,4 @@ export const BindingsControl: FC<{ ))} ); -}; +} diff --git a/website/agb/src/app/mgba/mgba.tsx b/website/agb/src/app/mgba/mgba.tsx index 64ce821e..0c16bdf2 100644 --- a/website/agb/src/app/mgba/mgba.tsx +++ b/website/agb/src/app/mgba/mgba.tsx @@ -41,7 +41,7 @@ export interface MgbaHandle { buttonRelease: (key: GbaKey) => void; } -const downloadGame = async (gameUrl: string): Promise => { +async function downloadGame(gameUrl: string): Promise { const game = await fetch(gameUrl); if (gameUrl.endsWith(".gz")) { @@ -52,7 +52,7 @@ const downloadGame = async (gameUrl: string): Promise => { } else { return await game.arrayBuffer(); } -}; +} export const Mgba = forwardRef( ({ gameUrl, volume, controls, paused }, ref) => { diff --git a/website/agb/src/app/mgba/mgbaWrapper.tsx b/website/agb/src/app/mgba/mgbaWrapper.tsx index 704a0b9e..15022f9c 100644 --- a/website/agb/src/app/mgba/mgbaWrapper.tsx +++ b/website/agb/src/app/mgba/mgbaWrapper.tsx @@ -65,11 +65,13 @@ interface MgbaWrapperProps { setIsPlaying?: (isPlaying: boolean) => void; } -export const MgbaStandalone: FC = (props) => ( - - - -); +export function MgbaStandalone(props: MgbaWrapperProps) { + return ( + + + + ); +} export const MgbaWrapper = forwardRef( ({ gameUrl, isPlaying = true, setIsPlaying }, ref) => { @@ -80,10 +82,12 @@ export const MgbaWrapper = forwardRef( const [mgbaId, setMgbaId] = useState(0); - const setVolume = (newVolume: number) => - setState({ volume: newVolume, bindings }); - const setBindings = (newBindings: Bindings) => - setState({ volume, bindings: newBindings }); + function setVolume(newVolume: number) { + return setState({ volume: newVolume, bindings }); + } + function setBindings(newBindings: Bindings) { + return setState({ volume, bindings: newBindings }); + } const [paused, setPaused] = useState(false); diff --git a/website/agb/src/app/mgba/useAvoidItchIoScrolling.ts b/website/agb/src/app/mgba/useAvoidItchIoScrolling.ts index cf708dd8..7169e97c 100644 --- a/website/agb/src/app/mgba/useAvoidItchIoScrolling.ts +++ b/website/agb/src/app/mgba/useAvoidItchIoScrolling.ts @@ -1,12 +1,12 @@ import { useEffect } from "react"; -export const useAvoidItchIoScrolling = () => { +export function useAvoidItchIoScrolling() { useEffect(() => { - const eventHandler = (e: KeyboardEvent) => { + function eventHandler(e: KeyboardEvent) { if ([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) { e.preventDefault(); } - }; + } window.addEventListener("keydown", eventHandler, false); @@ -14,4 +14,4 @@ export const useAvoidItchIoScrolling = () => { window.removeEventListener("keydown", eventHandler, false); }; }, []); -}; +} diff --git a/website/agb/src/app/mgba/useFrameSkip.hook.ts b/website/agb/src/app/mgba/useFrameSkip.hook.ts index fa9e4633..9f96d447 100644 --- a/website/agb/src/app/mgba/useFrameSkip.hook.ts +++ b/website/agb/src/app/mgba/useFrameSkip.hook.ts @@ -2,7 +2,7 @@ import { MutableRefObject, useEffect } from "react"; import { mGBAEmulator } from "./vendor/mgba"; -export const useFrameSkip = (mgbaModule: MutableRefObject) => { +export function useFrameSkip(mgbaModule: MutableRefObject) { useEffect(() => { let previous: number | undefined = undefined; let stopped = false; @@ -11,7 +11,7 @@ export const useFrameSkip = (mgbaModule: MutableRefObject) => { let totalTime = 0; let paused = false; - const raf = (time: DOMHighResTimeStamp) => { + function raf(time: DOMHighResTimeStamp) { if (previous) { const delta = time - previous; @@ -45,7 +45,7 @@ export const useFrameSkip = (mgbaModule: MutableRefObject) => { } window.requestAnimationFrame(raf); - return () => { stopped = true; } + return () => { stopped = true; }; }, [mgbaModule]); diff --git a/website/agb/src/app/mgba/useLocalStorage.hook.ts b/website/agb/src/app/mgba/useLocalStorage.hook.ts index b9b2e9f4..5d5e247c 100644 --- a/website/agb/src/app/mgba/useLocalStorage.hook.ts +++ b/website/agb/src/app/mgba/useLocalStorage.hook.ts @@ -1,9 +1,7 @@ import { useCallback, useState } from "react"; -export const useLocalStorage = ( - defaultValue: T, - appName: string -): [T, (newValue: T) => void] => { +export function useLocalStorage(defaultValue: T, + appName: string): [T, (newValue: T) => void] { const [value, setValue] = useState(() => { try { const storageValue = localStorage.getItem(appName); @@ -26,4 +24,4 @@ export const useLocalStorage = ( }, []); return [value, setStoredValue]; -}; +} diff --git a/website/agb/src/app/mgba/useOnKeyUp.hook.ts b/website/agb/src/app/mgba/useOnKeyUp.hook.ts index ab0e877b..b6049436 100644 --- a/website/agb/src/app/mgba/useOnKeyUp.hook.ts +++ b/website/agb/src/app/mgba/useOnKeyUp.hook.ts @@ -1,12 +1,12 @@ import { useEffect } from "react"; -export const useOnKeyUp = (targetKey: string, callback: () => void) => { +export function useOnKeyUp(targetKey: string, callback: () => void) { useEffect(() => { - const downHandler = (evnt: KeyboardEvent) => { + function downHandler(evnt: KeyboardEvent) { if (evnt.key === targetKey) { callback(); } - }; + } window.addEventListener("keyup", downHandler); @@ -14,4 +14,4 @@ export const useOnKeyUp = (targetKey: string, callback: () => void) => { window.removeEventListener("keyup", downHandler); }; }, [callback, targetKey]); -}; +} diff --git a/website/agb/src/app/mobileController.tsx b/website/agb/src/app/mobileController.tsx index 60cdadff..d3537961 100644 --- a/website/agb/src/app/mobileController.tsx +++ b/website/agb/src/app/mobileController.tsx @@ -52,7 +52,7 @@ const MobileControlsRow = styled.div<{ ${(props) => props.$centered && `justify-content: center;`} `; -const useSimpleButton = (mgba: MgbaHandle, button: GbaKey) => { +function useSimpleButton(mgba: MgbaHandle, button: GbaKey) { return useMemo(() => { return { onTouchStart: () => { @@ -63,9 +63,9 @@ const useSimpleButton = (mgba: MgbaHandle, button: GbaKey) => { }, }; }, [button, mgba]); -}; +} -const relativeTouch = (touch: Touch) => { +function relativeTouch(touch: Touch) { const target = (touch.target as Element).getBoundingClientRect(); const touchPoint = { x: touch.clientX, y: touch.clientY }; @@ -82,15 +82,15 @@ const relativeTouch = (touch: Touch) => { }; return relativePosition; -}; +} -const useDpadTouch = (mgba: MgbaHandle) => { +function useDpadTouch(mgba: MgbaHandle) { const [previouslyPressedButtons, setTouchedButtons] = useState>( new Set() ); return useMemo(() => { - const updateDpad = (touches: TouchList) => { + function updateDpad(touches: TouchList) { const currentlyPressed = new Set(); for (let touch of touches) { @@ -130,7 +130,7 @@ const useDpadTouch = (mgba: MgbaHandle) => { } setTouchedButtons(currentlyPressed); - }; + } return { onTouchStart: (event: React.TouchEvent) => @@ -141,15 +141,15 @@ const useDpadTouch = (mgba: MgbaHandle) => { updateDpad(event.nativeEvent.targetTouches), }; }, [mgba, previouslyPressedButtons]); -}; +} -const useAbTouch = (mgba: MgbaHandle) => { +function useAbTouch(mgba: MgbaHandle) { const [previouslyPressedButtons, setTouchedButtons] = useState>( new Set() ); return useMemo(() => { - const updateAbButtons = (touches: TouchList) => { + function updateAbButtons(touches: TouchList) { const currentlyPressed = new Set(); for (let touch of touches) { @@ -173,7 +173,7 @@ const useAbTouch = (mgba: MgbaHandle) => { } setTouchedButtons(currentlyPressed); - }; + } return { onTouchStart: (event: React.TouchEvent) => @@ -184,9 +184,9 @@ const useAbTouch = (mgba: MgbaHandle) => { updateAbButtons(event.nativeEvent.targetTouches), }; }, [mgba, previouslyPressedButtons]); -}; +} -export const MobileController: FC<{ mgba: MgbaHandle }> = ({ mgba }) => { +export function MobileController({ mgba }: { mgba: MgbaHandle }) { return ( evt.preventDefault()}> @@ -226,4 +226,4 @@ export const MobileController: FC<{ mgba: MgbaHandle }> = ({ mgba }) => { ); -}; +} diff --git a/website/agb/src/app/page.tsx b/website/agb/src/app/page.tsx index 456757e6..41c58c8b 100644 --- a/website/agb/src/app/page.tsx +++ b/website/agb/src/app/page.tsx @@ -69,14 +69,16 @@ const ShowOnWideScreen = styled.div` } `; -const isTouchScreen = () => navigator.maxTouchPoints > 1; +function isTouchScreen() { + return navigator.maxTouchPoints > 1; +} function shouldStartPlaying(isTouchScreen: boolean | undefined) { if (isTouchScreen === undefined) return false; return !isTouchScreen; } -const MgbaWithControllerSides = () => { +function MgbaWithControllerSides() { const mgba = useRef(null); const mgbaHandle = useMemo( @@ -128,7 +130,7 @@ const MgbaWithControllerSides = () => { ); -}; +} export default function Home() { return ( <> diff --git a/website/agb/src/app/useClientValue.hook.ts b/website/agb/src/app/useClientValue.hook.ts index f1236a67..79f6d95e 100644 --- a/website/agb/src/app/useClientValue.hook.ts +++ b/website/agb/src/app/useClientValue.hook.ts @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; -export const useClientValue = (fn: () => T) => { +export function useClientValue(fn: () => T) { const [value, setValue] = useState(); useEffect(() => { setValue(fn());