rename constructs

client/src/actions.jsx

@@ -6,6 +6,7 @@ export const setActiveSkill = (constructId, skill) => ({ type: 'SET_ACTIVE_SKILL
 export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(value) });
 export const setConstructEditId = value => ({ type: 'SET_CONSTRUCT_EDIT_ID', value });
 export const setConstructs = value => ({ type: 'SET_CONSTRUCTS', value });
+export const setConstructRename = value => ({ type: 'SET_CONSTRUCT_RENAME', value });
 export const setGame = value => ({ type: 'SET_GAME', value });
 export const setInfo = value => ({ type: 'SET_INFO', value });
 export const setInstance = value => ({ type: 'SET_INSTANCE', value });

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">

client/src/events.jsx

@@ -120,6 +120,10 @@ function registerEvents(store) {
         store.dispatch(actions.setCombiner([null, null, null]));
     }
 
+    function clearConstructRename() {
+        store.dispatch(actions.setConstructRename(null));
+    }
+
     function clearMtxActive() {
         store.dispatch(actions.setMtxActive(null));
     }
@@ -223,6 +227,7 @@ function registerEvents(store) {
 
     return {
         clearCombiner,
+        clearConstructRename,
         clearInfo,
         clearInstance,
         clearMtxActive,

client/src/reducers.jsx

@@ -19,6 +19,7 @@ module.exports = {
     combiner:           createReducer([null, null, null], 'SET_COMBINER'),
     constructs:         createReducer([], 'SET_CONSTRUCTS'),
     constructEditId:    createReducer(null, 'SET_CONSTRUCT_EDIT_ID'),
+    constructRename:    createReducer(null, 'SET_CONSTRUCT_RENAME'),
     game:               createReducer(null, 'SET_GAME'),
     info:               createReducer(null, 'SET_INFO'),
     instance:           createReducer(null, 'SET_INSTANCE'),

client/src/socket.jsx

@@ -97,7 +97,7 @@ function createSocket(events) {
 
     function sendGameSkill(gameId, constructId, targetConstructId, skill) {
         send(['GameSkill',
-            { game_id: gameId, construct_id: constructId, target_construct_id: targetConstructId, skill, },
+            { game_id: gameId, construct_id: constructId, target_construct_id: targetConstructId, skill },
         ]);
         events.setActiveSkill(null);
     }
@@ -119,9 +119,12 @@ function createSocket(events) {
         send(['InstanceReady', { instance_id: instanceId }]);
     }
 
-    function sendMtxApply(constructId, mtx) {
-        send(['MtxConstructApply', { construct_id: constructId, mtx }]);
-        // events.clearMtxActive();
+    function sendMtxApply(constructId, mtx, name) {
+        send(['MtxConstructApply', { construct_id: constructId, mtx, name }]);
+        if (mtx === 'Rename') {
+            events.clearMtxActive();
+            events.clearConstructRename();
+        }
     }
 
     function sendMtxBuy(mtx) {