missing file

client/game.css

@@ -0,0 +1,182 @@
+/* GAME */
+.game-cryp {
+/*    flex: 1 1 100%;
+
+    display: flex;
+    flex-flow: column;
+*/    /*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 .stats {
+    display: flex;
+    flex: row;
+}
+
+.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;
+}
+
+.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;
+}
+
+
+.cryp-list {
+    display: flex;
+    flex-flow: row;
+    width: 100%;
+}
+
+/*
+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;
+}

client/src/components/game.component.jsx

@@ -164,6 +164,7 @@ function GamePanel(props) {
             {header}
             {timer}
             {PlayerTeam(playerTeam, setActiveSkill)}
+            <TargetingArrows />
             {otherTeams.map(OpponentTeam)}
         </section>
     );