diff --git a/client/game.css b/client/game.css new file mode 100644 index 00000000..84293aad --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx index 0dcc2651..890f778f 100644 --- a/client/src/components/game.component.jsx +++ b/client/src/components/game.component.jsx @@ -164,6 +164,7 @@ function GamePanel(props) { {header} {timer} {PlayerTeam(playerTeam, setActiveSkill)} + {otherTeams.map(OpponentTeam)} );