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 }) => (
-
-);
+}) {
+ return (
+
+ );
+}
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());