diff --git a/src/App.tsx b/src/App.tsx index dd560ea..0222f6f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -26,6 +26,8 @@ const StartWrapper = styled.div` `; const PlayWrapper = styled.div` + position: relative; + z-index: 0; max-width: fit-content; max-height: fit-content; @media (orientation: portrait) { @@ -39,6 +41,16 @@ const removeLocalStorage = async () => { localStorage.removeItem('playing'); }; +const EmergencyResetButton = styled.button` + width: 100vmax; + height: 100vmin; + font-size: 4vmax; + position: absolute; + top: 0; + z-index: -1; + background-color: #4e6815; +`; + const App = () => { const analytics = useAnalytics(); const savedPlayers = localStorage.getItem('players'); @@ -105,6 +117,12 @@ const App = () => { goToStart={goToStart} wakeLock={wakeLock} /> + +

If you can see this, something is wrong.

+

Press screen to go to start.

+
+

If the issue persists, please inform me.

+
) : ( diff --git a/src/Components/Counters/Counters.tsx b/src/Components/Counters/Counters.tsx index 853163f..fd31baa 100644 --- a/src/Components/Counters/Counters.tsx +++ b/src/Components/Counters/Counters.tsx @@ -28,14 +28,6 @@ export const GridItemContainer = styled.div<{ grid-area: ${(props) => props.$gridArea}; `; -export const SettingsButtonContainer = styled.div` - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 9; -`; - type CountersProps = { players: Player[]; onPlayerChange: (updatedPlayer: Player) => void; diff --git a/src/Components/Views/Play.tsx b/src/Components/Views/Play.tsx index bc8b185..7830872 100644 --- a/src/Components/Views/Play.tsx +++ b/src/Components/Views/Play.tsx @@ -4,6 +4,8 @@ import { Player } from '../../Types/Player'; import { WakeLock } from '../../Types/WakeLock'; const MainWrapper = styled.div` + width: 100vmax; + height: 100vmin; width: 100dvmax; height: 100dvmin; overflow: hidden;