external-repos/LifeTrinket
1
0
Fork 1
mirror of https://github.com/Vikeo/LifeTrinket.git synced 2025-11-19 17:28:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

less messy startpage css wip

Browse Source
This commit is contained in:
Vikeo
2023-07-09 16:57:56 +02:00
parent c774343194
commit 1d99b25e5b
3 changed files with 34 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
my-app/src/App.tsx
View File

@@ -5,6 +5,7 @@ import Play from './Components/Views/Play';
import StartMenu from './Components/Views/StartMenu'; import StartMenu from './Components/Views/StartMenu';
import { InitialSettings } from './Data/getInitialPlayers'; import { InitialSettings } from './Data/getInitialPlayers';
import { GridTemplateAreas } from './Data/getGridTemplateAreas'; import { GridTemplateAreas } from './Data/getGridTemplateAreas';
import styled from 'styled-components';
export const initialPlayerOptions = { export const initialPlayerOptions = {
numberOfPlayers: 4, numberOfPlayers: 4,
@@ -13,6 +14,19 @@ export const initialPlayerOptions = {
gridAreas: GridTemplateAreas.FourPlayers, gridAreas: GridTemplateAreas.FourPlayers,
}; };
const RootWrapper2 = styled.div`
max-width: fit-content;
max-height: fit-content;
`;
const RootWrapper = styled.div`
max-width: fit-content;
max-height: fit-content;
@media (orientation: portrait) {
rotate: 90deg;
}
`;
const App = () => { const App = () => {
const savedPlayers = localStorage.getItem('players'); const savedPlayers = localStorage.getItem('players');
const savedGameSettings = localStorage.getItem('initialGameSettings'); const savedGameSettings = localStorage.getItem('initialGameSettings');
@@ -43,20 +57,24 @@ const App = () => {
if (players.length > 0 && initialGameSettings) { if (players.length > 0 && initialGameSettings) {
return ( return (
<Play <RootWrapper>
players={players} <Play
onPlayerChange={handlePlayerChange} players={players}
gridAreas={initialGameSettings?.gridAreas} onPlayerChange={handlePlayerChange}
/> gridAreas={initialGameSettings?.gridAreas}
/>
</RootWrapper>
); );
} }
return ( return (
<StartMenu <RootWrapper2>
initialGameSettings={initialGameSettings} <StartMenu
setInitialGameSettings={setInitialGameSettings} initialGameSettings={initialGameSettings}
setPlayers={setPlayers} setInitialGameSettings={setInitialGameSettings}
/> setPlayers={setPlayers}
/>
</RootWrapper2>
); );
}; };

12
my-app/src/Components/Views/StartMenu.tsx
View File

@@ -35,11 +35,11 @@ const MainWrapper = styled.div`
justify-content: center; justify-content: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
rotate: -90deg; max-width: 100vmin;
width: 100%; max-height: 100vmax;
height: 100%; @media (orientation: landscape) {
padding: 5rem; rotate: -90deg;
min-width: max-content; }
`; `;
const LayoutWrapper = styled.div` const LayoutWrapper = styled.div`
@@ -47,8 +47,6 @@ const LayoutWrapper = styled.div`
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 1rem;
min-width: max-content;
`; `;
const playerMarks = [ const playerMarks = [

12
my-app/src/index.tsx
View File

@@ -5,22 +5,12 @@ import App from './App';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
import { styled } from 'styled-components'; import { styled } from 'styled-components';
const RootWrapper = styled.div`
max-width: fit-content;
max-height: fit-content;
@media (orientation: portrait) {
rotate: 90deg;
}
`;
const root = ReactDOM.createRoot( const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement document.getElementById('root') as HTMLElement
); );
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<RootWrapper> <App />
<App />
</RootWrapper>
</React.StrictMode> </React.StrictMode>
); );