coco/ixion
coco
/
ixion
mirror of https://github.com/cocosolos/ixion.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve shadows

This commit is contained in:
Corey 2024-05-07 08:59:29 +00:00
parent 5f215050b7
commit 1553b2606b
5 changed files with 301 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/ErrorCard.tsx
View File

@ -1,10 +1,12 @@
import { Card, CardContent, Typography } from '@mui/material'; import { Card, CardContent, Typography } from '@mui/material';
import { useThemeModeContext } from '../context/ThemeContext';
type ErrorCardProps = { error: string }; type ErrorCardProps = { error: string };
export default function ErrorCard({ error }: ErrorCardProps) { export default function ErrorCard({ error }: ErrorCardProps) {
const { themeMode } = useThemeModeContext();
return ( return (
<Card className="mb-2"> <Card className="mb-2" raised={themeMode === 'light'}>
<CardContent className="p-4"> <CardContent className="p-4">
<Typography align="center" variant="h6"> <Typography align="center" variant="h6">
¯\_(ツ)_/¯ ¯\_(ツ)_/¯

568
client/src/components/SearchServers.tsx
View File

@ -1,5 +1,6 @@
import { import {
Container, Container,
Divider,
Grid, Grid,
Input, Input,
Slider, Slider,
@ -150,299 +151,302 @@ export default function SearchServers({
}; };
return ( return (
<Container <>
ref={containerRef} <Container
className="overflow-hidden" ref={containerRef}
sx={{ className="overflow-hidden"
transition: 'all 0.3s ease', sx={{
maxHeight: showSearchServer ? contentHeight : 0, transition: 'all 0.3s ease',
backgroundColor: (theme) => maxHeight: showSearchServer ? contentHeight : 0,
theme.palette.mode === 'dark' backgroundColor: (theme) =>
? 'rgba(255, 255, 255, .06)' theme.palette.mode === 'dark'
: 'rgba(0, 0, 0, .06)', ? 'rgba(255, 255, 255, .06)'
}} : 'rgba(0, 0, 0, .06)',
> }}
<Grid container spacing={2} className="py-2"> >
{/* Name */} <Grid container spacing={2} className="py-2">
<Grid item xs={12}> {/* Name */}
<TextField <Grid item xs={12}>
value={searchState.name} <TextField
onChange={handleSearchName} value={searchState.name}
variant="standard" onChange={handleSearchName}
autoComplete="false" variant="standard"
fullWidth autoComplete="false"
label="Name" fullWidth
size="small" label="Name"
className="pb-2" size="small"
/> className="pb-2"
</Grid> />
{/* Max Level */} </Grid>
<Grid {/* Max Level */}
item <Grid
xs={12} item
className="pt-0" xs={12}
display="flex" className="pt-0"
flexDirection="column" display="flex"
alignItems="center" flexDirection="column"
> alignItems="center"
<Typography id="max-level" variant="caption">
Max Level
</Typography>
</Grid>
<Grid item xs={12} className="flex pt-0">
<Input
value={searchState.maxLevel[0]}
size="small"
onChange={handleSearchMaxLevelMin}
// onBlur={handleBlur}
inputProps={{
name: 'max-level-min',
step: 1,
min: 1,
max: 99,
type: 'number',
'aria-labelledby': 'max-level',
}}
/>
<Slider
aria-labelledby="max-level"
value={searchState.maxLevel}
onChange={handleSearchMaxLevel}
valueLabelDisplay="auto"
disableSwap
className="mx-4"
size="small"
min={1}
max={99}
/>
<Input
value={searchState.maxLevel[1]}
size="small"
onChange={handleSearchMaxLevelMax}
// onBlur={handleBlur}
inputProps={{
name: 'max-level-max',
step: 1,
min: 1,
max: 99,
type: 'number',
'aria-labelledby': 'max-level',
}}
/>
</Grid>
{/* Expansion */}
<Grid
item
xs={12}
display="flex"
flexDirection="column"
alignItems="center"
>
<Tooltip
title="Enabled expansions, exact match."
arrow
disableInteractive
placement="top"
> >
<Typography id="expansions-button-group" variant="caption"> <Typography id="max-level" variant="caption">
Expansions Max Level
</Typography> </Typography>
</Tooltip> </Grid>
<ToggleButtonGroup <Grid item xs={12} className="flex pt-0">
value={searchState.expansions} <Input
onChange={handleSearchExpansions} value={searchState.maxLevel[0]}
size="small" size="small"
aria-labelledby="expansions-button-group" onChange={handleSearchMaxLevelMin}
sx={{ // onBlur={handleBlur}
display: 'flex', inputProps={{
width: '100%', name: 'max-level-min',
}} step: 1,
min: 1,
max: 99,
type: 'number',
'aria-labelledby': 'max-level',
}}
/>
<Slider
aria-labelledby="max-level"
value={searchState.maxLevel}
onChange={handleSearchMaxLevel}
valueLabelDisplay="auto"
disableSwap
className="mx-4"
size="small"
min={1}
max={99}
/>
<Input
value={searchState.maxLevel[1]}
size="small"
onChange={handleSearchMaxLevelMax}
// onBlur={handleBlur}
inputProps={{
name: 'max-level-max',
step: 1,
min: 1,
max: 99,
type: 'number',
'aria-labelledby': 'max-level',
}}
/>
</Grid>
{/* Expansion */}
<Grid
item
xs={12}
display="flex"
flexDirection="column"
alignItems="center"
> >
<ToggleButton <Tooltip
key="none" title="Enabled expansions, exact match."
value="none" arrow
aria-label="none-enabled" disableInteractive
className="py-0" placement="top"
sx={{ width: '20%' }}
> >
None <Typography id="expansions-button-group" variant="caption">
</ToggleButton> Expansions
<ToggleButton </Typography>
key="rotz" </Tooltip>
value="rotz" <ToggleButtonGroup
aria-label="rotz-enabled" value={searchState.expansions}
className="py-0" onChange={handleSearchExpansions}
sx={{ width: '20%' }} size="small"
aria-labelledby="expansions-button-group"
sx={{
display: 'flex',
width: '100%',
}}
> >
RotZ <ToggleButton
</ToggleButton> key="none"
<ToggleButton value="none"
key="cop" aria-label="none-enabled"
value="cop" className="py-0"
aria-label="cop-enabled" sx={{ width: '20%' }}
className="py-0" >
sx={{ width: '20%' }} None
> </ToggleButton>
CoP <ToggleButton
</ToggleButton> key="rotz"
<ToggleButton value="rotz"
key="toau" aria-label="rotz-enabled"
value="toau" className="py-0"
aria-label="toau-enabled" sx={{ width: '20%' }}
className="py-0" >
sx={{ width: '20%' }} RotZ
> </ToggleButton>
ToAU <ToggleButton
</ToggleButton> key="cop"
<ToggleButton value="cop"
key="wotg" aria-label="cop-enabled"
value="wotg" className="py-0"
aria-label="wotg-enabled" sx={{ width: '20%' }}
className="py-0" >
sx={{ width: '20%' }} CoP
> </ToggleButton>
WotG <ToggleButton
</ToggleButton> key="toau"
<ToggleButton value="toau"
key="soa" aria-label="toau-enabled"
value="soa" className="py-0"
aria-label="soa-enabled" sx={{ width: '20%' }}
className="py-0" >
sx={{ width: '20%' }} ToAU
> </ToggleButton>
SoA <ToggleButton
</ToggleButton> key="wotg"
</ToggleButtonGroup> value="wotg"
</Grid> aria-label="wotg-enabled"
{/* Multiboxing */} className="py-0"
<Grid sx={{ width: '20%' }}
item >
xs={12} WotG
display="flex" </ToggleButton>
flexDirection="column" <ToggleButton
alignItems="center" key="soa"
> value="soa"
<Typography id="multibox-button-group" variant="caption"> aria-label="soa-enabled"
Multiboxing className="py-0"
</Typography> sx={{ width: '20%' }}
<ToggleButtonGroup >
value={searchState.multibox} SoA
onChange={handleSearchMultibox} </ToggleButton>
size="small" </ToggleButtonGroup>
aria-labelledby="multibox-button-group" </Grid>
sx={{ {/* Multiboxing */}
display: 'flex', <Grid
width: '100%', item
}} xs={12}
exclusive display="flex"
flexDirection="column"
alignItems="center"
> >
<ToggleButton <Typography id="multibox-button-group" variant="caption">
value="none" Multiboxing
aria-label="no multiboxing" </Typography>
className="py-0" <ToggleButtonGroup
sx={{ width: '33.33%' }} value={searchState.multibox}
onChange={handleSearchMultibox}
size="small"
aria-labelledby="multibox-button-group"
sx={{
display: 'flex',
width: '100%',
}}
exclusive
> >
None <ToggleButton
</ToggleButton> value="none"
<ToggleButton aria-label="no multiboxing"
value="limited" className="py-0"
aria-label="limited multiboxing" sx={{ width: '33.33%' }}
className="py-0" >
sx={{ width: '33.33%' }} None
> </ToggleButton>
Limited <ToggleButton
</ToggleButton> value="limited"
<ToggleButton aria-label="limited multiboxing"
value="unlimited" className="py-0"
aria-label="unlimited multiboxing" sx={{ width: '33.33%' }}
className="py-0" >
sx={{ width: '33.33%' }} Limited
> </ToggleButton>
Unlimited <ToggleButton
</ToggleButton> value="unlimited"
</ToggleButtonGroup> aria-label="unlimited multiboxing"
</Grid> className="py-0"
{/* Trusts */} sx={{ width: '33.33%' }}
<Grid >
item Unlimited
xs={6} </ToggleButton>
display="flex" </ToggleButtonGroup>
flexDirection="column" </Grid>
alignItems="center" {/* Trusts */}
> <Grid
<Typography id="trust-button-group" variant="caption"> item
Trusts xs={6}
</Typography> display="flex"
<ToggleButtonGroup flexDirection="column"
value={searchState.trusts} alignItems="center"
onChange={handleSearchTrusts}
size="small"
aria-labelledby="trust-button-group"
exclusive
sx={{
display: 'flex',
width: '100%',
}}
> >
<ToggleButton <Typography id="trust-button-group" variant="caption">
value="disabled" Trusts
aria-label="trust disabled" </Typography>
className="py-0" <ToggleButtonGroup
sx={{ width: '50%' }} value={searchState.trusts}
onChange={handleSearchTrusts}
size="small"
aria-labelledby="trust-button-group"
exclusive
sx={{
display: 'flex',
width: '100%',
}}
> >
Disabled <ToggleButton
</ToggleButton> value="disabled"
<ToggleButton aria-label="trust disabled"
value="enabled" className="py-0"
aria-label="trust enabled" sx={{ width: '50%' }}
className="py-0" >
sx={{ width: '50%' }} Disabled
> </ToggleButton>
Enabled <ToggleButton
</ToggleButton> value="enabled"
</ToggleButtonGroup> aria-label="trust enabled"
</Grid> className="py-0"
{/* Level Sync */} sx={{ width: '50%' }}
<Grid >
item Enabled
xs={6} </ToggleButton>
display="flex" </ToggleButtonGroup>
flexDirection="column" </Grid>
alignItems="center" {/* Level Sync */}
> <Grid
<Typography id="level-sync-button-group" variant="caption"> item
Level Sync xs={6}
</Typography> display="flex"
<ToggleButtonGroup flexDirection="column"
value={searchState.levelSync} alignItems="center"
onChange={handleSearchLevelSync}
size="small"
aria-labelledby="level-sync-button-group"
exclusive
sx={{
display: 'flex',
width: '100%',
}}
> >
<ToggleButton <Typography id="level-sync-button-group" variant="caption">
value="disabled" Level Sync
aria-label="level-sync-disabled" </Typography>
className="py-0" <ToggleButtonGroup
sx={{ width: '50%' }} value={searchState.levelSync}
onChange={handleSearchLevelSync}
size="small"
aria-labelledby="level-sync-button-group"
exclusive
sx={{
display: 'flex',
width: '100%',
}}
> >
Disabled <ToggleButton
</ToggleButton> value="disabled"
<ToggleButton aria-label="level-sync-disabled"
value="enabled" className="py-0"
aria-label="level-sync-enabled" sx={{ width: '50%' }}
className="py-0" >
sx={{ width: '50%' }} Disabled
> </ToggleButton>
Enabled <ToggleButton
</ToggleButton> value="enabled"
</ToggleButtonGroup> aria-label="level-sync-enabled"
className="py-0"
sx={{ width: '50%' }}
>
Enabled
</ToggleButton>
</ToggleButtonGroup>
</Grid>
</Grid> </Grid>
</Grid> </Container>
</Container> {contentHeight > 0 && <Divider />}
</>
); );
} }

2
client/src/components/Server/SettingsChipCloud.tsx
View File

@ -64,7 +64,7 @@ export default function SettingsChipCloud({ server }: SettingsChipCloudProps) {
'&> .MuiChip-label': { '&> .MuiChip-label': {
paddingRight: 0.5, paddingRight: 0.5,
}, },
boxShadow: '0px 3px 3px rgba(0, 0, 0, .25)', boxShadow: 1,
}} }}
/> />
</Tooltip> </Tooltip>

4
client/src/components/ServerCard.tsx
View File

@ -26,6 +26,7 @@ import {
useState, useState,
} from 'react'; } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useThemeModeContext } from '../context/ThemeContext';
import { ServerData } from '../data/ServerData'; import { ServerData } from '../data/ServerData';
import CopyImageIcon from '../images/copy-image.png'; import CopyImageIcon from '../images/copy-image.png';
import ExpansionBar from './Server/ExpansionsBar'; import ExpansionBar from './Server/ExpansionsBar';
@ -46,6 +47,7 @@ type ServerCardProps = {
}; };
export default function ServerCard({ server, children }: ServerCardProps) { export default function ServerCard({ server, children }: ServerCardProps) {
const { themeMode } = useThemeModeContext();
const [clipboardTooltip, setClipboardTooltip] = useState('Copy server URL.'); const [clipboardTooltip, setClipboardTooltip] = useState('Copy server URL.');
const [clipboardTooltipOpen, setClipboardTooltipOpen] = useState(false); const [clipboardTooltipOpen, setClipboardTooltipOpen] = useState(false);
const handleClipboardTooltipClose = () => { const handleClipboardTooltipClose = () => {
@ -110,7 +112,7 @@ export default function ServerCard({ server, children }: ServerCardProps) {
}; };
return ( return (
<Card className="mb-2"> <Card className="mb-2" raised={themeMode === 'light'}>
<Accordion <Accordion
className="my-0" className="my-0"
defaultExpanded={isSettingsDataGridChild} defaultExpanded={isSettingsDataGridChild}

14
client/src/pages/About.tsx
View File

@ -6,16 +6,18 @@ import {
Box, Box,
Card, Card,
CardContent, CardContent,
Paper,
Typography, Typography,
alpha, alpha,
} from '@mui/material'; } from '@mui/material';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useThemeModeContext } from '../context/ThemeContext';
export default function About() { export default function About() {
const { themeMode } = useThemeModeContext();
return ( return (
<> <>
<Card className="mb-3"> <Card className="mb-2" raised={themeMode === 'light'}>
<CardContent> <CardContent>
<Box className="mb-3"> <Box className="mb-3">
<Typography align="center" variant="h6"> <Typography align="center" variant="h6">
@ -148,7 +150,7 @@ export default function About() {
</Box> </Box>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card className="mb-2" raised={themeMode === 'light'}>
<Accordion className="my-0"> <Accordion className="my-0">
<AccordionSummary expandIcon={<ExpandMore />}> <AccordionSummary expandIcon={<ExpandMore />}>
<Typography variant="h5">For server owners:</Typography> <Typography variant="h5">For server owners:</Typography>
@ -203,8 +205,8 @@ export default function About() {
> >
Create a new file <b>settings/api.lua</b> in your server Create a new file <b>settings/api.lua</b> in your server
directory. directory.
<Paper elevation={2}> <Card className="bg-neutral-500/50">
<pre className="m-0 p-2"> <pre className="m-0 select-text p-2">
<code> <code>
{`xi = xi or {} {`xi = xi or {}
xi.settings = xi.settings or {} xi.settings = xi.settings or {}
@ -216,7 +218,7 @@ xi.settings.api =
}`} }`}
</code> </code>
</pre> </pre>
</Paper> </Card>
The world server needs to be restarted after any changes to any The world server needs to be restarted after any changes to any
of the settings. If you set <b>DO_NOT_TRACK</b> to <b>true</b>, of the settings. If you set <b>DO_NOT_TRACK</b> to <b>true</b>,
your server will be removed on the next hourly update. your server will be removed on the next hourly update.