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

closes #21 added attacks to collection

Browse Source
This commit is contained in:
Daniel
2017-11-21 03:01:39 -05:00
parent c2a57e924a
commit d15e8eea68
5 changed files with 123 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
build/bundle.js
View File

File diff suppressed because one or more lines are too long

11
src/components/SpreadsheetData.js
View File

@@ -13,6 +13,8 @@ class API {
// + "/od6/public/basic?alt=json"; // Alternate data format
static base_spreadsheet = "1cUNmwV693zl2zqbH_IG4Wz8o9Va_sOHe7pAZF6M59Es";
get base_image() { return "https://drive.google.com/uc?id="; }
get thumb_missing() { return "1JYjPzkv74IhzlHTyVh2niTDyui73HSfp"; }
get card_back() { return "1_MgWDPsPGf-gPBArn2v6ideJcqOPsSYC"; }
// Singleton
static getInstance() {
@@ -147,11 +149,14 @@ class CollectionDB {
});
}
setupAttacks() {
setupAttacks(tribe="Generic") {
this.setup(this.api.urls.Attacks[tribe], "Attack", (data) => {
this.attacks.insert(data);
this.built.push("attacks_"+tribe);
});
}
setupBattleGear() {
setupBattlegear() {
}

35
src/components/collection/Attack.js Normal file
View File

@@ -0,0 +1,35 @@
import React from 'react';
import Interactive from 'react-interactive';
import API from '../SpreadsheetData';
import s from '../../styles/app.style';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
@inject((stores, props, context) => props) @observer
export default class Attack extends React.Component {
render() {
let attack = this.props.attack;
// const elements = attack.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>;
// });
return(
<div style={{textAlign: 'left', display: 'flex'}}>
<img className="thumb" style={{float: 'left', width: '100px', height: '98px'}} src={API.base_image + (attack.gsx$thumb||API.thumb_missing)}></img>
<div style={{verticalAlign: 'text-top', float: 'left', width: "50%"}}>
<span>{attack.gsx$name}</span><br />
<span>{API.sets[attack.gsx$set]} | {attack.gsx$rarity}</span><br />
<span>Build Points: {attack.gsx$bp}</span><br />
<span>
Damage: {attack.gsx$base} |&nbsp;
{attack.gsx$fire}<img height="16" className="icon" src={"/src/img/icons/elements/fire.png"} /> |&nbsp;
{attack.gsx$air}<img height="16" className="icon" src={"/src/img/icons/elements/air.png"} /> |&nbsp;
{attack.gsx$earth}<img height="16" className="icon" src={"/src/img/icons/elements/earth.png"} /> |&nbsp;
{attack.gsx$water}<img height="16" className="icon" src={"/src/img/icons/elements/water.png"} />
</span><br />
</div>
</div>
);
}
}

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

@@ -5,9 +5,6 @@ import s from '../../styles/app.style';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
let thumb = "1JYjPzkv74IhzlHTyVh2niTDyui73HSfp";
let card_back = "1_MgWDPsPGf-gPBArn2v6ideJcqOPsSYC";
@inject((stores, props, context) => props) @observer
export default class Creature extends React.Component {
@@ -19,7 +16,7 @@ export default class Creature extends React.Component {
return(
<div style={{textAlign: 'left', display: 'flex'}}>
<img className="thumb" style={{float: 'left', width: '100px', height: '98px'}} src={API.base_image + (creature.gsx$thumb||thumb)}></img>
<img className="thumb" style={{float: 'left', width: '100px', height: '98px'}} src={API.base_image + (creature.gsx$thumb||API.thumb_missing)}></img>
<div style={{verticalAlign: 'text-top', float: 'left', width: "50%"}}>
<img height="20" className="icon" src={"/src/img/icons/tribes/"+creature.gsx$tribe.toLowerCase()+".png"}></img>
<span>{creature.gsx$name}</span><br />

83
src/components/collection/Home.js
View File

@@ -7,16 +7,22 @@ import s from '../../styles/app.style';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import Creature from './Creature';
import UnderConstruction from '../UnderConstruction';
import Attack from './Attack';
import loki from 'lokijs';
@inject((stores, props, context) => props) @observer
export default class CollectionHome extends React.Component {
@observable n = 10;
@observable p = 1;
@observable content = [];
type = "";
swamp = "or";
constructor() {
super();
this.filter = new loki("filter.db");
}
render() {
if (this.props.children) {
return (<div>{this.props.children}</div>);
@@ -30,6 +36,11 @@ export default class CollectionHome extends React.Component {
}
// Load all the data
if (!store.cards.built.includes("attacks_Cards")) {
store.cards.setupAttacks("Cards");
return (<span>Loading...</span>);
}
if (!store.cards.built.includes("creatures_Cards")) {
store.cards.setupCreatures("Cards");
return (<span>Loading...</span>);
@@ -42,7 +53,6 @@ export default class CollectionHome extends React.Component {
if (this.content.length == 0) {
// Only use cards with thumb nails for now
// TODO add other types
this.content = store.cards.creatures.chain().where((obj) => {return (!obj.gsx$thumb == '');}).simplesort('gsx$name').data();
}
@@ -56,6 +66,7 @@ export default class CollectionHome extends React.Component {
}
return elements.map((element, i) => {
if (element.gsx$type == "Creature") return (<Creature creature={element} key={i} />);
if (element.gsx$type == "Attack") return (<Attack attack={element} key={i} />);
else return (<div>Empty</div>);
});
}
@@ -88,16 +99,30 @@ export default class CollectionHome extends React.Component {
let search = (e) => {
e.preventDefault();
e.stopPropagation();
let baseResultset = API.cards.creatures.chain();
// Sort data descending alphabetically
let filter = this.filter.addCollection('filter');
var pview = filter.addDynamicView('filter');
pview.applySimpleSort('gsx$name');
// begin data filtering
// TODO add other types
let creatureResults = API.cards.creatures.chain();
let attackResults = API.cards.attacks.chain();
// ignores cards without thumbnails
// TODO eventually remove
if (!stones.allCards.checked){
baseResultset = baseResultset.where((obj) => {return (!obj.gsx$thumb == '');});
creatureResults = creatureResults.where((obj) => {return (!obj.gsx$thumb == '');});
attackResults = attackResults.where((obj) => {return (!obj.gsx$thumb == '');});
}
// Search by name
if (stones.name.value) {
baseResultset = baseResultset.find({'$or': [
creatureResults = creatureResults.find({'$or': [
{'gsx$name': {'$regex': new RegExp(stones.name.value, 'i')}},
{'gsx$tags': {'$regex': new RegExp(stones.name.value, 'i')}}
]});
attackResults = attackResults.find({'$or': [
{'gsx$name': {'$regex': new RegExp(stones.name.value, 'i')}},
{'gsx$tags': {'$regex': new RegExp(stones.name.value, 'i')}}
]});
@@ -111,12 +136,12 @@ export default class CollectionHome extends React.Component {
}
}
if (tribesList.length > 0) {
baseResultset = baseResultset.find({'gsx$tribe': {'$or': tribesList} });
creatureResults = creatureResults.find({'gsx$tribe': {'$or': tribesList} });
}
// no elements
if (stones.noElements.checked) {
baseResultset = baseResultset.where((obj) => {return (obj.gsx$elements == '');});
creatureResults = creatureResults.where((obj) => {return (obj.gsx$elements == '');});
}
// Search by elements
else {
@@ -128,10 +153,10 @@ export default class CollectionHome extends React.Component {
}
if (elementsList.length > 0) {
if (this.swamp == "or") {
baseResultset = baseResultset.find({'gsx$elements': {'$or': elementsList} });
creatureResults = creatureResults.find({'gsx$elements': {'$or': elementsList} });
}
if (this.swamp == "and") {
baseResultset = baseResultset.find({'gsx$elements': {'$and': elementsList} });
creatureResults = creatureResults.find({'gsx$elements': {'$and': elementsList} });
}
}
}
@@ -143,7 +168,8 @@ export default class CollectionHome extends React.Component {
}
}
if (rarityList.length > 0) {
baseResultset = baseResultset.find({'gsx$rarity': {'$or': rarityList} });
creatureResults = creatureResults.find({'gsx$rarity': {'$or': rarityList} });
attackResults = attackResults.find({'gsx$rarity': {'$or': rarityList} });
}
let setsList = [];
@@ -153,7 +179,8 @@ export default class CollectionHome extends React.Component {
}
}
if (setsList.length > 0) {
baseResultset = baseResultset.find({'gsx$set': {'$or': setsList} });
creatureResults = creatureResults.find({'gsx$set': {'$or': setsList} });
attackResults = attackResults.find({'gsx$set': {'$or': setsList} });
}
let genderList = [];
@@ -163,19 +190,30 @@ export default class CollectionHome extends React.Component {
}
}
if (genderList.length > 0) {
baseResultset = baseResultset.find({'gsx$gender': {'$or': genderList} });
creatureResults = creatureResults.find({'gsx$gender': {'$or': genderList} });
}
let subtypesList = stones.subtypes.value.split(/[ ,]+/).filter(Boolean).map((item) => {
return ({'$regex': new RegExp(item, 'i')});
});
console.log(subtypesList);
if (subtypesList.length > 0) {
baseResultset = baseResultset.find({'gsx$types': {'$or': subtypesList} });
creatureResults = creatureResults.find({'gsx$types': {'$or': subtypesList} });
}
// Sort data descending alphabetically
let results = baseResultset.simplesort('gsx$name').data();
// Merge data
if (!this.type || this.type=="Creature") {
let temp = creatureResults.data()
temp.forEach(function(v){ delete v.$loki });
filter.insert(temp);
}
if (!this.type || this.type=="Attack") {
let temp = attackResults.data();
temp.forEach(function(v){ delete v.$loki });
filter.insert(temp);
}
let results = pview.data();
this.filter.removeCollection('filter');
if (results.length > 0) this.content = results;
else this.content = [{'text': 'No Results Found'}];
this.p = 1;
@@ -189,7 +227,16 @@ export default class CollectionHome extends React.Component {
return (
<div>
<form onSubmit={search}>
<label>Card Name:<input type="text" ref={(input) => stones.name = input} /></label>
<label>Name:<input type="text" ref={(input) => stones.name = input} /></label>
<br /><br />
<label>
Type:
<select onChange={(e) => {this.type = e.target.value}} >
<option value=""></option>
<option value="Attack">Attack</option>
<option value="Creature">Creature</option>
</select>
</label>
<br /><br />
<label>Subtypes:<input type="text" ref={(input) => stones.subtypes = input} /></label>
<br /><br />