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

no full screen button

Browse Source
This commit is contained in:
Viktor Rådberg
2023-07-06 08:16:00 +02:00
parent cf84f4f66c
commit caa5e3f0a3
11 changed files with 24 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
my-app/src/App.css
View File

@@ -15,7 +15,7 @@
.App-header {
background-color: #282c34;
min-height: 100vh;
min-height: 100vmin;
display: flex;
flex-direction: column;
align-items: center;

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

@@ -5,52 +5,14 @@ import styled from 'styled-components';
import { Player } from './Types/Player';
const MainWrapper = styled.div`
width: 100vw;
height: 100vh;
width: 100vmax;
height: 100vmin;
overflow: hidden;
min-width: 254px;
`;
const FullScreenButtonContainer = styled.div`
display: none;
@media (orientation: portrait) {
display: block;
height: 80px;
width: 80vw;
margin: auto;
position: relative;
}
`;
const FullscreenButton = styled.button`
display: none;
@media (orientation: portrait) {
display: block;
height: 100%;
width: 100%;
}
`;
const TitleText = styled.h1`
display: none;
font-size: 2rem;
font-weight: 600;
margin: 0;
text-align: center;
user-select: none;
padding: 5rem 1rem 2rem 1rem;
@media (orientation: portrait) {
display: block;
}
`;
const CountersWrapper = styled.div`
display: flex;
@media (orientation: portrait) {
display: none;
}
`;
const initialPlayers: Player[] = [
@@ -137,17 +99,6 @@ function App() {
return (
<MainWrapper>
<TitleText>
You need to be in landscape mode to use this app.
<hr />
Pressing the fullscreen button is also very recommended.
</TitleText>
<FullScreenButtonContainer>
<FullscreenButton onClick={handleFullscreen}>
Toggle Fullscreen
</FullscreenButton>
</FullScreenButtonContainer>
<CountersWrapper>
<Counters players={players} onPlayerChange={handlePlayerChange} />
</CountersWrapper>

2
my-app/src/Components/Buttons/CommanderDamageBar.tsx
View File

@@ -20,7 +20,7 @@ const CommanderDamageButton = styled.button<{ backgroundColor?: string }>`
display: flex;
flex-grow: 1;
border: none;
height: 10vh;
height: 10vmin;
outline: none;
cursor: pointer;
background-color: ${(props) => props.backgroundColor || 'antiquewhite'};

2
my-app/src/Components/Buttons/ExtraCounter.tsx
View File

@@ -21,7 +21,7 @@ export const CenteredText = styled.div`
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5vh;
font-size: 5vmin;
font-weight: bold;
text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff,
1px 1px 0 #ffffff;

4
my-app/src/Components/Buttons/SettingsButton.tsx
View File

@@ -7,7 +7,7 @@ export const StyledExtraCounterButton = styled.button`
border: none;
outline: none;
cursor: pointer;
margin-bottom: -5vh;
margin-bottom: -5vmin;
top: 8px;
background-color: transparent;
user-select: none;
@@ -25,7 +25,7 @@ type SettingsButtonProps = {
const SettingsButton = ({ onClick }: SettingsButtonProps) => {
return (
<StyledExtraCounterButton onClick={onClick}>
<SettingsIcon size="4vh" />
<SettingsIcon size="4vmin" />
</StyledExtraCounterButton>
);
};

8
my-app/src/Components/Counters/Counters.style.ts
View File

@@ -20,16 +20,16 @@ export const CountersGrid = styled.div`
export const GridItemContainer = styled.div`
display: flex;
width: calc(50vw - 2px);
height: calc(50vh - 2px);
width: calc(50vmax - 2px);
height: calc(50vmin - 2px);
justify-content: center;
align-items: center;
`;
export const GridItemContainerFlipped = styled.div`
display: flex;
width: calc(50vw - 2px);
height: calc(50vh - 2px);
width: calc(50vmax - 2px);
height: calc(50vmin - 2px);
justify-content: center;
align-items: center;
transform: rotate(180deg);

2
my-app/src/Components/LifeCounter/LifeCounter.style.ts
View File

@@ -33,7 +33,7 @@ export const LifeCounterText = styled.p`
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30vh;
font-size: 30vmin;
text-align: center;
text-size-adjust: auto;
margin: 0;

10
my-app/src/Components/LifeCounter/LifeCounter.tsx
View File

@@ -68,19 +68,19 @@ const LifeCounter = ({
</S.LifeCountainer>
<S.ExtraCountersGrid>
{player.settings.useCommanderDamage && (
<ExtraCounter Icon={<CommanderTaxIcon size="8vh" />} />
<ExtraCounter Icon={<CommanderTaxIcon size="8vmin" />} />
)}
{Boolean(
player.settings.useCommanderDamage && player.settings.usePartner
) && <ExtraCounter Icon={<PartnerTaxIcon size="8vh" />} />}
) && <ExtraCounter Icon={<PartnerTaxIcon size="8vmin" />} />}
{player.settings.usePoison && (
<ExtraCounter Icon={<PoisonIcon size="8vh" />} />
<ExtraCounter Icon={<PoisonIcon size="8vmin" />} />
)}
{player.settings.useEnergy && (
<ExtraCounter Icon={<EnergyIcon size="8vh" />} />
<ExtraCounter Icon={<EnergyIcon size="8vmin" />} />
)}
{player.settings.useExperience && (
<ExtraCounter Icon={<ExperienceIcon size="8vh" />} />
<ExtraCounter Icon={<ExperienceIcon size="8vmin" />} />
)}
</S.ExtraCountersGrid>
</S.LifeCounterContentContainer>

6
my-app/src/Components/PlayerMenu/PlayerMenu.style.ts
View File

@@ -26,12 +26,12 @@ export const Label = styled.label`
justify-content: space-evenly;
align-items: center;
color: #ffffff;
font-size: 2vh;
font-size: 2vmin;
`;
export const Input = styled.input`
width: 5vh;
height: 5vh;
width: 5vmin;
height: 5vmin;
border: none;
outline: none;
cursor: pointer;

2
my-app/src/Icons/PartnerTaxIcon.tsx
View File

@@ -6,7 +6,7 @@ const PartnerTaxIcon = ({ size, color }: IconProps) => {
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 325 325"
width={'12vh'}
width={'12vmin'}
height={`calc(${size} - 0px)`}
fill={color || 'black'}
fillOpacity="0.5"

3
my-app/src/index.css
View File

@@ -5,6 +5,9 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@media (orientation: portrait) {
transform: rotate(90deg);
}
}
code {