construct deletes

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>