Anibus/Soulstorm-wiki-frontend
Anibus/Soulstorm-wiki-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Улучшение дизайна после телепорт фичи

Browse Source
This commit is contained in:
anibus 2026-08-02 14:24:49 +03:00
parent 03f152fbad
commit 5cbaab4b1f
10 changed files with 30 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
public/images/Passiveicon.png → public/images/PassiveIcon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

6
src/App.tsx
View File

@ -69,7 +69,7 @@ function AppBarContent() {
<>
{isDark ? (
<StyledAppBar position="sticky">
<Container maxWidth="lg">
<Container maxWidth="lg" sx={{ px: { xs: 1, sm: 3, md: 3 } }}>
<Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
<img src="/images/dowdelogo.png" alt="logo" style={{ height: 32, cursor: 'pointer' }} onClick={handleLogoClick}/>
@ -85,7 +85,7 @@ function AppBarContent() {
</StyledAppBar>
) : (
<StyledAppBarLight position="sticky">
<Container maxWidth="lg">
<Container maxWidth="lg" sx={{ px: { xs: 1, sm: 3, md: 3 } }}>
<Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
<img src="/images/dowdelogo.png" alt="logo" style={{ height: 32, cursor: 'pointer' }} onClick={handleLogoClick}/>
@ -110,7 +110,7 @@ function App() {
<Box sx={{ minHeight: '100vh' }}>
<BrowserRouter>
<AppBarContent />
<Container maxWidth="lg" sx={{ py: 4 }}>
<Container maxWidth="lg" sx={{ py: 4, px: { xs: 1, sm: 3, md: 3 } }}>
<MyRoutes />
</Container>
</BrowserRouter>

2
src/classes/Ability.tsx
View File

@ -31,7 +31,7 @@ function Ability(props: IAbilityProps){
<span style={{fontSize: 20, color: textColor, display: 'flex', alignItems: 'center'}}>
{ability.activationType === "Passive ability" ? <img className="abilityIcon" src="/images/PassiveIcon.png"/> : <img className="abilityIcon" src={getIcon(ability.icon)}/>}
&nbsp; {ability.name ? ability.name : ability.fileName.charAt(0).toUpperCase() + ability.fileName.slice(1).replaceAll('_', ' ').replace('.rgd', '')}
<i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)'}}> ({ability.activationType})</i>
<i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)', marginLeft: 4}}>({ability.activationType})</i>
</span>
</AccordionSummary>

9
src/classes/AbilityFull.tsx
View File

@ -34,7 +34,10 @@ interface IAbilityFullState {
export default function AbilityFull(props: { abilityId?: number, mod: IMod, race: Irace, isChild?: boolean, abilityFull?: IAbilityFill }) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
const isSmallMobile = useMediaQuery(theme.breakpoints.down('sm'));
const isMediumMobile = useMediaQuery(theme.breakpoints.between('sm', 'md'));
const isMobile = isSmallMobile || isMediumMobile;
const columnsPerRow = isSmallMobile ? 4 : 6;
const isDark = theme.palette.mode === 'dark';
const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
@ -233,8 +236,8 @@ export default function AbilityFull(props: { abilityId?: number, mod: IMod, race
];
const chunks = [];
for (let i = 0; i < items.length; i += 5) {
chunks.push(items.slice(i, i + 5));
for (let i = 0; i < items.length; i += columnsPerRow) {
chunks.push(items.slice(i, i + columnsPerRow));
}
return (<>{chunks.map((chunk, chunkIndex) => (

9
src/classes/DpsTable.tsx
View File

@ -17,7 +17,10 @@ import {StyledTableCell} from "../commons/StyledTableCell";
export default function DpsTable(props: { mod: IMod, minDamageValue?: number, minDamage?: number, maxDamage?: number, piercings: IPiercing[], targetFilter: IArmorType[], moraleDamage?: number }) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
const isSmallMobile = useMediaQuery(theme.breakpoints.down('sm'));
const isMediumMobile = useMediaQuery(theme.breakpoints.between('sm', 'md'));
const isMobile = isSmallMobile || isMediumMobile;
const columnsPerRow = isSmallMobile ? 4 : 6;
function getPiercingK(armorType: string): number|null {
if(props.targetFilter.length > 0 && props.targetFilter.find(tf => tf.name == armorType) === undefined) return null
@ -118,8 +121,8 @@ export default function DpsTable(props: { mod: IMod, minDamageValue?: number, mi
];
const chunks = [];
for (let i = 0; i < items.length; i += 5) {
chunks.push(items.slice(i, i + 5));
for (let i = 0; i < items.length; i += columnsPerRow) {
chunks.push(items.slice(i, i + columnsPerRow));
}
return (<>{chunks.map((chunk, chunkIndex) => (

9
src/classes/Jump.tsx
View File

@ -21,9 +21,9 @@ function Jump(props: IJumpProps) {
const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
const jumps = props.jumps;
const isTeleport = jumps.teleport;
const isTeleport = jumps.isTeleport;
const icon = isTeleport ? "/images/Teleport.png" : "/images/Jump.png";
const title = isTeleport ? "Teleport" : "Jumps";
const title = isTeleport ? "Teleport" : "Jump";
return (
<div style={{marginBottom: 10}}>
@ -64,9 +64,10 @@ function Jump(props: IJumpProps) {
rows.push({ label: "Go down time", value: <span><img style={{verticalAlign: "top"}} src="/images/Time_icon.webp"/>&nbsp;{jumps.goDownTime}s</span> });
}
}
const chunkSize = isTeleport ? 2 : 3;
const chunks: { label: string; value: React.ReactNode }[][] = [];
for (let i = 0; i < rows.length; i += 3) {
chunks.push(rows.slice(i, i + 3));
for (let i = 0; i < rows.length; i += chunkSize) {
chunks.push(rows.slice(i, i + chunkSize));
}
return chunks.map((chunk, chunkIndex) => (
<Grid2 key={chunkIndex} size={{xs: 12, md: 4}}>

2
src/classes/Weapon.tsx
View File

@ -52,7 +52,7 @@ class Weapon extends React.Component<IWeaponProps, any> {
<img className="weaponIcon" src="/images/MeleeStance_icon_bw.jpg"/> :
<img className="weaponIcon" src="/images/RangedStance_icon_bw.jpg"/>
)} &nbsp; {weapon.name ? weapon.name : this.humanReadableName(weapon.filename)}
{this.props.isDefault && <i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)'}}> (default)</i>}
{this.props.isDefault && <i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)', marginLeft: 4}}>(default)</i>}
</span>
</AccordionSummary>
<AccordionDetails sx={{color: textColor}}>

9
src/classes/WeaponFull.tsx
View File

@ -29,7 +29,10 @@ interface IWeaponFull {
export default function WeaponFull(props: {weaponId: number, isDefault: Boolean, mod: IMod, race: Irace, haveReinforceMenu: Boolean}) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
const isSmallMobile = useMediaQuery(theme.breakpoints.down('sm'));
const isMediumMobile = useMediaQuery(theme.breakpoints.between('sm', 'md'));
const isMobile = isSmallMobile || isMediumMobile;
const columnsPerRow = isSmallMobile ? 4 : 6;
const isDark = theme.palette.mode === 'dark';
const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';
@ -274,8 +277,8 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
];
const chunks = [];
for (let i = 0; i < items.length; i += 5) {
chunks.push(items.slice(i, i + 5));
for (let i = 0; i < items.length; i += columnsPerRow) {
chunks.push(items.slice(i, i + columnsPerRow));
}
return chunks.map((chunk, chunkIndex) => (

1
src/pages/UnitPage.tsx
View File

@ -355,7 +355,6 @@ function Unit(unit: IUnit, mod: IMod, theme: Theme) {
</Grid2>}
{unit.jumps != null && <Grid2 size={12}>
<SectionTitle>Jumps</SectionTitle>
<Jump jumps={unit.jumps} race={unit.race} mod={mod}/>
</Grid2>}

2
src/types/IUnit.tsx
View File

@ -24,7 +24,7 @@ export interface IJumps {
chargeMax: number;
setupTime: number;
goDownTime?: number;
teleport: boolean;
isTeleport: boolean;
requirements: IRequirement | null;
}