alex/agb
1
0
Fork 0
mirror of https://github.com/italicsjenga/agb.git synced 2024-12-23 08:11:33 +11:00
Code Issues Packages Projects Releases Wiki Activity

show mobile controls on a small screen

Browse source
This commit is contained in:
Corwin 2024-04-09 12:15:11 +01:00
parent abd5e44ede
commit 12316dbe6a
No known key found for this signature in database
2 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
website/agb/src/app/mobileController.tsx
View file

@ -19,6 +19,10 @@ const MobileControls = styled.div`
flex-direction: column; flex-direction: column;
margin-bottom: 40px; margin-bottom: 40px;
@media (min-width: 500px) {
display: none;
}
touch-action: none; touch-action: none;
img { img {

14
website/agb/src/app/page.tsx
View file

@ -63,6 +63,12 @@ const GameSide = styled.div`
} }
`; `;
const ShowOnWideScreen = styled.div`
@media (max-width: 500px) {
display: none;
}
`;
const isTouchScreen = () => navigator.maxTouchPoints > 1; const isTouchScreen = () => navigator.maxTouchPoints > 1;
function shouldStartPlaying(isTouchScreen: boolean | undefined) { function shouldStartPlaying(isTouchScreen: boolean | undefined) {
@ -108,9 +114,9 @@ const MgbaWithControllerSides = () => {
</GameSide> </GameSide>
</GamePanelWrapper> </GamePanelWrapper>
</GameDisplay> </GameDisplay>
{shouldUseTouchScreenInput ? (
<MobileController mgba={mgbaHandle} /> <MobileController mgba={mgbaHandle} />
) : ( <ShowOnWideScreen>
<CenteredBlock> <CenteredBlock>
<p> <p>
Press escape to open the menu where you can view or change controls Press escape to open the menu where you can view or change controls
@ -119,7 +125,7 @@ const MgbaWithControllerSides = () => {
on the main menu to switch game. on the main menu to switch game.
</p> </p>
</CenteredBlock> </CenteredBlock>
)} </ShowOnWideScreen>
</> </>
); );
}; };