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

hide stats options on cards

Browse Source
This commit is contained in:
Daniel 2021-11-01 12:20:29 -04:00
parent 94ee014aeb
commit 53beb76ba0
12 changed files with 76 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build/510.js
View File

File diff suppressed because one or more lines are too long

2
build/640.js
View File

@ -1 +1 @@
"use strict";(self.webpackChunkchaoticbackup=self.webpackChunkchaoticbackup||[]).push([[640],{8640:(e,t,n)=>{n.r(t),n.d(t,{default:()=>u});var a=n(7462),l=n(1721),r=n(7294),o=n(3727),c=n(2195),i=(n(2188),function(){return r.createElement("a",{href:"https://github.com/chaoticbackup",className:"name",rel:"noreferrer noopener",target:"_blank"},"Chaotic Backup Project")}),s=function(e){var t=e.block,n=e.text,a=e.sets;return r.createElement("div",{className:"lore"},r.createElement("div",{className:"block"},t),n.map((function(e,t){return r.createElement("div",{key:t,dangerouslySetInnerHTML:{__html:e}})})),a.map((function(e,t){if(e.text&&e.text.length>0)return r.createElement("div",{className:"set",key:t},r.createElement("div",{className:"title"},e.title),e.text.map((function(e,t){return r.createElement("div",{key:t},e)})))})))},u=function(e){function t(){for(var t,n=arguments.length,a=new Array(n),l=0;l<n;l++)a[l]=arguments[l];return(t=e.call.apply(e,[this].concat(a))||this).state={lore:[]},t}(0,l.Z)(t,e);var n=t.prototype;return n.componentDidMount=function(){var e=this;fetch("/public/json/starter_lore.json").then((function(e){return e.json()})).then((function(t){e.setState({lore:t})})).catch((function(){e.setState({lore:[{block:"Unable to load lore...",text:[]}]})}))},n.render=function(){return r.createElement("div",null,r.createElement("br",null),r.createElement("div",{className:"with-love"},r.createElement("div",null,"Welcome to the ",r.createElement(i,null),"."),r.createElement("span",null,"Built by fans for fans."),r.createElement("br",null),r.createElement("br",null),r.createElement("div",null,"Made with ",r.createElement("span",{className:"heart"},"♥")," by",r.createElement("br",null),"Danude Sandstorm (Project Lead)",r.createElement("br",null),"Chiodosin1 (Database Contributions)",r.createElement("br",null),"Afjak and Blitser (Art and Knowledge)"),r.createElement("div",null,"Do you like the site? You can donate to support it!"),r.createElement("div",{className:"donate"},r.createElement(c.U9,null)),r.createElement("div",{className:"lore"},"We were unsatisfied with the options on how to search for cards. I took the design of the old Chaotic website and added my own modernizations. With an extensive lists of search options in the ",r.createElement(o.rU,{to:"/collection"},"collection"),", you'll find deck building mores streamlined than ever before. Chaotic is full of rich lore, but unfortunately the best database of official lore disapeared when the ",r.createElement(o.rU,{to:"/portal"},"Portal to Perim")," disapeared along with the official site. You can again explore the official lore and information!"),r.createElement("br",null),this.state.lore.length>0?this.state.lore.map((function(e,t){return r.createElement(s,(0,a.Z)({key:t},e))})):"Loading lore entries..."))},t}(r.Component)}}]);
"use strict";(self.webpackChunkchaoticbackup=self.webpackChunkchaoticbackup||[]).push([[640],{8640:(e,t,n)=>{n.r(t),n.d(t,{default:()=>u});var a=n(7462),l=n(1721),r=n(7294),o=n(3727),c=n(2195),i=(n(2188),function(){return r.createElement("a",{href:"https://github.com/chaoticbackup",className:"name",rel:"noreferrer noopener",target:"_blank"},"Chaotic Backup Project")}),s=function(e){var t=e.block,n=e.text,a=e.sets;return r.createElement("div",{className:"lore"},r.createElement("div",{className:"block"},t),n.map((function(e,t){return r.createElement("div",{key:t,dangerouslySetInnerHTML:{__html:e}})})),a.map((function(e,t){if(e.text&&e.text.length>0)return r.createElement("div",{className:"set",key:t},r.createElement("div",{className:"title"},e.title),e.text.map((function(e,t){return r.createElement("div",{key:t},e)})))})))},u=function(e){function t(){for(var t,n=arguments.length,a=new Array(n),l=0;l<n;l++)a[l]=arguments[l];return(t=e.call.apply(e,[this].concat(a))||this).state={lore:[]},t}(0,l.Z)(t,e);var n=t.prototype;return n.componentDidMount=function(){var e=this;fetch("/public/json/starter_lore.json").then((function(e){return e.json()})).then((function(t){e.setState({lore:t})})).catch((function(){e.setState({lore:[{block:"Unable to load lore...",text:[]}]})}))},n.render=function(){return r.createElement("div",null,r.createElement("br",null),r.createElement("div",{className:"with-love"},r.createElement("div",null,"Welcome to the ",r.createElement(i,null),"."),r.createElement("span",null,"Built by fans for fans."),r.createElement("br",null),r.createElement("br",null),r.createElement("div",null,"Made with ",r.createElement("span",{className:"heart"},"♥")," by",r.createElement("br",null),"Danude Sandstorm (Project Lead)",r.createElement("br",null),"Chiodosin1 and IvanArial98 (Data Contributions)",r.createElement("br",null),"Blitser, Afjak, and Chiodosin1 (Art and Knowledge)"),r.createElement("div",null,"Do you like the site? You can donate to support it!"),r.createElement("div",{className:"donate"},r.createElement(c.U9,null)),r.createElement("div",{className:"lore"},"We were unsatisfied with the options on how to search for cards. I took the design of the old Chaotic website and added my own modernizations. With an extensive lists of search options in the ",r.createElement(o.rU,{to:"/collection"},"collection"),", you'll find deck building mores streamlined than ever before. Chaotic is full of rich lore, but unfortunately the best database of official lore disapeared when the ",r.createElement(o.rU,{to:"/portal"},"Portal to Perim")," disapeared along with the official site. You can again explore the official lore and information!"),r.createElement("br",null),this.state.lore.length>0?this.state.lore.map((function(e,t){return r.createElement(s,(0,a.Z)({key:t},e))})):"Loading lore entries..."))},t}(r.Component)}}]);

