breaking shit on purpose

client/index.js

@@ -1,5 +1,6 @@
 require('./styles.css');
 require('./instance.css');
+require('./game.css');
 
 // kick it off
 require('./src/main');

client/instance.css

@@ -4,34 +4,16 @@
 
 .instance {
     height: 100%;
-    /*display: grid;*/
-    grid-template-columns: repeat(12, 1fr);
-    grid-template-rows: repeat(10, 1fr);
-    grid-template-areas:
-        "n n n n n n n n n n n n"
-        "v v v v v v v v v i i i"
-        "v v v v v v v v v i i i"
-        "v v v v v v v v v i i i"
-        "v v v v v v v v v i i i"
-        "e e e e e e e e e e e e"
-        "e e e e e e e e e e e e"
-        "c c c c c c c c c c c c"
-        "c c c c c c c c c c c c"
-        "c c c c c c c c c c c c"
-        "c c c c c c c c c c c c"
-        "c c c c c c c c c c c c"
-        "c c c c c c c c c c c c";
 }
 
 .instance-hdr {
-    grid-area: n;
     display: flex;
     flex-flow: column;
     flex: 1;
 }
 
 .instance-info {
-    flex: 0 0 50%;
+    flex: 0 1 50%;
     padding-left: 1em;
 }
 
@@ -45,7 +27,6 @@
 }
 
 .vbox {
-    grid-area: v;
     display: flex;
     flex: 0 0 50%;
 }
