whew

html-client/cryps.css

@@ -44,6 +44,11 @@ main {
     flex: 1 1 90%;
 
     padding-top: 1em;
+
+    align-content: flex-start;
+    justify-content: flex-start;
+    align-items: flex-start;
+
 }
 
 button, input {
@@ -93,6 +98,7 @@ header {
 .header-title {
     flex: 1;
     font-size: 2em;
+    letter-spacing: 0.05em;
 }
 
 .header-username {
@@ -163,7 +169,7 @@ header {
     font-size: 2em;
 }
 
-.instance-list {
+.menu-instance-list {
     flex: 0 0 50%;
     flex-flow: row wrap;
 
@@ -172,7 +178,7 @@ header {
     height: 100%;
 }
 
-.instance-btn {
+.menu-instance-btn {
     box-sizing: border-box;
     flex: 1 0 20%;
     font-size: 150%;
@@ -182,7 +188,7 @@ header {
     margin: 0.5em;
 }
 
-.instance-btn.full {
+.menu-instance-btn.full {
     flex: 1 0 100%;
 }
 
@@ -291,11 +297,6 @@ header {
 }
 
 .cryp-list {
-    display: flex;
-    flex-flow: column;
-}
-
-.instance-cryp-list {
     flex: 1 1 25%;
 
     display: flex;
@@ -320,6 +321,7 @@ header {
     flex: 1 1 80%;
     width: 100%;
     justify-content: center;
+    align-items: stretch;
 }
 
 .cryp-box figure {
@@ -378,27 +380,22 @@ header {
 
 
 /* GAME */
-
-.game {
-    display: flex;
-    flex-flow: row wrap;
-    align-content: flex-start;
-    justify-content: flex-start;
-    align-items: flex-start;
-}
-
 .game-back-btn {
     flex: 0 0 20%;
 }
 
 .team-player {
-    flex: 1 0 40%;
+    display: flex;
+    flex: 1 0 20%;
     height: 90%;
+    padding: 0;
 }
 
 .team-opponent {
+    display: flex;
     flex: 1 0 20%;
     height: 90%;
+    padding: 0;
 }
 
 .logs {
@@ -409,6 +406,8 @@ header {
 }
 
 .game-cryp-ctr {
+    flex: 1 1 100%;
+    max-height: 33%;
     display: flex;
     flex-flow: row;
     align-items: center;
@@ -428,7 +427,19 @@ header {
     opacity: 0.5;
 }
 
+.selected-skills {
+    flex: 1 1 25%;
+
+    display: flex;
+    flex-flow: column;
+    height: 95%;
+    padding: 0 2em 0 2em;
+    justify-content: center;
+}
+
 .stack-line {
+    display: flex;
+    align-items: center;
     padding-left: 2em;
-    flex: 1 0 50%;
+    flex: 1;
 }

html-client/src/components/game.component.jsx

@@ -83,8 +83,6 @@ function GamePanel(props) {
             );
         });
 
-        const stackSkills = stackElement(cryp);
-
         const stats = [
             { stat: 'hp', colour: '#1FF01F' },
             { stat: 'red_shield', colour: '#a52a2a' },
@@ -98,27 +96,24 @@ function GamePanel(props) {
 
 
         return (
-            <div className={`game-cryp-ctr ${ko}`} >
+            <div
-                <div
+                key={cryp.id}
-                    key={cryp.id}
+                style={ activeSkill ? { cursor: 'pointer' } : {}}
-                    style={ activeSkill ? { cursor: 'pointer' } : {}}
+                className={`cryp-box ${ko}`} >
-                    className="cryp-box" >
+                <div className="cryp-box-top">
-                    <div className="cryp-box-top">
+                    <figure
-                        <figure
+                        className="img"
-                            className="img"
+                        onClick={() => selectSkillTarget(cryp.id)} >
-                            onClick={() => selectSkillTarget(cryp.id)} >
+                        {molecule}
-                            {molecule}
+                        <figcaption>{cryp.name}</figcaption>
-                            <figcaption>{cryp.name}</figcaption>
+                    </figure>
-                        </figure>
+                    <div className="skills">
-                        <div className="skills">
+                        {skills}
-                            {skills}
-                        </div>
-                    </div>
-                    <div className="stats">
-                        {stats}
                     </div>
                 </div>
-                {stackSkills}
+                <div className="stats">
+                    {stats}
+                </div>
             </div>
         );
     }
@@ -168,35 +163,38 @@ function GamePanel(props) {
     function OpponentTeam(team) {
         const cryps = team.cryps.map(OpponentCryp);
         return (
-            <div>
+            <div className="cryp-list" >
                 {cryps}
             </div>
         );
     }
 
+    const selectedSkills = playerTeam.cryps.map((c, i) => stackElement(c, i));
+
     const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
 
     return (
         <main>
-            <div className="game">
+            <div className="instance-hdr">
-                <div className="instance-hdr">
+                <button
-                    <button
+                    className="game-back-btn instance-btn instance-ui-btn left"
-                        className="game-back-btn instance-btn instance-ui-btn left"
+                    onClick={quit}>
-                        onClick={quit}>
+                    Back
-                        Back
+                </button>
-                    </button>
+                <div className="spacer">
-                    <div className="spacer">
+                    <div>&nbsp;</div>
-                        <div>&nbsp;</div>
-                    </div>
-                </div>
-                {PlayerTeam(playerTeam, setActiveSkill)}
-                <div className="team-opponent">
-                    {otherTeams.map(OpponentTeam)}
-                </div>
-                <div className="logs">
-                    {logs}
                 </div>
             </div>
+            {PlayerTeam(playerTeam, setActiveSkill)}
+            <div className="selected-skills">
+                {selectedSkills}
+            </div>
+            <div className="team-opponent">
+                {otherTeams.map(OpponentTeam)}
+            </div>
+            <div className="logs">
+                {logs}
+            </div>
         </main>
     );
 }

html-client/src/components/instance.component.jsx

@@ -99,7 +99,7 @@ function InstanceComponent(args) {
                 </button>
             </div>
             <VboxContainer />
-            <div className="instance-cryp-list">
+            <div className="cryp-list">
                 {cryps}
             </div>
             <InfoContainer />

html-client/src/components/instance.list.component.jsx

@@ -8,7 +8,7 @@ function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
 
     const instanceJoin = (
         <button
-            className="instance-btn full right"
+            className="menu-instance-btn full right"
             onClick={() => sendInstanceJoin()}>
             Join New Instance
         </button>
@@ -22,7 +22,7 @@ function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
 
         return (
             <button
-                className={`instance-btn right ${globalInstance ? 'full' : ''}`}
+                className={`menu-instance-btn right ${globalInstance ? 'full' : ''}`}
                 key={instance.id}
                 onClick={() => setActiveInstance(instance)}>
                 {name}
@@ -33,7 +33,7 @@ function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
     // <h2>Instances</h2>
 
     return (
-        <section className="instance-list" >
+        <section className="menu-instance-list" >
             {instanceJoin}
             {instancePanels}
         </section>