0
build/510.css → build/768.css
View File

1
build/768.js Normal file
View File

File diff suppressed because one or more lines are too long

2
build/main.js
View File

File diff suppressed because one or more lines are too long

2
build/vendor.js
View File

File diff suppressed because one or more lines are too long

43
src/components/collection/List.js
View File

@ -1,43 +0,0 @@
import React from 'react';
import { observable } from "mobx";
import { observer, inject } from 'mobx-react';
import Attack from './types/Attack';
import Battlegear from './types/Battlegear';
import Creature from './types/Creature';
import Location from './types/Location';
import Mugic from './types/Mugic';
@inject((stores, props, context) => props) @observer
export default class CardList extends React.Component {
setImage(img) {
if (this.props.ext == false)
this.props.setImage(img);
}
render() {
const { cards, ext, stats } = this.props;
if (cards.length == 1 && cards[0].text) {
return (
<div style={{ textAlign: 'left' }}>{cards[0].text}</div>
);
}
return cards.map((card, i) => {
switch (card.gsx$type) {
case "Attacks":
return (<Attack card={card} key={i} ext={ext} stats={stats} setImage={this.setImage.bind(this)}/>);
case "Battlegear":
return (<Battlegear card={card} key={i} ext={ext} stats={stats} setImage={this.setImage.bind(this)}/>);
case "Creatures":
return (<Creature card={card} key={i} ext={ext} stats={stats} setImage={this.setImage.bind(this)}/>);
case "Locations":
return (<Location card={card} key={i} ext={ext} stats={stats} setImage={this.setImage.bind(this)}/>);
case "Mugic":
return (<Mugic card={card} key={i} ext={ext} stats={stats} setImage={this.setImage.bind(this)}/>);
default:
return (<div key={i}>Invalid Card Type</div>);
}
});
}
}

48
src/components/collection/index.js
View File

