test instance

client/assets/skeleton.css

@@ -326,7 +326,8 @@ th,
 td {
   padding: 12px 15px;
   text-align: left;
-  border-bottom: 1px solid #E1E1E1; }
+  /*border-bottom: 1px solid #E1E1E1; */
+}
 th:first-child,
 td:first-child {
   padding-left: 0; }

client/game.css

@@ -278,3 +278,7 @@ CRYP DAMAGE
     height: 100%;
     min-width: 200px;
 }
+
+.resolving .skills button {
+    display: none;
+}

client/instance.css

@@ -28,6 +28,12 @@
     grid-area: top;
 }
 
+.instance-ui-btn {
+    font-size: 100%;
+    padding: 0;
+    margin: 0;
+}
+
 .instance .info {
     font-size: 75%;
     margin-left: 1em;
@@ -116,10 +122,6 @@
     cursor: pointer;
 }
 
-.vbox-table table td:active {
-    background-color: #333;
-}
-
 /* CRYP LIST */
 
 .cryp-list {
@@ -221,7 +223,6 @@
     flex: 1;
     border: 0;
     align-items: center;
-    padding: 0.5em 0 0 0;
     text-align: center;
 }
 
@@ -299,6 +300,7 @@
 .equip h3 {
     margin-bottom: 0.5em;
     text-transform: uppercase;
+    font-weight: bold;
     letter-spacing: 0.1em;
 }
 

client/src/components/nav.jsx

@@ -2,10 +2,14 @@ const { connect } = require('preact-redux');
 const preact = require('preact');
 const actions = require('../actions');
 
