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 (