init

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,