@@ -169,12 +150,9 @@
 /* CRYP BOX */
 
 .instance-cryp-list {
-    grid-area: c;
+    flex: 1;
-    flex: 1 1 auto;
     display: flex;
     flex-flow: row;
-    min-width: 300px;
-    overflow: hidden;
 }
 
 .instance-cryp {
@@ -318,6 +296,8 @@
 .instance-equip {
     grid-area: e;
     display: flex;
+    min-height: 20%;
+    padding-bottom: 1em;
 }
 
 .instance-equip .items {

client/src/components/game.component.jsx

@@ -53,19 +53,6 @@ function GamePanel(props) {
 
     const header = (
         <div className="instance-hdr">
-            <button
-                className="game-btn instance-btn instance-ui-btn left"
-                onClick={backClick}>
-                Back
-            </button>
-            <button
-                className="game-btn instance-btn instance-ui-btn left"
-                onClick={() => toggleLog(!showLog)}>
-                Log
-            </button>
-            <div className="spacer">
-                <div>&nbsp;</div>
-            </div>
             <button
                 className="game-btn instance-btn instance-ui-btn right"
                 onClick={() => sendGameReady()}>
@@ -177,7 +164,6 @@ function GamePanel(props) {
             {header}
             {timer}
             {PlayerTeam(playerTeam, setActiveSkill)}
-            <TargetingArrows />
             {otherTeams.map(OpponentTeam)}
         </section>
     );

client/src/main.jsx

@@ -9,7 +9,7 @@ const actions = require('./actions');
 const setupKeys = require('./keyboard');
 const createSocket = require('./socket');
 const registerEvents = require('./events');
-// const testGame = require('./test.game');
+const testGame = require('./test.game');
 
 const Header = require('./components/header.container');
 const Body = require('./components/body.component');
@@ -51,8 +51,8 @@ document.fonts.load('16pt "Jura"').then(() => {
     store.dispatch(actions.setWs(ws));
     ws.connect();
 
-    // events.setGame(testGame);
+    events.setGame(testGame);
-    // ws.clearGameStateTimeout();
+    ws.clearGameStateTimeout();
 
     const Cryps = () => (
         <main className="cryps" >

client/styles.css

@@ -51,7 +51,7 @@ main {
     padding: 0 2em;
     display: grid;
     grid-template-columns: repeat(10, minmax(min-content, 10%));
-    grid-template-rows: repeat(10, minmax(min-content, 10%));
+    grid-template-rows: repeat(10, min-content);
 
     grid-template-areas:
       "hd  hd   hd   hd   hd   hd   hd   hd   hd   hd"
@@ -62,8 +62,8 @@ main {
       "nav main main main main main main main main main"
       "nav main main main main main main main main main"
       "nav main main main main main main main main main"
-      "nav main main main main main main main main main"
+      "nav main main main main main main main main main";
-      "ft  ft   ft   ft   ft   ft   ft   ft   ft   ft";
+      /*"ft  ft   ft   ft   ft   ft   ft   ft   ft   ft";*/
 }
 
 nav {
@@ -501,43 +501,6 @@ header {
 }
 
 
-/* CRYP BOX */
-
-.cryp-list {
-    flex: 1 1 25%;
-    display: flex;
-    flex-flow: column;
-    height: 94%;
-    padding: 0 2em 0 2em;
-    min-width: 300px;
-    overflow: hidden;
-}
-
-.game-cryp {
-    flex: 1 1 100%;
-
-    display: flex;
-    /*border: 1px solid whitesmoke;*/
-    /*margin-bottom: 1em;*/
-    justify-content: center;
-
-    transition-property: all;
-    transition-duration: 0.5s;
-    transition-delay: 0;
-    transition-timing-function: ease;
-}
-
-.game-cryp .img {
-    text-align: center;
-    flex: 1 0 25%;
-}
-
-.game-cryp .stats {
-    display: flex;
-    flex: 1 0 20%;
-    flex-flow: column;
-}
-
 .stats figure {
     width: 100%;
     border: 0;
@@ -549,20 +512,6 @@ header {
     font-size: 75%;
 }
 
-.game-cryp .skills {
-    display: flex;
-    flex-flow: row wrap;
-    flex: 1 0 25%;
-    height: 100%;
-    z-index: 10;
-}
-
-.game-cryp .effects {
-    max-height: 100%;
-    font-size: 1.5em;
-    flex: 1;
-}
-
 .resolving .skills button {
     display: none;
 }
@@ -595,63 +544,6 @@ figure.gray {
     fill: none;
 }
 
-/* GAME */
-.game-btn {
-    flex: 0 0 25%;
-}
-
-.game-btn:first-child {
-    margin-right: 0.5em;
-}
-
-.game-cryp button {
-    color: #888;
-    flex: 1 1 100%;
-    font-size: 16pt;
-    padding: 0;
-    margin: 0;
-    border-width: 0px;
-}
-
-.game-cryp button.active {
-    color: whitesmoke;
-}
-
-.game-cryp button[disabled], .game-cryp button[disabled]:hover {
-    color: #333333;
-    font-size: 14pt;
-    text-decoration: line-through
-}
-
-.game-cryp button:hover {
-    color: whitesmoke;
-}
-
-.game-cryp.ko {
-    animation: none;
-    opacity: 0.5;
-    /*opacity: 0.35;*/
-    filter: grayscale(100%);
-}
-
-.game-cryp.ko button:hover {
-    color: #333;
-}
-
-.game-cryp.unfocus {
-    /*opacity: 0.65;*/
-    filter: blur(5px);
-}
-
-.combat-text {
-    fill: whitesmoke;
-    font-size: 2em;
-    font-family: 'Jura';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    text-align: center;
-}
 
 .team-opponent .combat-text {
     left: 40%;
@@ -662,17 +554,6 @@ figure.gray {
     position: relative;
 }
 
-.team-player {
-    padding: 0;
-}
-
-.stack-line {
-    display: flex;
-    align-items: center;
-    padding-left: 2em;
-    flex: 1;
-}
-
 .game .target-svg {
     flex: 1;
     height: 94%;
@@ -684,245 +565,3 @@ figure.gray {
     stroke-width: 4px;
 }
 
-.mobile-skills {
-    display: none;
-}
-
-/*
-CRYP DAMAGE
-*/
-
-.game-cryp.active-skill {
-    filter: drop-shadow(0 0 0.2em silver);
-    /*border-color: silver;*/
-}
-
-.game-cryp.red-damage {
-    filter: drop-shadow(0 0 0.2em red);
-    color: red;
-    /*border-color: red;*/
-}
-
-.red-damage button {
-    /*border: 1px solid red;*/
-    color: red;
-}
-
-.red-damage text {
-    fill: red;
-}
-
-.red-damage .stats {
-    /*border-top: 1px solid red;*/
-}
-
-.game-cryp.blue-damage {
-    filter: drop-shadow(0 0 0.2em blue);
-    color: blue;
-    /*border-color: blue;*/
-}
-
-.blue-damage button {
-    /*border: 1px solid blue;*/
-    color: blue;
-}
-
-.blue-damage text {
-    fill: blue;
-}
-
-.blue-damage .stats {
-    /*border-top: 1px solid blue;*/
-}
-
-.game-cryp.green-damage {
-    filter: drop-shadow(0 0 0.2em green);
-    color: green;
-    /*border-color: green;*/
-}
-
-.green-damage button {
-    /*border: 1px solid green;*/
-    color: green;
-}
-
-.green-damage text {
-    fill: green;
-}
-
-.green-damage .stats {
-    /*border-top: 1px solid green;*/
-}
-
-.game-cryp.purple-damage {
-    filter: drop-shadow(0 0 0.2em purple);
-    color: purple;
-    border-color: purple;
-}
-
-.purple-damage button {
-    border: 1px solid purple;
-    color: purple;
-}
-
-.purple-damage text {
-    fill: purple;
-}
-
-.purple-damage .stats {
-    border-top: 1px solid purple;
-}
-
-
-/*
-    MOBILE
-*/
-
-@media (max-width: 800px) {
-    h2 {
-        font-size: 1em;
-    }
-
-    section {
-        flex: 1 1 auto;
-        flex-flow: column;
-        overflow-x: hidden;
-    }
-
-    section.game {
-        flex-flow: column-reverse;
-        justify-content: space-between;
-        height: 100%;
-    }
-
-    section.game .instance-hdr {
-        order: 99;
-    }
-
-    .login {
-        width: 100%;
-    }
-
-    header {
-        font-size: 0.5em;
-    }
-
-    .header-username {
-        display: none;
-    }
-
-    .menu-instance-list {
-        flex: unset;
-        width: 100%;
-    }
-
-    .menu-instance-btn {
-        margin-right: 0;
-        margin-bottom: 0.5em;
-        padding: 0.2em;
-    }
-
-    .menu-btn {
-        display: none;
-    }
-
-    .nav-btn {
-        display: unset;
-    }
-
-    .vbox {
-        flex: 1 1 100%;
-    }
-
-    .cryps {
-        font-size: 0.75em;
-        padding: 0 0.5em;
-    }
-
-    /*fucken beats me why needed */
-    .game-cryp .skills {
-        height: unset;
-        flex: 1;
-    }
-
-    .menu-instance-btn {
-        font-size: 1em;
-    }
-
-    .instance-hdr {
-        flex: unset;
-        width: 100%;
-    }
-
-    .cryp-list {
-        display: flex;
-        flex-flow: row;
-
-        height: unset;
-        width: 100%;
-
-        padding: 0;
-        flex: unset;
-    }
-
-    .instance-cryp .stats figure {
-        padding: 0.2em 0;
-    }
-
-    .instance-cryp .skills, .instance-cryp .stats {
-        display: none;
-    }
-
-    .instance-info {
-        flex: 1;
-    }
-
-    .info-cryp {
-        text-align: center;
-    }
-
-    .game-cryp {
-        margin: 0 0.2em;
-        flex-flow: column-reverse;
-    }
-
-    .spawn-btn button {
-        margin: 1em;
-        padding: 0.2em;
-        width: 100%;
-    }
-
-    .game .timer-container {
-        order: 5;
-        flex: unset;
-    }
-
-    button {
-        flex: 1;
-        font-size: 16pt;
-        padding: 0;
-        margin: 0;
-    }
-
-    .game-cryp .stats {
-        flex-flow: row;
-        padding: 0.2em 0;
-    }
-
-    .stat-icon {
-        height: 1em;
-    }
-
-    .cryp-list .stats figcaption {
-        display: none;
-    }
-
-    .hidden {
-        display: none;
-    }
-
-    .game .target-svg path {
-        transform-origin: center;
-        transform: rotate(-90deg);
-    }
-}