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

#11 icons and abilities

Browse Source
This commit is contained in:
Daniel 2018-01-11 22:48:09 -05:00
parent 6e2d3c400b
commit 0089b2386a
8 changed files with 92 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
build/bundle.js
View File

File diff suppressed because one or more lines are too long

27
src/components/Snippets.js
View File

@ -110,11 +110,36 @@ export function Ability(props) {
}
}
const filters = [mugic_counters, elements, disciplines];
const tribes = {
regex: /(danian)|(generic)|(mipedian)|(overworld)|(underworld)/i,
fn: (key, result) => {
return (<span key={key}><Tribe tribe={result[0]} size="icon14" />{result[0]}</span>);
}
}
const filters = [mugic_counters, elements, disciplines, tribes];
return <div className={props.type||"ability"}>{processString(filters)(props.ability)}</div>
}
export function Initiative(props) {
let initiative = props.initiative;
let image = null;
if (["Danian", "Generic", "Mipedian", "OverWorld", "UnderWorld", "M'arrillian"].indexOf(initiative) > -1) {
image = <img className="icon16" style={{verticalAlign: 'middle'}} src={("/src/img/icons/tribes/"+initiative+".png").toLowerCase()} />
}
else if (["courage", "power", "speed", "wisdom"].indexOf(initiative.toLowerCase()) > -1){
image = <img className="icon16" style={{verticalAlign: 'middle'}} src={("/src/img/icons/disciplines/"+initiative+".png").toLowerCase()} />
}
else if (["fire", "air", "earth", "water"].indexOf(initiative.toLowerCase()) > -1){
image = <img className="icon16" style={{verticalAlign: 'middle'}} src={("/src/img/icons/elements/"+initiative+".png").toLowerCase()} />
}
else if (initiative.toLowerCase() == "mugic counter") {
image = <img className="icon16" style={{verticalAlign: 'middle'}} src={("/src/img/icons/mugic/generic.png").toLowerCase()} />
}
return (<span>Initiative: {image} {initiative}</span>);
}
export function Splash(props) {
let image = props.image;
return (

20
src/components/collection/types/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, Name, Ability} from '../../Snippets';
import {Rarity, Unique, Name, Ability, Initiative} from '../../Snippets';
@inject((stores, props, context) => props) @observer
export default class Location extends React.Component {
@ -28,21 +28,3 @@ export default class Location extends React.Component {
);
}
}
function Initiative(props) {
let initiative = props.initiative;
let image = null;
if (["Danian", "Generic", "Mipedian", "OverWorld", "UnderWorld", "M'arrillian"].indexOf(initiative) > -1) {
image = <img className="icon16" style={{verticalAlign: 'middle'}} src={("/src/img/icons/tribes/"+initiative+".png").toLowerCase()} />
}
else if (["courage", "power", "speed", "wisdom"].indexOf(initiative.toLowerCase()) > -1){
image = <img className="icon16" style={{verticalAlign: 'middle'}} src={("/src/img/icons/disciplines/"+initiative+".png").toLowerCase()} />
}
else if (["fire", "air", "earth", "water"].indexOf(initiative.toLowerCase()) > -1){
image = <img className="icon16" style={{verticalAlign: 'middle'}} src={("/src/img/icons/elements/"+initiative+".png").toLowerCase()} />
}
else if (initiative.toLowerCase() == "mugic counter") {
image = <img className="icon16" style={{verticalAlign: 'middle'}} src={("/src/img/icons/mugic/generic.png").toLowerCase()} />
}
return (<span>Initiative: {image} {initiative}</span>);
}

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

