From f197ef41c1b41804190d218b48d7f81cb234eb6b Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Tue, 25 Jan 2022 23:14:18 -0800 Subject: [PATCH 1/5] Add new uncap icons --- public/icons/uncap/blue.svg | 44 +++++++++++++++++++++++++++++++++++ public/icons/uncap/empty.svg | 25 ++++++++++++++++++++ public/icons/uncap/purple.svg | 44 +++++++++++++++++++++++++++++++++++ public/icons/uncap/red.svg | 44 +++++++++++++++++++++++++++++++++++ public/icons/uncap/yellow.svg | 44 +++++++++++++++++++++++++++++++++++ 5 files changed, 201 insertions(+) create mode 100644 public/icons/uncap/blue.svg create mode 100644 public/icons/uncap/empty.svg create mode 100644 public/icons/uncap/purple.svg create mode 100644 public/icons/uncap/red.svg create mode 100644 public/icons/uncap/yellow.svg diff --git a/public/icons/uncap/blue.svg b/public/icons/uncap/blue.svg new file mode 100644 index 00000000..2469d0de --- /dev/null +++ b/public/icons/uncap/blue.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/icons/uncap/empty.svg b/public/icons/uncap/empty.svg new file mode 100644 index 00000000..9aad37c9 --- /dev/null +++ b/public/icons/uncap/empty.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/icons/uncap/purple.svg b/public/icons/uncap/purple.svg new file mode 100644 index 00000000..93a1147c --- /dev/null +++ b/public/icons/uncap/purple.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/icons/uncap/red.svg b/public/icons/uncap/red.svg new file mode 100644 index 00000000..c5da53d5 --- /dev/null +++ b/public/icons/uncap/red.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/icons/uncap/yellow.svg b/public/icons/uncap/yellow.svg new file mode 100644 index 00000000..70b8ece3 --- /dev/null +++ b/public/icons/uncap/yellow.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From ccb0951a3597f9fe42a1d30c80aa837b639031e5 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Tue, 25 Jan 2022 23:14:58 -0800 Subject: [PATCH 2/5] Update WeaponUnit Flips text and uncap stars and makes the modal click target the image instead of the whole unit --- components/WeaponUnit/index.scss | 1 + components/WeaponUnit/index.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss index 93c26597..10d9818d 100644 --- a/components/WeaponUnit/index.scss +++ b/components/WeaponUnit/index.scss @@ -11,6 +11,7 @@ display: flex; align-items: center; justify-content: center; + margin-bottom: 2px; overflow: hidden; transition: all 0.18s ease-in-out; } diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx index 17e231dc..adf5e5b5 100644 --- a/components/WeaponUnit/index.tsx +++ b/components/WeaponUnit/index.tsx @@ -54,13 +54,13 @@ const WeaponUnit = (props: Props) => { {weapon?.name.en} { (props.editable) ? : '' } +

{weapon?.name.en}

-

{weapon?.name.en}

) From 1c9c98b1c35fae8c698389532dc5a93d335e7f0c Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Tue, 25 Jan 2022 23:18:01 -0800 Subject: [PATCH 3/5] Implement new stars --- components/UncapIndicator/index.scss | 4 ++++ components/UncapIndicator/index.tsx | 12 ++++++----- components/UncapStar/index.scss | 32 ++++++++++++++++++++++++---- components/UncapStar/index.tsx | 18 +++++++++++++--- 4 files changed, 54 insertions(+), 12 deletions(-) diff --git a/components/UncapIndicator/index.scss b/components/UncapIndicator/index.scss index ceafd8d2..431f20d1 100644 --- a/components/UncapIndicator/index.scss +++ b/components/UncapIndicator/index.scss @@ -7,4 +7,8 @@ list-style: none; margin: 0; padding: 0; + + &:hover { + cursor: pointer; + } } \ No newline at end of file diff --git a/components/UncapIndicator/index.tsx b/components/UncapIndicator/index.tsx index ee74c9d5..ef8c00ab 100644 --- a/components/UncapIndicator/index.tsx +++ b/components/UncapIndicator/index.tsx @@ -1,5 +1,4 @@ -import React from 'react' -import classnames from 'classnames' +import React, { useState } from 'react' import UncapStar from '~components/UncapStar' import './index.scss' @@ -36,11 +35,14 @@ const UncapIndicator = (props: Props) => {
    { Array.from(Array(numStars)).map((x, i) => { - if (props.type === 'character' && i > 3 || + if (props.type === 'character' && i > 4) { + return + } else if ( + props.type === 'character' && i == 4 || props.type !== 'character' && i > 2) { - return + return } else { - return + return } }) } diff --git a/components/UncapStar/index.scss b/components/UncapStar/index.scss index 7014dbef..e0cab927 100644 --- a/components/UncapStar/index.scss +++ b/components/UncapStar/index.scss @@ -1,7 +1,31 @@ .UncapStar { - color: #FFA15E; -} + background-repeat: no-repeat; + background-size: 18px 18px; + display: block; + height: 18px; + width: 18px; -.UncapStar.uncap { - color: #65DAFF; + &:hover { + transform: scale(1.2); + } + + &.empty { + background: url('/icons/uncap/empty.svg'); + } + + &.mlb { + background: url('/icons/uncap/yellow.svg') + } + + &.special { + background: url('/icons/uncap/red.svg') + } + + &.flb { + background: url('/icons/uncap/blue.svg') + } + + &.ulb { + background: url('/icons/uncap/purple.svg') + } } \ No newline at end of file diff --git a/components/UncapStar/index.tsx b/components/UncapStar/index.tsx index 6cc0d45e..74c76dea 100644 --- a/components/UncapStar/index.tsx +++ b/components/UncapStar/index.tsx @@ -4,13 +4,19 @@ import classnames from 'classnames' import './index.scss' interface Props { - uncap: boolean + special: boolean + flb: boolean + ulb: boolean } const UncapStar = (props: Props) => { const classes = classnames({ - UncapStar: true, - 'uncap': props.uncap + UncapStar: true, + 'special': props.special, + 'mlb': !props.special, + 'flb': props.flb, + 'ulb': props.ulb + }) return ( @@ -18,4 +24,10 @@ const UncapStar = (props: Props) => { ) } +UncapStar.defaultProps = { + special: false, + flb: false, + ulb: false +} + export default UncapStar \ No newline at end of file From 7c96b5c836724de2cbb2b4b9450e44adff556c29 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Tue, 25 Jan 2022 23:25:18 -0800 Subject: [PATCH 4/5] Adjust hover transforms It was too aggressive --- components/CharacterUnit/index.scss | 2 +- components/SummonUnit/index.scss | 7 ++++++- components/WeaponUnit/index.scss | 6 +++++- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/components/CharacterUnit/index.scss b/components/CharacterUnit/index.scss index 45aa6f99..4cab997f 100644 --- a/components/CharacterUnit/index.scss +++ b/components/CharacterUnit/index.scss @@ -22,7 +22,7 @@ border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px; cursor: pointer; - transform: scale(1.1, 1.1); + transform: scale(1.025, 1.025); } .CharacterUnit.filled h3 { diff --git a/components/SummonUnit/index.scss b/components/SummonUnit/index.scss index 614b482e..d7e87d3a 100644 --- a/components/SummonUnit/index.scss +++ b/components/SummonUnit/index.scss @@ -33,7 +33,12 @@ border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px; cursor: pointer; - transform: scale(1.1, 1.1); + transform: scale(1.05, 1.05); + } + + &.main.editable .SummonImage:hover, + &.friend.editable .SummonImage:hover { + transform: scale(1.025, 1.025); } &.filled h3 { diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss index 10d9818d..34c5ae00 100644 --- a/components/WeaponUnit/index.scss +++ b/components/WeaponUnit/index.scss @@ -20,7 +20,11 @@ border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px; cursor: pointer; - transform: scale(1.1, 1.1); + transform: scale(1.05, 1.05); +} + +.WeaponUnit.mainhand.editable .WeaponImage:hover { + transform: scale(1.025, 1.025); } .WeaponUnit.filled h3 { From 3a1ef5d685832c74755478458aa821531f0bfb16 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Wed, 26 Jan 2022 00:12:02 -0800 Subject: [PATCH 5/5] Allow user to set uncap level doesn't save to server yet --- components/UncapIndicator/index.tsx | 15 ++++++++++++--- components/UncapStar/index.scss | 6 +++++- components/UncapStar/index.tsx | 9 +++++++++ 3 files changed, 26 insertions(+), 4 deletions(-) diff --git a/components/UncapIndicator/index.tsx b/components/UncapIndicator/index.tsx index ef8c00ab..ae10bd71 100644 --- a/components/UncapIndicator/index.tsx +++ b/components/UncapIndicator/index.tsx @@ -15,6 +15,8 @@ interface Props { const UncapIndicator = (props: Props) => { let numStars + const [uncap, setUncap] = useState(props.uncapLevel) + if (props.type === 'character') { if (props.flb) { numStars = 5 @@ -31,18 +33,25 @@ const UncapIndicator = (props: Props) => { } } + function toggleStar(index: number, empty: boolean) { + if (empty) + setUncap(index + 1) + else + setUncap(index) + } + return (
      { Array.from(Array(numStars)).map((x, i) => { if (props.type === 'character' && i > 4) { - return + return = uncap} key={`star_${i}`} index={i} onClick={toggleStar} /> } else if ( props.type === 'character' && i == 4 || props.type !== 'character' && i > 2) { - return + return = uncap} key={`star_${i}`} index={i} onClick={toggleStar} /> } else { - return + return = uncap} key={`star_${i}`} index={i} onClick={toggleStar} /> } }) } diff --git a/components/UncapStar/index.scss b/components/UncapStar/index.scss index e0cab927..144de4c9 100644 --- a/components/UncapStar/index.scss +++ b/components/UncapStar/index.scss @@ -9,7 +9,11 @@ transform: scale(1.2); } - &.empty { + &.empty, + &.empty.mlb, + &.empty.flb, + &.empty.ulb, + &.empty.special { background: url('/icons/uncap/empty.svg'); } diff --git a/components/UncapStar/index.tsx b/components/UncapStar/index.tsx index 74c76dea..bd20d45c 100644 --- a/components/UncapStar/index.tsx +++ b/components/UncapStar/index.tsx @@ -4,14 +4,18 @@ import classnames from 'classnames' import './index.scss' interface Props { + empty: boolean special: boolean flb: boolean ulb: boolean + index: number + onClick: (index: number, empty: boolean) => void } const UncapStar = (props: Props) => { const classes = classnames({ UncapStar: true, + 'empty': props.empty, 'special': props.special, 'mlb': !props.special, 'flb': props.flb, @@ -19,12 +23,17 @@ const UncapStar = (props: Props) => { }) + function clicked() { + props.onClick(props.index, props.empty) + } + return (
      • ) } UncapStar.defaultProps = { + empty: false, special: false, flb: false, ulb: false