diff --git a/.eslintrc b/.eslintrc index 4e459d3..1f8ebe1 100644 --- a/.eslintrc +++ b/.eslintrc @@ -75,6 +75,7 @@ "react/jsx-indent-props": ["warn", 2], "react/no-unescaped-entities": "off", "react/prop-types": "off", + "react-hooks/exhaustive-deps": "warn", "semi": ["warn", "always", { "omitLastInOneLineBlock": true }] }, "overrides": [ @@ -90,7 +91,7 @@ "ecmaFeatures": { "jsx": true }, "ecmaVersion": 2019, "sourceType": "module", - "project": "./tsconfig.json" + "project": ["./tsconfig.json"] }, "plugins": [ "@typescript-eslint" diff --git a/src/components/BaseStylesWrapper.js b/src/components/BaseStylesWrapper.js new file mode 100644 index 0000000..3cac211 --- /dev/null +++ b/src/components/BaseStylesWrapper.js @@ -0,0 +1,128 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import API from './SpreadsheetData'; +import { Donate } from './Snippets'; + +export default function Base({ children }) { + // Configuration for the language and background + // Images managed in css file + const language = "ENG"; + const bkgrnd = "05"; + + return ( + <> +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {children} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+ +
+
+
+ ©2008 Chaotic USA Entertainment Group, Inc. +
+ U.S. Pat 5810666 and 5954332 and other pending patent applications. All Rights Reserved. +
+
+ +
+
+
+
+
+
+
+
+
+ + ); +} + \ No newline at end of file diff --git a/src/components/Snippets/Ability.js b/src/components/Snippets/Ability.js deleted file mode 100644 index dd4577a..0000000 --- a/src/components/Snippets/Ability.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import processString from 'react-process-string'; -import { Mugic, Element, Discipline, Tribe } from "./_text"; - -export function Ability(props) { - const mugic_counters = { - regex: /([0-9x]*){{mc}}/i, - fn: (key, result) => { - if (result.length > 1 && result[1] != "") { - return (); - } - return (); - } - }; - - const elements = { - regex: new RegExp(/(\b((fire)|(air)|(earth)|(water)))/i), - fn: (key, result) => { - return ({result[0]}); - } - }; - - const disciplines = { - regex: /(courage)|(power)|(wisdom)|(speed)/i, - fn: (key, result) => { - return ({result[0]}); - } - }; - - const tribes = { - regex: /(danian)|(generic)|(mipedian)|(overworld)|(underworld)|(m'arrillian)/i, - fn: (key, result) => { - return ({result[0]}); - } - }; - - const filters = [mugic_counters, elements, disciplines, tribes]; - - return
{processString(filters)(props.ability)}
; -} diff --git a/src/components/Snippets/Initiative.js b/src/components/Snippets/Initiative.js deleted file mode 100644 index 9df3f0a..0000000 --- a/src/components/Snippets/Initiative.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; - -export function Initiative(props) { - const { initiative } = props; - let image = null; - if (["Danian", "Generic", "Mipedian", "OverWorld", "UnderWorld", "M'arrillian"].indexOf(initiative) > -1) { - image = ; - } - else if (["courage", "power", "speed", "wisdom"].indexOf(initiative.toLowerCase()) > -1) { - image = ; - } - else if (["fire", "air", "earth", "water"].indexOf(initiative.toLowerCase()) > -1) { - image = ; - } - else if (initiative.toLowerCase() == "mugic counter") { - image = ; - } - return ({!props.notitle && ("Initiative: ")}{image} {initiative}); -} diff --git a/src/components/Snippets/_icons.js b/src/components/Snippets/_icons.js index 0c85a74..b795c2b 100644 --- a/src/components/Snippets/_icons.js +++ b/src/components/Snippets/_icons.js @@ -14,7 +14,7 @@ export function LocationIcon(props) { return ; } -export function Rarity(props) { +export function RarityIcon(props) { const { set, rarity, iconOnly=false } = props; return ( @@ -23,3 +23,45 @@ export function Rarity(props) { ); } + +export function MugicIcon(props) { + const type = (props.tribe || "generic") + (props.amount != undefined ? `_${props.amount}` : ""); + const src = ("/public/img/icons/mugic/" + type + ".png").toLowerCase(); + return {"MC"}; +} + +export function ElementIcon(props) { + if (props.value) { + return ; + } + else { + return ; + } +} + +export function TribeIcon(props) { + return ; +} + +export function DisciplineIcon(props) { + return ; +} + +export function InitiativeIcon(props) { + const { initiative } = props; + let image = <>; + if (["Danian", "Generic", "Mipedian", "OverWorld", "UnderWorld", "M'arrillian"].indexOf(initiative) > -1) { + image = ; + } + else if (["courage", "power", "speed", "wisdom"].indexOf(initiative.toLowerCase()) > -1) { + image = ; + } + else if (["fire", "air", "earth", "water"].indexOf(initiative.toLowerCase()) > -1) { + image = ; + } + else if (initiative.toLowerCase() == "mugic counter") { + image = ; + } + + return image; +} diff --git a/src/components/Snippets/_text.js b/src/components/Snippets/_text.js index b7c0b0f..d52cb55 100644 --- a/src/components/Snippets/_text.js +++ b/src/components/Snippets/_text.js @@ -1,4 +1,7 @@ import React from 'react'; +import { abilityText } from './abilityText'; +import { uniqueText } from './uniqueText'; +import { InitiativeIcon } from './_icons'; export function Name(props) { const name = props.name.split(","); @@ -15,29 +18,23 @@ export function Name(props) { ); } -export function Mugic(props) { - const type = (props.tribe || "generic") + (props.amount != undefined ? `_${props.amount}` : ""); - const src = ("/public/img/icons/mugic/" + type + ".png").toLowerCase(); - return {"MC"}; -} - -export function Element(props) { - if (props.value) { - return ; - } - else { - return ; - } -} - -export function Tribe(props) { - return ; -} - -export function Discipline(props) { - return ; -} - export function FlavorText({ flavortext }) { return (flavortext) ?
{flavortext}
: <>; } + +export function Ability(props) { + return
{abilityText(props)}
; +} + +export function Unique(props) { + const string = uniqueText(props); + + if (string === "") return <>; + else return ( +
{string}
+ ); +} + +export function Initiative(props) { + return ({!props.notitle && ("Initiative: ")}{InitiativeIcon(props)} {props.initiative}); +} diff --git a/src/components/Snippets/abilityText.js b/src/components/Snippets/abilityText.js new file mode 100644 index 0000000..92c28db --- /dev/null +++ b/src/components/Snippets/abilityText.js @@ -0,0 +1,40 @@ +import React from 'react'; +import processString from 'react-process-string'; +import { MugicIcon, ElementIcon, DisciplineIcon, TribeIcon } from "./_icons"; + +export function abilityText(props) { + const mugic_counters = { + regex: /([0-9x]*){{mc}}/i, + fn: (key, result) => { + if (result.length > 1 && result[1] != "") { + return (); + } + return (); + } + }; + + const elements = { + regex: new RegExp(/(\b((fire)|(air)|(earth)|(water)))/i), + fn: (key, result) => { + return ({result[0]}); + } + }; + + const disciplines = { + regex: /(courage)|(power)|(wisdom)|(speed)/i, + fn: (key, result) => { + return ({result[0]}); + } + }; + + const tribes = { + regex: /(danian)|(generic)|(mipedian)|(overworld)|(underworld)|(m'arrillian)/i, + fn: (key, result) => { + return ({result[0]}); + } + }; + + const filters = [mugic_counters, elements, disciplines, tribes]; + + return processString(filters)(props.ability); +} diff --git a/src/components/Snippets/index.js b/src/components/Snippets/index.js index 7c6bf62..743405a 100644 --- a/src/components/Snippets/index.js +++ b/src/components/Snippets/index.js @@ -1,9 +1,6 @@ import React from 'react'; import s from '../../styles/app.style'; -export { Unique } from './Unique'; -export { Initiative } from './Initiative'; -export { Ability } from './Ability'; export * from './_icons'; export * from './_text'; diff --git a/src/components/Snippets/Unique.js b/src/components/Snippets/uniqueText.js similarity index 73% rename from src/components/Snippets/Unique.js rename to src/components/Snippets/uniqueText.js index 1ef22e1..c6adeca 100644 --- a/src/components/Snippets/Unique.js +++ b/src/components/Snippets/uniqueText.js @@ -1,6 +1,4 @@ -import React from 'react'; - -export function Unique(props) { +export function uniqueText(props) { let string = ""; if (props.data.unique) { string += "Unique, "; @@ -20,8 +18,5 @@ export function Unique(props) { } string = string.replace(/,\s+$/, ""); - if (string === "") return <>; - else return ( -
{string}
- ); + return string; } diff --git a/src/components/SpreadsheetData/API.ts b/src/components/SpreadsheetData/API.ts index 5d9a83d..f347a5a 100644 --- a/src/components/SpreadsheetData/API.ts +++ b/src/components/SpreadsheetData/API.ts @@ -17,6 +17,27 @@ function retry (fn: () => any, retries=0, err=null) { }); } +// For the conversion of shorthand in database +export const sets = { + "DOP": "Dawn of Perim", + "ZOTH": "Zenith of the Hive", + "SS": "Silent Sands", + "MI": "Beyond the Doors", + "ROTO": "Rise of the Oligarch", + "TOTT": "Turn of the Tide", + "FUN": "Forged Unity", + "AU": "Alliance Unraveled", + "FAS": "Fire and Stone", + "OP1": "Organized Play 1", + "PE1": "Premium Edition 1", + "SAS": "Storm and Sea", + "EE": "Elemental Emperors", + "BR": "Beyond Rare", + "LR": "League Rewards", + "PROMO": "Promotional", + "PROTO": "Prototype" +}; + class API { @observable portal; @observable cards; @@ -173,27 +194,8 @@ class API { return ["Danian", "Generic", "Mipedian", "M'arrillian", "OverWorld", "UnderWorld"]; } - // For the conversion of shorthand in database get sets() { - return { - "DOP": "Dawn of Perim", - "ZOTH": "Zenith of the Hive", - "SS": "Silent Sands", - "MI": "Beyond the Doors", - "ROTO": "Rise of the Oligarch", - "TOTT": "Turn of the Tide", - "FUN": "Forged Unity", - "AU": "Alliance Unraveled", - "FAS": "Fire and Stone", - "OP1": "Organized Play 1", - "PE1": "Premium Edition 1", - "SAS": "Storm and Sea", - "EE": "Elemental Emperors", - "BR": "Beyond Rare", - "LR": "League Rewards", - "PROMO": "Promotional", - "PROTO": "Prototype" - }; + return sets; } purgeDB() { @@ -206,4 +208,4 @@ class API { } -export default API; +export default API.getInstance(); diff --git a/src/components/SpreadsheetData/index.js b/src/components/SpreadsheetData/index.js new file mode 100644 index 0000000..051be1e --- /dev/null +++ b/src/components/SpreadsheetData/index.js @@ -0,0 +1,3 @@ +import API from './API'; + +export default API; diff --git a/src/components/SpreadsheetData/index.ts b/src/components/SpreadsheetData/index.ts deleted file mode 100644 index 8e24c2f..0000000 --- a/src/components/SpreadsheetData/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import API from './API'; - -export default API.getInstance(); diff --git a/src/components/_hooks/useCheckMobileScreen.js b/src/components/_hooks/useCheckMobileScreen.js new file mode 100644 index 0000000..158854e --- /dev/null +++ b/src/components/_hooks/useCheckMobileScreen.js @@ -0,0 +1,19 @@ +import { useState, useEffect } from 'react'; + +const useCheckMobileScreen = () => { + const [width, setWidth] = useState(window.innerWidth); + const handleWindowSizeChange = () => { + setWidth(window.innerWidth); + }; + + useEffect(() => { + window.addEventListener('resize', handleWindowSizeChange); + return () => { + window.removeEventListener('resize', handleWindowSizeChange); + }; + }, []); + + return (width < 975); +}; + +export default useCheckMobileScreen; diff --git a/src/components/_mobile/collection/Attack.tsx b/src/components/_mobile/collection/Attack.tsx new file mode 100644 index 0000000..4199154 --- /dev/null +++ b/src/components/_mobile/collection/Attack.tsx @@ -0,0 +1,41 @@ +import { Card, CardContent, CardHeader, CardMedia, Typography, Box } from '@mui/material'; +import React from 'react'; +import { Attack } from "../../common/definitions"; +import { Ability, Name } from '../../Snippets'; +import { abilityText } from '../../Snippets/abilityText'; +import { uniqueText } from '../../Snippets/uniqueText'; +import API from '../../SpreadsheetData'; + +interface props { + card: Attack + ext: boolean +} + +export default function AttackCard ({ card, ext }: 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 ( + + } + /> + + + + {ability} + {unique && {unique}} + {flavor && {flavor}} + Art By: {card.gsx$artist} + + + + ); +} diff --git a/src/components/_mobile/collection/Search.tsx b/src/components/_mobile/collection/Search.tsx new file mode 100644 index 0000000..b25f7ee --- /dev/null +++ b/src/components/_mobile/collection/Search.tsx @@ -0,0 +1,180 @@ +import React, { ChangeEventHandler, FormEvent, useEffect, useRef, useState } from 'react'; +import { useHistory, useLocation } from 'react-router-dom'; +import API, { sets } from '../../SpreadsheetData/API'; +import search_api from '../../collection/search/search'; +import { Loading, UnderConstruction } from '../../Snippets'; + +const initInput = () => { + /* @ts-ignore */ + const cardSets: {[key in keyof typeof sets]: boolean} = {}; + for (const key in sets) sets[key.toLowerCase()] = false; + + return { + name: "", + text: "", + subtypes: "", + flavor: true, + sets: cardSets, + types: { attack: false, battlegear: false, creature: false, location: false, mugic: false }, + rarity: { common: false, uncommon: false, rare: false, 'super rare': false, 'ultra rare': false, promo: false }, + tribes: { danian: false, 'm\'arrillian': false, mipedian: false, overworld: false, underworld: false, generic: false }, + elements: { fire: false, air: false, earth: false, water: false, none: false, and: false }, + disciplines: { courage: '', power: '', wisdom: '', speed: '', max: false }, + energy: { min: '', max: '' }, + mcbp: { min: '', max: '' }, + mull: { unique: false, loyal: false, legendary: false, mixed: false }, + gender: { ambiguous: false, female: false, male: false } + }; +}; + +const queryList = ["sets", "types", "rarity", "tribes", "elements", "mull", "gender"]; + +const parseQuery = (input, location) => { + const queryString = location.search.toLowerCase(); + + const query = {} as any; + const pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&'); + for (let i = 0; i < pairs.length; i++) { + const pair = pairs[i].split('='); + query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || ''); + } + + // query -> input + queryList.forEach((d) => { + if (query[d]) { + query[d].split(',').map(item => { + input[d][item] = true; + }); + } + }); + + if (query.hasOwnProperty('name')) input.name = query.name; + if (query.hasOwnProperty('text')) input.text = query.text; + if (query.hasOwnProperty('subtypes')) input.subtypes = query.subtypes; + if (query.hasOwnProperty('courage')) input.disciplines.courage = query.courage; + if (query.hasOwnProperty('power')) input.disciplines.power = query.power; + if (query.hasOwnProperty('wisdom')) input.disciplines.wisdom = query.wisdom; + if (query.hasOwnProperty('speed')) input.disciplines.speed = query.speed; + if (query.hasOwnProperty('disc_max')) input.disciplines.max = !!query.disc_max; + if (query.hasOwnProperty('energy')) { + const q = query.energy.split(','); + if (q[0] >= 0) input.energy.min = q[0]; + if (q[1] >= 0) input.energy.max = q[1]; + } + if (query.hasOwnProperty('mcbp')) { + const q = query.mcbp.split(','); + if (q[0] >= 0) input.mcbp.min = q[0]; + if (q[1] >= 0) input.mcbp.max = q[1]; + } + + return input; +}; + +const updateQuery = (input, history) => { + let queryString = ""; + + + queryList.forEach(query => { + let temp = ""; + Object.keys(input[query]).forEach((item) => { + if (input[query][item] == true) temp += `${item},`; + }); + if (temp.length > 0) { + queryString += `${query}=${temp.replace(/\,$/, '&')}`; + } + }); + + if (input.name) queryString += `name=${encodeURIComponent(input.name)}&`; + if (input.text) queryString += `text=${encodeURIComponent(input.text)}&`; + if (input.subtypes) queryString += `subtypes=${encodeURIComponent(input.subtypes)}&`; + if (input.disciplines.courage > 0) queryString += `courage=${input.disciplines.courage}&`; + if (input.disciplines.power > 0) queryString += `power=${input.disciplines.power}&`; + if (input.disciplines.wisdom > 0) queryString += `wisdom=${input.disciplines.wisdom}&`; + if (input.disciplines.speed > 0) queryString += `speed=${input.disciplines.speed}&`; + if (input.disciplines.max) queryString += "disc_max=true&"; + if (input.energy.min != "" || input.energy.max != "") { + queryString += "energy="; + if (input.energy.min != "" && input.energy.min >= 0) queryString += input.energy.min; + queryString += ","; + if (input.energy.max != "" && input.energy.max >= 0) queryString += input.energy.max; + queryString += "&"; + } + if (input.mcbp.min != "" || input.mcbp.max != "") { + queryString += "mcbp="; + if (input.mcbp.min != "" && input.mcbp.min >= 0) queryString += input.mcbp.min; + queryString += ","; + if (input.mcbp.max != "" && input.mcbp.max >= 0) queryString += input.mcbp.max; + queryString += "&"; + } + + // Strip trailing & + queryString = queryString.replace(/\&$/, ''); + + // Push to URL + history.push(`/collection/?${queryString}`); +}; + +export default function Search ({ setContent, setInfo }) { + const history = useHistory(); + const location = useLocation(); + const prevLocation = useRef(undefined); + const [input, setInput] = useState(initInput()); + const [loaded, setLoaded] = useState(false); + + useEffect(() => { + setInfo({ 'text': 'Loading..' }); + API.LoadDB([{ 'cards': 'attacks' }, { 'cards': 'battlegear' }, { 'cards': 'creatures' }, { 'cards': 'locations' }, { 'cards': 'mugic' }]) + .then(() => { + setLoaded(true); + handleSearch(); + }) + .catch(() => {}); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + useEffect(() => { + if (location != prevLocation.current) { + prevLocation.current = location; + setInput(parseQuery(input, location)); + } + }, [input, location]); + + + const cleanInput = () => { + setInput(initInput()); + }; + + const handleSearch = (event?: FormEvent) => { + if (event) { + event.preventDefault(); + event.stopPropagation(); + updateQuery(input, history); + } + + const results = search_api(input); + + setContent(results); + if (results.length === 0) { + setInfo({ 'text': 'No Results Found' }); + } else { + setInfo({}); + } + }; + + const handleChange = (event: {target: HTMLInputElement}, obj?: string) => { + const { target } = event; + const value = target.type === 'checkbox' ? target.checked : target.value; + const { name } = target; + + setInput({ + ...input, + ...((!obj) ? { [input[name]]: value } : { [input[obj][name]]: value }) + }); + }; + + if (loaded == false) { + return (); + } + + return ; +} diff --git a/src/components/_mobile/collection/collection.scss b/src/components/_mobile/collection/collection.scss new file mode 100644 index 0000000..379ba32 --- /dev/null +++ b/src/components/_mobile/collection/collection.scss @@ -0,0 +1,16 @@ +.icon14 { + height: 16px; + vertical-align: middle; +} + +.icon16 { + height: 16px; +} + +.icon20 { + height: 20px; +} + +.icon24 { + height: 24px; +} diff --git a/src/components/_mobile/collection/index.tsx b/src/components/_mobile/collection/index.tsx new file mode 100644 index 0000000..f6f1252 --- /dev/null +++ b/src/components/_mobile/collection/index.tsx @@ -0,0 +1,63 @@ +import { Card, Typography } from '@mui/material'; +import React, { useState } from 'react'; +import Attack from './Attack'; +import Search from './Search'; +import { Card as ChaoticCard, Attack as AttackCard } from '../../common/definitions'; + +import './collection.scss'; + +type statsType = "avg" | "min" | "max"; + +export default function Collection (props) { + const [loaded, setLoaded] = useState(false); + const [p, sp] = useState(1); + const [n, sn] = useState(10); + const [ext, setExt] = useState(false); + const [stats, setStats] = useState("avg"); + const [hideStats, setHideStats] = useState(false); + const [content, setContent] = useState([]); + const [info, setInfo] = useState<{text?: string}>({}); + + return (<> + + {info.text ? ( + {info.text} + ) : ( + + )} + ); + +} + +interface listProps { + cards: ChaoticCard[] + info?: string + ext: boolean + stats: statsType + hideStats: boolean +} + +const CardList = ({ cards, info, ...props }: listProps) => { + const list = cards.map((card, i) => { + switch (card.gsx$type) { + case "Attacks": + return (); + // case "Battlegear": + // return (); + // case "Creatures": + // return (); + // case "Locations": + // return (); + // case "Mugic": + // return (); + default: + return (Invalid Card Type); + } + }); + + // Limitation of typescript - error TS2605 + return <>{list}; +}; diff --git a/src/components/app.js b/src/components/app.js new file mode 100644 index 0000000..4f9ef1a --- /dev/null +++ b/src/components/app.js @@ -0,0 +1,60 @@ +import React from 'react'; +import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'; +import loadable from '@loadable/component'; + +import useCheckMobileScreen from './_hooks/useCheckMobileScreen'; +import { PageNotFound, UnderConstruction, Loading } from './Snippets'; +import Create from './create'; +import Base from './BaseStylesWrapper'; + +const EnterTheCode = loadable( + () => import('./entercode'), + { fallback: } +); + +const Home = loadable( + () => import('./home'), + { fallback: } +); + +const Portal = loadable( + () => import('./portal'), + { fallback: } +); + +const Collection = loadable( + () => import('./collection'), + { fallback: } +); + +const MobileCollection = loadable( + () => import('./_mobile/collection'), + { fallback: } +); + +export default function App() { + const isMobile = useCheckMobileScreen(); + + return ( + + + + + {({ location }) => } + + {isMobile && } + {/* Normal Routes */} + + + + + + + + + + + + ); +} + diff --git a/src/components/collection/types/Attack.js b/src/components/collection/types/Attack.js index 68e03ed..01237bf 100644 --- a/src/components/collection/types/Attack.js +++ b/src/components/collection/types/Attack.js @@ -1,7 +1,7 @@ import React from 'react'; import API from '../../SpreadsheetData'; import { observer, inject } from 'mobx-react'; -import { FlavorText, Rarity, Unique, Name, Element, Ability, AttackIcon } from '../../Snippets'; +import { FlavorText, RarityIcon, Unique, Name, ElementIcon, Ability, AttackIcon } from '../../Snippets'; @inject((stores, props, context) => props) @observer export default class Attack extends React.Component { @@ -14,14 +14,14 @@ export default class Attack extends React.Component { this.props.setImage(API.cardImage(card))} />
-
+
Attack - {card.gsx$bp}
{card.gsx$base} |  - {card.gsx$fire}  - {card.gsx$air}  - {card.gsx$earth}  - {card.gsx$water} + {card.gsx$fire}  + {card.gsx$air}  + {card.gsx$earth}  + {card.gsx$water}

diff --git a/src/components/collection/types/Battlegear.js b/src/components/collection/types/Battlegear.js index d6a4b82..a430870 100644 --- a/src/components/collection/types/Battlegear.js +++ b/src/components/collection/types/Battlegear.js @@ -1,7 +1,7 @@ import React from 'react'; import API from '../../SpreadsheetData'; import { observer, inject } from 'mobx-react'; -import { FlavorText, Rarity, Unique, Name, Ability, BattlegearIcon } from '../../Snippets'; +import { FlavorText, RarityIcon, Unique, Name, Ability, BattlegearIcon } from '../../Snippets'; @inject((stores, props, context) => props) @observer export default class Battlegear extends React.Component { @@ -14,7 +14,7 @@ export default class Battlegear extends React.Component { this.props.setImage(API.cardImage(card))} />
-
+
Battlegear{card.gsx$types.length > 0 ? " - " + card.gsx$types : null}
diff --git a/src/components/collection/types/Creature.js b/src/components/collection/types/Creature.js index c92ef2b..7f5f7ba 100644 --- a/src/components/collection/types/Creature.js +++ b/src/components/collection/types/Creature.js @@ -1,7 +1,7 @@ import React from 'react'; import API from '../../SpreadsheetData'; import { observer, inject } from 'mobx-react'; -import { FlavorText, Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe } from '../../Snippets'; +import { FlavorText, RarityIcon, Unique, Name, ElementIcon, MugicIcon, DisciplineIcon, Ability, TribeIcon } from '../../Snippets'; @inject((stores, props, context) => props) @observer export default class Creature extends React.Component { @@ -11,7 +11,7 @@ export default class Creature extends React.Component { const mugic = []; for (let i = 0; i < card.gsx$mugicability; i++) { - mugic.push(); + mugic.push(); } const TribeLine = () => { @@ -25,7 +25,7 @@ export default class Creature extends React.Component { } const line = " " + (past ? "Past " : "") + types; - return {line}; + return {line}; }; const stat_range = (stat, name) => { @@ -42,20 +42,18 @@ export default class Creature extends React.Component { return Number(energy); }; - console.log(this.props); - if (this.props.ext == false) return (
this.props.setImage(API.cardImage(card))} />
-
+

- =0} />  - =0} />  - =0} />  - =0} /> + =0} />  + =0} />  + =0} />  + =0} />
{mugic}
@@ -78,16 +76,16 @@ export default class Creature extends React.Component {
- {stat_range(card.gsx$courage, card.gsx$name)} + {stat_range(card.gsx$courage, card.gsx$name)}
- {stat_range(card.gsx$power, card.gsx$name)} + {stat_range(card.gsx$power, card.gsx$name)}
- {stat_range(card.gsx$wisdom, card.gsx$name)} + {stat_range(card.gsx$wisdom, card.gsx$name)}
- {stat_range(card.gsx$speed, card.gsx$name)} + {stat_range(card.gsx$speed, card.gsx$name)}
{energy_range(card.gsx$energy, card.gsx$name)}
@@ -113,10 +111,10 @@ export default class Creature extends React.Component {
- {stat_range(card.gsx$courage, card.gsx$name)}   - {stat_range(card.gsx$power, card.gsx$name)}   - {stat_range(card.gsx$wisdom, card.gsx$name)}   - {stat_range(card.gsx$speed, card.gsx$name)}   + {stat_range(card.gsx$courage, card.gsx$name)}   + {stat_range(card.gsx$power, card.gsx$name)}   + {stat_range(card.gsx$wisdom, card.gsx$name)}   + {stat_range(card.gsx$speed, card.gsx$name)}   {energy_range(card.gsx$energy, card.gsx$name)}
diff --git a/src/components/collection/types/Location.js b/src/components/collection/types/Location.js index e6f7023..76ccca5 100644 --- a/src/components/collection/types/Location.js +++ b/src/components/collection/types/Location.js @@ -1,7 +1,7 @@ import { inject, observer } from 'mobx-react'; import React from 'react'; -import { Ability, FlavorText, Initiative, LocationIcon, Name, Rarity, Unique } from '../../Snippets'; +import { Ability, FlavorText, InitiativeIcon, LocationIcon, Name, RarityIcon, Unique } from '../../Snippets'; import API from '../../SpreadsheetData'; @inject((stores, props, context) => props) @observer @@ -15,9 +15,9 @@ export default class Location extends React.Component { this.props.setImage(API.cardImage(card))} />
-
+
Location{card.gsx$types.length > 0 ? " - " + card.gsx$types : null}
- +
@@ -31,7 +31,7 @@ export default class Location extends React.Component {
- + diff --git a/src/components/collection/types/Mugic.js b/src/components/collection/types/Mugic.js index b6efacc..9df2d1c 100644 --- a/src/components/collection/types/Mugic.js +++ b/src/components/collection/types/Mugic.js @@ -1,7 +1,7 @@ import React from 'react'; import API from '../../SpreadsheetData'; import { observer, inject } from 'mobx-react'; -import { FlavorText, Rarity, Unique, Name, Mugic as MugicCounter, Ability, Tribe } from '../../Snippets'; +import { FlavorText, RarityIcon, Unique, Name, MugicIcon as MugicCounter, Ability, TribeIcon } from '../../Snippets'; import MugicPlay from '../../mugicplayer/playbutton.tsx'; @inject((stores, props, context) => props) @observer @@ -33,8 +33,8 @@ export default class Mugic extends React.Component { this.props.setImage(API.cardImage(card))} />
-
- Mugic - {card.gsx$tribe}
+
+ Mugic - {card.gsx$tribe}
{mugicCounters} 0 ? card.gsx$shownotes : card.gsx$notes}/>

diff --git a/src/components/common/definitions.ts b/src/components/common/definitions.ts index e2fe468..6d70a44 100644 --- a/src/components/common/definitions.ts +++ b/src/components/common/definitions.ts @@ -19,6 +19,7 @@ export interface BaseCard { gsx$alt2?: string gsx$ic?: string // imgur card gsx$if?: string // imgur fullart + gsx$artist?: string } export interface Attack extends BaseCard { diff --git a/src/components/entercode/PackSimulator.tsx b/src/components/entercode/PackSimulator.tsx index ef0a89e..de4316b 100644 --- a/src/components/entercode/PackSimulator.tsx +++ b/src/components/entercode/PackSimulator.tsx @@ -21,13 +21,13 @@ export default function PackSimulator () { }) .catch(() => {}); - const cards = []; + const cards: JSX.Element[] = []; for (let i = 0; i < 9; i++) { cards.push(blankCard(i)); } setCards(cards); - const setsInput = []; + const setsInput: JSX.Element[] = []; let i = 1; for (const set in API.sets) { setsInput.push(); diff --git a/src/components/portal/Single/Creature.js b/src/components/portal/Single/Creature.js index 9eb4e1c..ed613d1 100644 --- a/src/components/portal/Single/Creature.js +++ b/src/components/portal/Single/Creature.js @@ -5,7 +5,7 @@ import API from '../../SpreadsheetData'; import s from '../../../styles/app.style'; import { observer, inject } from 'mobx-react'; import Single from './_base'; -import { PageNotFound, Element, Mugic, Discipline, Tribe } from '../../Snippets'; +import { PageNotFound, ElementIcon, MugicIcon, DisciplineIcon, TribeIcon } from '../../Snippets'; function Artist(props) { const artists = []; @@ -40,7 +40,7 @@ export default class SingleCreature extends React.Component { const mugic = []; for (let i = 0; i < parseInt(card_data.gsx$mugicability || 0); i++) { - mugic.push(); + mugic.push(); } const col2 = []; @@ -78,16 +78,16 @@ export default class SingleCreature extends React.Component { col0={<>
Tribe: -   +   {tribe}
Disciplines: - {card_data.gsx$courage}  - {card_data.gsx$power}  - {card_data.gsx$wisdom}  - {card_data.gsx$speed} + {card_data.gsx$courage}  + {card_data.gsx$power}  + {card_data.gsx$wisdom}  + {card_data.gsx$speed}
@@ -97,10 +97,10 @@ export default class SingleCreature extends React.Component {
Elements: - =0} />  - =0} />  - =0} />  - =0} /> + =0} />  + =0} />  + =0} />  + =0} />
@@ -127,7 +127,7 @@ export default class SingleCreature extends React.Component { const mugic = []; for (let i = 0; i < parseInt(card_data.gsx$mugicability || 0); i++) { - mugic.push(); + mugic.push(); } return (
Tribe: -   +   {tribe}
Disciplines: {card_data.gsx$courage} -   +   {card_data.gsx$power} -   +   {card_data.gsx$speed} -   +   {card_data.gsx$wisdom} - +
@@ -158,10 +158,10 @@ export default class SingleCreature extends React.Component {
Elements: - =0} />  - =0} />  - =0} />  - =0} /> + =0} />  + =0} />  + =0} />  + =0} />
diff --git a/src/components/portal/Single/Location.js b/src/components/portal/Single/Location.js index 9c82e4e..ba8133d 100644 --- a/src/components/portal/Single/Location.js +++ b/src/components/portal/Single/Location.js @@ -2,7 +2,7 @@ import React from 'react'; import API from '../../SpreadsheetData'; import { observer, inject } from 'mobx-react'; import Single from './_base'; -import { PageNotFound, Initiative } from '../../Snippets'; +import { PageNotFound, InitiativeIcon } 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 && (
Initiative: - +
)} } @@ -65,7 +65,7 @@ export default class SingleLocation extends React.Component { {card_data.gsx$initiative && (
Initiative: - +
)} } diff --git a/src/components/portal/Single/Mugic.js b/src/components/portal/Single/Mugic.js index 67ae565..da89433 100644 --- a/src/components/portal/Single/Mugic.js +++ b/src/components/portal/Single/Mugic.js @@ -3,7 +3,7 @@ import API from '../../SpreadsheetData'; import s from '../../../styles/app.style'; import { observer, inject } from 'mobx-react'; import Single from './_base'; -import { PageNotFound, Mugic, Tribe } from '../../Snippets'; +import { PageNotFound, MugicIcon, TribeIcon } from '../../Snippets'; @inject((stores, props, context) => props) @observer export default class SingleMugic extends React.Component { @@ -35,7 +35,7 @@ export default class SingleMugic extends React.Component { } else { for (let i = 0; i < parseInt(card_data.gsx$cost); i++) { - cost.push(); + cost.push(); } } return cost; @@ -49,7 +49,7 @@ export default class SingleMugic extends React.Component { col0={<>
Tribe: -   +   {tribe}
{card_data.gsx$cost !== "" && (<> @@ -86,7 +86,7 @@ export default class SingleMugic extends React.Component { col0={<>
Tribe: -   +   {tribe}
{card_data.gsx$cost !== "" && (<> diff --git a/src/components/portal/Single/_base.js b/src/components/portal/Single/_base.js index 029625b..c540f7f 100644 --- a/src/components/portal/Single/_base.js +++ b/src/components/portal/Single/_base.js @@ -3,7 +3,7 @@ import { observable } from "mobx"; import { observer, inject } from 'mobx-react'; import { Link } from 'react-router-dom'; import API from '../../SpreadsheetData'; -import { Rarity, Ability } from '../../Snippets'; +import { RarityIcon, Ability } from '../../Snippets'; import s from '../../../styles/app.style'; // own "name" display function @@ -74,7 +74,7 @@ export default class Single extends React.Component { {card.gsx$rarity && (<>
Rarity: -   +   {card.gsx$rarity}
diff --git a/src/index.js b/src/index.js index b8397b1..99d31b0 100644 --- a/src/index.js +++ b/src/index.js @@ -1,190 +1,10 @@ import React from 'react'; -import { render } from 'react-dom'; -import { BrowserRouter as Router, Link, Route, Switch, Redirect } from 'react-router-dom'; -import loadable from '@loadable/component'; +import ReactDOM from 'react-dom'; +import App from './components/app'; -/* Components */ -import API from './components/SpreadsheetData'; -import { PageNotFound, UnderConstruction, Donate, Loading } from './components/Snippets'; -import Create from './components/create/index'; - -const EnterTheCode = loadable( - () => import('./components/entercode'), - { fallback: } -); - -const Home = loadable( - () => import('./components/home'), - { fallback: } -); - -const Portal = loadable( - () => import('./components/portal'), - { fallback: } -); - -const Collection = loadable( - () => import('./components/collection'), - { fallback: } -); - -/** - * This function is to define beta routes - */ -function BetaRoutingWrapper() { - return ( - - - - {({ location }) => } - - - - ); -} - -function Routing() { - return ( - - - - - - - - - - ); -} - -function Base(props) { - // Configuration for the language and background - // Images managed in css file - const language = "ENG"; - const bkgrnd = "05"; - - const children = ; - - return ( - <> -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {children} -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

- -
-
-
- ©2008 Chaotic USA Entertainment Group, Inc. -
- U.S. Pat 5810666 and 5954332 and other pending patent applications. All Rights Reserved. -
-
- -
-
-
-
-
-
-
-
-
- - ); -} - -render( - - - - , document.getElementById('root'), +ReactDOM.render( + + + , + document.getElementById('root') ); diff --git a/tsconfig.json b/tsconfig.json index eebdd7f..29721b5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,7 +14,7 @@ "noEmit": true, // Enable strictest settings like strictNullChecks & noImplicitAny. // "strict": true, - "noImplicitAny": true, + "noImplicitAny": false, "noImplicitThis": true, "strictNullChecks": true, "alwaysStrict": false, @@ -47,11 +47,11 @@ "inlineSourceMap": true }, "include": [ - "src/components" + "src/components", + ".eslintrc.js" ], "exclude": [ "build", - "node_modules", "**/*.spec.ts" ] }