diff --git a/client/game.css b/client/game.css index 38789d1c..2ff6599c 100644 --- a/client/game.css +++ b/client/game.css @@ -2,7 +2,7 @@ .game { display: grid; - grid-template-rows: 1.5em 1.5em 1fr 1.5fr; + grid-template-rows: min-content min-content 1fr 1.5fr; grid-template-areas: "ready" "timer" @@ -28,28 +28,18 @@ grid-area: opponent; } -.targeting-arrows { - grid-area: middle; -} - .opponent .combat-text { left: 40%; transform: translate(-50%, -50%); } -.targeting-arrows path { - stroke: whitesmoke; - stroke-width: 4px; -} - .opponent .game-cryp { - grid-template-rows: auto auto minmax(0, 1fr) auto; + grid-template-rows: 1fr 2fr 1fr; + grid-template-columns: 1fr min-content 1fr; grid-template-areas: - "stats ." - "effects ." - "avatar target" - "skills ."; + "stats stats effects" + "avatar target ."; } .game-cryp { @@ -78,8 +68,9 @@ display: flex; flex-flow: column; justify-content: center; - align-items: flex-end; + align-items: flex-start; width: 100%; + white-space: nowrap; } .game-cryp .img { @@ -101,12 +92,26 @@ font-size: 100%; } +@media (max-width: 1500px) { + .game { + font-size: 75%; + } + + .game-cryp figure { + padding: 0 0.25em; + } + +/* .game .stat-icon { + height: 1.5em; + stroke-width: 3px; + } +*/} + .game-cryp .skills { grid-area: skills; display: flex; flex-flow: column-reverse; - align-items: baseline; - /*flex-flow: column;*/ + justify-self: center; } /*@media (max-width: 1000px) { @@ -115,8 +120,10 @@ } } */ + .game-cryp .effects { font-size: 1.5em; + white-space: nowrap; } .game-btn { @@ -130,7 +137,6 @@ .game-cryp button { color: #888; flex: 1 1 100%; - font-size: 16pt; padding: 0; margin: 0 0.5em; border-width: 0px; @@ -143,7 +149,7 @@ .game-cryp button[disabled], .game-cryp button[disabled]:hover { color: #333333; font-size: 14pt; - /*text-decoration: line-through*/ + /*text-decoration: line-through } .game-cryp button:hover { diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx index 935e5c1a..eb99ef5f 100644 --- a/client/src/components/game.component.jsx +++ b/client/src/components/game.component.jsx @@ -138,7 +138,9 @@ function GamePanel(props) { {effects}
-
{'<'}
+
{'< Decay'}
+
{'< Attack'}
+
{'< Sustain'}
-
{'<'}
+
{'< Decay'}
+
{'< Attack'}
+
{'< Sustain'}