diff --git a/src/components/Snippets/abilityText.js b/src/components/Snippets/abilityText.js index 11e854a..042f204 100644 --- a/src/components/Snippets/abilityText.js +++ b/src/components/Snippets/abilityText.js @@ -14,7 +14,7 @@ export function abilityText(props) { }; const elements = { - regex: new RegExp(/(\b((fire)|(air)|(earth)|(water)))/i), + regex: new RegExp(/(\b((fire)|(air)|(earth)|(water))\b)/i), fn: (key, result) => { return ({result[0]}); } diff --git a/src/components/_mobile/collection/CardBase.tsx b/src/components/_mobile/collection/CardBase.tsx index 6837a54..5b992ee 100644 --- a/src/components/_mobile/collection/CardBase.tsx +++ b/src/components/_mobile/collection/CardBase.tsx @@ -23,10 +23,12 @@ type componentProps = chaoticCardProps & { left: JSX.Element right: JSX.Element content: JSX.Element + right2?: JSX.Element + imageCover?: JSX.Element } export const CardComponent = ( - { card, ext, extend, left, right, content }: componentProps + { card, ext, extend, imageCover, left, right, content, right2 }: componentProps ) => { const loc = card.gsx$type === "Locations"; @@ -46,6 +48,9 @@ export const CardComponent = ( {right} + {right2 && + {right2} + } ) : ( @@ -58,6 +63,9 @@ export const CardComponent = ( alt={`${card.gsx$name} card`} onClick={() => extend(null)} /> + {imageCover && +
extend(null)}>{imageCover}
+ } { + let types = card.gsx$types; + + // Moves "Past" in front of tribe due to db entry order + let past = false; + if (types.toLowerCase().includes("past")) { + past = true; + types = types.replace(/past /i, ''); + } + const line = ` ${ past ? "Past " : "" }${types}`; + + return {line}; +}; + +const MugicCounter = ({ card }: { card: Creature }) => { + const mugic = [] as JSX.Element[]; + for (let i = 0; i < Number(card.gsx$mugicability); i++) { + mugic.push(); + } + + return <>{mugic}; +}; + +const Brainwashed = styled(Typography)(() => ({ + borderRadius: "3px", + backgroundColor: "#dcdddf", + color: "black" +})); + +const Stat = styled(Typography)(() => ({ + width: "40px", + lineHeight: "normal" +})); + +const CreatureCard: CardBase = (props) => { + const { card, stats, hideStats } = props; + const ability = abilityText({ ability: card.gsx$ability, tribe: card.gsx$tribe, size: "icon16" }); + const brainwashed = abilityText({ ability: card.gsx$brainwashed, tribe: card.gsx$tribe, size: "icon16" }); + const unique = uniqueText({ data: { unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }}); + const flavor = card.gsx$flavortext; + + const stat_range = (stat: string) => { + const name = card.gsx$name; + if (name && name == "Aa'une the Oligarch, Avatar") return Number(stat); + if (stats == "min") return Number(stat) - 10; + if (stats == "max") return Number(stat) + 10; + return Number(stat); + }; + + const energy_range = (energy: string) => { + const name = card.gsx$name; + if (name && name == "Aa'une the Oligarch, Avatar") return Number(energy); + if (stats == "min") return Number(energy) - 5; + if (stats == "max") return Number(energy) + 5; + return Number(energy); + }; + + const courage = stat_range(card.gsx$courage); + const power = stat_range(card.gsx$power); + const wisdom = stat_range(card.gsx$wisdom); + const speed = stat_range(card.gsx$speed); + const energy = energy_range(card.gsx$energy); + + return ( + + + + + + =0} />  + =0} />  + =0} />  + =0} /> + + + } + right={<> + {ability} + {brainwashed && {brainwashed}} + {unique && {unique}} + {card.gsx$types.includes("Chieftain") && + (Minions use Brainwashed text. Minions may only play Generic Mugic.) + } + {flavor && {flavor}} + } + right2={<> + {courage} + {power} + {wisdom} + {speed} + {energy} + } + {...((!hideStats) ? { imageCover: ( +
+ = 100 ? { className: "long" } : null)}>{courage} + = 100 ? { className: "long" } : null)}>{power} + = 100 ? { className: "long" } : null)}>{wisdom} + = 100 ? { className: "long" } : null)}>{speed} + = 100 ? { className: "long" } : null)}>{energy} +
+ ) } + : undefined)} + content={<> + + {stat_range(card.gsx$courage)}   + {stat_range(card.gsx$power)}   + {stat_range(card.gsx$wisdom)}   + {stat_range(card.gsx$speed)}   + {energy_range(card.gsx$energy)} + {ability} + {brainwashed && {brainwashed}} + {unique && {unique}} + {card.gsx$types.includes("Chieftain") && + (Minions use Brainwashed text. Minions may only play Generic Mugic.) + } + {flavor && {flavor}} + Art By: {card.gsx$artist} + } + /> + ); +}; + +export default CreatureCard; diff --git a/src/components/_mobile/collection/Mugic.tsx b/src/components/_mobile/collection/Mugic.tsx index e5bd588..62dd46e 100644 --- a/src/components/_mobile/collection/Mugic.tsx +++ b/src/components/_mobile/collection/Mugic.tsx @@ -7,7 +7,7 @@ import { uniqueText } from "../../Snippets/uniqueText"; import { CardBase, CardComponent, Unique, Flavor } from "./CardBase"; -const MugicCounter = ({ card }: {card:Mugic}) => { +const MugicCounter = ({ card }: { card: Mugic }) => { const mugicCounters = [] as JSX.Element[]; if (Number(card.gsx$cost) === 0) { mugicCounters.push(); @@ -31,7 +31,7 @@ const MugicCounter = ({ card }: {card:Mugic}) => { const MugicCard: CardBase = (props) => { const { card } = props; - const ability = abilityText({ ability: card.gsx$ability, size: "icon16" }); + const ability = abilityText({ ability: card.gsx$ability, tribe: card.gsx$tribe, size: "icon16" }); const unique = uniqueText({ data: { unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }}); const flavor = card.gsx$flavortext; diff --git a/src/components/_mobile/collection/Search.tsx b/src/components/_mobile/collection/Search.tsx index f8600c4..eade847 100644 --- a/src/components/_mobile/collection/Search.tsx +++ b/src/components/_mobile/collection/Search.tsx @@ -139,7 +139,7 @@ export default function Search ({ setContent, setInfo }) { .catch(() => {}); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - + useEffect(() => { if (location != prevLocation.current) { prevLocation.current = location; @@ -179,11 +179,7 @@ export default function Search ({ setContent, setInfo }) { }); }; - if (loaded == false) { - return (<>); - } - - const form = (<> + const form = ((loaded == false) ? <> : <> ); @@ -207,7 +203,6 @@ export default function Search ({ setContent, setInfo }) { > {form} - {!open && form} div { + height: 100%; + width: 100%; + text-align: left; + + span { + position: relative; + color: black; + display: block; + left: 28px; + font-size: 12px; + font-weight: bold; + + &.long { + left: 22px; + } + } + + span:nth-of-type(1) { + top: 222px; + } + span:nth-of-type(2) { + top: 232px; + } + span:nth-of-type(3) { + top: 242px; + } + span:nth-of-type(4) { + top: 252px; + } + span:nth-of-type(5) { + text-align: right; + top: 260px; + left: -17px; + font-size: 21px; + + &.long { + left: -12px; + } + } + } + } diff --git a/src/components/_mobile/collection/index.tsx b/src/components/_mobile/collection/index.tsx index 3ac88c8..4730f4f 100644 --- a/src/components/_mobile/collection/index.tsx +++ b/src/components/_mobile/collection/index.tsx @@ -1,13 +1,15 @@ -import { - Box, Card, Checkbox, createTheme, FormControl, FormControlLabel, InputLabel, MenuItem, Pagination, Paper, Select, SelectChangeEvent, styled, ThemeProvider, Typography +import { + AppBar, Box, Card, Checkbox, createTheme, FormControl, FormControlLabel, InputLabel, MenuItem, + Pagination, Paper, Select, SelectChangeEvent, styled, ThemeProvider, Toolbar, Typography } from '@mui/material'; import React, { useEffect, useState } from 'react'; -import { Attack, Battlegear, Location, Card as ChaoticCard, Mugic } from '../../common/definitions'; +import { Attack, Battlegear, Card as ChaoticCard, Location, Mugic, Creature } from '../../common/definitions'; import AttackCard from './Attack'; import BattlegearCard from './Battlegear'; +import { chaoticCardProps, statsType } from './CardBase'; +import CreatureCard from './Creature'; import LocationCard from './Location'; import MugicCard from './Mugic'; -import { chaoticCardProps, statsType } from './CardBase'; import Search from './Search'; import './collection.scss'; @@ -122,74 +124,76 @@ export default function Collection (_props) { return ( - - {content.length} results - - Per Page - - 5 - 10 - 25 - 50 - - - - - Stats - - Min - Average - Max - - - } - sx={{ - marginLeft: 0, - marginRight: 0, - '& > .MuiCheckbox-root': { - padding: 0 - } - }} - /> - } - sx={{ - marginLeft: 0, - marginRight: 0, - '& > .MuiCheckbox-root': { - padding: 0 - } - }} - /> - + + + {content.length} results + + Per Page + + 5 + 10 + 25 + 50 + + + + + Stats + + Min + Average + Max + + + } + sx={{ + margin: "auto 0", + '& > .MuiCheckbox-root': { + padding: 0 + } + }} + /> + } + sx={{ + margin: "auto 0", + '& > .MuiCheckbox-root': { + padding: 0 + } + }} + /> + + + {info.text ? ( {info.text} ) : ( @@ -227,8 +231,12 @@ const CardList = ({ cards, selected, ext, ...props }: listProps) => { ext={(isSelected(card) || ext)} {...props} />); - // case "Creatures": - // return (); + case "Creatures": + return (); case "Locations": return ( { + console.log("render"); + }, []); + return ( - - - - - {({ location }) => } - - {isMobile && } - {/* Normal Routes */} - - - - - - - - - - - + + + + {({ location }) => } + + {isMobile && } + {/* Normal Routes */} + + + + + + + + + + ); } diff --git a/src/index.js b/src/index.js index 99d31b0..31ee1a7 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,13 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import { BrowserRouter } from 'react-router-dom'; import App from './components/app'; +const rootElement = document.getElementById('root'); + ReactDOM.render( - + - , - document.getElementById('root') + , + rootElement );