From 9ad67ae494ade79c2ccb7c972415c2f32ce9b7c8 Mon Sep 17 00:00:00 2001 From: Corwin Date: Tue, 9 Apr 2024 02:31:17 +0100 Subject: [PATCH 1/3] on mobile devices require a touch to start the emulator loading --- website/agb/src/app/mgba/mgbaWrapper.tsx | 20 +++++++----------- website/agb/src/app/mobileController.tsx | 12 +++++------ website/agb/src/app/page.tsx | 26 ++++++++++++++++++------ 3 files changed, 33 insertions(+), 25 deletions(-) diff --git a/website/agb/src/app/mgba/mgbaWrapper.tsx b/website/agb/src/app/mgba/mgbaWrapper.tsx index 34bc1035..704a0b9e 100644 --- a/website/agb/src/app/mgba/mgbaWrapper.tsx +++ b/website/agb/src/app/mgba/mgbaWrapper.tsx @@ -43,13 +43,12 @@ const AppContainer = styled.main` const StartButtonWrapper = styled.button` margin: auto; - font-size: 3em; + font-size: 2em; padding: 1em; text-transform: uppercase; background-color: black; color: white; border: none; - border-radius: 0.5em; aspect-ratio: 240 / 160; width: 100%; height: 100%; @@ -62,7 +61,8 @@ const StartButtonWrapper = styled.button` interface MgbaWrapperProps { gameUrl: string; - startNotPlaying?: boolean; + isPlaying?: boolean; + setIsPlaying?: (isPlaying: boolean) => void; } export const MgbaStandalone: FC = (props) => ( @@ -71,12 +71,8 @@ export const MgbaStandalone: FC = (props) => ( ); -export interface MgbaWrapperHandle extends MgbaHandle { - hardReset: () => void; -} - -export const MgbaWrapper = forwardRef( - ({ gameUrl, startNotPlaying = false }, ref) => { +export const MgbaWrapper = forwardRef( + ({ gameUrl, isPlaying = true, setIsPlaying }, ref) => { const [{ volume, bindings }, setState] = useLocalStorage( { volume: 1.0, bindings: DefaultBindingsSet() }, "agbrswebplayer" @@ -108,8 +104,6 @@ export const MgbaWrapper = forwardRef( useAvoidItchIoScrolling(); - const [isPlaying, setIsPlaying] = useState(!startNotPlaying); - return ( <> {showBindings && ( @@ -133,7 +127,7 @@ export const MgbaWrapper = forwardRef( paused={paused} /> ) : ( - setIsPlaying(true)} /> + setIsPlaying && setIsPlaying(true)} /> )} ); @@ -179,7 +173,7 @@ function BindingsWindow({ function StartButton({ onClick }: { onClick: () => void }) { return ( - Press to start + Touch to start ); } diff --git a/website/agb/src/app/mobileController.tsx b/website/agb/src/app/mobileController.tsx index cef41805..06061324 100644 --- a/website/agb/src/app/mobileController.tsx +++ b/website/agb/src/app/mobileController.tsx @@ -8,8 +8,8 @@ import DPad from "./gba-parts/dpad.png"; import ABButtons from "./gba-parts/ab.png"; import Select from "./gba-parts/SELECT.png"; import Start from "./gba-parts/START.png"; -import { MgbaWrapperHandle } from "./mgba/mgbaWrapper"; import { GbaKey } from "./mgba/bindings"; +import { MgbaHandle } from "./mgba/mgba"; const MobileControls = styled.div` display: flex; @@ -48,7 +48,7 @@ const MobileControlsRow = styled.div<{ ${(props) => props.$centered && `justify-content: center;`} `; -const useSimpleButton = (mgba: MgbaWrapperHandle, button: GbaKey) => { +const useSimpleButton = (mgba: MgbaHandle, button: GbaKey) => { return useMemo(() => { return { onTouchStart: () => { @@ -80,7 +80,7 @@ const relativeTouch = (touch: Touch) => { return relativePosition; }; -const useDpadTouch = (mgba: MgbaWrapperHandle) => { +const useDpadTouch = (mgba: MgbaHandle) => { const [previouslyPressedButtons, setTouchedButtons] = useState>( new Set() ); @@ -139,7 +139,7 @@ const useDpadTouch = (mgba: MgbaWrapperHandle) => { }, [mgba, previouslyPressedButtons]); }; -const useAbTouch = (mgba: MgbaWrapperHandle) => { +const useAbTouch = (mgba: MgbaHandle) => { const [previouslyPressedButtons, setTouchedButtons] = useState>( new Set() ); @@ -182,7 +182,7 @@ const useAbTouch = (mgba: MgbaWrapperHandle) => { }, [mgba, previouslyPressedButtons]); }; -export const MobileController: FC<{ mgba: MgbaWrapperHandle }> = ({ mgba }) => { +export const MobileController: FC<{ mgba: MgbaHandle }> = ({ mgba }) => { return ( evt.preventDefault()}> @@ -218,7 +218,7 @@ export const MobileController: FC<{ mgba: MgbaWrapperHandle }> = ({ mgba }) => { /> - + ); diff --git a/website/agb/src/app/page.tsx b/website/agb/src/app/page.tsx index 2e3040af..9f92bec0 100644 --- a/website/agb/src/app/page.tsx +++ b/website/agb/src/app/page.tsx @@ -2,15 +2,16 @@ import styled from "styled-components"; import { CenteredBlock, ContentBlock } from "./contentBlock"; -import MgbaWrapper, { MgbaWrapperHandle } from "./mgba/mgbaWrapper"; +import MgbaWrapper from "./mgba/mgbaWrapper"; import Image from "next/image"; import left from "./gba-parts/left.png"; import right from "./gba-parts/right.png"; import { MobileController } from "./mobileController"; -import { useMemo, useRef } from "react"; +import { useMemo, useRef, useState } from "react"; import { GbaKey } from "./mgba/bindings"; import { useClientValue } from "./useClientValue.hook"; +import { MgbaHandle } from "./mgba/mgba"; const ExternalLink = styled.a` text-decoration: none; @@ -36,7 +37,7 @@ const GameDisplay = styled.div` const GamePanelWrapper = styled.div` display: flex; justify-content: center; - align-items: baseline; + align-items: end; height: 100%; `; @@ -60,12 +61,16 @@ const GameSide = styled.div` const isTouchScreen = () => navigator.maxTouchPoints > 1; +function shouldStartPlaying(isTouchScreen: boolean | undefined) { + if (isTouchScreen === undefined) return false; + return !isTouchScreen; +} + const MgbaWithControllerSides = () => { - const mgba = useRef(null); + const mgba = useRef(null); const mgbaHandle = useMemo( () => ({ - hardReset: () => mgba.current?.hardReset(), restart: () => mgba.current?.restart(), buttonPress: (key: GbaKey) => mgba.current?.buttonPress(key), buttonRelease: (key: GbaKey) => mgba.current?.buttonRelease(key), @@ -73,8 +78,12 @@ const MgbaWithControllerSides = () => { [] ); + const [isPlaying, setIsPlaying] = useState(); const shouldUseTouchScreenInput = useClientValue(isTouchScreen); + const playEmulator = + isPlaying ?? shouldStartPlaying(shouldUseTouchScreenInput); + return ( <> @@ -83,7 +92,12 @@ const MgbaWithControllerSides = () => { - + From 73d43469644ffe0d5b4318935c1bf0c106c88826 Mon Sep 17 00:00:00 2001 From: Corwin Date: Tue, 9 Apr 2024 02:32:36 +0100 Subject: [PATCH 2/3] nicer height calculation --- website/agb/src/app/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/agb/src/app/page.tsx b/website/agb/src/app/page.tsx index 9f92bec0..44b7812f 100644 --- a/website/agb/src/app/page.tsx +++ b/website/agb/src/app/page.tsx @@ -28,7 +28,7 @@ const HelpLinks = styled.div` `; const GameDisplay = styled.div` - height: min(calc(100vw / 1.5), 40vh); + height: min(calc(100vw / 1.5), min(90vh, 480px)); max-width: 100vw; margin-top: 20px; overflow: hidden; From bbdcdfeb95149af8bcf358038e2cd15c94ac6bf5 Mon Sep 17 00:00:00 2001 From: Corwin Date: Tue, 9 Apr 2024 02:38:22 +0100 Subject: [PATCH 3/3] readd hover border on help links --- website/agb/src/app/page.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/website/agb/src/app/page.tsx b/website/agb/src/app/page.tsx index 44b7812f..8c5eb20d 100644 --- a/website/agb/src/app/page.tsx +++ b/website/agb/src/app/page.tsx @@ -20,6 +20,10 @@ const ExternalLink = styled.a` border: solid #fad288 2px; border-radius: 5px; padding: 5px 10px; + + &:hover { + border: solid black 2px; + } `; const HelpLinks = styled.div`