@ -2,8 +2,8 @@ import React from 'react';
import API from '../SpreadsheetData';
import { observable, action } from "mobx";
import { observer, inject } from 'mobx-react';
import CardList from './List';
import SearchForm from './search/index.js';
import { Attack, Battlegear, Creature, Location, Mugic } from './types';
import './collection.scss';
// https://mobx.js.org/refguide/object.html
@ -40,6 +40,7 @@ export default class Home extends React.Component {
@observable p = 1;
@observable ext = false;
@observable stats = "avg";
@observable hideStats = false;
@observable content = [];
@observable card_img = API.card_back;
@observable fixedStyles;
@ -54,6 +55,10 @@ export default class Home extends React.Component {
if (stats == "min") this.stats = "min";
if (stats == "max") this.stats = "max";
}
const hideStats = localStorage.getItem('hideStats');
this.hideStats = (!!hideStats && hideStats !== "false");
this.formRef = React.createRef();
}
@ -89,6 +94,11 @@ export default class Home extends React.Component {
localStorage.setItem("stats", this.stats);
}
setHideStats = () => {
this.hideStats = !this.hideStats;
localStorage.setItem("hideStats", this.hideStats);
}
handleScroll = (event) => {
event.preventDefault();
@ -157,6 +167,10 @@ export default class Home extends React.Component {
<div className="right" onClick={this.handleOutOfForm}>
<div className="list-nav-top">
{this.navigation()}
<div>
<label htmlFor="hide-stats">Hide Stats</label><br />
<input type="checkbox" id="hide-stats" checked={this.hideStats} onChange={this.setHideStats}></input>
</div>
<button className="stats-button" onClick={this.setStats}>
{this.stats == "min" && "Min Stats"}
{this.stats == "avg" && "Average Stats"}
@ -167,7 +181,13 @@ export default class Home extends React.Component {
</button>
</div>
<br />
<CardList ext={this.ext} stats={this.stats} cards={this.content.slice(this.n * (this.p-1), this.n * this.p)} setImage={this.setImage}/>
<CardList
cards={this.content.slice(this.n * (this.p-1), this.n * this.p)}
setImage={this.setImage}
ext={this.ext}
stats={this.stats}
hideStats={this.hideStats}
/>
<br />
{this.navigation()}
</div>
@ -204,6 +224,30 @@ export default class Home extends React.Component {
}
}
const CardList = ({ cards, ...props }) => {
if (cards.length == 1 && cards[0].text) {
return (
<div style={{ textAlign: 'left' }}>{cards[0].text}</div>
);
}
return cards.map((card, i) => {
switch (card.gsx$type) {
case "Attacks":
return (<Attack card={card} key={i} {...props}/>);
case "Battlegear":
return (<Battlegear card={card} key={i} {...props}/>);
case "Creatures":
return (<Creature card={card} key={i} {...props}/>);
case "Locations":
return (<Location card={card} key={i} {...props}/>);
case "Mugic":
return (<Mugic card={card} key={i} {...props}/>);
default:
return (<div key={i}>Invalid Card Type</div>);
}
});
};
@observer
class imgbase extends React.Component {
@observable display = false;

22
src/components/collection/types/Creature.js
View File

@ -7,7 +7,7 @@ import { FlavorText, Rarity, Unique, Name, Element, Mugic, Discipline, Ability,
export default class Creature extends React.Component {
render() {
const { card, stats } = this.props;
const { card, stats, hideStats } = this.props;
const mugic = [];
for (let i = 0; i < card.gsx$mugicability; i++) {
@ -42,6 +42,8 @@ export default class Creature extends React.Component {
return Number(energy);
};
console.log(this.props);
if (this.props.ext == false) return (
<div className="card creature">
<img className="thumb" style={{ float: 'left' }} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
@ -97,15 +99,17 @@ export default class Creature extends React.Component {
<div className="fullcard">
{/* style={{ backgroundImage: `url("${API.cardImage(card)}")` }} */}
<img src={API.cardImage(card)} />
<div className="image-cover" >
<div>
<span key="courage" {...(stat_range(card.gsx$courage, card.gsx$name) >= 100 ? { className: "long" } : null)}>{stat_range(card.gsx$courage, card.gsx$name)}</span>
<span key="power" {...(stat_range(card.gsx$power, card.gsx$name) >= 100 ? { className: "long" } : null)}>{stat_range(card.gsx$power, card.gsx$name)}</span>
<span key="wisdom" {...(stat_range(card.gsx$wisdom, card.gsx$name) >= 100 ? { className: "long" } : null)}>{stat_range(card.gsx$wisdom, card.gsx$name)}</span>
<span key="speed" {...(stat_range(card.gsx$speed, card.gsx$name) >= 100 ? { className: "long" } : null)}>{stat_range(card.gsx$speed, card.gsx$name)}</span>
<span key="energy" {...(energy_range(card.gsx$energy, card.gsx$name) >= 100 ? { className: "long" } : null)}>{energy_range(card.gsx$energy, card.gsx$name)}</span>
{!hideStats && (
<div className="image-cover" >
<div>
<span key="courage" {...(stat_range(card.gsx$courage, card.gsx$name) >= 100 ? { className: "long" } : null)}>{stat_range(card.gsx$courage, card.gsx$name)}</span>
<span key="power" {...(stat_range(card.gsx$power, card.gsx$name) >= 100 ? { className: "long" } : null)}>{stat_range(card.gsx$power, card.gsx$name)}</span>
<span key="wisdom" {...(stat_range(card.gsx$wisdom, card.gsx$name) >= 100 ? { className: "long" } : null)}>{stat_range(card.gsx$wisdom, card.gsx$name)}</span>
<span key="speed" {...(stat_range(card.gsx$speed, card.gsx$name) >= 100 ? { className: "long" } : null)}>{stat_range(card.gsx$speed, card.gsx$name)}</span>
<span key="energy" {...(energy_range(card.gsx$energy, card.gsx$name) >= 100 ? { className: "long" } : null)}>{energy_range(card.gsx$energy, card.gsx$name)}</span>
</div>
</div>
</div>
)}
</div>
<div className="right" >
<Name name={card.gsx$name} />

15
src/components/collection/types/Mugic.js
View File

@ -1,30 +1,29 @@
import React from 'react';
import API from '../../SpreadsheetData';
import { observer, inject } from 'mobx-react';
import { FlavorText, Rarity, Unique, Name, Mugic, Ability, Tribe } from '../../Snippets';
import { FlavorText, Rarity, Unique, Name, Mugic as MugicCounter, Ability, Tribe } from '../../Snippets';
import MugicPlay from '../../mugicplayer/playbutton.tsx';
import { withRouter } from 'react-router';
@inject((stores, props, context) => props) @observer
class Attack extends React.Component {
export default class Mugic extends React.Component {
render() {
const { card, history } = this.props;
const mugicCounters = [];
if (card.gsx$cost == 0) {
mugicCounters.push(<Mugic tribe={card.gsx$tribe} key={0} amount={"0"}/>);
mugicCounters.push(<MugicCounter tribe={card.gsx$tribe} key={0} amount={"0"}/>);
}
else if (card.gsx$cost.toLowerCase() == 'x') {
mugicCounters.push(<Mugic tribe={card.gsx$tribe} key={0} amount={"x"}/>);
mugicCounters.push(<MugicCounter tribe={card.gsx$tribe} key={0} amount={"x"}/>);
}
else {
if (card.gsx$cost > 5) {
mugicCounters.push(<Mugic tribe={card.gsx$tribe} key={0} amount={card.gsx$cost} />);
mugicCounters.push(<MugicCounter tribe={card.gsx$tribe} key={0} amount={card.gsx$cost} />);
}
else {
for (let i = 0; i < card.gsx$cost; i++) {
mugicCounters.push(<Mugic tribe={card.gsx$tribe} key={i} />);
mugicCounters.push(<MugicCounter tribe={card.gsx$tribe} key={i} />);
}
}
}
@ -63,5 +62,3 @@ class Attack extends React.Component {
}
}
export default withRouter(Attack);

5
src/components/collection/types/index.js Normal file
View File

@ -0,0 +1,5 @@
export { default as Attack } from './Attack';
export { default as Battlegear } from './Battlegear';
export { default as Creature } from './Creature';
export { default as Location } from './Location';
export { default as Mugic } from './Mugic';

4
src/components/home/index.js
View File

@ -56,8 +56,8 @@ export default class Home extends React.Component {
<br /><br />
<div>Made with <span className="heart">♥</span> by
<br />Danude Sandstorm (Project Lead)
<br />Chiodosin1 (Database Contributions)
<br />Afjak and Blitser (Art and Knowledge)
<br />Chiodosin1 and IvanArial98 (Data Contributions)
<br />Blitser, Afjak, and Chiodosin1 (Art and Knowledge)
</div>
<div>Do you like the site? You can donate to support it!</div>
<div className="donate"><Donate /></div>