construct name and avatar and $$$ jebaited

client/src/components/construct.jsx

@@ -29,12 +29,13 @@ class ConstructAvatar extends Component {
     }
 
     render() {
-        const { construct } = this.props;
+        const { construct, mouseOver } = this.props;
         return (
             <div
                 class="avatar"
                 id={construct.id}
                 onMouseDown={this.onClick.bind(this)}
+                onMouseOver={mouseOver ? mouseOver : null}
                 style={{ 'background-image': `url(/imgs/${construct.img}.svg)` }}>
                 <ConstructAnimation construct={construct} />
             </div>

client/src/components/info.component.jsx

@@ -40,7 +40,29 @@ class InfoComponent extends preact.Component {
                 if (tutorialStageInfo) return tutorialStageInfo;
             }
             if (!info) return false;
+            if (info.includes('constructName')) {
+                return (
+                    <div>
+                        <h2> {info.replace('constructName ', '')} </h2>
+                        <p> This is the name of your construct. <br />
+                            Names are randomly generated and are purely cosmetic. <br />
+                            You can change change your construct name in the reshape tab outside of games.
+                        </p>
+                    </div> 
+                );
+            }
 
+            if (info.includes('constructAvatar')) {
+                return (
+                    <div>
+                        <h2> {info.replace('constructAvatar ', '')} </h2>
+                        <p> This is your construct avatar. <br />
+                            Avatars are randomly generated and are purely cosmetic. <br />
+                            You can change your construct avatar in the reshape tab outside of games.
+                        </p>
+                    </div> 
+                );
+            }
             const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
             if (!fullInfo) return false;
             const isSkill = fullInfo.skill;

client/src/components/instance.constructs.jsx

@@ -221,11 +221,11 @@ function Construct(props) {
     });
 
     const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
-
+    const avatarMouseOver = e => hoverInfo(e, `constructAvatar ${construct.name}`);
     return (
-        <div key={construct.id} class={classes} onClick={onClick} >
+        <div key={construct.id} class={classes} onClick={onClick}>
-            <ConstructAvatar construct={construct} />
+            <ConstructAvatar construct={construct} mouseOver={avatarMouseOver}/>
-            <h2 class="name" >{construct.name}</h2>
+            <h2 class="name" onMouseOver={e => hoverInfo(e, `constructName ${construct.name}`)}>{construct.name}</h2>
             <div class="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >
                 {skills}
             </div>