+const testGame = require('./../test.game');
+const testInstance = require('./../test.instance');
+
 const addState = connect(
     function receiveState(state) {
         const {
             ws,
+            account,
             instances,
             cryps,
         } = state;
@@ -15,16 +19,35 @@ const addState = connect(
         }
 
         return {
+            account,
             instances,
             sendInstanceState,
         };
     },
+    function receiveDispatch(dispatch) {
+        function setTestGame(id) {
+            return dispatch(actions.setGame(testGame(id)));
+        }
+
+        function setTestInstance(id) {
+            return dispatch(actions.setInstance(testInstance(id)));
+        }
+
+        return {
+            setTestGame,
+            setTestInstance,
+        };
+    }
 );
 
 function Nav(args) {
     const {
+        account,
         sendInstanceState,
         instances,
+
+        setTestGame,
+        setTestInstance,
     } = args;
 
     const joined = instances.map((i, j) => (
@@ -33,10 +56,17 @@ function Nav(args) {
 
     return (
         <nav>
+            <h2>Team</h2>
+            <button>spawn</button>
+            <button>select</button>
             <h2>Instances</h2>
             <button>list</button>
+            <button>new</button>
             <hr />
             {joined}
+            <h2>Hax</h2>
+            <button onClick={() => setTestGame(account.id)}>Test Game</button>
+            <button onClick={() => setTestInstance(account.id)}>Test Instance</button>
         </nav>
     );
 }

client/src/main.jsx

@@ -1,8 +1,8 @@
 const preact = require('preact');
-const logger = require('redux-diff-logger');
+// const logger = require('redux-diff-logger');
 
 const { Provider } = require('preact-redux');
-const { createStore, combineReducers, applyMiddleware } = require('redux');
+const { createStore, combineReducers } = require('redux');
 
 const reducers = require('./reducers');
 const actions = require('./actions');
@@ -15,8 +15,7 @@ const Body = require('./components/body.component');
 const Nav = require('./components/nav');
 
 // Redux Store
-const createStoreWithMiddleware = applyMiddleware(logger)(createStore);
+const store = createStore(
-const store = createStoreWithMiddleware(
     combineReducers({
         account: reducers.accountReducer,
         activeCryp: reducers.activeCrypReducer,
@@ -41,7 +40,6 @@ const store = createStoreWithMiddleware(
     })
 );
 
-
 document.fonts.load('16pt "Jura"').then(() => {
     const events = registerEvents(store);
     store.subscribe(() => console.log(store.getState()));

client/src/socket.jsx

@@ -1,8 +1,6 @@
 const toast = require('izitoast');
 const cbor = require('borc');
 
-const testGame = require('./test.game');
-
 const SOCKET_URL = process.env.NODE_ENV === 'production' ? 'wss://cryps.gg/ws' : 'ws://localhost:40000';
 
 function errorToast(err) {
@@ -311,8 +309,6 @@ function createSocket(events) {
                 events.setAccount(account);
                 sendAccountInstances();
                 sendAccountCryps();
-                // events.setGame(testGame(account.id));
-                // clearGameStateTimeout();
             }
 
             sendPing();

client/src/test.game.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 function testGame(uuid) {
   return {
   "id": "667ad344-dc76-40b9-bb9c-0d20f0f7f5d2",
@@ -297,7 +298,7 @@ function testGame(uuid) {
       "cryps": [
         {
           "id": "3aa0f284-1e1b-4054-b38a-b2d50db471bd",
-          "account": "ec936c53-8eab-44e7-953f-9739531cee24",
+          "account": uuid,
           "red_damage": {
             "base": 256,
             "value": Math.floor(Math.random() * 10000),
@@ -383,7 +384,7 @@ function testGame(uuid) {
         },
         {
           "id": "50e5d94e-8ebe-495c-a916-3eb509ff4683",
-          "account": "ec936c53-8eab-44e7-953f-9739531cee24",
+          "account": uuid,
           "red_damage": {
             "base": 256,
             "value": Math.floor(Math.random() * 10000),
@@ -463,7 +464,7 @@ function testGame(uuid) {
         },
         {
           "id": "5d49fe65-27f0-4372-90a3-334ef906a0f5",
-          "account": "ec936c53-8eab-44e7-953f-9739531cee24",
+          "account": uuid,
           "red_damage": {
             "base": 256,
             "value": Math.floor(Math.random() * 10000),
@@ -568,7 +569,7 @@ function testGame(uuid) {
     },
     {
       "id": "6bc9c3ce-587e-4bbe-ac81-2bc536ebbce4",
-      "source_player_id": "ec936c53-8eab-44e7-953f-9739531cee24",
+      "source_player_id": uuid,
       "source_cryp_id": "5d49fe65-27f0-4372-90a3-334ef906a0f5",
       "target_cryp_id": "82e8b940-411c-42a1-8fc2-484ec7207734",
       "skill": "Attack",
@@ -577,7 +578,7 @@ function testGame(uuid) {
     },
     {
       "id": "9d2fc857-51c7-4640-a17c-a08496480830",
-      "source_player_id": "ec936c53-8eab-44e7-953f-9739531cee24",
+      "source_player_id": uuid,
       "source_cryp_id": "3aa0f284-1e1b-4054-b38a-b2d50db471bd",
       "target_cryp_id": "50e5d94e-8ebe-495c-a916-3eb509ff4683",
       "skill": "Attack",
@@ -586,7 +587,7 @@ function testGame(uuid) {
     },
     {
       "id": "e1bd2d77-181a-4f2d-a4f6-78c9ad3c5b3b",
-      "source_player_id": "ec936c53-8eab-44e7-953f-9739531cee24",
+      "source_player_id": uuid,
       "source_cryp_id": "50e5d94e-8ebe-495c-a916-3eb509ff4683",
       "target_cryp_id": "96ca4a0e-fed2-4ea2-9ec5-ae308f8dde4b",
       "skill": "Attack",

client/styles.css

@@ -26,6 +26,12 @@ html, body, main {
     /*overflow: hidden;*/
 }
 
+@media (max-width: 1500px) {
+    .cryps {
+        font-size: 75%;
+    }
+}
+
 html {
     box-sizing: border-box;
     margin: 0;
@@ -51,6 +57,11 @@ h3 {
     margin: 0;
 }
 
+h4 {
+    font-size: 1.1em;
+    margin: 0;
+}
+
 figure {
     margin: 0;
 }
@@ -72,8 +83,17 @@ nav {
     white-space: nowrap;
 }
 
+nav h2:first-child {
+    margin: 0;
+}
+
+nav h2 {
+    margin-top: 2em;
+}
+
 nav hr {
-    margin: 2em 0;
+    margin: 1em 0;
+    border-color: whitesmoke;
 }
 
 nav button {
@@ -179,14 +199,23 @@ table {
     margin-bottom: 0;
 }
 
+thead {
+    text-transform: uppercase;
+}
+
 table td {
     border: 1px solid #222;
+    border-color: #222;
     padding: 0.2em;
     text-align: center;
     height: 40px;
     text-transform: uppercase;
 }
 
+table tr {
+    border-color: #222;
+}
+
 table td svg {
     stroke-width: 2px;
     height: 96%;
@@ -194,7 +223,7 @@ table td svg {
 }
 
 table .highlight {
-    background: #333;
+    background: #222;
     color: whitesmoke;
     font-weight: bold;
 }
@@ -393,7 +422,7 @@ header {
 }
 
 .refresh-btn {
-    border: 1px solid whitesmoke;
+    border: 1px solid #222;
     float: right;
     font-size: 1.5em;
 }
@@ -403,7 +432,7 @@ header {
 
     display: flex;
     flex-flow: row wrap;
-    border: 1px solid whitesmoke;
+    border: 2px solid #333;
     padding: 1em;
     margin-bottom: 1.5em;
 }
@@ -414,117 +443,15 @@ header {
 }
 
 .create-form.disabled {
-    border: 1px solid #333;
+    border: 2px solid #222;
-    color: #333;
+    color: #222;
 }
 
-/*.create-form select, .create-form input, .create-form label {
-    margin: 0;
-}
-*/
 .create-form button {
     flex: 0 1 25%;
     font-size: 1.5em;
 }
 
-.menu-btn, .nav-btn {
-    flex: 1 0 25%;
-}
-
-/* nav hidden on desktop */
-.nav-btn {
-    display: none;
-}
-
-/*
-    INFO
-*/
-.thresholds .spec-goals {
-    display: flex;
-    justify-content: space-around;
-}
-
-.info-spec {
-    margin-top: 2em;
-}
-
-.spec-goals figure {
-    margin: 1em 0;
-}
-
-.spec-goals figure svg {
-    height: 1em;
-}
-
-.spec-goals .unmet {
-    opacity: 0.5;
-}
-
-.info-cryp .skills {
-    display: flex;
-}
-
-.info-cryp .skills button {
-    border: 1px solid whitesmoke;
-}
-
-.info-cryp .stats, .info-cryp .specs {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-around;
-}
-
-.info-cryp .stats .speed {
-    flex: 1 0 100%;
-}
-
-.info-cryp .stats figure {
-    flex: 0 0 30%;
-    border: 0;
-    margin: 1em 0;
-    text-align: center;
-}
-
-.info-cryp .specs figure {
-    border: 0;
-    margin: 1em 0;
-    text-align: center;
-}
-
-
-.stats figure {
-    width: 100%;
-    border: 0;
-    padding: 0.5em 0 0 0;
-    text-align: center;
-}
-
-.stats figcaption {
-    font-size: 75%;
-    white-space: nowrap;
-}
-
-.resolving .skills button {
-    display: none;
-}
-
-.instance-cryp button, .info-cryp button {
-    flex: 1 1 100%;
-    color: whitesmoke;
-    font-size: 16pt;
-    padding: 0;
-    margin: 0;
-    border-width: 0px;
-    border-bottom-width: 0px;
-    border-left-width: 1px;
-    border-right-width: 0px;
-    border-top-width: 1px;
-}
-
-.instance-cryp button:first-child {
-    border-top-width: 0;
-}
-
 figure.gray {
     color: #333;
     stroke-color: #333;
@@ -542,12 +469,6 @@ section .top {
     flex: 1;
 }
 
-@media (max-width: 1500px) {
-    .cryps {
-        font-size: 75%;
-    }
-}
-
 .ready:hover {
     transition-property: all;
     transition-duration: 0.5s;
@@ -580,11 +501,8 @@ section .top {
     transition-duration: 0.5s;
     transition-delay: 0;
     transition-timing-function: ease;
-
 }
 
-.instance-ui-btn {
+.menu-instance-list table {
-    font-size: 100%;
+    margin-bottom: 2em;
-    padding: 0;
-    margin: 0;
 }