![]({"/src/img/icons/tribes/"+item+".png"}){kind=icon}
);
});
- let elements = gen("elements", "inline", (item) => {
+ const elements = gen("elements", "inline", (item) => {
return (![]({"/src/img/icons/elements/"+item+".png"}){kind=icon}
);
}).slice(0, -2);
diff --git a/src/components/entercode/EnterTheCode.js b/src/components/entercode/EnterTheCode.js
index 6fef079..e80f5ab 100644
--- a/src/components/entercode/EnterTheCode.js
+++ b/src/components/entercode/EnterTheCode.js
@@ -7,14 +7,17 @@ import DigitInput from 'react-digit-input';
import API from '../SpreadsheetData';
import {Loading} from '../Snippets';
import style from '../../styles/style';
+import './packs.scss';
const s = Object.create(style);
s.input = {
- width: '1em',
- height: '1em',
+ width: '1.2em',
+ height: '1.4em',
font: 'inherit',
textAlign: 'center',
- margin: '0.1em',
+ margin: '0.05em',
+ backgroundColor: "rgba(0,0,0,0)",
+ color: "white",
}
s.inputGroup = {
@@ -32,7 +35,7 @@ s.hyphen = {
@inject((stores, props, context) => props) @observer
export default class EnterTheCode extends React.Component {
@observable code = "";
- @observable message = null;
+ message = observable({contents: null}, { contents: observable.ref });
@observable fan = null;
render() {
@@ -53,18 +56,21 @@ export default class EnterTheCode extends React.Component {
let validate = (e) => {
e.preventDefault();
e.stopPropagation();
- if (this.code == "" || this.code.indexOf(" ") === 1) {
- this.message = (
+
+ if (this.code.length < 12 || this.code.indexOf(" ") != -1) {
+ this.message.contents = (
Please enter a 12 digit code
); } else { let card = this.fan[getRandomInt(0, this.fan.length)]; - this.message = ( -
+ let rgx = /.*.png|.*.jpg/i;
+ let img = (rgx.test(card.gsx$image.$t) ? card.gsx$image.$t : API.base_image + card.gsx$image.$t);
+ this.message.contents = (
+
-
-
+
+
);
}
@@ -103,7 +109,7 @@ export default class EnterTheCode extends React.Component {
- {this.message} + {this.message.contents}
);
}
diff --git a/src/components/entercode/PackSimulator.js b/src/components/entercode/PackSimulator.js
index 0a43f72..0ebeb2b 100644
--- a/src/components/entercode/PackSimulator.js
+++ b/src/components/entercode/PackSimulator.js
@@ -7,7 +7,7 @@ import Interactive from 'react-interactive';
import API from '../SpreadsheetData';
import {Loading} from '../Snippets';
import s from '../../styles/style';
-import '../../scss/packs.scss';
+import './packs.scss';
@inject((stores, props, context) => props) @observer
export default class PackSimulator extends React.Component {
diff --git a/src/components/entercode/index.js b/src/components/entercode/index.js
index a17b321..18c3f64 100644
--- a/src/components/entercode/index.js
+++ b/src/components/entercode/index.js
@@ -16,7 +16,7 @@ export default class Base extends React.Component {
function Routing(props) {
const match = props.match;
return (
- Congrats on your scan!
-
{card.gsx$name.$t}
-
{card.gsx$name.$t}
+
- {this.message} + {this.message.contents}
+
);
};
+ let base_path = true;
let cat_title = "";
- let top_content = ();
+ let top_content = ();
let bottom_nav = [];
+ let path = this.props.location.pathname.split("/");
+ if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
+
// ** Process the tribe ** //
if (this.type == "creatures" || this.type == "mugic") {
// /portal/Creatures/
// /portal/Creatures/{Tribe}
// The first / gets counted
- let path = this.props.location.pathname.split("/");
- if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
const tribe = (() => {
if (path.length >= 4 && API.tribes.includes(path[3])) return path[3];
else return null;
})();
+ if (tribe) {
+ if (path.length > 4) {
+ base_path = false;
+ top_content =
+ if (base_path) {
+ return (
+
);
+
+ );
}
}
diff --git a/src/components/portal/index.js b/src/components/portal/index.js
index dd3605b..5bf62fa 100644
--- a/src/components/portal/index.js
+++ b/src/components/portal/index.js
@@ -17,7 +17,7 @@ import Creature from './Single/Creature';
import Location from './Single/Location';
import Mugic from './Single/Mugic';
-import '../../scss/portal.scss';
+import './portal.scss';
@inject((stores, props, context) => props) @observer
export default class Base extends React.Component {
diff --git a/src/scss/portal.scss b/src/components/portal/portal.scss
similarity index 91%
rename from src/scss/portal.scss
rename to src/components/portal/portal.scss
index a0b7475..15fa5e8 100644
--- a/src/scss/portal.scss
+++ b/src/components/portal/portal.scss
@@ -1,3 +1,5 @@
+@import '../base';
+
.portal {
/* portal css */
.navbar h1 {
@@ -224,6 +226,31 @@
img {
margin-right: 3px;
margin-left: 3px;
+ min-width: 96px;
+ height: 100px;
+ }
+ }
+ }
+
+ &.base_path {
+ .entry_nav, .cat_title {
+ background-color: inherit;
+ }
+ .cat_title {
+ padding-top: 1em;
+ padding-bottom: 1em;
+ }
+ .entry_nav {
+ overflow-y: auto;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ align-content: space-between;
+ > div {
+ overflow-wrap: break-word;
+ margin: 3px;
+ max-width: 106px;
}
}
}
diff --git a/src/css/legacy.css b/src/css/legacy.css
index 4b0d08d..7e204dd 100644
--- a/src/css/legacy.css
+++ b/src/css/legacy.css
@@ -3,8 +3,10 @@
#player {
width: calc(100% - 20px);
margin: 0 10px;
+ text-align: center;
}
+
/*-------------- Content Formatting --------------*/
/*------------------------------------------------------*/
.shift-txt-tenR {margin-left:10px;}
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index 7fafd76..85b7a9f 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -4,7 +4,6 @@ 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);
@@ -43,7 +42,7 @@ const config = {
splitChunks: {
cacheGroups: {
default: false,
- vendor: {
+ vendors: {
// name of the chunk
name: 'vendor',
// sync + async chunks
@@ -61,10 +60,10 @@ const config = {
common: {
name: 'common',
minChunks: 2,
- chunks: 'async',
+ chunks: 'all',
priority: 10,
reuseExistingChunk: true,
- enforce: true
+ enforce: true,
},
},
},
@@ -108,9 +107,7 @@ const config = {
// First array is dev only, second is production
plugins: devMode
? [
- new AsyncChunkNames(),
- ]
- : [
+ ] : [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
+
+ );
+ }
+
+ return (
+ {cat_title}
+ {bottom_nav}
+ {top_content}
{cat_title}
{bottom_nav}
-