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

refactored code

Browse Source
This commit is contained in:
Daniel 2017-11-24 16:58:40 -05:00
parent 81a4e0dd8d
commit fb7ac94ab6
5 changed files with 282 additions and 268 deletions
Show Stats 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

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

@ -1,26 +1,21 @@
import React from 'react';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import PageNotFound from '../PageNotFound';
import API from '../SpreadsheetData';
import s from '../../styles/app.style';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import Creature from './Creature';
import Attack from './Attack';
import loki from 'lokijs';
import SearchForm from './Search';
@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");
handleContent(content) {
this.content = content;
this.p = 1;
}
render() {
@ -79,7 +74,7 @@ export default class CollectionHome extends React.Component {
.
</p>
<hr />
{this.searchForm()}
<SearchForm handleContent={this.handleContent.bind(this)} />
<hr />
{this.navigation()}<br />
{output()}
@ -88,247 +83,6 @@ export default class CollectionHome extends React.Component {
);
}
searchForm() {
let stones = {};
let tribes = {};
let elements = {};
let rarity = {};
let sets = {};
let gender = {};
let mc = {};
// TODO advanced filters
let search = (e) => {
e.preventDefault();
e.stopPropagation();
// 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){
creatureResults = creatureResults.where((obj) => {return (!obj.gsx$thumb == '');});
attackResults = attackResults.where((obj) => {return (!obj.gsx$thumb == '');});
}
// Search by name
if (stones.name.value) {
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')}},
]});
}
if (stones.text.value) {
creatureResults = creatureResults.find({'$or': [
{'gsx$tags': {'$regex': new RegExp(stones.text.value, 'i')}},
{'gsx$ability': {'$regex': new RegExp(stones.text.value, 'i')}},
{'gsx$flavortext': {'$regex': new RegExp(stones.text.value, 'i')}},
{'gsx$brainwashedability': {'$regex': new RegExp(stones.text.value, 'i')}}
]});
attackResults = attackResults.find({'$or': [
{'gsx$tags': {'$regex': new RegExp(stones.text.value, 'i')}},
{'gsx$ability': {'$regex': new RegExp(stones.text.value, 'i')}},
{'gsx$flavortext': {'$regex': new RegExp(stones.text.value, 'i')}}
]});
}
// Search by tribe
let tribesList = [];
for (const tribe in tribes) {
if (tribes[tribe].checked) {
tribesList.push({'$regex': new RegExp(tribe, 'i')});
}
}
if (tribesList.length > 0) {
creatureResults = creatureResults.find({'gsx$tribe': {'$or': tribesList} });
}
// no elements
if (stones.noElements.checked) {
creatureResults = creatureResults.where((obj) => {return (obj.gsx$elements == '');});
attackResults = attackResults.where(
(obj) => {return (obj.gsx$fire == ('') );}
).where(
(obj) => {return (obj.gsx$air == ('') );}
).where(
(obj) => {return (obj.gsx$earth == ('') );}
).where(
(obj) => {return (obj.gsx$water == ('') );}
);
}
// Search by elements
else {
let elementsList = [];
for (const element in elements) {
if (elements[element].checked) {
elementsList.push({'$regex': new RegExp(element, 'i')});
}
}
let elementsList2 = [{'gsx$fire': {'$gte': 0}}, {'gsx$air': {'$gte': 0}}, {'gsx$earth': {'$gte': 0}}, {'gsx$water': {'$gte': 0}}]
if (elementsList.length > 0) {
if (this.swamp == "or") {
creatureResults = creatureResults.find({'gsx$elements': {'$or': elementsList} });
attackResults = attackResults.find({'$or': elementsList2});
}
if (this.swamp == "and") {
creatureResults = creatureResults.find({'gsx$elements': {'$and': elementsList} });
attackResults = attackResults.find({'$and': elementsList2});
}
}
}
let rarityList = [];
for (const key in rarity) {
if (rarity[key].checked) {
rarityList.push({'$eq': key});
}
}
if (rarityList.length > 0) {
creatureResults = creatureResults.find({'gsx$rarity': {'$or': rarityList} });
attackResults = attackResults.find({'gsx$rarity': {'$or': rarityList} });
}
let setsList = [];
for (const key in sets) {
if (sets[key].checked) {
setsList.push({'$eq': key});
}
}
if (setsList.length > 0) {
creatureResults = creatureResults.find({'gsx$set': {'$or': setsList} });
attackResults = attackResults.find({'gsx$set': {'$or': setsList} });
}
let genderList = [];
for (const key in gender) {
if (gender[key].checked) {
genderList.push({'$regex': new RegExp(key, 'i')})
}
}
if (genderList.length > 0) {
creatureResults = creatureResults.find({'gsx$gender': {'$or': genderList} });
}
let subtypesList = stones.subtypes.value.split(/[ ,]+/).filter(Boolean).map((item) => {
return ({'$regex': new RegExp(item, 'i')});
});
if (subtypesList.length > 0) {
creatureResults = creatureResults.find({'gsx$types': {'$or': subtypesList} });
}
console.log(mc);
if (mc.min.value > 0) {
creatureResults = creatureResults.find({'gsx$mugicability': {'$gte': mc.min.value}});
}
if (mc.max.value > 0 && mc.max.value >= mc.min.value) {
creatureResults = creatureResults.find({'gsx$mugicability': {'$lte': mc.max.value}});
}
// 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;
}
let setsInput = [];
for (const key in API.sets) {
setsInput.push(<label key={key}><input type="checkbox" ref={(input) => sets[key] = input} />{API.sets[key]}</label>);
}
return (
<div>
<form onSubmit={search}>
<label>Name: <input type="text" ref={(input) => stones.name = input} /></label>&nbsp;&nbsp;
<label>Text: <input type="text" ref={(input) => stones.text = input} /></label>
<br /><br />
<label>
Type:&nbsp;
<select onChange={(e) => {this.type = e.target.value}} >
<option value=""></option>
<option value="Attack">Attack</option>
<option value="Creature">Creature</option>
</select>
</label>&nbsp;&nbsp;
<label>Subtypes: <input type="text" ref={(input) => stones.subtypes = input} /></label>
<br /><br />
<div>
<input type="checkbox" ref={(input) => tribes.danian = input}/><img height="16" className="icon" src={"/src/img/icons/tribes/danian.png"} />&nbsp;
<input type="checkbox" ref={(input) => tribes.mipedian = input}/><img height="16" className="icon" src={"/src/img/icons/tribes/mipedian.png"} />&nbsp;
<input type="checkbox" ref={(input) => tribes.overworld = input}/><img height="16" className="icon" src={"/src/img/icons/tribes/overworld.png"} />&nbsp;
<input type="checkbox" ref={(input) => tribes.underworld = input}/><img height="16" className="icon" src={"/src/img/icons/tribes/underworld.png"} />&nbsp;
<input type="checkbox" ref={(input) => tribes["m'arrillian"] = input}/><img height="16" className="icon" src={"/src/img/icons/tribes/m'arrillian.png"} />&nbsp;
<input type="checkbox" ref={(input) => tribes.generic = input}/><img height="16" className="icon" src={"/src/img/icons/tribes/generic.png"} />
</div>
<br />
<div>
<input type="button" value={this.swamp} onClick={(e)=>{this.swamp = (this.swamp == "or" ? "and" : "or"); e.target.value = this.swamp;}}/>
<input type="checkbox" ref={(input) => elements.fire = input}/><img height="16" className="icon" src={"/src/img/icons/elements/fire.png"} />&nbsp;
<input type="checkbox" ref={(input) => elements.air = input}/><img height="16" className="icon" src={"/src/img/icons/elements/air.png"} />&nbsp;
<input type="checkbox" ref={(input) => elements.earth = input}/><img height="16" className="icon" src={"/src/img/icons/elements/earth.png"} />&nbsp;
<input type="checkbox" ref={(input) => elements.water = input}/><img height="16" className="icon" src={"/src/img/icons/elements/water.png"} />&nbsp;
<input type="checkbox" ref={(input) => stones.noElements = input}/><span>No Elements</span>
</div>
<br />
<div>
<label><input type="checkbox" ref={(input) => rarity["Common"] = input}/>Common</label>&nbsp;
<label><input type="checkbox" ref={(input) => rarity["Uncommon"] = input}/>Uncommon</label>&nbsp;
<label><input type="checkbox" ref={(input) => rarity["Rare"] = input}/>Rare</label>&nbsp;
<label><input type="checkbox" ref={(input) => rarity["Super Rare"] = input}/>Super Rare</label>&nbsp;
<label><input type="checkbox" ref={(input) => rarity["Ultra Rare"] = input}/>Ultra Rare</label>&nbsp;
<label><input type="checkbox" ref={(input) => rarity["Promo"] = input}/>Promo</label>
</div>
<br />
<div>{setsInput}</div>
<br />
<div>
<label>Min Mugic Counters: <input type="text" style={{width: '20px'}} ref={(input) => mc.min = input} /></label>&nbsp;
<label>Max Mugic Counters: <input type="text" style={{width: '20px'}} ref={(input) => mc.max = input} /></label>
</div>
<br />
<div>
<label><input type="checkbox" ref={(input) => gender.Ambiguous = input}/>Ambiguous</label>&nbsp;
<label><input type="checkbox" ref={(input) => gender.Female = input}/>Female</label>&nbsp;
<label><input type="checkbox" ref={(input) => gender.Male = input}/>Male</label>
</div>
<br />
<p>
Since not all data has been entered not all cards are listed,<br />
to see incomplete cards, click&nbsp;
<label>"Show all cards":<input type="checkbox" ref={(input) => stones.allCards = input}/></label>
</p>
<br />
<input type="submit" value="Search" />&nbsp;&nbsp;<input type="button" disabled value="Reset" />
</form>
</div>
);
}
navigation() {
let numpages = Math.ceil(this.content.length / this.n);

260
src/components/collection/Search.js Normal file
View File

@ -0,0 +1,260 @@
import React from 'react';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import PageNotFound from '../PageNotFound';
import API from '../SpreadsheetData';
import s from '../../styles/app.style';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import Creature from './Creature';
import Attack from './Attack';
import loki from 'lokijs';
@inject((stores, props, context) => props) @observer
export default class SearchForm extends React.Component {
type = "";
swamp = "or";
stones = {};
tribes = {};
elements = {};
rarity = {};
sets = {};
gender = {};
mc = {};
constructor() {
super();
this.filter = new loki("filter.db");
}
render() {
let setsInput = [];
for (const key in API.sets) {
setsInput.push(<label key={key}><input type="checkbox" ref={(input) => this.sets[key] = input} />{API.sets[key]}</label>);
}
return (
<div>
<form onSubmit={this.search}>
<label>Name: <input type="text" ref={(input) => this.stones.name = input} /></label>&nbsp;&nbsp;
<label>Text: <input type="text" ref={(input) => this.stones.text = input} /></label>
<br /><br />
<label>
Type:&nbsp;
<select onChange={(e) => {this.type = e.target.value}} >
<option value=""></option>
<option value="Attack">Attack</option>
<option value="Creature">Creature</option>
</select>
</label>&nbsp;&nbsp;
<label>Subtypes: <input type="text" ref={(input) => this.stones.subtypes = input} /></label>
<br /><br />
<div>
<input type="checkbox" ref={(input) => this.tribes.danian = input}/><img height="16" className="icon" src={"/src/img/icons/tribes/danian.png"} />&nbsp;
<input type="checkbox" ref={(input) => this.tribes.mipedian = input}/><img height="16" className="icon" src={"/src/img/icons/tribes/mipedian.png"} />&nbsp;
<input type="checkbox" ref={(input) => this.tribes.overworld = input}/><img height="16" className="icon" src={"/src/img/icons/tribes/overworld.png"} />&nbsp;
<input type="checkbox" ref={(input) => this.tribes.underworld = input}/><img height="16" className="icon" src={"/src/img/icons/tribes/underworld.png"} />&nbsp;
<input type="checkbox" ref={(input) => this.tribes["m'arrillian"] = input}/><img height="16" className="icon" src={"/src/img/icons/tribes/m'arrillian.png"} />&nbsp;
<input type="checkbox" ref={(input) => this.tribes.generic = input}/><img height="16" className="icon" src={"/src/img/icons/tribes/generic.png"} />
</div>
<br />
<div>
<input type="button" value={this.swamp} onClick={(e)=>{this.swamp = (this.swamp == "or" ? "and" : "or"); e.target.value = this.swamp;}}/>
<input type="checkbox" ref={(input) => this.elements.fire = input}/><img height="16" className="icon" src={"/src/img/icons/elements/fire.png"} />&nbsp;
<input type="checkbox" ref={(input) => this.elements.air = input}/><img height="16" className="icon" src={"/src/img/icons/elements/air.png"} />&nbsp;
<input type="checkbox" ref={(input) => this.elements.earth = input}/><img height="16" className="icon" src={"/src/img/icons/elements/earth.png"} />&nbsp;
<input type="checkbox" ref={(input) => this.elements.water = input}/><img height="16" className="icon" src={"/src/img/icons/elements/water.png"} />&nbsp;
<input type="checkbox" ref={(input) => this.stones.noElements = input}/><span>No Elements</span>
</div>
<br />
<div>
<label><input type="checkbox" ref={(input) => this.rarity["Common"] = input}/>Common</label>&nbsp;
<label><input type="checkbox" ref={(input) => this.rarity["Uncommon"] = input}/>Uncommon</label>&nbsp;
<label><input type="checkbox" ref={(input) => this.rarity["Rare"] = input}/>Rare</label>&nbsp;
<label><input type="checkbox" ref={(input) => this.rarity["Super Rare"] = input}/>Super Rare</label>&nbsp;
<label><input type="checkbox" ref={(input) => this.rarity["Ultra Rare"] = input}/>Ultra Rare</label>&nbsp;
<label><input type="checkbox" ref={(input) => this.rarity["Promo"] = input}/>Promo</label>
</div>
<br />
<div>{setsInput}</div>
<br />
<div>
<label>Min Mugic Counters: <input type="text" style={{width: '20px'}} ref={(input) => this.mc.min = input} /></label>&nbsp;
<label>Max Mugic Counters: <input type="text" style={{width: '20px'}} ref={(input) => this.mc.max = input} /></label>
</div>
<br />
<div>
<label><input type="checkbox" ref={(input) => this.gender.Ambiguous = input}/>Ambiguous</label>&nbsp;
<label><input type="checkbox" ref={(input) => this.gender.Female = input}/>Female</label>&nbsp;
<label><input type="checkbox" ref={(input) => this.gender.Male = input}/>Male</label>
</div>
<br />
<p>
Since not all data has been entered not all cards are listed,<br />
to see incomplete cards, click&nbsp;
<label>"Show all cards":<input type="checkbox" ref={(input) => this.stones.allCards = input}/></label>
</p>
<br />
<input type="submit" value="Search" />&nbsp;&nbsp;<input type="button" disabled value="Reset" />
</form>
</div>
);
}
// TODO advanced filters
search = (e) => {
e.preventDefault();
e.stopPropagation();
// 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 (!this.stones.allCards.checked){
creatureResults = creatureResults.where((obj) => {return (!obj.gsx$thumb == '');});
attackResults = attackResults.where((obj) => {return (!obj.gsx$thumb == '');});
}
// Search by name
if (this.stones.name.value) {
creatureResults = creatureResults.find({'$or': [
{'gsx$name': {'$regex': new RegExp(this.stones.name.value, 'i')}},
{'gsx$tags': {'$regex': new RegExp(this.stones.name.value, 'i')}}
]});
attackResults = attackResults.find({'$or': [
{'gsx$name': {'$regex': new RegExp(this.stones.name.value, 'i')}},
{'gsx$tags': {'$regex': new RegExp(this.stones.name.value, 'i')}},
]});
}
if (this.stones.text.value) {
creatureResults = creatureResults.find({'$or': [
{'gsx$tags': {'$regex': new RegExp(this.stones.text.value, 'i')}},
{'gsx$ability': {'$regex': new RegExp(this.stones.text.value, 'i')}},
{'gsx$flavortext': {'$regex': new RegExp(this.stones.text.value, 'i')}},
{'gsx$brainwashedability': {'$regex': new RegExp(this.stones.text.value, 'i')}}
]});
attackResults = attackResults.find({'$or': [
{'gsx$tags': {'$regex': new RegExp(this.stones.text.value, 'i')}},
{'gsx$ability': {'$regex': new RegExp(this.stones.text.value, 'i')}},
{'gsx$flavortext': {'$regex': new RegExp(this.stones.text.value, 'i')}}
]});
}
// Search by tribe
let tribesList = [];
for (const tribe in this.tribes) {
if (this.tribes[tribe].checked) {
tribesList.push({'$regex': new RegExp(tribe, 'i')});
}
}
if (tribesList.length > 0) {
creatureResults = creatureResults.find({'gsx$tribe': {'$or': tribesList} });
}
// no elements
if (this.stones.noElements.checked) {
creatureResults = creatureResults.where((obj) => {return (obj.gsx$elements == '');});
attackResults = attackResults.where(
(obj) => {return (obj.gsx$fire == ('') );}
).where(
(obj) => {return (obj.gsx$air == ('') );}
).where(
(obj) => {return (obj.gsx$earth == ('') );}
).where(
(obj) => {return (obj.gsx$water == ('') );}
);
}
// Search by elements
else {
let elementsList = [];
for (const element in this.elements) {
if (this.elements[element].checked) {
elementsList.push({'$regex': new RegExp(element, 'i')});
}
}
let elementsList2 = [{'gsx$fire': {'$gte': 0}}, {'gsx$air': {'$gte': 0}}, {'gsx$earth': {'$gte': 0}}, {'gsx$water': {'$gte': 0}}]
if (elementsList.length > 0) {
if (this.swamp == "or") {
creatureResults = creatureResults.find({'gsx$elements': {'$or': elementsList} });
attackResults = attackResults.find({'$or': elementsList2});
}
if (this.swamp == "and") {
creatureResults = creatureResults.find({'gsx$elements': {'$and': elementsList} });
attackResults = attackResults.find({'$and': elementsList2});
}
}
}
let rarityList = [];
for (const key in this.rarity) {
if (this.rarity[key].checked) {
rarityList.push({'$eq': key});
}
}
if (rarityList.length > 0) {
creatureResults = creatureResults.find({'gsx$rarity': {'$or': rarityList} });
attackResults = attackResults.find({'gsx$rarity': {'$or': rarityList} });
}
let setsList = [];
for (const key in this.sets) {
if (this.sets[key].checked) {
setsList.push({'$eq': key});
}
}
if (setsList.length > 0) {
creatureResults = creatureResults.find({'gsx$set': {'$or': setsList} });
attackResults = attackResults.find({'gsx$set': {'$or': setsList} });
}
let genderList = [];
for (const key in this.gender) {
if (this.gender[key].checked) {
genderList.push({'$regex': new RegExp(key, 'i')})
}
}
if (genderList.length > 0) {
creatureResults = creatureResults.find({'gsx$gender': {'$or': genderList} });
}
let subtypesList = this.stones.subtypes.value.split(/[ ,]+/).filter(Boolean).map((item) => {
return ({'$regex': new RegExp(item, 'i')});
});
if (subtypesList.length > 0) {
creatureResults = creatureResults.find({'gsx$types': {'$or': subtypesList} });
}
if (this.mc.min.value > 0) {
creatureResults = creatureResults.find({'gsx$mugicability': {'$gte': this.mc.min.value}});
}
if (this.mc.max.value > 0 && this.mc.max.value >= this.mc.min.value) {
creatureResults = creatureResults.find({'gsx$mugicability': {'$lte': this.mc.max.value}});
}
// 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.props.handleContent(results);
else this.props.handleContent([{'text': 'No Results Found'}]);
}
}

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

@ -56,7 +56,7 @@ export default class SingleCreature extends React.Component {
if (!creature) {
return(<PageNotFound location={this.props.location}/>);
}
const card_data = store.cards.creatures.findOne({'gsx$name': name});
const locations = creature.gsx$location.split(/[,]+\s*/).map((item, i) => {
@ -128,7 +128,7 @@ export default class SingleCreature extends React.Component {
<hr />
<div>
<strong>Card ID: </strong>
{card_data.gsx$cardid}
{card_data.gsx$id}
</div>
<hr />
<div>

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

@ -82,7 +82,7 @@ export default class SingleMugic extends React.Component {
<hr />
<div>
<strong>Card ID: </strong>
{card_data.gsx$cardid}
{card_data.gsx$id}
</div>
<hr />
<div>