Skip to content

Commit

Permalink
Add small roller option for progress tracks
Browse files Browse the repository at this point in the history
  • Loading branch information
@AG-Guardian
AG-Guardian committed Oct 25, 2024
1 parent ebe611c commit b94ee81
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 104 deletions.
215 changes: 112 additions & 103 deletions src/components/features/ProgressTrack/ProgressTrack.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, Button, ButtonBase, Chip, Link, Typography } from "@mui/material";
import {Box, Button, ButtonBase, Chip, IconButton, Link, Typography} from "@mui/material";
import { useEffect, useId, useState } from "react";
import { ProgressTrackTick } from "./ProgressTrackTick";
import MinusIcon from "@mui/icons-material/Remove";
Expand Down Expand Up @@ -53,6 +53,7 @@ export interface BaseProgressTrackProps {
onEdit?: () => void;
hideDifficultyLabel?: boolean;
hideRollButton?: boolean;
useSmallRollButton?: boolean;
useMaxRoll?: boolean;
}

Expand Down Expand Up @@ -119,6 +120,7 @@ export function ProgressTrack(props: ProgressTracksProps) {
onEdit,
hideDifficultyLabel,
hideRollButton,
useSmallRollButton,
useMaxRoll,
} = props;

Expand Down Expand Up @@ -268,114 +270,121 @@ export function ProgressTrack(props: ProgressTracksProps) {
mt={label ? 1 : 0}
mr={trackType === TrackTypes.SceneChallenge ? 2 : 0}
>
{onValueChange && (
<ButtonBase
aria-label={"Decrement Track"}
onClick={() => {
if (onValueChange) {
const newValue = Math.max(
value - getDifficultyStep(difficulty),
0
);
onValueChange(newValue);
if (newValue === value) {
announce(`${label} is already at zero ticks`);
} else {
announce(`Updated ${label} to ${getValueText(newValue)}`);
}
}
}}
focusRipple
sx={(theme) => ({
backgroundColor:
theme.palette.darkGrey[
theme.palette.mode === "light" ? "main" : "light"
],
color: theme.palette.darkGrey.contrastText,
px: 0.5,
"&:hover": {
backgroundColor: theme.palette.darkGrey.dark,
},
borderTopLeftRadius: `${theme.shape.borderRadius}px`,
borderBottomLeftRadius: `${theme.shape.borderRadius}px`,
})}
>
<MinusIcon />
</ButtonBase>
{trackType && !hideRollButton && useSmallRollButton && (
<IconButton onClick={handleRollClick} sx={{ mr: 0.5 }}>
<DieIcon />
</IconButton>
)}
<Box
display={"flex"}
bgcolor={(theme) => theme.palette.background.paper}
color={(theme) =>
theme.palette.mode === "light"
? theme.palette.grey[600]
: theme.palette.grey[300]
}
borderTop={1}
borderBottom={1}
borderLeft={onValueChange ? 0 : 1}
borderRight={onValueChange ? 0 : 1}
borderColor={(theme) => theme.palette.divider}
role={"meter"}
aria-labelledby={labelId}
aria-valuemin={0}
aria-valuemax={max}
aria-valuenow={value}
aria-valuetext={getValueText(value)}
>
{checks.map((value, index) => (
<Box
key={index}
<Box display={"flex"} >
{onValueChange && (
<ButtonBase
aria-label={"Decrement Track"}
onClick={() => {
if (onValueChange) {
const newValue = Math.max(
value - getDifficultyStep(difficulty),
0
);
onValueChange(newValue);
if (newValue === value) {
announce(`${label} is already at zero ticks`);
} else {
announce(`Updated ${label} to ${getValueText(newValue)}`);
}
}
}}
focusRipple
sx={(theme) => ({
borderWidth: 1,
borderStyle: "solid",
borderColor: "transparent",
borderLeftColor:
index !== 0 ? theme.palette.divider : undefined,
backgroundColor:
theme.palette.darkGrey[
theme.palette.mode === "light" ? "main" : "light"
],
color: theme.palette.darkGrey.contrastText,
px: 0.5,
"&:hover": {
backgroundColor: theme.palette.darkGrey.dark,
},
borderTopLeftRadius: `${theme.shape.borderRadius}px`,
borderBottomLeftRadius: `${theme.shape.borderRadius}px`,
})}
>
<ProgressTrackTick value={value} key={index} aria-hidden />
</Box>
))}
</Box>
{onValueChange && (
<ButtonBase
aria-label={"Increment Track"}
onClick={() => {
if (onValueChange) {
const newValue = Math.min(
value + getDifficultyStep(difficulty),
max
);
onValueChange(newValue);
if (newValue === value) {
announce(
`${label} is already at its maximum value of ${max} ticks`
<MinusIcon />
</ButtonBase>
)}
<Box
display={"flex"}
bgcolor={(theme) => theme.palette.background.paper}
color={(theme) =>
theme.palette.mode === "light"
? theme.palette.grey[600]
: theme.palette.grey[300]
}
borderTop={1}
borderBottom={1}
borderLeft={onValueChange ? 0 : 1}
borderRight={onValueChange ? 0 : 1}
borderColor={(theme) => theme.palette.divider}
role={"meter"}
aria-labelledby={labelId}
aria-valuemin={0}
aria-valuemax={max}
aria-valuenow={value}
aria-valuetext={getValueText(value)}
>
{checks.map((value, index) => (
<Box
key={index}
sx={(theme) => ({
borderWidth: 1,
borderStyle: "solid",
borderColor: "transparent",
borderLeftColor:
index !== 0 ? theme.palette.divider : undefined,
})}
>
<ProgressTrackTick value={value} key={index} aria-hidden />
</Box>
))}
</Box>
{onValueChange && (
<ButtonBase
aria-label={"Increment Track"}
onClick={() => {
if (onValueChange) {
const newValue = Math.min(
value + getDifficultyStep(difficulty),
max
);
} else {
announce(`Updated ${label} to ${getValueText(newValue)}`);
onValueChange(newValue);
if (newValue === value) {
announce(
`${label} is already at its maximum value of ${max} ticks`
);
} else {
announce(`Updated ${label} to ${getValueText(newValue)}`);
}
}
}
}}
focusRipple
sx={(theme) => ({
backgroundColor:
theme.palette.darkGrey[
theme.palette.mode === "light" ? "main" : "light"
],
color: theme.palette.darkGrey.contrastText,
px: 0.5,
"&:hover": {
backgroundColor: theme.palette.darkGrey.dark,
},
}}
focusRipple
sx={(theme) => ({
backgroundColor:
theme.palette.darkGrey[
theme.palette.mode === "light" ? "main" : "light"
],
color: theme.palette.darkGrey.contrastText,
px: 0.5,
"&:hover": {
backgroundColor: theme.palette.darkGrey.dark,
},

borderTopRightRadius: `${theme.shape.borderRadius}px`,
borderBottomRightRadius: `${theme.shape.borderRadius}px`,
})}
>
<PlusIcon />
</ButtonBase>
)}
borderTopRightRadius: `${theme.shape.borderRadius}px`,
borderBottomRightRadius: `${theme.shape.borderRadius}px`,
})}
>
<PlusIcon />
</ButtonBase>
)}
</Box>
</Box>

{trackType === TrackTypes.SceneChallenge && (
Expand Down Expand Up @@ -411,7 +420,7 @@ export function ProgressTrack(props: ProgressTracksProps) {
Complete Track
</Button>
)}
{trackType && !hideRollButton && (
{trackType && !hideRollButton && !useSmallRollButton && (
<Button
color={"inherit"}
onClick={handleRollClick}
Expand Down
3 changes: 2 additions & 1 deletion src/pages/Character/CharacterSheetPage/Tabs/TracksSection/LegacyTrack.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,12 @@ export function LegacyTrack(props: LegacyTrackProps) {
trackType={TrackTypes.Legacy}
useMaxRoll={isLegacy}
hideRollButton={onIsLegacyChecked === undefined}
useSmallRollButton={true}
/>
{!isIronsworn && (
<Box
px={2}
mt={4.5}
mt={5}
>
<FormControlLabel
control={
Expand Down

0 comments on commit b94ee81

Please sign in to comment.