init

WORKLOG.md

@@ -1,9 +1,15 @@
 # WORK WORK
 ## NOW
-*SERVER*
-* tx middleware
-  remove tx from methods that don't need it
+*PRODUCTION*
+* serde serialize privatise
+* stripe prod
+* account page
+* graphs n shit
+* acp init
+* DO postgres
 
+## SOON
+*SERVER*
 * modules
   * troll life -> dmg
   * prince of peace
@@ -11,11 +17,6 @@
   * fuck magic
   * empower on ko
 
-* serde serialize privatise
-
-## SOON
-*OPS*
-
 *$$$*
 * chatwheel
 * eth adapter
@@ -39,9 +40,6 @@ the ready screen should totally be
 your constructs facing off against the other guy
 the chatwheel
 and a ready button
-i'm also gonna put back in
-if you click a vbox item and click inventory
-it buys it
 
 *SERVER*
 * vbox drops chances

client/assets/styles/game.css

@@ -303,12 +303,12 @@
     border-top: 1px solid purple;
 }
 
-.game .img {
+.game .img, .faceoff .img {
     position: relative;
     height: 100%;
 }
 
-.game .avatar {
+.game .avatar, .faceoff .avatar {
     grid-area: avatar;
     width: 100%;
     height: 100%;

client/assets/styles/instance.less

@@ -379,6 +379,37 @@
     opacity: 0.5;
 }
 
+
+.faceoff {
+    overflow: hidden;
+    display: grid;
+    grid-template-rows: min-content 1fr 1fr min-content ;
+    grid-template-areas:
+        "oppname"
+        "opponent"
+        "player"
+        "playername";
+
+    .ready {
+        background: black;
+        color: @green;
+    }
+
+    h1 {
+        text-align: center;
+    }
+
+    .opponent-name {
+        margin-bottom: 1em;
+        grid-area: oppname;
+    }
+
+    .player-name {
+        margin-top: 1em;
+        grid-area: playername;
+    }
+}
+
 /* Mobile Nav*/
 .instance-nav { display: none; }
 

client/src/components/faceoff.jsx

@@ -0,0 +1,82 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const actions = require('../actions');
+
+const { ConstructAvatar } = require('./construct');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            instance,
+            account,
+        } = state;
+
+
+        return {
+            instance,
+            account,
+        };
+    },
+);
+
+function FaceoffConstruct(args) {
+    const {
+        construct
+    } = args;
+
+    return (
+        <div class='game-construct'>
+            <h3 class="name"> {construct.name} </h3>
+            <ConstructAvatar construct={construct} />
+        </div>
+    )
+}
+
+function Faceoff(props) {
+    const {
+        instance,
+        account,
+    } = props;
+
+    if (!instance) return <div>...</div>;
+
+    const otherTeam = instance.players.find(t => t.id !== account.id);
+    const playerTeam = instance.players.find(t => t.id === account.id);
+
+    function PlayerTeam(team) {
+        const constructs = team.constructs.map((c, i) =>
+            <FaceoffConstruct key={c.id} construct={c}/>);
+
+        const classes = `team player ${team.ready ? 'ready' : ''}`
+        return (
+            <div class={classes}>
+                {constructs}
+            </div>
+        );
+    }
+
+    function OpponentTeam(team) {
+        const constructs = team.constructs.map((c, i) =>
+            <FaceoffConstruct key={c.id} construct={c}/>);
+
+        const classes = `team opponent ${team.ready ? 'ready' : ''}`
+
+        return (
+            <div class={classes}>
+                {constructs}
+            </div>
+        );
+    }
+
+    return (
+        <main class="faceoff">
+            <h1 class={`opponent-name ${otherTeam.ready ? 'ready' : ''}`}>{otherTeam.name}</h1>
+            {OpponentTeam(otherTeam)}
+            {PlayerTeam(playerTeam)}
+            <h1 class={`player-name ${playerTeam.ready ? 'ready' : ''}`}>{playerTeam.name}</h1>
+        </main>
+    );
+}
+
+module.exports = addState(Faceoff);

client/src/components/instance.component.jsx

@@ -6,6 +6,7 @@ const InfoContainer = require('./info.container');
 const InstanceConstructsContainer = require('./instance.constructs');
 // const EquipmentContainer = require('./instance.equip');
 const ScoreBoard = require('./scoreboard');
+const Faceoff = require('./faceoff');
 
 const actions = require('../actions');
 
@@ -49,11 +50,7 @@ function Instance(args) {
     if (!instance) return false;
 
     if (instance.phase !== 'InProgress') {
-        return (
-            <main class="instance lobby" onMouseOver={() => setInfo(null)} >
-                <ScoreBoard />
-            </main>
-        );
+        return <Faceoff />;
     }
 
     function instanceClick(e) {

client/src/components/instance.constructs.jsx

@@ -11,10 +11,6 @@ const addState = connect(
     function receiveState(state) {
         const { ws, instance, player, account, itemInfo, itemEquip, activeConstruct } = state;
 
-        function sendInstanceReady() {
-            return ws.sendInstanceReady(instance.id);
-        }
-
         function sendVboxApply(constructId, i) {
             return ws.sendVboxApply(instance.id, constructId, i);
         }
@@ -27,7 +23,6 @@ const addState = connect(
             instance,
             player,
             account,
-            sendInstanceReady,
             sendVboxApply,
             itemInfo,
             itemEquip,