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;
margin-bottom: 40px;
@media (min-width: 500px) {
display: none;
}
touch-action: none;
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;
function shouldStartPlaying(isTouchScreen: boolean | undefined) {
@ -108,9 +114,9 @@ const MgbaWithControllerSides = () => {
</GameSide>
</GamePanelWrapper>
</GameDisplay>
{shouldUseTouchScreenInput ? (
<MobileController mgba={mgbaHandle} />
) : (
<MobileController mgba={mgbaHandle} />
<ShowOnWideScreen>
<CenteredBlock>
<p>
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.
</p>
</CenteredBlock>
)}
</ShowOnWideScreen>
</>
);
};