Leahnaya/chaoticbackup.github.io
1
0
Fork 0
mirror of https://github.com/chaoticbackup/chaoticbackup.github.io.git synced 2026-03-29 04:54:37 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

ability text transform closes #17

Browse Source
This commit is contained in:
Daniel 2017-12-31 01:00:02 -05:00
parent 0e964980e2
commit f234d67e43
9 changed files with 107 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
build/bundle.js
View File

File diff suppressed because one or more lines are too long

24
src/components/collection/Attack.js
View File

@ -4,7 +4,7 @@ import API from '../SpreadsheetData';
import s from '../../styles/app.style';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import {Rarity, Unique} from './_Snippets';
import {Rarity, Unique, Name, Element, Ability} from './_Snippets';
@inject((stores, props, context) => props) @observer
export default class Attack extends React.Component {
@ -16,20 +16,20 @@ export default class Attack extends React.Component {
<div style={{textAlign: 'left', display: 'flex'}}>
<img className="thumb" style={{float: 'left'}} src={API.base_image + (attack.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(attack.gsx$image)} />
<div style={{verticalAlign: 'text-top', float: 'left', width: "220px"}}>
<span className="name">{attack.gsx$name}</span><br />
<Name name={attack.gsx$name} /><br />
<Rarity set={attack.gsx$set} rarity={attack.gsx$rarity} /><br />
<span>Build Points: {attack.gsx$bp}</span><br />
<div>
{attack.gsx$base} |&nbsp;
{attack.gsx$fire}<Element element="fire" value={attack.gsx$fire} /> |&nbsp;
{attack.gsx$air}<Element element="air" value={attack.gsx$air} /> |&nbsp;
{attack.gsx$earth}<Element element="earth" value={attack.gsx$earth} /> |&nbsp;
{attack.gsx$water}<Element element="water" value={attack.gsx$water} />
<span className="bigger">{attack.gsx$base}</span> |&nbsp;
<Element element="fire" value={attack.gsx$fire} />{attack.gsx$fire}&nbsp;
<Element element="air" value={attack.gsx$air} />{attack.gsx$air}&nbsp;
<Element element="earth" value={attack.gsx$earth} />{attack.gsx$earth}&nbsp;
<Element element="water" value={attack.gsx$water} />{attack.gsx$water}
</div>
</div>
<br />
<div style={{float: 'left', width: 'calc(100% - (100px + 230px))', borderLeft: '1px solid white', paddingLeft: '10px'}} >
<span>{attack.gsx$ability}</span><br />
<Ability ability={attack.gsx$ability} /><br />
<Unique data={{unique: attack.gsx$unique, loyal: attack.gsx$loyal, legendary: attack.gsx$legendary}} /><br />
<span className="flavortext">{attack.gsx$flavortext}</span>
</div>
@ -38,11 +38,3 @@ export default class Attack extends React.Component {
}
}
function Element(props) {
if (props.value) {
return <img className="icon20" src={"/src/img/icons/elements/"+props.element+".png"} />
}
else {
return <img className="icon20" src={"/src/img/icons/elements/"+props.element+"-inactive.png"} />
}
}

6
src/components/collection/Battlegear.js
View File

@ -4,7 +4,7 @@ import API from '../SpreadsheetData';
import s from '../../styles/app.style';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import {Rarity, Unique} from './_Snippets';
import {Rarity, Unique, Name, Ability} from './_Snippets';
@inject((stores, props, context) => props) @observer
export default class Battlegear extends React.Component {
@ -16,11 +16,11 @@ export default class Battlegear extends React.Component {
<div style={{textAlign: 'left', display: 'flex'}}>
<img className="thumb" style={{float: 'left'}} src={API.base_image + (battlegear.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(battlegear.gsx$image)} />
<div style={{verticalAlign: 'text-top', float: 'left', width: "220px"}}>
<span className="name">{battlegear.gsx$name}</span><br />
<Name name={battlegear.gsx$name} /><br />
<Rarity set={battlegear.gsx$set} rarity={battlegear.gsx$rarity} /><br />
</div>
<div style={{float: 'left', width: 'calc(100% - (100px + 230px))', borderLeft: '1px solid white', paddingLeft: '10px'}} >
<span>{battlegear.gsx$ability}</span><br />
<Ability ability={battlegear.gsx$ability} /><br />
<Unique data={{unique: battlegear.gsx$unique, loyal: battlegear.gsx$loyal, legendary: battlegear.gsx$legendary}} /><br />
<span className="flavortext">{battlegear.gsx$flavortext}</span>
</div>

41
src/components/collection/Creature.js
View File

@ -4,8 +4,7 @@ import API from '../SpreadsheetData';
import s from '../../styles/app.style';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import processString from 'react-process-string';
import {Rarity, Unique} from './_Snippets';
import {Rarity, Unique, Name, Element, Mugic, Discipline, Ability} from './_Snippets';
@inject((stores, props, context) => props) @observer
export default class Creature extends React.Component {
@ -13,48 +12,30 @@ export default class Creature extends React.Component {
render() {
let creature = this.props.creature;
const elements = ['fire', 'air', 'earth', 'water'].map((element, i) => {
if (creature.gsx$elements.toLowerCase().indexOf(element) >=0) {
return <img className="icon20" src={"/src/img/icons/elements/"+element+".png"} alt={element} key={i}></img>;
}
else {
return <img className="icon20" src={"/src/img/icons/elements/"+element+"-inactive.png"} alt={element} key={i}></img>;
}
});
let mugic = [];
for (let i = 0; i < creature.gsx$mugicability; i++) {
mugic.push(<img className="icon20" src={"/src/img/icons/mugic/"+(creature.gsx$tribe.toLowerCase()||"generic")+".png"} alt="MC" key={i} />);
mugic.push(<Mugic key={i} tribe={creature.gsx$tribe} />);
}
let mugic_counters = {
regex: /{{mc}}/i,
fn: (key, result) => {
return <img key={key} className="icon16" src={"/src/img/icons/mugic/"+(creature.gsx$tribe.toLowerCase()||"generic")+".png"} alt="MC" />
}
}
const brainwashed = (() => {
if (creature.gsx$brainwashed) {
return (<span className="brainwashed">{processString([mugic_counters])(creature.gsx$brainwashed)}<br />
</span>);
}
})();
return(
<div className="creature" style={{textAlign: 'left', display: 'flex'}}>
<img className="thumb" style={{float: 'left'}} src={API.base_image + (creature.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(creature.gsx$image)} />
<div style={{verticalAlign: 'text-top', float: 'left', width: '220px'}}>
<span className="name">{creature.gsx$name}</span><br />
<Name name={creature.gsx$name} /><br />
<Rarity set={creature.gsx$set} rarity={creature.gsx$rarity} /><br />
<span><img className="icon16" style={{verticalAlign: 'middle'}} src={"/src/img/icons/tribes/"+creature.gsx$tribe.toLowerCase()+".png"} /> {creature.gsx$tribe} {creature.gsx$types}</span><br />
<span>{elements}</span><br />
<div>
<Element element="fire" value={creature.gsx$elements.toLowerCase().indexOf("fire") >=0} />&nbsp;
<Element element="air" value={creature.gsx$elements.toLowerCase().indexOf("air") >=0} />&nbsp;
<Element element="earth" value={creature.gsx$elements.toLowerCase().indexOf("earth") >=0} />&nbsp;
<Element element="water" value={creature.gsx$elements.toLowerCase().indexOf("water") >=0} />
</div>
<span>{mugic}</span>
</div>
<br />
<div style={{float: 'left', width: 'calc(100% - (100px + 230px + 50px))', borderLeft: '1px solid white', paddingLeft: '10px', 'whiteSpace': 'pre-line'}} >
<span className="ability">{processString([mugic_counters])(creature.gsx$ability)}</span><br />
{brainwashed}
<Ability ability={creature.gsx$ability} tribe={creature.gsx$tribe} /><br />
<Ability type="brainwashed" tribe={creature.gsx$tribe} ability={creature.gsx$brainwashed+"\n"} />
<Unique data={{unique: creature.gsx$unique, loyal: creature.gsx$loyal, legendary: creature.gsx$legendary, tribe: creature.gsx$tribe}} /><br />
<span className="flavortext">{creature.gsx$flavortext}</span>
</div>

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

@ -4,7 +4,7 @@ import API from '../SpreadsheetData';
import s from '../../styles/app.style';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import {Rarity, Unique} from './_Snippets';
import {Rarity, Unique, Name, Ability} from './_Snippets';
@inject((stores, props, context) => props) @observer
export default class Location extends React.Component {
@ -16,12 +16,12 @@ export default class Location extends React.Component {
<div style={{textAlign: 'left', display: 'flex'}}>
<img className="thumb" style={{float: 'left', width: '100px', height: '98px'}} src={API.base_image + (location.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(location.gsx$image)} />
<div style={{verticalAlign: 'text-top', float: 'left', width: "220px"}}>
<span className="name">{location.gsx$name}</span><br />
<Name name={location.gsx$name} /><br />
<Rarity set={location.gsx$set} rarity={location.gsx$rarity} /><br />
<Initiative initiative={location.gsx$initiative} /><br />
</div>
<div style={{float: 'left', width: 'calc(100% - (100px + 230px))', borderLeft: '1px solid white', paddingLeft: '10px'}} >
<span>{location.gsx$ability}</span><br />
<Ability ability={location.gsx$ability} /><br />
<span className="flavortext">{location.gsx$flavortext}</span>
</div>
</div>

14
src/components/collection/Mugic.js
View File

@ -4,7 +4,7 @@ import API from '../SpreadsheetData';
import s from '../../styles/app.style';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import {Rarity, Unique} from './_Snippets';
import {Rarity, Unique, Name, Mugic, Ability} from './_Snippets';
@inject((stores, props, context) => props) @observer
export default class Attack extends React.Component {
@ -21,7 +21,7 @@ export default class Attack extends React.Component {
}
else {
for (let i = 0; i < mugic.gsx$cost; i++) {
mugicCounters.push(<img className="icon16" src={"/src/img/icons/mugic/"+(mugic.gsx$tribe.toLowerCase()||"generic")+".png"} alt={mugic.gsx$tribe.toLowerCase() + " Mugic counter"} key={i} />);
mugicCounters.push(<Mugic tribe={mugic.gsx$tribe} key={i} />);
}
}
@ -29,14 +29,14 @@ export default class Attack extends React.Component {
<div style={{textAlign: 'left', display: 'flex'}}>
<img className="thumb" style={{float: 'left'}} src={API.base_image + (mugic.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(mugic.gsx$image)} />
<div style={{verticalAlign: 'text-top', float: 'left', width: "220px"}}>
<span className="name">{mugic.gsx$name}</span><br />
<Name name={mugic.gsx$name} /><br />
<Rarity set={mugic.gsx$set} rarity={mugic.gsx$rarity} /> <br />
<img height="20" className="icon16" src={"/src/img/icons/tribes/"+(mugic.gsx$tribe.toLowerCase()||"generic")+".png"} /> {mugic.gsx$tribe}<br />
<span>Cost: {mugicCounters}</span><br />
<span>{mugicCounters}</span><br />
</div>
<br />
<div style={{float: 'left', width: 'calc(100% - (100px + 230px))', borderLeft: '1px solid white', paddingLeft: '10px'}} >
<span>{mugic.gsx$ability}</span><br />
<Ability ability={mugic.gsx$ability} tribe={mugic.gsx$tribe} /><br />
<Unique data={{unique: mugic.gsx$unique, loyal: mugic.gsx$loyal, legendary: mugic.gsx$legendary}} /><br />
<span className="flavortext">{mugic.gsx$flavortext}</span>
</div>
@ -45,7 +45,3 @@ export default class Attack extends React.Component {
}
}
function MugicCost(props) {
}

61
src/components/collection/_Snippets.js
View File

@ -1,12 +1,13 @@
import React from 'react';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import processString from 'react-process-string';
import API from '../SpreadsheetData';
export function Rarity(props) {
return (
<span>
<img className="icon16" style={{verticalAlign: 'middle'}} src={("/src/img/icons/set/"+props.set+"/"+props.rarity+".png").toLowerCase()} />
<img className={props.size||"icon16"} style={{verticalAlign: 'middle'}} src={("/src/img/icons/set/"+props.set+"/"+props.rarity+".png").toLowerCase()} />
{API.sets[props.set]}&nbsp;|&nbsp;{props.rarity}
</span>
);
@ -35,3 +36,61 @@ export function Unique(props) {
<span style={{fontWeight: "Bold"}}>{string}</span>
);
}
export function Name(props) {
let name = props.name.split(",");
if (name.length > 1) {
return (<span>
<span className="bigger">{name[0]}</span><br />
&nbsp;&nbsp;<span style={{fontSize: "13px",paddingBottom: "4px", display: "inline-block"}}>{name[1]}</span>
</span>);
} else {
return (<span>
<span className="bigger">{name[0]}</span>
</span>);
}
}
export function Element(props) {
if (props.value) {
return <img className={props.size||"icon20"} src={"/src/img/icons/elements/"+props.element.toLowerCase()+".png"} />
}
else {
return <img className={props.size||"icon20"} src={"/src/img/icons/elements/"+props.element.toLowerCase()+"-inactive.png"} />
}
}
export function Mugic(props) {
return <img className={props.size||"icon20"} src={"/src/img/icons/mugic/"+(props.tribe.toLowerCase()||"generic")+".png"} alt={"MC"} />
}
export function Discipline(props) {
return <img className={props.size||"icon16"} src={"/src/img/icons/disciplines/"+props.discipline.toLowerCase()+".png"} />
}
export function Ability(props) {
const mugic_counters = {
regex: /{{mc}}/i,
fn: (key, result) => {
return (<Mugic key={key} tribe={props.tribe} size="icon16"/>);
}
}
const elements = {
regex: /(fire)|(air)|(earth)|(water)/i,
fn: (key, result) => {
return (<span key={key}><Element element={result[0]} value="true" size="icon16"/>{result[0]}</span>);
}
}
const disciplines = {
regex: /(courage)|(power)|(wisdom)|(speed)/i,
fn: (key, result) => {
return (<span key={key}><Discipline discipline={result[0]} />{result[0]}</span>);
}
}
const filters = [mugic_counters, elements, disciplines];
return <span className={props.type||"ability"}>{processString(filters)(props.ability)}</span>
}

6
src/css/collection.css
View File

@ -20,14 +20,10 @@
max-height: 350px;
}
.name {
.bigger {
font-size: 14px;
/* margin-bottom: 2px; */
padding-bottom: 4px;
display: inline-block;
}
.thumb {
width: 100px;
height: 98px;

6
src/index.js
View File

@ -51,11 +51,7 @@ const routes = (
<Route path="EnterTheCode" component={EnterTheCode} />
{/* Collection */}
<Route path="collection/">
<IndexRoute component={CollectionHome} />
<Route path="*" component={PageNotFound} />
</Route>
<Route path="collection/*" component={CollectionHome} />
{/* Portal */}
<Route path="portal/" component={PortalBase} mapMenuTitle="Portal">