construct deletes

client/assets/styles/styles.css

@@ -368,6 +368,26 @@ header {
     transition-timing-function: ease;
 }
 
+.menu-construct .controls {
+    display: flex;
+}
+
+.menu-construct .controls h2 {
+    flex: 1;
+}
+
+.menu-construct .controls button {
+    color: #444;
+    flex: 0;
+    margin: 0;
+    border: none;
+    padding: 0.25em;
+}
+
+.menu-construct .controls button:hover, .menu-construct .controls button:active {
+    color: whitesmoke;
+}
+
 .menu-construct .avatar {
     background-size: contain;
     background-repeat: no-repeat;

client/src/actions.jsx

@@ -1,5 +1,6 @@
 export const setAccount = value => ({ type: 'SET_ACCOUNT', value });
 export const setConstructs = value => ({ type: 'SET_CONSTRUCTS', value });
+export const setConstructDeleteId = value => ({ type: 'SET_CONSTRUCT_DELETE_ID', value });
 export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value });
 export const setSkip = value => ({ type: 'SET_SKIP', value });
 export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });

client/src/components/team.jsx

@@ -12,16 +12,22 @@ const idSort = stringSort('id');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, constructs, team } = state;
+        const { ws, constructs, team, constructDeleteId } = state;
 
         function sendConstructSpawn(name) {
             return ws.sendConstructSpawn(name);
         }
 
+        function sendConstructDelete(id) {
+            return ws.sendConstructDelete(id);
+        }
+
         return {
             constructs,
+            constructDeleteId,
             team,
             sendConstructSpawn,
+            sendConstructDelete,
         };
     },
 
@@ -31,8 +37,13 @@ const addState = connect(
             dispatch(actions.setTeam(constructIds));
         }
 
+        function setDeleteId(id) {
+            dispatch(actions.setConstructDeleteId(id));
+        }
+
         return {
             setTeam,
+            setDeleteId,
         };
     }
 );
@@ -41,9 +52,13 @@ function Team(args) {
     const {
         constructs,
         team,
+        constructDeleteId,
 
         setTeam,
         sendConstructSpawn,
+        sendConstructDelete,
+
+        setDeleteId,
     } = args;
 
     if (!constructs) return <div></div>;
@@ -71,14 +86,26 @@ function Team(args) {
 
         const borderColour = selected ? COLOURS[colour] : '#000000';
 
+        function deleteClick(e) {
+            e.stopPropagation();
+            if (constructDeleteId === construct.id) return sendConstructDelete(construct.id);
+            return setDeleteId(construct.id);
+        }
+
+        // <button disabled={true} >↻</button>
         return (
             <div
                 key={construct.id}
                 class="menu-construct"
                 style={ { 'border-color': borderColour || 'whitesmoke' } }
                 onClick={() => selectConstruct(construct.id)} >
+                <div class="controls">
+                    <h2>
+                        {constructDeleteId === construct.id ? 'Confirm delete...' : construct.name}
+                    </h2>
+                    <button onClick={e => deleteClick(e)} >❌</button>
+                </div>
                 <ConstructAvatar name={construct.name} id={construct.id} />
-                <h2>{construct.name}</h2>
             </div>
         );
     });
@@ -89,7 +116,7 @@ function Team(args) {
         .map(i => <SpawnButton key={constructs.length + i} spawn={name => sendConstructSpawn(name)} />);
 
     return (
-        <main class="team">
+        <main class="team" onClick={() => setDeleteId(null)}>
             {constructPanels}
             {spawnButtons}
         </main>

client/src/keyboard.jsx

@@ -12,6 +12,7 @@ function setupKeys(store) {
     key('esc', () => store.dispatch(actions.setItemEquip(null)));
     key('esc', () => store.dispatch(actions.setItemUnequip(null)));
     key('esc', () => store.dispatch(actions.setVboxHighlight([])));
+    key('esc', () => store.dispatch(actions.setConstructDeleteId(null)));
 }
 
 module.exports = setupKeys;

client/src/reducers.jsx

@@ -17,6 +17,7 @@ module.exports = {
     activeSkill:        createReducer(null, 'SET_ACTIVE_SKILL'),
     combiner:           createReducer([null, null, null], 'SET_COMBINER'),
     constructs:         createReducer([], 'SET_CONSTRUCTS'),
+    constructDeleteId:  createReducer(null, 'SET_CONSTRUCT_DELETE_ID'),
     game:               createReducer(null, 'SET_GAME'),
     info:               createReducer(null, 'SET_INFO'),
     instance:           createReducer(null, 'SET_INSTANCE'),

client/src/socket.jsx

@@ -59,6 +59,10 @@ function createSocket(events) {
         send({ method: 'construct_spawn', params: { name } });
     }
 
+    function sendConstructDelete(id) {
+        send({ method: 'construct_delete', params: { id } });
+    }
+
     function sendGameState(id) {
         send({ method: 'game_state', params: { id } });
     }
@@ -324,6 +328,7 @@ function createSocket(events) {
         sendGameSkill,
         sendGameTarget,
         sendConstructSpawn,
+        sendConstructDelete,
         sendInstanceJoin,
         sendInstanceList,
         sendInstanceReady,