@ -5,6 +5,7 @@ import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import {observer, inject} from 'mobx-react';
import {PageNotFound} from '../../Snippets';
import {Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
@inject((stores, props, context) => props) @observer
export default class SingleBattlegear extends React.Component {
@ -80,6 +81,11 @@ export default class SingleBattlegear extends React.Component {
<strong>Rarity: </strong>
{card_data.gsx$rarity}
</div>
<hr />
<div>
<strong>Ability:</strong><br />
<Ability ability={card_data.gsx$ability} />
</div>
</div>
);
}

32
src/components/portal/Single/Creature.js
View File

@ -5,6 +5,7 @@ import {PageNotFound} from '../../Snippets';
import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import {observer, inject} from 'mobx-react';
import {Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
@inject((stores, props, context) => props) @observer
export default class SingleCreature extends React.Component {
@ -67,9 +68,10 @@ export default class SingleCreature extends React.Component {
return <p key={i}><Interactive as={Link} {...s.link} to={"/portal/Battlegear/"+item}><span>{item}</span></Interactive></p>;
});
const elements = card_data.gsx$elements.split(/[ ,]+/).filter(Boolean).map((item, i) => {
return <img className="icon" src={"/src/img/icons/elements/"+item.toLowerCase()+".png"} alt={item} key={i}></img>;
});
let mugic = [];
for (let i = 0; i < card_data.gsx$mugicability; i++) {
mugic.push(<Mugic key={i} tribe={tribe} />);
}
return (
<div>
@ -134,36 +136,36 @@ export default class SingleCreature extends React.Component {
<hr />
<div>
<strong>Tribe: </strong>
<img className="icon" src={"/src/img/icons/tribes/"+tribe.toLowerCase()+".png"}></img>{tribe}
<Tribe tribe={tribe} />
</div>
<hr />
<div>
<strong>Ability:</strong><br />
{card_data.gsx$ability}
<Ability ability={card_data.gsx$ability} tribe={card_data.gsx$tribe} />
</div>
<hr />
<div>
<strong>Courage: </strong>
{card_data.gsx$courage}
<Discipline discipline="courage" />
</div>
<hr />
<div>
<strong>Power: </strong>
{card_data.gsx$power}
<Discipline discipline="power" />
</div>
<hr />
<div>
<strong>Speed: </strong>
{card_data.gsx$speed}
<Discipline discipline="speed" />
</div>
<hr />
<div>
<strong>Wisdom: </strong>
{card_data.gsx$wisdom}
</div>
<hr />
<div>
<strong>Elements: </strong>{elements}
<Discipline discipline="wisdom" />
</div>
<hr />
<div>
@ -171,6 +173,16 @@ export default class SingleCreature extends React.Component {
{card_data.gsx$energy}
</div>
<hr />
<div>
<strong>Elements: </strong>
<div>
<Element element="fire" value={card_data.gsx$elements.toLowerCase().indexOf("fire") >=0} />&nbsp;
<Element element="air" value={card_data.gsx$elements.toLowerCase().indexOf("air") >=0} />&nbsp;
<Element element="earth" value={card_data.gsx$elements.toLowerCase().indexOf("earth") >=0} />&nbsp;
<Element element="water" value={card_data.gsx$elements.toLowerCase().indexOf("water") >=0} />
</div>
</div>
<hr />
<div>
<strong>Flavortext:</strong><br />
{card_data.gsx$flavortext}
@ -178,7 +190,7 @@ export default class SingleCreature extends React.Component {
<hr />
<div>
<strong>Mugic Ability: </strong>
{card_data.gsx$mugicability}
{mugic}
</div>
</div>
);

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

@ -5,6 +5,7 @@ import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import {observer, inject} from 'mobx-react';
import {PageNotFound} from '../../Snippets';
import {Rarity, Unique, Name, Ability, Initiative} from '../../Snippets';
@inject((stores, props, context) => props) @observer
export default class SingleLocation extends React.Component {
@ -88,7 +89,12 @@ export default class SingleLocation extends React.Component {
<hr />
<div>
<strong>Location Initiative: </strong>
{card_data.gsx$initiative}
<Initiative initiative={card_data.gsx$initiative} />
</div>
<hr />
<div>
<strong>Ability:</strong><br />
<Ability ability={card_data.gsx$ability} />
</div>
</div>
);

17
src/components/portal/Single/Mugic.js
View File

@ -5,6 +5,7 @@ import {PageNotFound} from '../../Snippets';
import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import {observer, inject} from 'mobx-react';
import {Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
@inject((stores, props, context) => props) @observer
export default class SingleMugic extends React.Component {
@ -59,8 +60,16 @@ export default class SingleMugic extends React.Component {
}
let cost = [];
for (let i = 0; i < card_data.gsx$cost; i++) {
cost.push(<img key={i} className="icon" src={"/src/img/icons/mugic/"+tribe.toLowerCase()+".png"} alt="mugic counter"/>);
if (card_data.gsx$cost == 0) {
cost.push(<span key={0}>0</span>);
}
else if (card_data.gsx$cost.toLowerCase() == 'x') {
cost.push(<span key={0}>X</span>);
}
else {
for (let i = 0; i < card_data.gsx$cost; i++) {
cost.push(<Mugic tribe={card_data.gsx$tribe} key={i} />);
}
}
return (
@ -96,7 +105,7 @@ export default class SingleMugic extends React.Component {
<hr />
<div>
<strong>Tribe: </strong>
<img className="icon" style={{width: "20px"}} src={"/src/img/icons/tribes/"+tribe.toLowerCase()+".png"}></img>{tribe}
<Tribe tribe={tribe} />
</div>
<hr />
<div>
@ -106,7 +115,7 @@ export default class SingleMugic extends React.Component {
<hr />
<div>
<strong>Ability:</strong><br />
{card_data.gsx$ability}
<Ability ability={card_data.gsx$ability} tribe={card_data.gsx$tribe} />
</div>
<hr />
<div>

5
src/css/portal.css
View File

@ -119,3 +119,8 @@
text-align: left;
padding-bottom: 10px;
}
.entry .icon14, .entry .icon16,
.entry .icon20, .entry .icon24 {
vertical-align: middle;
}