diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css
index e44ddd67..55dae121 100644
--- a/client/assets/styles/game.css
+++ b/client/assets/styles/game.css
@@ -98,7 +98,7 @@
@media (max-width: 1500px) {
.game {
- font-size: 75%;
+ font-size: 12pt;
}
.game-cryp figure {
diff --git a/client/assets/styles/instance.css b/client/assets/styles/instance.css
index 1abf193c..51f5889b 100644
--- a/client/assets/styles/instance.css
+++ b/client/assets/styles/instance.css
@@ -167,6 +167,7 @@
justify-self: center;
grid-area: avatar;
min-width: 150px;
+ max-width: 250px;
}
.cryp-list .name {
@@ -342,6 +343,7 @@
font-size: 1em;
padding: 0.2em;
border-width: 0px;
+ margin-bottom: 0.5em;
}
button.equip {
diff --git a/client/assets/styles/instance.mobile.css b/client/assets/styles/instance.mobile.css
index 17f25098..808f1e44 100644
--- a/client/assets/styles/instance.mobile.css
+++ b/client/assets/styles/instance.mobile.css
@@ -115,7 +115,7 @@
.instance-cryp-active {
flex: 1;
- order: 3;
+ order: -1;
display: grid;
grid-template-rows: min-content min-content min-content min-content min-content;
grid-template-areas:
diff --git a/client/assets/styles/styles.css b/client/assets/styles/styles.css
index db6f578e..ebb0e971 100644
--- a/client/assets/styles/styles.css
+++ b/client/assets/styles/styles.css
@@ -9,7 +9,7 @@ html, body, #cryps {
background-color: #000000;
font-family: 'Jura';
color: whitesmoke;
- font-size: 16pt;
+ font-size: 14pt;
user-select: none;
-moz-user-select: none;
@@ -58,6 +58,7 @@ h4 {
figure {
margin: 0;
+ text-align: center;
}
#cryps {
@@ -199,9 +200,9 @@ thead {
table td {
border: 1px solid #222;
border-color: #222;
- padding: 0.2em;
+ padding: 0;
text-align: center;
- height: 40px;
+ height: 2em;
text-transform: uppercase;
}
diff --git a/client/assets/styles/styles.mobile.css b/client/assets/styles/styles.mobile.css
index a051e0ba..e15b2ff7 100644
--- a/client/assets/styles/styles.mobile.css
+++ b/client/assets/styles/styles.mobile.css
@@ -1,6 +1,6 @@
@media (max-height: 800px), (max-width: 1000px) {
#cryps {
- font-size: 55%;
+ font-size: 12pt;
grid-template-columns: min-content 1fr;
grid-template-rows: min-content 1fr;
grid-template-areas:
diff --git a/client/src/actions.jsx b/client/src/actions.jsx
index bef3732d..7acde2a4 100644
--- a/client/src/actions.jsx
+++ b/client/src/actions.jsx
@@ -16,6 +16,9 @@ export const setVboxHidden = value => ({ type: SET_VBOX_HIDDEN, value });
export const SET_INSTANCES = 'SET_INSTANCES';
export const setInstances = value => ({ type: SET_INSTANCES, value });
+export const SET_NAV = 'SET_NAV';
+export const setNav = value => ({ type: SET_NAV, value });
+
export const SET_INSTANCE = 'SET_INSTANCE';
export const setInstance = value => ({ type: SET_INSTANCE, value });
diff --git a/client/src/app.jsx b/client/src/app.jsx
index 97375e3d..0b41e115 100644
--- a/client/src/app.jsx
+++ b/client/src/app.jsx
@@ -16,28 +16,7 @@ const Nav = require('./components/nav');
// Redux Store
const store = createStore(
- combineReducers({
- account: reducers.accountReducer,
- activeCryp: reducers.activeCrypReducer,
- activeSkill: reducers.activeSkillReducer,
- activeVar: reducers.activeVarReducer,
- combiner: reducers.combinerReducer,
- cryps: reducers.crypsReducer,
- game: reducers.gameReducer,
- info: reducers.infoReducer,
- instance: reducers.instanceReducer,
- instances: reducers.instancesReducer,
- ping: reducers.pingReducer,
- player: reducers.playerReducer,
- reclaiming: reducers.reclaimingReducer,
- resolution: reducers.resolutionReducer,
- selectedCryps: reducers.selectedCrypsReducer,
- vboxInfo: reducers.vboxInfoReducer,
- vboxHidden: reducers.vboxHiddenReducer,
- vboxHighlight: reducers.vboxHighlightReducer,
- showLog: reducers.showLogReducer,
- ws: reducers.wsReducer,
- })
+ combineReducers(reducers)
);
document.fonts.load('16pt "Jura"').then(() => {
diff --git a/client/src/components/main.jsx b/client/src/components/main.jsx
index 26ff037d..a659001b 100644
--- a/client/src/components/main.jsx
+++ b/client/src/components/main.jsx
@@ -9,13 +9,18 @@ const InstanceContainer = require('./instance.container');
const addState = connect(
state => {
- const { game, instance, ws, account } = state;
- return { game, instance, account };
+ const { game, instance, account, nav } = state;
+ return { game, instance, account, nav };
}
);
function renderBody(props) {
- const { game, instance, account } = props;
+ const {
+ game,
+ instance,
+ account,
+ nav,
+ } = props;
if (!account) {
return (
@@ -37,6 +42,8 @@ function renderBody(props) {
);
}
+ // if (nav === 'list')
+
return (
);
diff --git a/client/src/components/nav.jsx b/client/src/components/nav.jsx
index 03199888..94db952b 100644
--- a/client/src/components/nav.jsx
+++ b/client/src/components/nav.jsx
@@ -33,9 +33,14 @@ const addState = connect(
return dispatch(actions.setInstance(testInstance(id)));
}
+ function navTo(place) {
+ return dispatch(actions.setNav(place));
+ }
+
return {
setTestGame,
setTestInstance,
+ navTo,
};
}
);
@@ -46,6 +51,7 @@ function Nav(args) {
sendInstanceState,
instances,
+ navTo,
setTestGame,
setTestInstance,
} = args;
@@ -57,11 +63,11 @@ function Nav(args) {
return (