mirror of
https://github.com/chaoticbackup/chaoticbackup.github.io.git
synced 2026-03-21 17:24:14 -05:00
update dependencies; fix linting
This commit is contained in:
Daniel
parent
115a1aff46
commit
6c5f1dd5a4
53
.eslintrc.js
Normal file
53
.eslintrc.js
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
module.exports = exports = {
|
||||
"root": true,
|
||||
"parser": "babel-eslint",
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:react/recommended"
|
||||
],
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es6": true,
|
||||
"node": true,
|
||||
"amd": true
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 8,
|
||||
"sourceType": "module",
|
||||
"ecmaFeatures": {
|
||||
"modules": true,
|
||||
"jsx": true,
|
||||
"experimentalObjectRestSpread": true,
|
||||
"legacyDecorators": true
|
||||
}
|
||||
},
|
||||
"rules": {
|
||||
"import/no-extraneous-dependencies": ["error", {"devDependencies": ["./webpack.config.babel.js"]}],
|
||||
"react/forbid-prop-types": "off",
|
||||
"react/jsx-filename-extension": "off",
|
||||
"react/no-unescaped-entities": "off",
|
||||
"react/prop-types": "off",
|
||||
"react/display-name": "off",
|
||||
"no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true }],
|
||||
"no-plusplus": "off",
|
||||
"no-prototype-builtins": "off",
|
||||
"object-curly-spacing": "off",
|
||||
"object-curly-newline": "off",
|
||||
"linebreak-style": "off",
|
||||
"eqeqeq": "off",
|
||||
"dot-notation": "off",
|
||||
"no-unused-vars": ["warn", { "argsIgnorePattern": "props|context|e", "varsIgnorePattern": "s" }],
|
||||
"no-undef": "error",
|
||||
"no-useless-escape": "off"
|
||||
},
|
||||
"settings": {
|
||||
"react": {
|
||||
"version": require('./package.json').dependencies.react
|
||||
}
|
||||
},
|
||||
"plugins": [
|
||||
"react",
|
||||
"import",
|
||||
"react-hooks"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
{
|
||||
"root": true,
|
||||
"parser": "babel-eslint",
|
||||
"extends": "airbnb",
|
||||
"env": {
|
||||
"browser": true
|
||||
},
|
||||
"rules": {
|
||||
"no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true }],
|
||||
"no-plusplus": "off",
|
||||
"import/no-extraneous-dependencies": ["error", {"devDependencies": ["./webpack.config.babel.js"]}],
|
||||
"react/forbid-prop-types": "off",
|
||||
"react/jsx-filename-extension": "off",
|
||||
"object-curly-spacing": "off",
|
||||
"object-curly-newline": "off",
|
||||
"no-unused-vars": "off",
|
||||
"linebreak-style": "off"
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaFeatures": {
|
||||
"experimentalObjectRestSpread": true
|
||||
}
|
||||
},
|
||||
"plugins": [
|
||||
"react"
|
||||
]
|
||||
}
|
||||
15
jsconfig.json
Normal file
15
jsconfig.json
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"target": "esnext",
|
||||
"experimentalDecorators": true,
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
],
|
||||
"exclude": [
|
||||
"./build/*",
|
||||
"./node_modules/*"
|
||||
]
|
||||
}
|
||||
2014
package-lock.json
generated
2014
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
63
package.json
63
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "chaoticbackup",
|
||||
"version": "2.0.0",
|
||||
"version": "2.1.0",
|
||||
"description": "Chaotic Backup",
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server -d --inline",
|
||||
|
|
@ -13,51 +13,50 @@
|
|||
"author": "Danude Sandstorm",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"lokijs": "^1.5.6",
|
||||
"mobx": "^5.11.0",
|
||||
"lokijs": "^1.5.7",
|
||||
"mobx": "^5.13.0",
|
||||
"mobx-react": "^5.4.4",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.6",
|
||||
"react": "^16.9.0",
|
||||
"react-collapsible": "^2.6.0",
|
||||
"react-digit-input": "^1.0.0",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-interactive": "^0.8.3",
|
||||
"react-onclickoutside": "^6.8.0",
|
||||
"react-dom": "^16.9.0",
|
||||
"react-interactive": "^0.9.0",
|
||||
"react-onclickoutside": "^6.9.0",
|
||||
"react-process-string": "^1.2.0",
|
||||
"react-router": "^5.0.1",
|
||||
"react-router-dom": "^5.0.1",
|
||||
"react-router": "^5.1.0",
|
||||
"react-router-dom": "^5.1.0",
|
||||
"universal-cookie": "^4.0.2",
|
||||
"whatwg-fetch": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.5.0",
|
||||
"@babel/core": "^7.5.4",
|
||||
"@babel/node": "^7.5.0",
|
||||
"@babel/plugin-proposal-class-properties": "^7.5.0",
|
||||
"@babel/plugin-proposal-decorators": "^7.2.3",
|
||||
"@babel/plugin-transform-runtime": "^7.5.0",
|
||||
"@babel/polyfill": "^7.2.5",
|
||||
"@babel/preset-env": "^7.5.4",
|
||||
"@babel/cli": "^7.6.2",
|
||||
"@babel/core": "^7.6.2",
|
||||
"@babel/node": "^7.6.2",
|
||||
"@babel/plugin-proposal-class-properties": "^7.5.5",
|
||||
"@babel/plugin-proposal-decorators": "^7.6.0",
|
||||
"@babel/plugin-transform-runtime": "^7.6.2",
|
||||
"@babel/polyfill": "^7.6.0",
|
||||
"@babel/preset-env": "^7.6.2",
|
||||
"@babel/preset-flow": "^7.0.0",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@babel/register": "^7.0.0",
|
||||
"@babel/runtime": "^7.5.4",
|
||||
"babel-eslint": "^10.0.2",
|
||||
"@babel/register": "^7.6.2",
|
||||
"@babel/runtime": "^7.6.2",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"babel-loader": "^8.0.5",
|
||||
"css-loader": "^3.0.0",
|
||||
"eslint": "^6.0.1",
|
||||
"eslint-config-airbnb": "^17.1.1",
|
||||
"eslint-plugin-import": "^2.18.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.2.3",
|
||||
"eslint-plugin-react": "^7.14.2",
|
||||
"css-loader": "^3.2.0",
|
||||
"eslint": "^6.4.0",
|
||||
"eslint-plugin-import": "^2.18.2",
|
||||
"eslint-plugin-react": "^7.14.3",
|
||||
"eslint-plugin-react-hooks": "^2.0.1",
|
||||
"mini-css-extract-plugin": "^0.8.0",
|
||||
"node-sass": "^4.12.0",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
||||
"sass-loader": "^7.0.x",
|
||||
"style-loader": "^0.23.1",
|
||||
"uglifyjs-webpack-plugin": "^2.1.3",
|
||||
"webpack": "^4.36.1",
|
||||
"webpack-cli": "^3.3.6",
|
||||
"webpack-dev-server": "^3.7.2"
|
||||
"sass-loader": "^7.3.1",
|
||||
"style-loader": "^1.0.0",
|
||||
"uglifyjs-webpack-plugin": "^2.2.0",
|
||||
"webpack": "^4.41.0",
|
||||
"webpack-cli": "^3.3.9",
|
||||
"webpack-dev-server": "^3.8.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,23 @@
|
|||
import React from 'react';
|
||||
import { Route, Link } from 'react-router-dom';
|
||||
import {Link} from 'react-router-dom';
|
||||
import {Donate} from './Snippets';
|
||||
import "../scss/home.scss";
|
||||
|
||||
const GithubLink = () => (
|
||||
<a
|
||||
href="https://github.com/chaoticbackup" className="name"
|
||||
rel='noreferrer noopener' target="_blank"
|
||||
>
|
||||
Chaotic Backup Project
|
||||
</a>
|
||||
);
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div>
|
||||
<br />
|
||||
<div className="with-love">
|
||||
<div>Welcome to the <a href="https://github.com/chaoticbackup" className="name" target="_blank">Chaotic Backup Project</a>.
|
||||
</div>
|
||||
<div>Welcome to the <GithubLink />.</div>
|
||||
<span>Built by fans for fans.</span>
|
||||
<br /><br />
|
||||
<div>Made with <span className="heart">♥</span> by
|
||||
|
|
@ -19,7 +27,7 @@ export default function Home() {
|
|||
</div>
|
||||
<div>Do you like the site? You can donate to support it!</div>
|
||||
<div className="donate"><Donate /></div>
|
||||
<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 <a href="/collection">collection</a>, 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 <a href="/portal">Portal to Perim</a> disapeared along with the site. You can again explore the official lore and information of Creatures!
|
||||
<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 <Link to="/collection">collection</Link>, 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 <Link to="/portal">Portal to Perim</Link> disapeared along with the site. You can again explore the official lore and information of Creatures!
|
||||
</div>
|
||||
<br />
|
||||
<div className="lore">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
import React from 'react';
|
||||
import API from './SpreadsheetData';
|
||||
import {observable} from "mobx";
|
||||
import {observer, inject, action} from 'mobx-react';
|
||||
import processString from 'react-process-string';
|
||||
import s from '../styles/app.style';
|
||||
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ class CollectionDB {
|
|||
|
||||
function databaseInitialize() {
|
||||
["attacks","battlegear", "creatures", "locations", "mugic"]
|
||||
.forEach((type, i) => {
|
||||
.forEach((type) => {
|
||||
// check if the db already exists in memory
|
||||
let entries = db.getCollection(type);
|
||||
if (entries === null || entries.data.length === 0) {
|
||||
|
|
@ -117,7 +117,7 @@ class CollectionDB {
|
|||
this.building[type] = observable.box("built");
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
purgeDB = () => {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React from 'react';
|
||||
import API from '../SpreadsheetData';
|
||||
import s from '../../styles/app.style';
|
||||
import {observable} from "mobx";
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import CardList from './List';
|
||||
|
|
@ -82,12 +81,9 @@ export default class Home extends React.Component {
|
|||
<input type="button" value="50" disabled={this.n=="50"} onClick={(e) => this.n=e.target.value} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@observer
|
||||
class imgbase extends React.Component {
|
||||
@observable display = false;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default function search_api(input) {
|
|||
|
||||
// ignore cards with no set
|
||||
attackResults = attackResults.where((obj) => {
|
||||
return obj.gsx$set != ('');
|
||||
return obj.gsx$set != ('');
|
||||
});
|
||||
battlegearResults = battlegearResults.where((obj) => {
|
||||
return obj.gsx$set != ('');
|
||||
|
|
|
|||
|
|
@ -7,13 +7,13 @@ import {Rarity, Unique, Name, Element, Ability} from '../../Snippets';
|
|||
export default class Attack extends React.Component {
|
||||
|
||||
render() {
|
||||
let card = this.props.card;
|
||||
let card = this.props.card;
|
||||
|
||||
if (this.props.ext == false) return (
|
||||
<div className="card attack">
|
||||
<img className="thumb" src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(card.gsx$image)} />
|
||||
<div className="left">
|
||||
<Name name={card.gsx$name} /><br />
|
||||
<div className="card attack">
|
||||
<img className="thumb" src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(card.gsx$image)} />
|
||||
<div className="left">
|
||||
<Name name={card.gsx$name} /><br />
|
||||
<Rarity set={card.gsx$set} rarity={card.gsx$rarity} /><br />
|
||||
<span>Build Points: {card.gsx$bp}</span><br />
|
||||
<div>
|
||||
|
|
@ -23,15 +23,15 @@ export default class Attack extends React.Component {
|
|||
<Element element="earth" value={card.gsx$earth} />{card.gsx$earth}
|
||||
<Element element="water" value={card.gsx$water} />{card.gsx$water}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div className="right" >
|
||||
<Ability ability={card.gsx$ability} />
|
||||
<Unique data={{unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary}} />
|
||||
<span className="flavortext">{card.gsx$flavortext}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
)
|
||||
else return (
|
||||
<div className="card attack">
|
||||
<img className="fullcard" src={API.base_image + (card.gsx$image || API.card_back)} />
|
||||
|
|
|
|||
|
|
@ -7,28 +7,28 @@ import {Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '
|
|||
export default class Creature extends React.Component {
|
||||
|
||||
render() {
|
||||
let card = this.props.card;
|
||||
let card = this.props.card;
|
||||
|
||||
let mugic = [];
|
||||
for (let i = 0; i < card.gsx$mugicability; i++) {
|
||||
mugic.push(<Mugic key={i} tribe={card.gsx$tribe} />);
|
||||
}
|
||||
|
||||
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(card.gsx$image)} />
|
||||
<div className="left">
|
||||
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(card.gsx$image)} />
|
||||
<div className="left">
|
||||
<Name name={card.gsx$name} /><br />
|
||||
<Rarity set={card.gsx$set} rarity={card.gsx$rarity} /><br />
|
||||
<span><Tribe tribe={card.gsx$tribe} /> {card.gsx$tribe} {card.gsx$types}</span><br />
|
||||
<div>
|
||||
<div>
|
||||
<Element element="fire" value={card.gsx$elements.toLowerCase().indexOf("fire") >=0} />
|
||||
<Element element="air" value={card.gsx$elements.toLowerCase().indexOf("air") >=0} />
|
||||
<Element element="earth" value={card.gsx$elements.toLowerCase().indexOf("earth") >=0} />
|
||||
<Element element="water" value={card.gsx$elements.toLowerCase().indexOf("water") >=0} />
|
||||
</div>
|
||||
<span>{mugic}</span>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div className="right" >
|
||||
<Ability ability={card.gsx$ability} tribe={card.gsx$tribe} />
|
||||
|
|
@ -57,8 +57,8 @@ export default class Creature extends React.Component {
|
|||
<div className="energy" style={{fontWeight: 'bold'}}>{card.gsx$energy}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
)
|
||||
else return (
|
||||
<div className="card creature">
|
||||
<img className="fullcard" src={API.base_image + (card.gsx$image || API.card_back)} />
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ export default class PackSimulator extends React.Component {
|
|||
return (Math.floor(Math.random() * 3)) * 5 + min;
|
||||
}
|
||||
|
||||
const gencard = (results) => {
|
||||
const gencard = (results, i) => {
|
||||
let id = Math.floor(Math.random() * results.length);
|
||||
let card = results[id];
|
||||
|
||||
|
|
@ -112,7 +112,7 @@ export default class PackSimulator extends React.Component {
|
|||
}
|
||||
|
||||
if (card_names.indexOf(card.gsx$name) > -1) {
|
||||
return gencard(results);
|
||||
return gencard(results, i);
|
||||
}
|
||||
card_names.push(card.gsx$name);
|
||||
|
||||
|
|
@ -142,7 +142,7 @@ export default class PackSimulator extends React.Component {
|
|||
pview.applyFind({'gsx$set': this.set})
|
||||
.applyFind({'gsx$rarity': rarity});
|
||||
let results = pview.data();
|
||||
for (let i=0; i<num; i++) gencard(results);
|
||||
for (let i=0; i<num; i++) gencard(results, i);
|
||||
pview.removeFilters();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
import { BrowserRouter as Router, Link, Route, withRouter } from 'react-router-dom';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
|
||||
import s from '../styles/app.style';
|
||||
|
||||
/* Components */
|
||||
|
|
@ -13,11 +12,9 @@ import Collection from './collection/index';
|
|||
import Portal from './portal/index';
|
||||
import Home from './Home';
|
||||
|
||||
// const BlockAvoider = withRouter(Base)
|
||||
|
||||
render(
|
||||
<Router>
|
||||
{/* <BlockAvoider /> */}
|
||||
<Base path="/*" href="/" />
|
||||
</Router>
|
||||
, document.getElementById('root'),
|
||||
|
|
@ -144,7 +141,7 @@ function Base(props) {
|
|||
</div>
|
||||
</div>
|
||||
<div className="footer-language">
|
||||
<a href="javascript:;" onClick={(e) => {e.stopPropagation(); e.preventDefault(); API.purgeDB()}} className="page-options" title="Change Language">
|
||||
<a href='#' onClick={(e) => {e.stopPropagation(); e.preventDefault(); API.purgeDB()}} className="page-options" title="Change Language">
|
||||
<img src="/src/img/flag_usa_.gif" alt="English (Change Language)" width="40" height="27"/>
|
||||
<br />English (Change Language)
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,16 @@
|
|||
import React from 'react';
|
||||
import React, {Fragment} from 'react';
|
||||
import {observable} from "mobx";
|
||||
import API from '../SpreadsheetData';
|
||||
|
||||
export default class Home extends React.Component {
|
||||
@observable coin = null;
|
||||
|
||||
componentDidMount() {
|
||||
this.coin = null;
|
||||
this.updateCanvas();
|
||||
}
|
||||
updateCanvas(canvas) {
|
||||
if (!canvas) return;
|
||||
|
||||
componentWillUnmount() {
|
||||
this.coin = null;
|
||||
}
|
||||
|
||||
updateCanvas() {
|
||||
const canvas = this.refs.canvas;
|
||||
// Make it visually fill the positioned parent
|
||||
canvas.style.width ='100%';
|
||||
canvas.style.height='100%';
|
||||
canvas.style.width = '100%';
|
||||
canvas.style.height = '100%';
|
||||
// ...then set the internal size to match
|
||||
canvas.width = canvas.offsetWidth;
|
||||
canvas.height = canvas.offsetHeight;
|
||||
|
|
@ -54,15 +48,6 @@ export default class Home extends React.Component {
|
|||
ctx.drawImage(Logo, canvas.width/2-Logo.width/2, 0);
|
||||
});
|
||||
|
||||
|
||||
let gameLoop = () => {
|
||||
if (this.coin) {
|
||||
window.requestAnimationFrame(gameLoop);
|
||||
this.coin.update();
|
||||
this.coin.render();
|
||||
}
|
||||
}
|
||||
|
||||
function sprite (options) {
|
||||
|
||||
var that = {},
|
||||
|
|
@ -136,8 +121,16 @@ export default class Home extends React.Component {
|
|||
return that;
|
||||
}
|
||||
|
||||
const coinLoop = () => {
|
||||
if (this.coin) {
|
||||
window.requestAnimationFrame(coinLoop);
|
||||
this.coin.update();
|
||||
this.coin.render();
|
||||
}
|
||||
}
|
||||
|
||||
// Create sprite sheet
|
||||
let coinImage = new Image();
|
||||
const coinImage = new Image();
|
||||
|
||||
// Create sprite
|
||||
this.coin = sprite({
|
||||
|
|
@ -152,15 +145,15 @@ export default class Home extends React.Component {
|
|||
});
|
||||
|
||||
// Load sprite sheet
|
||||
coinImage.addEventListener("load", gameLoop);
|
||||
coinImage.addEventListener("load", coinLoop);
|
||||
coinImage.src = API.base_image + "0B6oyUfwoM3u1cC1vaGVkU1J1ZzQ";
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<canvas ref="canvas" height="600px" />
|
||||
</div>
|
||||
<Fragment>
|
||||
<canvas ref={this.updateCanvas.bind(this)} height="600px" />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
import React from 'react';
|
||||
import Interactive from 'react-interactive';
|
||||
import { Link } from 'react-router-dom';
|
||||
import API from '../../SpreadsheetData';
|
||||
import s from '../../../styles/app.style';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
import React from 'react';
|
||||
import Interactive from 'react-interactive';
|
||||
import { Link } from 'react-router-dom';
|
||||
import API from '../../SpreadsheetData';
|
||||
import s from '../../../styles/app.style';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import API from '../../SpreadsheetData';
|
|||
import s from '../../../styles/app.style';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import Single from './_base';
|
||||
import {PageNotFound, Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
|
||||
import {PageNotFound, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
|
||||
|
||||
function Artist(props) {
|
||||
let artists = [];
|
||||
|
|
|
|||
|
|
@ -8,110 +8,110 @@ import s from '../../../styles/app.style';
|
|||
|
||||
// own "name" display function
|
||||
function Name(props) {
|
||||
let name = props.name.split(",");
|
||||
return (<React.Fragment>
|
||||
<span>{name[0]}</span>
|
||||
{ name.length > 1 &&
|
||||
<span className="bigger"><br />{name[1].trim()}</span>
|
||||
}
|
||||
</React.Fragment>);
|
||||
let name = props.name.split(",");
|
||||
return (<React.Fragment>
|
||||
<span>{name[0]}</span>
|
||||
{ name.length > 1 &&
|
||||
<span className="bigger"><br />{name[1].trim()}</span>
|
||||
}
|
||||
</React.Fragment>);
|
||||
}
|
||||
|
||||
function Artist(props) {
|
||||
let artists = [];
|
||||
props.artist.split(/(?=, )/).forEach((artist, i) => {
|
||||
artists.push(<Link key={i} to={`/portal/Search/?${artist.replace(", ", "")}`}>{artist}</Link>);
|
||||
});
|
||||
return (<div className="ability">{artists}</div>)
|
||||
let artists = [];
|
||||
props.artist.split(/(?=, )/).forEach((artist, i) => {
|
||||
artists.push(<Link key={i} to={`/portal/Search/?${artist.replace(", ", "")}`}>{artist}</Link>);
|
||||
});
|
||||
return (<div className="ability">{artists}</div>)
|
||||
}
|
||||
|
||||
@inject((stores, props, context) => props) @observer
|
||||
export default class Single extends React.Component {
|
||||
@observable fullscreen = false;
|
||||
@observable fullscreen = false;
|
||||
|
||||
expand(e) {
|
||||
this.fullscreen = true;
|
||||
}
|
||||
expand(e) {
|
||||
this.fullscreen = true;
|
||||
}
|
||||
|
||||
close(e) {
|
||||
this.fullscreen = false;
|
||||
}
|
||||
close(e) {
|
||||
this.fullscreen = false;
|
||||
}
|
||||
|
||||
render() {
|
||||
let card = this.props.card;
|
||||
return (<React.Fragment>
|
||||
<div className={"modal" + (this.fullscreen?"":" hidden")}>
|
||||
<span className="close" onClick={this.close.bind(this)}>×</span>
|
||||
<img className="modal-content" src={API.base_image + card.gsx$splash} />
|
||||
</div>
|
||||
{card.gsx$splash && (
|
||||
<div className="entry_splash">
|
||||
{/*<span className="arrow">⇩</span>*/}
|
||||
<img onClick={this.expand.bind(this)} src={API.base_image + card.gsx$splash} />
|
||||
</div>
|
||||
)}
|
||||
<div className="entry_body">
|
||||
<div className="title">
|
||||
<Name name={card.gsx$name} />
|
||||
<hr />
|
||||
</div>
|
||||
{this.props.text &&
|
||||
<div className="nocolumn">{this.props.text}</div>
|
||||
}
|
||||
{!this.props.text &&
|
||||
<div className="column">
|
||||
{card.gsx$artist && <React.Fragment>
|
||||
<div>
|
||||
<strong>Artist(s):</strong>
|
||||
<Artist artist={card.gsx$artist} />
|
||||
</div>
|
||||
<hr />
|
||||
</React.Fragment>}
|
||||
<div>
|
||||
<strong>Set: </strong>
|
||||
{`${API.sets[card.gsx$set]} (${card.gsx$set})`}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Rarity: </strong>
|
||||
<Rarity set={card.gsx$set} rarity={card.gsx$rarity} notext="true" />
|
||||
{card.gsx$rarity}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Card ID: </strong>
|
||||
{card.gsx$id}
|
||||
</div>
|
||||
{this.props.col0 && <React.Fragment>
|
||||
<hr />
|
||||
{this.props.col0}
|
||||
</React.Fragment>}
|
||||
{card.gsx$ability && <React.Fragment>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Ability:</strong>
|
||||
<Ability ability={card.gsx$ability} />
|
||||
</div>
|
||||
</React.Fragment>}
|
||||
{card.gsx$flavortext && <React.Fragment>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Card Flavor:</strong><br />
|
||||
{card.gsx$flavortext}
|
||||
</div>
|
||||
</React.Fragment>}
|
||||
{this.props.col1 && <React.Fragment>
|
||||
<hr />
|
||||
this.props.col1
|
||||
</React.Fragment>}
|
||||
</div>
|
||||
}
|
||||
{!this.props.text &&
|
||||
<div className="column">
|
||||
{this.props.col2}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</React.Fragment>);
|
||||
}
|
||||
render() {
|
||||
let card = this.props.card;
|
||||
return (<React.Fragment>
|
||||
<div className={"modal" + (this.fullscreen?"":" hidden")}>
|
||||
<span className="close" onClick={this.close.bind(this)}>×</span>
|
||||
<img className="modal-content" src={API.base_image + card.gsx$splash} />
|
||||
</div>
|
||||
{card.gsx$splash && (
|
||||
<div className="entry_splash">
|
||||
{/*<span className="arrow">⇩</span>*/}
|
||||
<img onClick={this.expand.bind(this)} src={API.base_image + card.gsx$splash} />
|
||||
</div>
|
||||
)}
|
||||
<div className="entry_body">
|
||||
<div className="title">
|
||||
<Name name={card.gsx$name} />
|
||||
<hr />
|
||||
</div>
|
||||
{this.props.text &&
|
||||
<div className="nocolumn">{this.props.text}</div>
|
||||
}
|
||||
{!this.props.text &&
|
||||
<div className="column">
|
||||
{card.gsx$artist && <React.Fragment>
|
||||
<div>
|
||||
<strong>Artist(s):</strong>
|
||||
<Artist artist={card.gsx$artist} />
|
||||
</div>
|
||||
<hr />
|
||||
</React.Fragment>}
|
||||
<div>
|
||||
<strong>Set: </strong>
|
||||
{`${API.sets[card.gsx$set]} (${card.gsx$set})`}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Rarity: </strong>
|
||||
<Rarity set={card.gsx$set} rarity={card.gsx$rarity} notext="true" />
|
||||
{card.gsx$rarity}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Card ID: </strong>
|
||||
{card.gsx$id}
|
||||
</div>
|
||||
{this.props.col0 && <React.Fragment>
|
||||
<hr />
|
||||
{this.props.col0}
|
||||
</React.Fragment>}
|
||||
{card.gsx$ability && <React.Fragment>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Ability:</strong>
|
||||
<Ability ability={card.gsx$ability} />
|
||||
</div>
|
||||
</React.Fragment>}
|
||||
{card.gsx$flavortext && <React.Fragment>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Card Flavor:</strong><br />
|
||||
{card.gsx$flavortext}
|
||||
</div>
|
||||
</React.Fragment>}
|
||||
{this.props.col1 && <React.Fragment>
|
||||
<hr />
|
||||
this.props.col1
|
||||
</React.Fragment>}
|
||||
</div>
|
||||
}
|
||||
{!this.props.text &&
|
||||
<div className="column">
|
||||
{this.props.col2}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</React.Fragment>);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/*eslint global-require: "off"*/
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user