diff --git a/client/cryps.css b/client/cryps.css index 08d4e7d8..9743f89e 100644 --- a/client/cryps.css +++ b/client/cryps.css @@ -131,7 +131,6 @@ button.action { } - svg { flex: 1; fill: none; @@ -162,6 +161,23 @@ table td { text-transform: uppercase; } +table td svg { + stroke-width: 2px; + height: 96%; + vertical-align: text-bottom; +} + +table .highlight { + background: whitesmoke; + color: black; + font-weight: bold; +} + +button[disabled] { + color: #333; + border-color: #333; +} + /* COLOURS */ diff --git a/client/instance.css b/client/instance.css index 9db6bbeb..978ce740 100644 --- a/client/instance.css +++ b/client/instance.css @@ -7,70 +7,53 @@ grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(11, 1fr); grid-template-areas: - "n v v v v v v v x x x x" - "n v v v v v v v x x x x" - "n v v v v v v v x x x x" - "n v v v v v v v x x x x" - "g g g g g g g g x x x x" - "g g g g g g g g x x x x" - "f f f f f f f f x x x x" - "f f f f f f f f x x x x" - "f f f f f f f f x x x x" - "f f f f f f f f x x x x" - "f f f f f f f f x x x x"; + "n v v v v v v v v i i i" + "n v v v v v v v v i i i" + "n v v v v v v v v i i i" + "n v v v v v v v v i i i" + "n e e e e e e e e e e e" + "n 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"; } .instance-hdr { grid-area: n; display: flex; - flex-flow: row; + flex-flow: column; flex: 0 0 100%; + padding-top: 50px; + padding-right: 20px; } .instance-info { - grid-area: x; + grid-area: i; justify-self: start; - flex: 0 0 50%; + padding-left: 20px; } - -.instance-cryp-list { - grid-area: f; - flex: 1 1 auto; - display: flex; - flex-flow: row; - padding: 0 2em 0 2em; - justify-content: center; - min-width: 300px; - - overflow: hidden; -} - - .instance .spacer { flex-grow: 1 } .vbox { grid-area: v; - display: grid; - grid-template-columns: repeat(11, 1fr); - grid-template-rows: repeat(2, 1fr); - grid-template-areas: - "vb vb vb vb vb . i i i i i" - "vb vb vb vb vb . i i i i i"; + display: flex; + justify-content: flex-end; } .vbox-box { - grid-area: vb; justify-self: end; max-width: 450px; display: flex; flex-flow: row wrap; + padding-right: 50px; } .vbox-inventory { - grid-area: i; justify-self: start; max-width: 450px; display: flex; @@ -121,16 +104,7 @@ margin: 0; } -table .highlight { - background: whitesmoke; - color: black; - font-weight: bold; -} - -button[disabled] { - color: #333; - border-color: #333; -} +/* VBOX */ .vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus { color: black; @@ -183,70 +157,246 @@ button[disabled] { color: black; } -table td svg { - stroke-width: 2px; - height: 96%; - vertical-align: text-bottom; -} - .spacer { flex: 1 0 25%; } /* CRYP BOX */ -.instance-cryp { - flex: 1 1 auto; +.instance-cryp-list { + grid-area: c; + flex: 1 1 auto; display: flex; - flex-flow: column; - border: 1px solid whitesmoke; + flex-flow: row; + padding: 0 2em 0 2em; + align-content: flex-start; + justify-content: center; + min-width: 300px; + + overflow: hidden; +} + +.instance-cryp { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(5, 1fr); + grid-template-areas: + "sp sp sp sp sp" + "av av av sk sk" + "av av av sk sk" + "av av av sk sk" + "st st st st st"; + max-height: 450px; + max-width: 450px; margin-left: 1em; - max-width: 350px; + border: 1px solid whitesmoke; transition-property: all; transition-duration: 0.5s; transition-delay: 0; transition-timing-function: ease; } -.instance-cryp-top { +.instance-cryp .avatar { + grid-area: av; display: flex; flex: 1 1 auto; - width: 100%; - justify-content: center; - align-items: stretch; } -.instance-cryp figure { +.instance-cryp .avatar figure { margin: 0; - flex: 0 0 50%; + height: 80%; text-align: center; box-sizing: border-box; +} + +.instance-cryp .avatar figcaption { + font-size: 90%; +} + +.instance-cryp .skills { + grid-area: sk; display: flex; flex-flow: column; - justify-content: flex-end; } -.instance-cryp .stats { - flex: 0 0 20%; +.instance-cryp .skills button { + height: 100%; width: 100%; - display: flex; - border-top: 1px solid whitesmoke; } -.stats figure { - flex: 1 1 0; +.instance-cryp .specs { + grid-area: sp; + display: flex; + flex: 1; + justify-content: center; + border-bottom: 1px solid whitesmoke; +} + +.instance-cryp .specs figure { + flex: 1; border: 0; align-items: center; padding: 0.5em 0 0 0; + text-align: center; +} + +.instance-cryp .specs figcaption { + font-size: 75%; +} + +.instance-cryp .stats { + grid-area: st; + display: grid; + grid-template-rows: 1fr 3fr; + grid-template-columns: 3fr 1fr 3fr; + grid-template-areas: + "dl sl ll" + "di si li"; + border-top: 1px solid whitesmoke; +} + +.instance-cryp .stats figure { + flex: 1; + border: 0; + align-items: center; + padding: 0.5em 0 0 0; + text-align: center; } .instance-cryp .stats figcaption { font-size: 75%; } -.instance-cryp .skills { +.instance-cryp .stats .damage-label { + grid-area: dl; display: flex; - flex-flow: row wrap; - flex: 1 1 50%; + justify-content: center; +} + +.instance-cryp .stats .damage-icons { + grid-area: di; + display: flex; + flex-flow: row; + flex: 1; + justify-content: center; +} + +.instance-cryp .stats .speed-label { + grid-area: sl; + display: flex; + justify-content: center; + +} + +.instance-cryp .stats .speed-icons { + grid-area: si; + display: flex; + flex-flow: row; + flex: 1; + justify-content: center; +} + +.instance-cryp .stats .life-label { + grid-area: ll; + display: flex; + justify-content: center; +} + +.instance-cryp .stats .life-icons { + grid-area: li; + display: flex; + flex-flow: row; + flex: 1; + justify-content: center; +} + +/* Equipment */ +.instance-equip { + grid-area: e; + display: flex; + justify-content: center; +} + +.instance-equip .items { + display: flex; + justify-content: center; + flex: 1 1 100%; +} + +.instance-equip .label { + display: flex; + justify-content: center; + font-size: 20pt; + padding: 15px; + +} +.instance-equip .skills { + display: flex; + flex-direction: column; +} + +.instance-equip .skills button { + flex: 1 1 100%; + color: whitesmoke; + font-size: 16pt; + padding: 10px; + border-width: 0px; + border-bottom-width: 1px; + border-left-width: 1px; + border-right-width: 1px; + border-top-width: 1px; height: 100%; -} \ No newline at end of file + +} + +button.equip { + animation: equip-skill 1s infinite ease-in-out alternate; +} + +@keyframes equip-skill { + 0% { + background-color: black; + box-shadow: inset 0 0 0 0 whitesmoke; + } + + 100% { + background-color: #181818; + box-shadow: inset 0.5em 0 0 0 whitesmoke; + } +} + + +.instance-equip .specs { + display: flex; + padding-left: 50px; + flex-direction: column; +} + +.instance-equip .specs figure { + flex: 1; + border: 0; + padding: 0.5em 1em 0 0; + text-align: center; +} + +.equip-spec { + animation: equip-spec 1s infinite ease-in-out alternate; +} + +@keyframes equip-spec { + 0% { + color: #333; + stroke: #333; + } + + 100% { + color: #7a7a7a; + stroke: #7a7a7a; + + } +} + + +.instance-equip .specs figcaption { + font-size: 75%; +} diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 317fccb8..3b5b07ba 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -55,10 +55,12 @@ function Info(args) { } if (type === 'skill') { + const skillInfo = SKILLS[value.skill]; + const description = skillInfo ? skillInfo.description : '?????'; return (
| {convertVar(c.var)} | {c.units.map((u, j) =>{convertVar(u)} | )} @@ -206,12 +209,12 @@ function Info(args) { return (