rename constructs

client/src/components/list.jsx

@@ -14,6 +14,7 @@ const addState = connect(
         const {
             ws,
             constructs,
+            constructRename,
             team,
             instanceList,
             account,
@@ -35,25 +36,47 @@ const addState = connect(
             return ws.sendInstanceList();
         }
 
-        function selectConstruct(id) {
+        function sendConstructAvatarReroll(id) {
             if (!mtxActive) return false;
             console.log('using', mtxActive, 'on', id);
-            ws.sendMtxApply(id, mtxActive);
+            return ws.sendMtxApply(id, mtxActive, '');
+        }
+
+        function sendConstructRename(id, name) {
+            ws.sendMtxApply(id, 'Rename', name);
         }
 
         return {
             account,
             constructs,
+            instanceList,
+            mtxActive,
+            constructRename,
             team,
+            sendConstructRename,
             sendInstanceJoin,
             sendInstanceState,
             sendInstanceList,
-            instanceList,
-
-            mtxActive,
-            selectConstruct
+            sendConstructAvatarReroll,
         };
     },
+
+    function receiveDispatch(dispatch) {
+        function setConstructRename(id) {
+            dispatch(actions.setConstructRename(id));
+        }
+
+        function clearMtxRename() {
+            dispatch(actions.setConstructRename(null));
+            dispatch(actions.setMtxActive(null));
+        }
+
+        return {
+            clearMtxRename,
+            setConstructRename,
+        };
+    }
+
 );
 
 function List(args) {
@@ -61,13 +84,16 @@ function List(args) {
         account,
         team,
         constructs,
+        constructRename,
+        clearMtxRename,
+        setConstructRename,
+        sendConstructRename,
         sendInstanceState,
         sendInstanceJoin,
         sendInstanceList,
         instanceList,
-
         mtxActive,
-        selectConstruct,
+        sendConstructAvatarReroll,
     } = args;
 
     function listElements() {
@@ -115,16 +141,40 @@ function List(args) {
     const constructPanels = constructs
         .filter(c => team.includes(c.id))
         .sort(idSort)
-        .map(construct =>
-            <div
-                key={construct.id}
-                style={ mtxActive ? { cursor: 'pointer' } : {}}
-                onClick={() => selectConstruct(construct.id)}
-                class="menu-construct" >
-                <ConstructAvatar construct={construct} />
-                <h2>{construct.name}</h2>
-            </div>
-        );
+        .map(construct => {
+            const constructName = constructRename === construct.id
+                ? <input id='renameInput' type="text" style="text-align: center" placeholder={construct.name}></input>
+                : <h2>{construct.name}</h2>;
+
+            const confirm = constructRename === construct.id
+                ? <button onClick={() => sendConstructRename(construct.id, document.getElementById('renameInput').value)}>
+                    Confirm
+                </button>
+                : false;
+
+            const cancel = constructRename === construct.id
+                ? <button onClick={() => clearMtxRename()}>
+                    Cancel
+                </button>
+                : false;
+            return (
+                <div
+                    key={construct.id}
+                    style={ mtxActive ? { cursor: 'pointer' } : {}}
+                    onClick={() => {
+                        if (!mtxActive) return false;
+                        if (mtxActive === 'Rename') return setConstructRename(construct.id);
+                        sendConstructAvatarReroll(construct.id);
+                    }}
+                    class="menu-construct" >
+                    <ConstructAvatar construct={construct} />
+                    {constructName}
+                    {confirm}
+                    {cancel}
+
+                </div>
+            );
+        });
 
     return (
         <main class="menu-instances">