Leahnaya/chaoticbackup.github.io
1
0
Fork 0
mirror of https://github.com/chaoticbackup/chaoticbackup.github.io.git synced 2026-03-22 01:34:20 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Location mobile

Browse Source
This commit is contained in:
Daniel 2021-11-19 18:02:46 -05:00
parent 4348e9f2a0
commit f0b06233e8
8 changed files with 86 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/_mobile/collection/Attack.tsx
View File

@ -4,7 +4,7 @@ import { Attack } from "../../common/definitions";
import { AttackIcon, ElementIcon, Name, RarityIcon } from '../../Snippets';
import { abilityText } from '../../Snippets/abilityText';
import { uniqueText } from '../../Snippets/uniqueText';
import { CardBase, CardComponent } from './CardBase';
import { CardBase, CardComponent, Flavor, Unique } from './CardBase';
const AttackCard: CardBase<Attack> = (props) => {
const { card } = props;
@ -17,8 +17,8 @@ const AttackCard: CardBase<Attack> = (props) => {
<CardComponent {...props}
right={<>
<Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
{unique && <Typography>{unique}</Typography>}
{flavor && <Typography>{flavor}</Typography>}
{unique && <Unique>{unique}</Unique>}
{flavor && <Flavor>{flavor}</Flavor>}
</>}
left={<>
<Name name={card.gsx$name} />
@ -35,8 +35,8 @@ const AttackCard: CardBase<Attack> = (props) => {
content={<>
<Name name={card.gsx$name} />
<Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
{unique && <Typography>{unique}</Typography>}
{flavor && <Typography>{flavor}</Typography>}
{unique && <Unique>{unique}</Unique>}
{flavor && <Flavor>{flavor}</Flavor>}
<Typography>Art By: {card.gsx$artist}</Typography>
</>}
/>

11
src/components/_mobile/collection/Battlegear.tsx
View File

@ -4,7 +4,7 @@ import { BattlegearIcon, Name, RarityIcon } from '../../Snippets';
import { Battlegear } from '../../common/definitions';
import { abilityText } from '../../Snippets/abilityText';
import { uniqueText } from '../../Snippets/uniqueText';
import { CardBase, CardComponent } from './CardBase';
import { CardBase, CardComponent, Unique, Flavor } from './CardBase';
const BattlegearCard: CardBase<Battlegear> = (props) => {
const { card } = props;
@ -21,19 +21,18 @@ const BattlegearCard: CardBase<Battlegear> = (props) => {
</>}
right={<>
<Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
{unique && <Typography>{unique}</Typography>}
{flavor && <Typography>{flavor}</Typography>}
{unique && <Unique>{unique}</Unique>}
{flavor && <Flavor>{flavor}</Flavor>}
</>}
content={<>
<Name name={card.gsx$name} />
<Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
{unique && <Typography>{unique}</Typography>}
{flavor && <Typography>{flavor}</Typography>}
{unique && <Unique>{unique}</Unique>}
{flavor && <Flavor>{flavor}</Flavor>}
<Typography>Art By: {card.gsx$artist}</Typography>
</>}
/>
);
};
export default BattlegearCard;

23
src/components/_mobile/collection/CardBase.tsx
View File

@ -1,4 +1,4 @@
import { Box, Card, CardMedia, CardContent } from '@mui/material';
import { Box, Card, CardMedia, CardContent, Typography, styled } from '@mui/material';
import React from 'react';
import { Card as ChaoticCard } from "../../common/definitions";
@ -28,6 +28,8 @@ type componentProps = chaoticCardProps<ChaoticCard> & {
export const CardComponent = (
{ card, ext, extend, left, right, content }: componentProps
) => {
const loc = card.gsx$type === "Locations";
return (ext === false)
? (
<Card sx={{ display: 'flex' }}>
@ -41,7 +43,7 @@ export const CardComponent = (
<Box sx={{ display: 'flex', flexDirection: 'column', marginLeft: 1, width: "30%" }}>
{left}
</Box>
<Box sx={{ display: 'flex' }}>
<Box sx={{ display: 'block' }}>
{right}
</Box>
</Card>
@ -50,16 +52,27 @@ export const CardComponent = (
<Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: "flex-start" }}>
<CardMedia
component="img"
sx={{ width: "250px" }}
height="350"
sx={{ width: (loc ? "350px" : "250px") }}
height={loc ? "250" : "350"}
image={API.cardImage(card)}
alt={`${card.gsx$name} card`}
onClick={() => extend("")}
/>
<CardContent sx={{ flex: '1 0', minWidth: "310px", width: "calc(100% - 250px)" }}>
<CardContent sx={{
flex: '1 0', minWidth: "310px",
width: `calc(100% - ${loc ? " 350px" : "250px"})`
}}>
{content}
</CardContent>
</Box>
</Card>
);
};
export const Unique = styled(Typography)(() => ({
fontWeight: "bold"
}));
export const Flavor = styled(Typography)(() => ({
fontStyle: "italic"
}));

40
src/components/_mobile/collection/Location.tsx Normal file
View File

@ -0,0 +1,40 @@
import { Typography } from '@mui/material';
import React from 'react';
import { Location } from '../../common/definitions';
import { InitiativeIcon, LocationIcon, Name, RarityIcon } from '../../Snippets';
import { abilityText } from '../../Snippets/abilityText';
import { uniqueText } from '../../Snippets/uniqueText';
import { CardBase, CardComponent, Unique, Flavor } from './CardBase';
const LocationCard: CardBase<Location> = (props) => {
const { card } = props;
const ability = abilityText({ ability: card.gsx$ability });
const unique = uniqueText({ data: { unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }});
const flavor = card.gsx$flavortext;
return (
<CardComponent {...props}
left={<>
<Name name={card.gsx$name} />
<RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} />
<Typography><LocationIcon /> Location{card.gsx$types.length > 0 ? ` - ${card.gsx$types}` : null}</Typography>
<Typography>{`Initiative: `}<InitiativeIcon initiative={card.gsx$initiative} />{` ${card.gsx$initiative}`}</Typography>
</>}
right={<>
<Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
{unique && <Unique>{unique}</Unique>}
{flavor && <Flavor>{flavor}</Flavor>}
</>}
content={<>
<Name name={card.gsx$name} />
<Typography>{`Initiative: `}<InitiativeIcon initiative={card.gsx$initiative} />{` ${card.gsx$initiative}`}</Typography>
<Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
{unique && <Unique>{unique}</Unique>}
{flavor && <Flavor>{flavor}</Flavor>}
<Typography>Art By: {card.gsx$artist}</Typography>
</>}
/>
);
};
export default LocationCard;

8
src/components/_mobile/collection/collection.scss
View File

@ -1,24 +1,24 @@
.icon14 {
width: 16px;
height: 16px;
vertical-align: middle;
}
.icon16 {
width: 16px;
height: 16px;
}
.icon20 {
width: 20px;
height: 20px;
}
.icon24 {
width: 24px;
height: 24px;
}
.bigger {
font-size: 1.15rem;
}
.name {
-webkit-user-select: all;
-moz-user-select: all;

11
src/components/_mobile/collection/index.tsx
View File

@ -2,9 +2,10 @@ import {
Box, Card, Checkbox, createTheme, FormControl, FormControlLabel, InputLabel, MenuItem, Pagination, Paper, Select, SelectChangeEvent, styled, ThemeProvider, Typography
} from '@mui/material';
import React, { useEffect, useState } from 'react';
import { Attack, Battlegear, Card as ChaoticCard } from '../../common/definitions';
import { Attack, Battlegear, Location, Card as ChaoticCard } from '../../common/definitions';
import AttackCard from './Attack';
import BattlegearCard from './Battlegear';
import LocationCard from './Location';
import { chaoticCardProps, statsType } from './CardBase';
import Search from './Search';
@ -224,8 +225,12 @@ const CardList = ({ cards, selected, ext, ...props }: listProps) => {
/>);
// case "Creatures":
// return (<Creature card={card} key={i} {...props}/>);
// case "Locations":
// return (<Location card={card} key={i} {...props}/>);
case "Locations":
return (<LocationCard key={card.gsx$name+card.gsx$set}
card={card as Location}
ext={(card.gsx$name === selected || ext)}
{...props}
/>);
// case "Mugic":
// return (<Mugic card={card} key={i} {...props}/>);
default:

6
src/components/collection/types/Location.js
View File

@ -1,7 +1,7 @@
import { inject, observer } from 'mobx-react';
import React from 'react';
import { Ability, FlavorText, InitiativeIcon, LocationIcon, Name, RarityIcon, Unique } from '../../Snippets';
import { Ability, FlavorText, Initiative, LocationIcon, Name, RarityIcon, Unique } from '../../Snippets';
import API from '../../SpreadsheetData';
@inject((stores, props, context) => props) @observer
@ -17,7 +17,7 @@ export default class Location extends React.Component {
<Name name={card.gsx$name} />
<RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} /><br />
<span><LocationIcon /> Location{card.gsx$types.length > 0 ? " - " + card.gsx$types : null}</span><br />
<InitiativeIcon initiative={card.gsx$initiative} />
<Initiative initiative={card.gsx$initiative} />
</div>
<div className="right">
<Ability ability={card.gsx$ability} />
@ -31,7 +31,7 @@ export default class Location extends React.Component {
<div className="fullcard"><img src={API.cardImage(card)} /></div>
<div className="right">
<Name name={card.gsx$name} />
<InitiativeIcon initiative={card.gsx$initiative} />
<Initiative initiative={card.gsx$initiative} />
<Ability ability={card.gsx$ability} />
<Unique data={{ unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }} />
<FlavorText flavortext={card.gsx$flavortext} />

6
src/components/portal/Single/Location.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import API from '../../SpreadsheetData';
import { observer, inject } from 'mobx-react';
import Single from './_base';
import { PageNotFound, InitiativeIcon } from '../../Snippets';
import { PageNotFound, Initiative } from '../../Snippets';
@inject((stores, props, context) => props) @observer
export default class SingleLocation extends React.Component {
@ -40,7 +40,7 @@ export default class SingleLocation extends React.Component {
{card_data.gsx$initiative && (
<div>
<strong>Initiative: </strong>
<InitiativeIcon initiative={card_data.gsx$initiative} notitle="true"/>
<Initiative initiative={card_data.gsx$initiative} notitle="true"/>
</div>
)}
</>}
@ -65,7 +65,7 @@ export default class SingleLocation extends React.Component {
{card_data.gsx$initiative && (
<div>
<strong>Initiative: </strong>
<InitiativeIcon initiative={card_data.gsx$initiative} notitle="true"/>
<Initiative initiative={card_data.gsx$initiative} notitle="true"/>
</div>
)}
</>}