external-repos/LifeTrinket
1
0
Fork 1
mirror of https://github.com/Vikeo/LifeTrinket.git synced 2025-11-14 15:07:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

better icon handling

Browse Source
This commit is contained in:
Viktor Rådberg
2023-08-19 19:21:52 +02:00
parent aaa22d8247
commit df3fa4e195
67 changed files with 980 additions and 1259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
src/Components/Views/StartMenu/LayoutOptions.tsx
View File

@@ -2,18 +2,20 @@ import React from 'react';
import styled from 'styled-components/macro';
import { GridTemplateAreas } from '../../../Data/GridTemplateAreas';
import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
import OnePlayerLandscape from '../../../Icons/Layouts/OnePlayerLandscape';
import OnePlayerPortrait from '../../../Icons/Layouts/OnePlayerPortrait';
import TwoPlayersOppositeLandscape from '../../../Icons/Layouts/TwoPlayersOppositeLandscape';
import TwoPlayersOppositePortrait from '../../../Icons/Layouts/TwoPlayersOppositePortrait';
import TwoPlayersSameSide from '../../../Icons/Layouts/TwoPlayersSameSide';
import FivePlayers from '../../../Icons/Layouts/FivePlayers';
import FourPlayers from '../../../Icons/Layouts/FourPlayers';
import FourPlayersSide from '../../../Icons/Layouts/FourPlayersSide';
import ThreePlayers from '../../../Icons/Layouts/ThreePlayers';
import ThreePlayersSide from '../../../Icons/Layouts/ThreePlayersSide';
import SixPlayers from '../../../Icons/Layouts/SixPlayers';
import { theme } from '../../../Data/theme';
import {
OnePlayerPortrait,
TwoPlayersOppositeLandscape,
TwoPlayersOppositePortrait,
ThreePlayers,
ThreePlayersSide,
FourPlayers,
FourPlayersSide,
FivePlayers,
SixPlayers,
TwoPlayersSameSide,
} from '../../../Icons/generated/Layouts';
import OnePlayerLandscape from '../../../Icons/generated/Layouts/OnePlayerLandscape';
const LayoutWrapper = styled.div`
flex-direction: row;
@@ -33,6 +35,8 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
onChange,
}) => {
const iconSize = '33vmin';
const iconHeight = '33vmin';
const iconWidth = '20vmin';
const renderLayoutOptions = () => {
switch (numberOfPlayers) {
@@ -45,14 +49,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio
icon={
<OnePlayerLandscape
size={iconSize}
color={theme.palette.secondary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/>
}
checkedIcon={
<OnePlayerLandscape
size={iconSize}
color={theme.palette.primary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}
@@ -66,14 +72,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio
icon={
<OnePlayerPortrait
size={iconSize}
color={theme.palette.secondary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/>
}
checkedIcon={
<OnePlayerPortrait
size={iconSize}
color={theme.palette.primary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}
@@ -92,14 +100,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio
icon={
<TwoPlayersOppositeLandscape
size={iconSize}
color={theme.palette.secondary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/>
}
checkedIcon={
<TwoPlayersOppositeLandscape
size={iconSize}
color={theme.palette.primary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}
@@ -113,14 +123,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio
icon={
<TwoPlayersOppositePortrait
size={iconSize}
color={theme.palette.secondary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/>
}
checkedIcon={
<TwoPlayersOppositePortrait
size={iconSize}
color={theme.palette.primary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}
@@ -134,14 +146,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio
icon={
<TwoPlayersSameSide
size={iconSize}
color={theme.palette.secondary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/>
}
checkedIcon={
<TwoPlayersSameSide
size={iconSize}
color={theme.palette.primary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}
@@ -160,14 +174,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio
icon={
<ThreePlayers
size={iconSize}
color={theme.palette.secondary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/>
}
checkedIcon={
<ThreePlayers
size={iconSize}
color={theme.palette.primary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}
@@ -181,14 +197,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio
icon={
<ThreePlayersSide
size={iconSize}
color={theme.palette.secondary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/>
}
checkedIcon={
<ThreePlayersSide
size={iconSize}
color={theme.palette.primary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}
@@ -208,14 +226,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio
icon={
<FourPlayers
size={iconSize}
color={theme.palette.secondary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/>
}
checkedIcon={
<FourPlayers
size={iconSize}
color={theme.palette.primary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}
@@ -229,14 +249,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio
icon={
<FourPlayersSide
size={iconSize}
color={theme.palette.secondary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/>
}
checkedIcon={
<FourPlayersSide
size={iconSize}
color={theme.palette.primary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}
@@ -256,14 +278,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio
icon={
<FivePlayers
size={iconSize}
color={theme.palette.secondary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/>
}
checkedIcon={
<FivePlayers
size={iconSize}
color={theme.palette.primary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}
@@ -277,14 +301,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio
icon={
<FivePlayersSide
size={iconSize}
color={theme.palette.secondary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/>
}
checkedIcon={
<FivePlayersSide
size={iconSize}
color={theme.palette.primary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}
@@ -304,14 +330,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio
icon={
<SixPlayers
size={iconSize}
color={theme.palette.secondary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/>
}
checkedIcon={
<SixPlayers
size={iconSize}
color={theme.palette.primary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}
@@ -325,14 +353,16 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio
icon={
<SixPlayersSide
size={iconSize}
color={theme.palette.secondary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/>
}
checkedIcon={
<SixPlayersSide
size={iconSize}
color={theme.palette.primary.main}
height={iconHeight}
width={iconWidth}
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}