compress

client/assets/styles/game.css

@@ -98,7 +98,7 @@
 
 @media (max-width: 1500px) {
     .game {
-        font-size: 75%;
+        font-size: 12pt;
     }
 
     .game-cryp figure {

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 {

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:

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;
 }
 

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:

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 });
 

client/src/app.jsx

@@ -16,28 +16,7 @@ const Nav = require('./components/nav');
 
 // Redux Store
 const store = createStore(
-    combineReducers({
+    combineReducers(reducers)
-        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,
-    })
 );
 
 document.fonts.load('16pt "Jura"').then(() => {

client/src/components/main.jsx

@@ -9,13 +9,18 @@ const InstanceContainer = require('./instance.container');
 
 const addState = connect(
     state => {
-        const { game, instance, ws, account } = state;
+        const { game, instance, account, nav } = state;
-        return { game, instance, account };
+        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 (
         <MenuContainer />
     );

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 (
         <nav>
             <h2>Team</h2>
-            <button>spawn</button>
+            <button onClick={() => navTo('team')}>spawn</button>
-            <button>select</button>
+            <button onClick={() => navTo('team')}>select</button>
             <h2>Instances</h2>
-            <button>list</button>
+            <button onClick={() => navTo('instances')}>list</button>
-            <button>new</button>
+            <button onClick={() => navTo('instances')}>new</button>
             <hr />
             {joined}
             <h2>Hax</h2>

client/src/reducers.jsx

@@ -13,24 +13,25 @@ function createReducer(defaultState, actionType) {
 
 /* eslint-disable key-spacing */
 module.exports = {
-    accountReducer:         createReducer(null, actions.SET_ACCOUNT),
+    account:        createReducer(null, actions.SET_ACCOUNT),
-    activeCrypReducer:      createReducer(null, actions.SET_ACTIVE_CRYP),
+    activeCryp:     createReducer(null, actions.SET_ACTIVE_CRYP),
-    activeSkillReducer:     createReducer(null, actions.SET_ACTIVE_SKILL),
+    activeSkill:    createReducer(null, actions.SET_ACTIVE_SKILL),
-    activeVarReducer:       createReducer(null, actions.SET_ACTIVE_VAR),
+    activeVar:      createReducer(null, actions.SET_ACTIVE_VAR),
-    combinerReducer:        createReducer([null, null, null], actions.SET_COMBINER),
+    combiner:       createReducer([null, null, null], actions.SET_COMBINER),
-    crypsReducer:           createReducer([], actions.SET_CRYPS),
+    cryps:          createReducer([], actions.SET_CRYPS),
-    gameReducer:            createReducer(null, actions.SET_GAME),
+    game:           createReducer(null, actions.SET_GAME),
-    infoReducer:            createReducer([null, null], actions.SET_INFO),
+    info:           createReducer([null, null], actions.SET_INFO),
-    instanceReducer:        createReducer(null, actions.SET_INSTANCE),
+    instance:       createReducer(null, actions.SET_INSTANCE),
-    instancesReducer:       createReducer([], actions.SET_INSTANCES),
+    instances:      createReducer([], actions.SET_INSTANCES),
-    pingReducer:            createReducer(null, actions.SET_PING),
+    nav:            createReducer(null, actions.SET_NAV),
-    playerReducer:          createReducer(null, actions.SET_PLAYER),
+    ping:           createReducer(null, actions.SET_PING),
-    reclaimingReducer:      createReducer(false, actions.SET_RECLAIMING),
+    player:         createReducer(null, actions.SET_PLAYER),
-    resolutionReducer:      createReducer(null, actions.SET_RESOLUTION),
+    reclaiming:     createReducer(false, actions.SET_RECLAIMING),
-    selectedCrypsReducer:   createReducer([null, null, null], actions.SET_SELECTED_CRYPS),
+    resolution:     createReducer(null, actions.SET_RESOLUTION),
-    showLogReducer:         createReducer(false, actions.SET_SHOW_LOG),
+    selectedCryps:  createReducer([null, null, null], actions.SET_SELECTED_CRYPS),
-    vboxHiddenReducer:      createReducer(false, actions.SET_VBOX_HIDDEN),
+    showLog:        createReducer(false, actions.SET_SHOW_LOG),
-    vboxHighlightReducer:   createReducer([], actions.SET_VBOX_HIGHLIGHT),
+    vboxHidden:     createReducer(false, actions.SET_VBOX_HIDDEN),
-    vboxInfoReducer:        createReducer({ combos: [], vars: [] }, actions.SET_VBOX_INFO),
+    vboxHighlight:  createReducer([], actions.SET_VBOX_HIGHLIGHT),
-    wsReducer:              createReducer(null, actions.SET_WS),
+    vboxInfo:       createReducer({ combos: [], vars: [] }, actions.SET_VBOX_INFO),
+    ws:             createReducer(null, actions.SET_WS),
 };