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;
 }
 
-.stack-line {
+.selected-skills {
-    padding-left: 2em;
+    flex: 1 1 25%;
-    flex: 1 0 50%;
+
+    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;
 }

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,11 +96,10 @@ function GamePanel(props) {
 
 
         return (
-            <div className={`game-cryp-ctr ${ko}`} >
             <div
                 key={cryp.id}
                 style={ activeSkill ? { cursor: 'pointer' } : {}}
-                    className="cryp-box" >
+                className={`cryp-box ${ko}`} >
                 <div className="cryp-box-top">
                     <figure
                         className="img"
@@ -118,8 +115,6 @@ function GamePanel(props) {
                     {stats}
                 </div>
             </div>
-                {stackSkills}
-            </div>
         );
     }
 
@@ -168,17 +163,18 @@ 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">
                 <button
                     className="game-back-btn instance-btn instance-ui-btn left"
@@ -190,13 +186,15 @@ function GamePanel(props) {
                 </div>
             </div>
             {PlayerTeam(playerTeam, setActiveSkill)}
+            <div className="selected-skills">
+                {selectedSkills}
+            </div>
             <div className="team-opponent">
                 {otherTeams.map(OpponentTeam)}
             </div>
             <div className="logs">
                 {logs}
             </div>
-            </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>