change to chunks; improve collection

This commit is contained in:
Daniel 2019-09-25 18:10:39 -04:00
parent 6c5f1dd5a4
commit a49cf82527
34 changed files with 227 additions and 157 deletions

1
build/2.css Normal file
View File

@ -0,0 +1 @@
.icon14{height:14px;padding-bottom:2px}.icon16{height:16px}.icon20{height:20px}.icon24{height:24px}.bigger{font-size:14px}.name{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.name .subname:before{content:"\a ";white-space:pre}.name .subname{font-size:13px;padding-bottom:4px;display:inherit}#player{text-align:center}@media only screen and (min-width:975px){.collection{margin-top:5px;margin-right:5px;margin-left:5px}.collection>.left{font-family:Roboto,Arial,sans-serif;float:left;width:30%}.collection>.right{font-family:Roboto,Arial,sans-serif;float:right;width:70%}}@media only screen and (min-width:975px){.collection #buttons{margin:0 0 2% 1%}.collection #buttons,.collection .button,.collection input[type=button],.collection input[type=text]{border-radius:5px;border-color:transparent;text-align:center;outline:none}.collection input[type=text]{margin-bottom:2px}.collection .centeredCheckBox,.collection input[type=text]{width:220px}.collection .text-entry{display:flex;justify-content:center;align-items:center}.collection .text-entry input:focus{outline:none}.collection .card{text-align:left;display:flex;border:1px solid #aeaeae}.collection .card .left,.collection .card .right,.collection .card .stats{padding-top:4px}.collection .card .bigger{text-align:center;font-weight:700}.collection .card .energy{display:flex;width:20px!important}.collection .card .left{vertical-align:text-top;float:left;width:210px;padding-left:4px}.collection .card .right{float:left;width:calc(100% - 322px);border-left:2px solid #aeaeae;padding-left:4px;padding-right:4px;padding-bottom:6px;white-space:pre-line}.collection .creature .right{width:calc(100% - 366px)}.collection .creature .stats{vertical-align:text-top;float:left;text-align:right;width:40px}.collection .SearchForm{padding-top:3px;font-family:Roboto,Arial,sans-serif}.collection .searchName{display:flex;justify-content:center;align-items:center;padding:2%;font-size:16pt}.collection .centeredCheckBox{margin:0 auto;text-align:left}.collection .centeredSpacing{display:flex;justify-content:space-between}.collection .setBox{width:80%;float:right}.collection #sets{width:80%}.collection .centeredButtons{display:flex;justify-content:center;align-items:center}.collection #search{width:25%;margin:2%;border-radius:5px;border-color:transparent;text-align:center}.collection .minMax{display:flex;justify-content:space-between;margin:0 auto;width:50%;text-align:right}.collection .brainwashed{border-radius:3px;background-color:#dcdddf;color:#000!important}.collection .chieftain,.collection .flavortext{font-style:italic}.collection .disciplines input{width:30px;height:14px;text-align:center;margin-top:2px}.collection .mull input{margin-left:0;margin-top:1px}.collection .Collapsible__contentInner input,.collection .mull input{vertical-align:middle}.collection .Collapsible__contentInner .centeredCheckBox{width:50%}.collection .mcbp input{width:24px;height:14px;padding:unset;text-align:center;margin-top:2px}.collection .tribes{width:96%;text-align:center}.collection .and,.collection .disciplines{text-align:center}.collection .and{vertical-align:text-bottom;width:15%;border-radius:5px;border-color:transparent;margin:2%}}.collection .card .icon14,.collection .card .icon16,.collection .card .icon20,.collection .card .icon24{vertical-align:middle}.collection .thumb{width:100px;height:98px}.collection .card .thumb{float:left}.collection .Collapsible{margin-bottom:5px;margin-top:5px;width:96%}.collection .Collapsible__trigger{background-color:#333;display:block;position:relative;padding-top:5px;padding-bottom:5px;text-indent:5px;font-weight:700;white-space:pre}.collection .Collapsible__trigger:hover{background-color:red}.collection .Collapsible__trigger:after{content:"^";position:absolute;right:10px;top:10px;display:block;transition:transform .4s}.collection .Collapsible__trigger.is-open:after{transform:rotate(180deg);right:5px;top:5px}.collection .Collapsible__trigger.is-disabled{opacity:.5;background-color:grey}.collection .Collapsible__contentInner{margin-top:5px}.collection .left{position:relative}.collection .card_img{position:absolute;width:100%;z-index:2;left:-11px}.collection .card_img .hidden{display:none;max-height:0}.collection .card_img img{max-width:250px;max-height:350px}.collection .entries{text-align:left;width:100%}.collection .entries input[type=button]{margin:0 0 2% 1%}.collection .list-nav-top{display:flex}.collection .extended .fullcard{max-width:250px;max-height:350px}.collection hr{width:96%;margin-inline-start:0}.collection .none{display:inline}.collection .none>span{top:-3px;position:relative}.collection label{user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-o-user-select:none;-moz-user-select:none}

1
build/2.js Normal file

File diff suppressed because one or more lines are too long

1
build/3.css Normal file
View File

@ -0,0 +1 @@
@media only screen and (min-width:975px){.pack{max-width:70%}}.packsim input[type=number]::-webkit-inner-spin-button,.packsim input[type=number]::-webkit-outer-spin-button{opacity:1}.pack{height:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin:auto}.pack .card{width:150px;height:210px;background-size:cover;box-sizing:content-box;margin:5px;-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s,top 1s,left 1s;-webkit-border-radius:5px;-o-transition-property:width,height,-o-transform,background,font-size,opacity,top,left;-o-transition-duration:1s,1s,1s,1s,1s,1s,1s,1s;-moz-transition-property:width,height,-o-transform,background,font-size,opacity,top,left;-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s,1s;transition-property:width,height,transform,background,font-size,opacity,top,left;transition-duration:1s,1s,1s,1s,1s,1s,1s,1s}.pack .card:hover{width:250px;height:350px}.pack .stats{height:100%;width:100%;text-align:left}.pack .stats span{position:relative;color:#000;display:block;left:10px;font-size:12px}.pack .stats span:first-of-type{top:130px}.pack .stats span:nth-of-type(2){top:128px}.pack .stats span:nth-of-type(3){top:126px}.pack .stats span:nth-of-type(4){top:124px}.pack .stats span:nth-of-type(5){text-align:right;top:125px;left:-11px;font-size:14px}.pack .card:hover .stats span{left:20px;font-size:14px;font-weight:700}.pack .card:hover .stats span:first-of-type{top:220px}.pack .card:hover .stats span:nth-of-type(2){top:229px}.pack .card:hover .stats span:nth-of-type(3){top:237px}.pack .card:hover .stats span:nth-of-type(4){top:245px}.pack .card:hover .stats span:nth-of-type(5){text-align:right;top:258px;left:-21px;font-size:20px}

1
build/3.js Normal file

File diff suppressed because one or more lines are too long

1
build/4.css Normal file
View File

@ -0,0 +1 @@
.lore{text-align:left;padding-left:10%;padding-right:10%}.lore .title{margin-top:6px;text-align:center;font-weight:700;font-size:18px}.lore div{margin:0 0 6px;line-height:22px!important}.donate{margin-bottom:6px}.donate form a{border-bottom:none}@-webkit-keyframes love{to{-webkit-transform:scale(1.1)}}@-moz-keyframes love{to{-moz-transform:scale(1.1)}}@keyframes love{to{transform:scale(1.1)}}.with-love{color:#333}.with-love div,.with-love span{font-size:14px!important;line-height:18px!important}.with-love div{padding-bottom:4px}.with-love .heart{font-size:1.4em;color:#ff79c6;-webkit-transform:scale(.9);-moz-transform:scale(.9);transform:scale(.9);-webkit-animation:love .5s linear infinite alternate-reverse;-moz-animation:love .5s infinite linear alternate-reverse;animation:love .5s linear infinite alternate-reverse}.with-love a{text-decoration:none;border-bottom:1px dotted}

1
build/4.js Normal file

File diff suppressed because one or more lines are too long

1
build/5.css Normal file
View File

@ -0,0 +1 @@
.portal .navbar h1{font-size:16px}.portal .navbar ul{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#333}.portal .navbar li{float:left}.portal .navbar .dropbtn,.portal .navbar li a{display:inline-block;color:#fff;text-align:center;padding:14px 16px;text-decoration:none}.portal .navbar .dropdown:hover .dropbtn,.portal .navbar li a:hover{background-color:red}.portal .navbar li.dropdown{display:inline-block}.portal .navbar .dropdown-content{display:none;position:absolute;background-color:#333;min-width:140px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1}.portal .navbar .dropdown-content a{color:#fff;padding:12px 16px;text-decoration:none;display:block;text-align:left}.portal .navbar .dropdown:hover .dropdown-content{display:block}.portal .magnifying-glass{cursor:pointer;transition:color .2s;z-index:1;vertical-align:middle;fill:currentColor;height:18px;min-width:18px;width:18px}.portal .search .results div{padding-bottom:10px}.portal .search .results a{font-size:16px;line-height:20px}.portal .entry{font-size:1.2em}.portal .entry .title{font-weight:700;font-size:16px}.portal .entry .left{float:left;width:100px}.portal .entry .right{float:right;width:86%}.portal .entry .left .title{text-align:left;padding-bottom:10px}.portal .entry .icon14,.portal .entry .icon16,.portal .entry .icon20,.portal .entry .icon24{vertical-align:middle}.portal .entry .entry_content{min-height:550px;height:calc(100vh - 300px);overflow-y:auto;width:100%;position:relative}.portal .entry .entry_content .entry_splash{padding-bottom:4px}.portal .entry .entry_content .entry_splash img{max-width:100%}.portal .entry .entry_content .entry_splash .arrow{position:absolute;color:#f1f1f1;font-size:40px;font-weight:700;width:100%;top:95%}.portal .entry .entry_content .entry_body{position:relative;max-width:100%;padding-bottom:4px;display:flex;flex-wrap:wrap}.portal .entry .entry_content .entry_body hr{margin:0}.portal .entry .entry_content .entry_body .title{min-width:100%}.portal .entry .entry_content .entry_body .title hr{margin-top:8px}.portal .entry .entry_content .entry_body .column>div,.portal .entry .entry_content .entry_body .nocolumn>div{padding:8px}.portal .entry .entry_content .entry_body .column:nth-child(2){flex-grow:1;text-align:left;min-width:0;width:30%}.portal .entry .entry_content .entry_body .column:last-child{flex-grow:2;min-width:0;flex:60%;border-left:1px solid #fff}.portal .entry .entry_content .entry_body .ability{white-space:pre-line;word-wrap:break-all}.portal .entry .entry_content .entry_body div{white-space:pre-line}.portal .entry .entry_content::-webkit-scrollbar{width:1px}.portal .entry .cat_title{text-align:left;background-color:#1a1a1a;font-weight:700;font-size:16px;padding-top:1px;padding-left:4px}.portal .entry .entry_nav{background-color:#1a1a1a;overflow-x:scroll;overflow-y:hidden;white-space:nowrap}.portal .entry .entry_nav>div{display:inline-block}.portal .entry .entry_nav>div img{margin-right:3px;margin-left:3px}.portal .entry .modal{position:fixed;z-index:10;padding-top:50px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.9)}.portal .entry .modal.hidden{display:none}.portal .entry .modal-content{margin:auto;display:block;max-height:calc(100vh - 100px);max-width:90vw}.portal .entry .caption{margin:auto;display:block;width:80%;max-width:700px;text-align:center;color:#ccc;padding:10px 0;height:150px}.portal .entry #caption,.portal .entry .modal-content{-webkit-animation-name:zoom;-webkit-animation-duration:.6s;animation-name:zoom;animation-duration:.6s}@-webkit-keyframes zoom{0%{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@keyframes zoom{0%{transform:scale(0)}to{transform:scale(1)}}.portal .entry .close{position:fixed;top:35px;right:35px;color:#f1f1f1;font-size:40px;font-weight:700;transition:.3s}.portal .entry .close:focus,.portal .entry .close:hover{color:#bbb;text-decoration:none;cursor:pointer}

1
build/5.js Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

1
build/main.js Normal file

File diff suppressed because one or more lines are too long

2
build/vendor.js Normal file

File diff suppressed because one or more lines are too long

View File

@ -26,42 +26,6 @@ object-assign
@license MIT
*/
/** @license React v16.8.6
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/** @license React v16.8.6
* react-dom.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/** @license React v0.13.6
* scheduler.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/** @license React v16.8.6
* react-is.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/** @license mobx-react v5.4.4
* index.module.js
*
@ -70,3 +34,39 @@ object-assign
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/** @license React v16.9.0
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/** @license React v16.9.0
* react-dom.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/** @license React v0.15.0
* scheduler.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/** @license React v16.9.0
* react-is.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

View File

@ -48,6 +48,7 @@
</head>
<body>
<div id="root"></div>
<script src="/build/bundle.js"></script>
<script src="/build/main.js"></script>
<script src="/build/vendor.js"></script>
</body>
</html>

View File

@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chaotic Backup</title>
<meta name="description" content="Chaotic Backup">
<link rel="stylesheet" type="text/css" href="/build/main.css">
<link rel="stylesheet" type="text/css" href="/src/css/legacy.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
@ -89,6 +88,7 @@
</head>
<body>
<div id="root"></div>
<script src="/build/bundle.js"></script>
<script src="/build/main.js"></script>
<script src="/build/vendor.js"></script>
</body>
</html>

34
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "chaoticbackup",
"version": "2.0.0",
"version": "2.1.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -8040,9 +8040,9 @@
}
},
"react-interactive": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/react-interactive/-/react-interactive-0.9.0.tgz",
"integrity": "sha512-Hh8WI6smBi5DaUXzK6z5pHVLB8jMKIQhDqOfxymN4zG5us7OKLq5VR4EsuPuyvJwKgH1MAA3vxdyjs56SjmyRQ==",
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/react-interactive/-/react-interactive-0.8.3.tgz",
"integrity": "sha512-mmRvA9aKP7zu9kVfP1AX1egX8tFlnE3DDXq92z0JTZezfOpmeQBzr77O1+mTV54OOmn+M2t6c5kFD5VnuFoM7A==",
"requires": {
"detect-it": "^3.0.3",
"object-assign": "^4.1.1",
@ -8059,6 +8059,14 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"react-loadable": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/react-loadable/-/react-loadable-5.5.0.tgz",
"integrity": "sha512-C8Aui0ZpMd4KokxRdVAm2bQtI03k2RMRNzOB+IipV3yxFTSVICv7WoUr5L9ALB5BmKO1iHgZtWM8EvYG83otdg==",
"requires": {
"prop-types": "^15.5.0"
}
},
"react-onclickoutside": {
"version": "6.9.0",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz",
@ -8554,15 +8562,15 @@
}
},
"sass-loader": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.3.1.tgz",
"integrity": "sha512-tuU7+zm0pTCynKYHpdqaPpe+MMTQ76I9TPZ7i4/5dZsigE350shQWe5EZNl5dBidM49TPET75tNqRbcsUZWeNA==",
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.0.tgz",
"integrity": "sha512-+qeMu563PN7rPdit2+n5uuYVR0SSVwm0JsOUsaJXzgYcClWSlmX0iHDnmeOobPkf5kUglVot3QS6SyLyaQoJ4w==",
"dev": true,
"requires": {
"clone-deep": "^4.0.1",
"loader-utils": "^1.0.1",
"neo-async": "^2.5.0",
"pify": "^4.0.1",
"loader-utils": "^1.2.3",
"neo-async": "^2.6.1",
"schema-utils": "^2.1.0",
"semver": "^6.3.0"
},
"dependencies": {
@ -10190,6 +10198,12 @@
}
}
},
"webpack-async-chunk-names-plugin": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/webpack-async-chunk-names-plugin/-/webpack-async-chunk-names-plugin-0.1.1.tgz",
"integrity": "sha1-67je2lmIdgMzH/LKu67luFP+C7U=",
"dev": true
},
"webpack-cli": {
"version": "3.3.9",
"resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-3.3.9.tgz",

View File

@ -21,7 +21,8 @@
"react-collapsible": "^2.6.0",
"react-digit-input": "^1.0.0",
"react-dom": "^16.9.0",
"react-interactive": "^0.9.0",
"react-interactive": "0.8.3",
"react-loadable": "^5.5.0",
"react-onclickoutside": "^6.9.0",
"react-process-string": "^1.2.0",
"react-router": "^5.1.0",
@ -35,6 +36,7 @@
"@babel/node": "^7.6.2",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-proposal-decorators": "^7.6.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.6.2",
"@babel/polyfill": "^7.6.0",
"@babel/preset-env": "^7.6.2",
@ -52,10 +54,11 @@
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"sass-loader": "^7.3.1",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.41.0",
"webpack-async-chunk-names-plugin": "^0.1.1",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.1"
}

View File

@ -12,7 +12,7 @@ export function UnderConstruction(props) {
export function PageNotFound(props) {
return (
<p style={s.p}>
Page not found - the path, {s.code(props.location.pathname)}, did not match any routes.
404 route not found - {s.code(props.location.pathname)}
</p>
);
}
@ -69,6 +69,10 @@ export function Name(props) {
</span>);
}
export function Mugic(props) {
return <img className={props.size||"icon20"} src={("/src/img/icons/mugic/"+(props.tribe||"generic")+".png").toLowerCase()} alt={"MC"} />
}
export function Element(props) {
if (props.value) {
return <img className={props.size||"icon20"} src={("/src/img/icons/elements/"+props.element+".png").toLowerCase()} />
@ -78,16 +82,24 @@ export function Element(props) {
}
}
export function Mugic(props) {
return <img className={props.size||"icon20"} src={("/src/img/icons/mugic/"+(props.tribe||"generic")+".png").toLowerCase()} alt={"MC"} />
export function Tribe(props) {
return <img className={props.size||"icon16"} src={("/src/img/icons/tribes/"+props.tribe+".png").toLowerCase()} />
}
export function Discipline(props) {
return <img className={props.size||"icon16"} src={("/src/img/icons/disciplines/"+props.discipline+".png").toLowerCase()} />
}
export function Tribe(props) {
return <img className={props.size||"icon16"} src={("/src/img/icons/tribes/"+props.tribe+".png").toLowerCase()} />
export function LocationIcon(props) {
return <img className={props.size||"icon16"} src="/src/img/icons/location.png" />
}
export function BattlegearIcon(props) {
return <img className={props.size||"icon16"} src="/src/img/icons/battlegear.png" />
}
export function AttackIcon(props) {
return <img className={props.size||"icon16"} src="/src/img/icons/attack.png" />
}
export function Ability(props) {

View File

@ -15,6 +15,12 @@ export default class Home extends React.Component {
@observable content = [];
@observable card_img = API.card_back;
componentDidMount() {
let ext = localStorage.getItem("extended");
if (ext == null) this.ext = false;
this.ext = (/true/i).test(ext);
}
handleContent(content) {
this.content = content;
this.p = 1;
@ -25,6 +31,11 @@ export default class Home extends React.Component {
this.changeImage();
}
setExt() {
this.ext = !this.ext;
localStorage.setItem("extended", this.ext);
}
render() {
return (
<div className={"collection " + (this.ext ? "extended" : "short")}>
@ -49,7 +60,7 @@ export default class Home extends React.Component {
extended() {
return (
<div className="ext-button">
<button id="buttons" onClick={(e) => this.ext = !this.ext}
<button id="buttons" onClick={this.setExt.bind(this)}
>{this.ext ? "Short Format" : "Extended Format"}</button>
</div>
);

View File

@ -30,14 +30,11 @@ export default class SearchCollection extends React.Component {
name: "",
text: "",
subtypes: "",
past: false,
mirage: false,
minion: false,
flavor: true,
sets: {},
types: {attack: false, battlegear: false, creature: false, location: false, mugic: false},
rarity: {common: false, uncommon: false, rare: false, 'super rare': false, 'ultra rare': false, promo: false},
tribes: {danian: false, 'm\'arrillian': false, 'mipedian': false, overworld: false, underworld: false, generic: false},
tribes: {danian: false, 'm\'arrillian': false, mipedian: false, overworld: false, underworld: false, generic: false},
elements: {fire: false, air: false, earth: false, water: false, none: false, and: false},
disciplines: {courage: '', power: '', wisdom: '', speed: ''},
energy: {min: '', max: ''},
@ -69,9 +66,6 @@ export default class SearchCollection extends React.Component {
}
});
if (query.hasOwnProperty('past')) this.input.past = true;
if (query.hasOwnProperty('mirage')) this.input.mirage = true;
if (query.hasOwnProperty('minion')) this.input.minion = true;
if (query.hasOwnProperty('name')) this.input.name = query.name;
if (query.hasOwnProperty('text')) this.input.text = query.text;
if (query.hasOwnProperty('subtypes')) this.input.subtypes = query.subtypes;
@ -106,9 +100,6 @@ export default class SearchCollection extends React.Component {
this.list.forEach(item => queryString += update(item));
if (this.input.past) queryString += "past&";
if (this.input.mirage) queryString += "mirage&";
if (this.input.minion) queryString += "minion&";
if (this.input.name) queryString += "name=" + encodeURIComponent(this.input.name) + "&";
if (this.input.text) queryString += "text=" + encodeURIComponent(this.input.text) + "&";
if (this.input.subtypes) queryString += "subtypes=" + encodeURIComponent(this.input.subtypes) + "&";
@ -229,16 +220,11 @@ export default class SearchCollection extends React.Component {
<div className="text-entry">
<input type="text" name="text" placeholder="Card Text" value={this.input.text} onChange={this.handleChange} />
</div>
<div className="centeredCheckBox">
<label className="mull"><input type="checkbox" name="flavor" value={!this.input.flavor} onChange={(e) => {this.input.flavor = !e.target.checked}} />Ignore Flavortext</label>
</div>
<div className="text-entry">
<input type="text" name="subtypes" placeholder="Subtypes | Initiative" value={this.input.subtypes} onChange={this.handleChange} />
</div>
<div className="centeredCheckBox centeredSpacing">
<label className="mull"><input type="checkbox" name="past" checked={this.input.past} onChange={this.handleChange} />Past</label>
<label className="mull"><input type="checkbox" name="mirage" checked={this.input.mirage} onChange={this.handleChange} />Mirage</label>
<label className="mull"><input type="checkbox" name="minion" checked={this.input.minion} onChange={this.handleChange} />Minion</label>
<div className="centeredCheckBox">
<label className="mull"><input type="checkbox" name="flavor" value={!this.input.flavor} onChange={(e) => {this.input.flavor = !e.target.checked}} />Ignore Flavortext & Artist</label>
</div>
<br />
<div className="centeredCheckBox centeredSpacing">

View File

@ -61,19 +61,22 @@ export default function search_api(input) {
// Card Text
if (input.text.length > 0) {
// split text by comma
let textList = input.text.split(",").filter(Boolean).map((item) => {
return ({'$regex': new RegExp(item.trim(), 'i')});
});
// clean text
let inputtext = input.text.replace(/\\/g, '').replace(/\(|\)/g, (match) => {return ("\\"+match)});
let parm = (() => {
let list = [
{'gsx$tags': {"$or": textList}},
{'gsx$ability': {"$or": textList}},
{'gsx$artist': {"$or": textList}}
{'gsx$ability': {"$or": {'$regex': new RegExp(inputtext, 'i')}}}
]
if (input.flavor)
list.splice(3, 0, {'gsx$flavortext': {"$or": textList}});
if (input.flavor) {
list.push({'gsx$flavortext': {"$or": textList}});
list.push({'gsx$artist': {"$or": textList}});
}
return list;
})();
@ -86,24 +89,6 @@ export default function search_api(input) {
mugicResults = mugicResults.find({'$or': parm});
}
// Past
if (input.past) {
attackResults = attackResults.find({'gsx$past': {'$gt': 0}});
battlegearResults = battlegearResults.find({'gsx$past': {'$gt': 0}});
creatureResults = creatureResults.find({'gsx$types': {'$regex': new RegExp("past", 'i')}});
locationResults = locationResults.find({'gsx$past': {'$gt': 0}});
mugicResults = mugicResults.find({'gsx$past': {'$gt': 0}});
}
// Mirage
if (input.mirage) {
locationResults = locationResults.find({'gsx$mirage': {'$gt': 0}});
attackResults = attackResults.limit(0);
battlegearResults = battlegearResults.limit(0);
creatureResults = creatureResults.limit(0);
mugicResults = mugicResults.limit(0);
}
// Subtypes / Initiative
if (input.subtypes.length > 0) {
let subtypesList = input.subtypes.split(",").filter(Boolean).map((item) => {
@ -111,24 +96,12 @@ export default function search_api(input) {
});
creatureResults = creatureResults.find({'gsx$types': {'$or': subtypesList} });
locationResults = locationResults.find({'gsx$initiative': {'$or': subtypesList}});
locationResults = locationResults.find({'$or': [{'gsx$initiative': {'$or': subtypesList}}, {'gsx$types': {'$or': subtypesList}}]});
attackResults = attackResults.limit(0);
battlegearResults = battlegearResults.find({'gsx$types': {'$or': subtypesList} });
mugicResults = mugicResults.limit(0);
}
// Minion
if (input.minion) {
locationResults = locationResults.limit(0);
attackResults = attackResults.limit(0);
battlegearResults = battlegearResults.limit(0);
creatureResults = creatureResults.where((obj) => {
return obj.gsx$brainwashed != ('');
});
mugicResults = mugicResults.limit(0);
}
// Search by tribe
let tribesList = [];
for (const tribe in input.tribes) {

View File

@ -1,7 +1,7 @@
import React from 'react';
import API from '../../SpreadsheetData';
import {observer, inject} from 'mobx-react';
import {Rarity, Unique, Name, Element, Ability} from '../../Snippets';
import {Rarity, Unique, Name, Element, Ability, AttackIcon} from '../../Snippets';
@inject((stores, props, context) => props) @observer
export default class Attack extends React.Component {
@ -15,7 +15,7 @@ export default class Attack extends React.Component {
<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 />
<span><AttackIcon /> Attack - {card.gsx$bp}</span><br />
<div>
<span className="bigger">{card.gsx$base}</span> |&nbsp;
<Element element="fire" value={card.gsx$fire} />{card.gsx$fire}&nbsp;

View File

@ -1,7 +1,7 @@
import React from 'react';
import API from '../../SpreadsheetData';
import {observer, inject} from 'mobx-react';
import {Rarity, Unique, Name, Ability} from '../../Snippets';
import {Rarity, Unique, Name, Ability, BattlegearIcon} from '../../Snippets';
@inject((stores, props, context) => props) @observer
export default class Battlegear extends React.Component {
@ -15,6 +15,7 @@ export default class Battlegear extends React.Component {
<div className="left">
<Name name={card.gsx$name} /><br />
<Rarity set={card.gsx$set} rarity={card.gsx$rarity} /><br />
<span><BattlegearIcon /> Battlegear{card.gsx$types.length > 0 ? " - " + card.gsx$types : null}</span>
</div>
<div className="right" >
<Ability ability={card.gsx$ability} />

View File

@ -14,13 +14,28 @@ export default class Creature extends React.Component {
mugic.push(<Mugic key={i} tribe={card.gsx$tribe} />);
}
const TribeLine = () => {
let tribe = card.gsx$tribe;
let types = card.gsx$types;
let past = false;
if (types.toLowerCase().includes("past")) {
past = true;
types = types.replace(/past /i, '');
}
// <past> <tribe> <types>
let line = " " + (past ? "Past " : "") + (tribe == "Generic" ? "" : tribe + " ") + types;
return <span><Tribe tribe={tribe} />{line}</span>
}
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 />
<TribeLine /><br />
<div>
<Element element="fire" value={card.gsx$elements.toLowerCase().indexOf("fire") >=0} />&nbsp;
<Element element="air" value={card.gsx$elements.toLowerCase().indexOf("air") >=0} />&nbsp;
@ -43,16 +58,16 @@ export default class Creature extends React.Component {
<br />
<div className="stats">
<div className="energy">
{card.gsx$courage}<img className="icon16" src={"/src/img/icons/disciplines/courage.png"}></img>
{card.gsx$courage}<Discipline discipline="courage" />
</div>
<div className="energy">
{card.gsx$power}<img className="icon16"src={"/src/img/icons/disciplines/power.png"}></img>
{card.gsx$power}<Discipline discipline="power" />
</div>
<div className="energy">
{card.gsx$wisdom}<img className="icon16"src={"/src/img/icons/disciplines/wisdom.png"}></img>
{card.gsx$wisdom}<Discipline discipline="wisdom" />
</div>
<div className="energy">
{card.gsx$speed}<img className="icon16"src={"/src/img/icons/disciplines/speed.png"}></img>
{card.gsx$speed}<Discipline discipline="speed" />
</div>
<div className="energy" style={{fontWeight: 'bold'}}>{card.gsx$energy}
</div>
@ -64,10 +79,10 @@ export default class Creature extends React.Component {
<img className="fullcard" src={API.base_image + (card.gsx$image || API.card_back)} />
<div className="right" >
<Name name={card.gsx$name} /><br />
<span>{card.gsx$courage}&nbsp;<img className="icon16" src={"/src/img/icons/disciplines/courage.png"}></img></span>&nbsp;
<span>{card.gsx$power}&nbsp;<img className="icon16" src={"/src/img/icons/disciplines/power.png"}></img></span>&nbsp;
<span>{card.gsx$wisdom}&nbsp;<img className="icon16" src={"/src/img/icons/disciplines/wisdom.png"}></img></span>&nbsp;
<span>{card.gsx$speed}&nbsp;<img className="icon16" src={"/src/img/icons/disciplines/speed.png"}></img></span>&nbsp;
<span>{card.gsx$courage}&nbsp;<Discipline discipline="courage" /></span>&nbsp;
<span>{card.gsx$power}&nbsp;<Discipline discipline="power" /></span>&nbsp;
<span>{card.gsx$wisdom}&nbsp;<Discipline discipline="wisdom" /></span>&nbsp;
<span>{card.gsx$speed}&nbsp;<Discipline discipline="speed" /></span>&nbsp;
<span style={{fontWeight: 'bold'}}>{card.gsx$energy}</span>
<br />
<Ability ability={card.gsx$ability} tribe={card.gsx$tribe} />

View File

@ -1,7 +1,7 @@
import React from 'react';
import API from '../../SpreadsheetData';
import {observer, inject} from 'mobx-react';
import {Rarity, Unique, Name, Ability, Initiative} from '../../Snippets';
import {Rarity, Unique, Name, Ability, Initiative, LocationIcon} from '../../Snippets';
@inject((stores, props, context) => props) @observer
export default class Location extends React.Component {
@ -15,7 +15,8 @@ export default class Location extends React.Component {
<div className="left">
<Name name={card.gsx$name} /><br />
<Rarity set={card.gsx$set} rarity={card.gsx$rarity} /><br />
<Initiative initiative={card.gsx$initiative} /><br />
<span><LocationIcon /> Location{card.gsx$types.length > 0 ? " - " + card.gsx$types : null}</span><br />
<Initiative initiative={card.gsx$initiative} />
</div>
<div className="right">
<Ability ability={card.gsx$ability} />

View File

@ -1,7 +1,7 @@
import React from 'react';
import API from '../../SpreadsheetData';
import {observer, inject} from 'mobx-react';
import {Rarity, Unique, Name, Mugic, Ability} from '../../Snippets';
import {Rarity, Unique, Name, Mugic, Ability, Tribe} from '../../Snippets';
@inject((stores, props, context) => props) @observer
export default class Attack extends React.Component {
@ -11,10 +11,10 @@ export default class Attack extends React.Component {
let mugicCounters = [];
if (card.gsx$cost == 0) {
mugicCounters.push(<span key={0}>0</span>);
mugicCounters.push(<span className="bigger" key={0}>0</span>);
}
else if (card.gsx$cost.toLowerCase() == 'x') {
mugicCounters.push(<span key={0}>X</span>);
mugicCounters.push(<span className="bigger" key={0}>X</span>);
}
else {
for (let i = 0; i < card.gsx$cost; i++) {
@ -28,7 +28,7 @@ export default class Attack extends React.Component {
<div className="left">
<Name name={card.gsx$name} /><br />
<Rarity set={card.gsx$set} rarity={card.gsx$rarity} /> <br />
<img height="20" className="icon16" src={"/src/img/icons/tribes/"+(card.gsx$tribe.toLowerCase()||"generic")+".png"} /> {card.gsx$tribe}<br />
<Tribe size="icon16" tribe={card.gsx$tribe} /> Mugic - {card.gsx$tribe}<br />
<span>{mugicCounters}</span><br />
</div>
<br />

View File

@ -1,7 +1,7 @@
import React from 'react';
import {Link} from 'react-router-dom';
import {Donate} from './Snippets';
import "../scss/home.scss";
import {Donate} from '../Snippets';
import "../../scss/home.scss";
const GithubLink = () => (
<a
@ -12,7 +12,7 @@ const GithubLink = () => (
</a>
);
export default function Home() {
export default function Home(props) {
return (
<div>
<br />

View File

@ -1,28 +1,37 @@
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
import { BrowserRouter as Router, Link, Route, Switch } from 'react-router-dom';
import loadable from 'react-loadable';
import s from '../styles/app.style';
/* Components */
import API from './SpreadsheetData';
import {PageNotFound, UnderConstruction, Donate} from './Snippets';
import EnterTheCode from './entercode/index';
import {PageNotFound, UnderConstruction, Donate, Loading} from './Snippets';
import Create from './create/index';
import Collection from './collection/index';
import Portal from './portal/index';
import Home from './Home';
const EnterTheCode = loadable({
loader: () => import('./entercode'),
loading: Loading
})
render(
<Router>
<Base path="/*" href="/" />
</Router>
, document.getElementById('root'),
);
const Home = loadable({
loader: () => import('./home'),
loading: Loading
});
const Portal = loadable({
loader: () => import('./portal'),
loading: Loading
});
const Collection = loadable({
loader: () => import('./collection'),
loading: Loading
});
function Routing(props) {
return (
<React.Fragment>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/PageNotFound" component={PageNotFound} />
<Route path="/UnderConstruction" component={UnderConstruction} />
@ -30,7 +39,7 @@ function Routing(props) {
<Route path="/create" component={Create} />
<Route path="/collection" component={Collection} />
<Route path="/portal" component={Portal} />
</React.Fragment>
</Switch>
);
}
@ -158,3 +167,10 @@ function Base(props) {
</React.Fragment>
);
}
render(
<Router>
<Base path="/*" href="/" />
</Router>
, document.getElementById('root'),
);

View File

@ -34,8 +34,9 @@ export default class Category extends React.Component {
if (!data) return (<div key={i}></div>);
return (<div key={i}>
<Interactive as={Link} {...s.link}
<Interactive as={Link}
to={url || `/portal/${this.props.type}/${card.gsx$name}`}
{...s.link}
>
<span>{card.gsx$name.split(",")[0]}</span><br />
<img className="thumb" src={API.base_image + data.gsx$thumb}></img>

View File

@ -22,7 +22,7 @@ function Artist(props) {
props.artist.split(/(?=, )/).forEach((artist, i) => {
artists.push(<Link key={i} to={`/portal/Search/?${artist.replace(", ", "")}`}>{artist}</Link>);
});
return (<div className="ability">{artists}</div>)
return (<div className="artist">{artists}</div>)
}
@inject((stores, props, context) => props) @observer

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/img/icons/location.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -177,6 +177,10 @@
white-space: pre-line;
word-wrap: break-all;
}
div {
white-space: pre-line;
}
}
// /* width */

View File

@ -4,12 +4,13 @@ const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const AsyncChunkNames = require('webpack-async-chunk-names-plugin');
require('@babel/register');
const devMode = (process.env.NODE_ENV !== 'production' && process.argv.indexOf('-p') === -1);
const config = {
entry: ['@babel/polyfill', `${__dirname}/src/components/index.js`],
entry: ['@babel/polyfill', `./src/components/index.js`],
resolve: {
extensions: ['.js', '.jsx'],
@ -23,9 +24,10 @@ const config = {
},
output: {
path: `${__dirname}/build`,
path: path.resolve(__dirname, 'build'),
filename: 'main.js',
chunkFilename: '[name].js',
publicPath: '/build/',
filename: 'bundle.js',
},
optimization: {
@ -40,12 +42,30 @@ const config = {
],
splitChunks: {
cacheGroups: {
default: false,
vendor: {
// name of the chunk
name: 'vendor',
// sync + async chunks
chunks: 'all',
// import file path containing node_modules
test: /node_modules/,
priority: 20,
},
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
chunks: "all",
enforce: true,
},
common: {
name: 'common',
minChunks: 2,
chunks: 'async',
priority: 10,
reuseExistingChunk: true,
enforce: true
},
},
},
},
@ -66,6 +86,7 @@ const config = {
'@babel/plugin-transform-runtime',
['@babel/plugin-proposal-decorators', {legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
'@babel/plugin-syntax-dynamic-import',
],
},
},
@ -85,13 +106,16 @@ const config = {
},
// First array is dev only, second is production
plugins: devMode ? [] : [
plugins: devMode
? [
new AsyncChunkNames(),
]
: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
filename: '[name].css'
}),
],
};