diff --git a/src/assets/images/avatareditor/ca-icon.png b/src/assets/images/avatareditor/ca-icon.png index 14de95e2..c9803b95 100644 Binary files a/src/assets/images/avatareditor/ca-icon.png and b/src/assets/images/avatareditor/ca-icon.png differ diff --git a/src/assets/images/avatareditor/ca-selected-icon.png b/src/assets/images/avatareditor/ca-selected-icon.png index 3f5cda18..b118c3ed 100644 Binary files a/src/assets/images/avatareditor/ca-selected-icon.png and b/src/assets/images/avatareditor/ca-selected-icon.png differ diff --git a/src/assets/images/avatareditor/cc-icon.png b/src/assets/images/avatareditor/cc-icon.png index 5099b672..4a8844e4 100644 Binary files a/src/assets/images/avatareditor/cc-icon.png and b/src/assets/images/avatareditor/cc-icon.png differ diff --git a/src/assets/images/avatareditor/cc-selected-icon.png b/src/assets/images/avatareditor/cc-selected-icon.png index 4a4edc94..3493751a 100644 Binary files a/src/assets/images/avatareditor/cc-selected-icon.png and b/src/assets/images/avatareditor/cc-selected-icon.png differ diff --git a/src/assets/images/avatareditor/ch-icon.png b/src/assets/images/avatareditor/ch-icon.png index 936260b2..ef7da113 100644 Binary files a/src/assets/images/avatareditor/ch-icon.png and b/src/assets/images/avatareditor/ch-icon.png differ diff --git a/src/assets/images/avatareditor/ch-selected-icon.png b/src/assets/images/avatareditor/ch-selected-icon.png index 03d74a3a..c5e9f340 100644 Binary files a/src/assets/images/avatareditor/ch-selected-icon.png and b/src/assets/images/avatareditor/ch-selected-icon.png differ diff --git a/src/assets/images/avatareditor/cp-icon.png b/src/assets/images/avatareditor/cp-icon.png index aedd925a..5e460f15 100644 Binary files a/src/assets/images/avatareditor/cp-icon.png and b/src/assets/images/avatareditor/cp-icon.png differ diff --git a/src/assets/images/avatareditor/cp-selected-icon.png b/src/assets/images/avatareditor/cp-selected-icon.png index 779ebe31..a067085d 100644 Binary files a/src/assets/images/avatareditor/cp-selected-icon.png and b/src/assets/images/avatareditor/cp-selected-icon.png differ diff --git a/src/assets/images/avatareditor/ea-icon.png b/src/assets/images/avatareditor/ea-icon.png index 5b33ce68..c227ae10 100644 Binary files a/src/assets/images/avatareditor/ea-icon.png and b/src/assets/images/avatareditor/ea-icon.png differ diff --git a/src/assets/images/avatareditor/ea-selected-icon.png b/src/assets/images/avatareditor/ea-selected-icon.png index 56c804c6..e7678c4a 100644 Binary files a/src/assets/images/avatareditor/ea-selected-icon.png and b/src/assets/images/avatareditor/ea-selected-icon.png differ diff --git a/src/assets/images/avatareditor/fa-icon.png b/src/assets/images/avatareditor/fa-icon.png index 9278d0d4..9b72ff5e 100644 Binary files a/src/assets/images/avatareditor/fa-icon.png and b/src/assets/images/avatareditor/fa-icon.png differ diff --git a/src/assets/images/avatareditor/fa-selected-icon.png b/src/assets/images/avatareditor/fa-selected-icon.png index b11286af..a1d26b61 100644 Binary files a/src/assets/images/avatareditor/fa-selected-icon.png and b/src/assets/images/avatareditor/fa-selected-icon.png differ diff --git a/src/assets/images/avatareditor/ha-icon.png b/src/assets/images/avatareditor/ha-icon.png index 06d6328b..f0a81918 100644 Binary files a/src/assets/images/avatareditor/ha-icon.png and b/src/assets/images/avatareditor/ha-icon.png differ diff --git a/src/assets/images/avatareditor/ha-selected-icon.png b/src/assets/images/avatareditor/ha-selected-icon.png index 0d0d6638..4c81ece5 100644 Binary files a/src/assets/images/avatareditor/ha-selected-icon.png and b/src/assets/images/avatareditor/ha-selected-icon.png differ diff --git a/src/assets/images/avatareditor/he-icon.png b/src/assets/images/avatareditor/he-icon.png index 5cc990df..7cf6dc4c 100644 Binary files a/src/assets/images/avatareditor/he-icon.png and b/src/assets/images/avatareditor/he-icon.png differ diff --git a/src/assets/images/avatareditor/he-selected-icon.png b/src/assets/images/avatareditor/he-selected-icon.png index e231488a..32633559 100644 Binary files a/src/assets/images/avatareditor/he-selected-icon.png and b/src/assets/images/avatareditor/he-selected-icon.png differ diff --git a/src/assets/images/avatareditor/hr-icon.png b/src/assets/images/avatareditor/hr-icon.png index 64ee0763..de299902 100644 Binary files a/src/assets/images/avatareditor/hr-icon.png and b/src/assets/images/avatareditor/hr-icon.png differ diff --git a/src/assets/images/avatareditor/hr-selected-icon.png b/src/assets/images/avatareditor/hr-selected-icon.png index 65c03c05..c694b82a 100644 Binary files a/src/assets/images/avatareditor/hr-selected-icon.png and b/src/assets/images/avatareditor/hr-selected-icon.png differ diff --git a/src/assets/images/icons/loading-icon.png b/src/assets/images/icons/loading-icon.png index 50d132b3..e3d64d0b 100644 Binary files a/src/assets/images/icons/loading-icon.png and b/src/assets/images/icons/loading-icon.png differ diff --git a/src/assets/styles/bootstrap/_variables.scss b/src/assets/styles/bootstrap/_variables.scss index 4298f5a2..1d1de900 100644 --- a/src/assets/styles/bootstrap/_variables.scss +++ b/src/assets/styles/bootstrap/_variables.scss @@ -78,6 +78,8 @@ $mirage: #131e25 !default; $aztec: #0d171d !default; $cello-light: #21516e !default; $cello-dark: #1e465e !default; +$pale-sky: #677181 !default; +$oslo-gray: #8F9297 !default; $success: $green !default; $info: $cyan !default; diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss index 65b58de7..a56cfd12 100644 --- a/src/assets/styles/icons.scss +++ b/src/assets/styles/icons.scss @@ -2,502 +2,499 @@ line-height: 0 !important; } -i { - - &.icon { - display: inline-block; - outline: 0; - background-color: transparent; - background-repeat: no-repeat; - background-position: center; - background-size: contain; - - &.icon-nitro-light { - background-image: url('../images/nitro/nitro-n-light.svg'); - } - - &.icon-nitro-dark { - background-image: url('../images/nitro/nitro-n-dark.svg'); - } - - &.icon-nitro-light, - &.icon-nitro-dark { - width: 100%; - height: 40px; - } - - &.icon-catalog { - background-image: url('../images/toolbar/icons/catalog.png'); - width: 37px; - height: 36px; - } - - &.icon-rooms { - background-image: url('../images/toolbar/icons/rooms.png'); - width: 44px; - height: 30px; - } - - &.icon-house { - background-image: url('../images/toolbar/icons/house.png'); - height: 30px; - width: 32px; - } - - &.icon-inventory { - background-image: url('../images/toolbar/icons/inventory.png'); - height: 41px; - width: 44px; - } - - &.icon-modtools { - background-image: url('../images/toolbar/icons/modtools.png'); - height: 34px; - width: 29px; - } - - &.icon-friendall { - background-image: url('../images/toolbar/icons/friend_all.png'); - height: 33px; - width: 32px; - } - - &.icon-friendsearch { - background-image: url('../images/toolbar/icons/friend_search.png'); - height: 33px; - width: 29px; - } - - &.icon-sendmessage { - background-image: url('../images/toolbar/icons/sendmessage.png'); - width: 20px; - height: 21px; - } - - &.icon-me-talents { - background-image: url('../images/toolbar/icons/me-menu/talents.png'); - width: 32px; - height: 30px; - } - - &.icon-me-helper-tool { - background-image: url('../images/toolbar/icons/me-menu/helper-tool.png'); - width: 32px; - height: 30px; - } - - &.icon-me-profile { - background-image: url('../images/toolbar/icons/me-menu/profile.png'); - width: 32px; - height: 30px; - } - - &.icon-me-forums { - background-image: url('../images/toolbar/icons/me-menu/forums.png'); - width: 32px; - height: 30px; - } - - &.icon-me-rooms { - background-image: url('../images/toolbar/icons/me-menu/my-rooms.png'); - width: 30px; - height: 30px; - } - - &.icon-me-achievements { - background-image: url('../images/toolbar/icons/me-menu/achievements.png'); - width: 31px; - height: 30px; - } - - &.icon-me-clothing { - background-image: url('../images/toolbar/icons/me-menu/clothing.png'); - width: 27px; - height: 30px; - } - - &.icon-me-settings { - background-image: url('../images/toolbar/icons/me-menu/cog.png'); - width: 28px; - height: 34px; - } - - &.icon-joinroom { - background-image: url('../images/toolbar/icons/joinroom.png'); - width: 21px; - height: 21px; - } - - &.icon-habbo { - background-image: url('../images/toolbar/icons/habbo.png'); - width: 28px; - height: 28px; - } - - &.icon-camera { - background-image: url('../images/toolbar/icons/camera.png'); - width: 38px; - height: 45px; - } - - &.icon-message { - background-image: url('../images/toolbar/icons/message.png'); - width: 36px; - height: 32px; - - &.is-unseen { - background-image: url('../images/toolbar/icons/message_unsee.gif'); - } - } - - &.icon-wired-trigger { - background-image: url('../images/wired/icon_trigger.png'); - width: 13px; - height: 14px; - } - - &.icon-wired-condition { - background-image: url('../images/wired/icon_condition.png'); - width: 13px; - height: 14px; - } +.icon { + display: inline-block; + outline: 0; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + + &.icon-nitro-light { + background-image: url('../images/nitro/nitro-n-light.svg'); + } + + &.icon-nitro-dark { + background-image: url('../images/nitro/nitro-n-dark.svg'); + } + + &.icon-nitro-light, + &.icon-nitro-dark { + width: 100%; + height: 40px; + } + + &.icon-catalog { + background-image: url('../images/toolbar/icons/catalog.png'); + width: 37px; + height: 36px; + } + + &.icon-rooms { + background-image: url('../images/toolbar/icons/rooms.png'); + width: 44px; + height: 30px; + } + + &.icon-house { + background-image: url('../images/toolbar/icons/house.png'); + height: 30px; + width: 32px; + } + + &.icon-inventory { + background-image: url('../images/toolbar/icons/inventory.png'); + height: 41px; + width: 44px; + } + + &.icon-modtools { + background-image: url('../images/toolbar/icons/modtools.png'); + height: 34px; + width: 29px; + } + + &.icon-friendall { + background-image: url('../images/toolbar/icons/friend_all.png'); + height: 33px; + width: 32px; + } + + &.icon-friendsearch { + background-image: url('../images/toolbar/icons/friend_search.png'); + height: 33px; + width: 29px; + } + + &.icon-sendmessage { + background-image: url('../images/toolbar/icons/sendmessage.png'); + width: 20px; + height: 21px; + } + + &.icon-me-talents { + background-image: url('../images/toolbar/icons/me-menu/talents.png'); + width: 32px; + height: 30px; + } + + &.icon-me-helper-tool { + background-image: url('../images/toolbar/icons/me-menu/helper-tool.png'); + width: 32px; + height: 30px; + } + + &.icon-me-profile { + background-image: url('../images/toolbar/icons/me-menu/profile.png'); + width: 32px; + height: 30px; + } + + &.icon-me-forums { + background-image: url('../images/toolbar/icons/me-menu/forums.png'); + width: 32px; + height: 30px; + } + + &.icon-me-rooms { + background-image: url('../images/toolbar/icons/me-menu/my-rooms.png'); + width: 30px; + height: 30px; + } + + &.icon-me-achievements { + background-image: url('../images/toolbar/icons/me-menu/achievements.png'); + width: 31px; + height: 30px; + } + + &.icon-me-clothing { + background-image: url('../images/toolbar/icons/me-menu/clothing.png'); + width: 27px; + height: 30px; + } + + &.icon-me-settings { + background-image: url('../images/toolbar/icons/me-menu/cog.png'); + width: 28px; + height: 34px; + } + + &.icon-joinroom { + background-image: url('../images/toolbar/icons/joinroom.png'); + width: 21px; + height: 21px; + } + + &.icon-habbo { + background-image: url('../images/toolbar/icons/habbo.png'); + width: 28px; + height: 28px; + } + + &.icon-camera { + background-image: url('../images/toolbar/icons/camera.png'); + width: 38px; + height: 45px; + } + + &.icon-message { + background-image: url('../images/toolbar/icons/message.png'); + width: 36px; + height: 32px; + + &.is-unseen { + background-image: url('../images/toolbar/icons/message_unsee.gif'); + } + } + + &.icon-wired-trigger { + background-image: url('../images/wired/icon_trigger.png'); + width: 13px; + height: 14px; + } + + &.icon-wired-condition { + background-image: url('../images/wired/icon_condition.png'); + width: 13px; + height: 14px; + } + + &.icon-wired-action { + background-image: url('../images/wired/icon_action.png'); + width: 13px; + height: 14px; + } + + &.arrow-left-icon { + background-image: url('../images/avatareditor/arrow-left-icon.png'); + width: 28px; + height: 21px; + } + + &.arrow-right-icon { + background-image: url('../images/avatareditor/arrow-right-icon.png'); + width: 28px; + height: 21px; + } + + &.clear-icon { + background-image: url('../images/avatareditor/clear-icon.png'); + width: 16px; + height: 16px; + } + + &.ca-icon { + background-image: url('../images/avatareditor/ca-icon.png'); + width: 30px; + height: 24px; + background + + &.selected { + background-image: url('../images/avatareditor/ca-selected-icon.png'); + } + } - &.icon-wired-action { - background-image: url('../images/wired/icon_action.png'); - width: 13px; - height: 14px; - } + &.cc-icon { + background-image: url('../images/avatareditor/cc-icon.png'); + width: 31px; + height: 29px; + + &.selected { + background-image: url('../images/avatareditor/cc-selected-icon.png'); + } + } + + &.ch-icon { + background-image: url('../images/avatareditor/ch-icon.png'); + width: 29px; + height: 24px; - &.arrow-left-icon { - background-image: url('../images/avatareditor/arrow-left-icon.png'); - width: 28px; - height: 21px; + &.selected { + background-image: url('../images/avatareditor/ch-selected-icon.png'); } + } - &.arrow-right-icon { - background-image: url('../images/avatareditor/arrow-right-icon.png'); - width: 28px; - height: 21px; - } + &.cp-icon { + background-image: url('../images/avatareditor/cp-icon.png'); + width: 25px; + height: 25px; - &.clear-icon { - background-image: url('../images/avatareditor/clear-icon.png'); - width: 16px; - height: 16px; + &.selected { + background-image: url('../images/avatareditor/cp-selected-icon.png'); } + } - &.ca-icon { - background-image: url('../images/avatareditor/ca-icon.png'); - width: 30px; - height: 24px; + &.ea-icon { + background-image: url('../images/avatareditor/ea-icon.png'); + width: 35px; + height: 16px; - &.selected { - background-image: url('../images/avatareditor/ca-selected-icon.png'); - } + &.selected { + background-image: url('../images/avatareditor/ea-selected-icon.png'); } + } - &.cc-icon { - background-image: url('../images/avatareditor/cc-icon.png'); - width: 31px; - height: 29px; + &.fa-icon { + background-image: url('../images/avatareditor/fa-icon.png'); + width: 27px; + height: 20px; - &.selected { - background-image: url('../images/avatareditor/cc-selected-icon.png'); - } + &.selected { + background-image: url('../images/avatareditor/fa-selected-icon.png'); } + } - &.ch-icon { - background-image: url('../images/avatareditor/ch-icon.png'); - width: 29px; - height: 24px; + &.female-icon { + background-image: url('../images/avatareditor/female-icon.png'); + width: 18px; + height: 27px; - &.selected { - background-image: url('../images/avatareditor/ch-selected-icon.png'); - } + &.selected { + background-image: url('../images/avatareditor/female-selected-icon.png'); } + } - &.cp-icon { - background-image: url('../images/avatareditor/cp-icon.png'); - width: 25px; - height: 25px; + &.ha-icon { + background-image: url('../images/avatareditor/ha-icon.png'); + width: 25px; + height: 22px; - &.selected { - background-image: url('../images/avatareditor/cp-selected-icon.png'); - } + &.selected { + background-image: url('../images/avatareditor/ha-selected-icon.png'); } + } - &.ea-icon { - background-image: url('../images/avatareditor/ea-icon.png'); - width: 35px; - height: 16px; + &.he-icon { + background-image: url('../images/avatareditor/he-icon.png'); + width: 31px; + height: 27px; - &.selected { - background-image: url('../images/avatareditor/ea-selected-icon.png'); - } + &.selected { + background-image: url('../images/avatareditor/he-selected-icon.png'); } + } - &.fa-icon { - background-image: url('../images/avatareditor/fa-icon.png'); - width: 27px; - height: 20px; + &.hr-icon { + background-image: url('../images/avatareditor/hr-icon.png'); + width: 29px; + height: 25px; - &.selected { - background-image: url('../images/avatareditor/fa-selected-icon.png'); - } + &.selected { + background-image: url('../images/avatareditor/hr-selected-icon.png'); } + } - &.female-icon { - background-image: url('../images/avatareditor/female-icon.png'); - width: 18px; - height: 27px; + &.lg-icon { + background-image: url('../images/avatareditor/lg-icon.png'); + width: 19px; + height: 20px; - &.selected { - background-image: url('../images/avatareditor/female-selected-icon.png'); - } + &.selected { + background-image: url('../images/avatareditor/lg-selected-icon.png'); } + } - &.ha-icon { - background-image: url('../images/avatareditor/ha-icon.png'); - width: 25px; - height: 22px; + &.loading-icon { + background-image: url('../images/icons/loading-icon.png'); + width: 17px; + height: 21px; + } - &.selected { - background-image: url('../images/avatareditor/ha-selected-icon.png'); - } + &.male-icon { + background-image: url('../images/avatareditor/male-icon.png'); + width: 21px; + height: 21px; + + &.selected { + background-image: url('../images/avatareditor/male-selected-icon.png'); } - - &.he-icon { - background-image: url('../images/avatareditor/he-icon.png'); - width: 31px; - height: 27px; - - &.selected { - background-image: url('../images/avatareditor/he-selected-icon.png'); - } - } - - &.hr-icon { - background-image: url('../images/avatareditor/hr-icon.png'); - width: 29px; - height: 25px; - - &.selected { - background-image: url('../images/avatareditor/hr-selected-icon.png'); - } - } - - &.lg-icon { - background-image: url('../images/avatareditor/lg-icon.png'); - width: 19px; - height: 20px; - - &.selected { - background-image: url('../images/avatareditor/lg-selected-icon.png'); - } - } - - &.loading-icon { - background-image: url('../images/avatareditor/loading-icon.png'); - width: 21px; - height: 25px; - } - - &.male-icon { - background-image: url('../images/avatareditor/male-icon.png'); - width: 21px; - height: 21px; - - &.selected { - background-image: url('../images/avatareditor/male-selected-icon.png'); - } - } - - &.sh-icon { - background-image: url('../images/avatareditor/sh-icon.png'); - width: 37px; - height: 10px; - - &.selected { - background-image: url('../images/avatareditor/sh-selected-icon.png'); - } - } - - &.wa-icon { - background-image: url('../images/avatareditor/wa-icon.png'); - width: 36px; - height: 18px; - - &.selected { - background-image: url('../images/avatareditor/wa-selected-icon.png'); - } - } - - &.chatstyles-icon { - background-image: url('../images/chat/styles-icon.png'); - width: 17px; - height: 19px; - } - - &.pencil-icon { - background-image: url('../images/infostand/pencil-icon.png'); - width: 17px; - height: 18px; - } - - &.trade-locked-icon { - background-image: url('../images/inventory/trading/locked-icon.png'); - width: 29px; - height: 43px; - } - - &.trade-unlocked-icon { - background-image: url('../images/inventory/trading/unlocked-icon.png'); - width: 29px; - height: 43px; - } - - &.modtool-room-icon { - background-image: url('../images/modtool/room.png'); - width: 20px; - height: 15px; - } - - &.modtool-chatlog-icon { - background-image: url('../images/modtool/chatlog.gif'); - width: 20px; - height: 15px; - } - - &.modtool-user-icon{ - background-image: url('../images/modtool/user.gif'); - width: 20px; - height: 15px; - } - - &.modtool-reports-icon { - background-image: url('../images/modtool/reports.png'); - width: 20px; - height: 15px; - } - - &.modtool-wrench-icon { - background-image: url('../images/modtool/wrench.gif'); - width: 20px; - height: 15px; - } - - &.modtool-key-icon { - background-image: url('../images/modtool/key.gif'); - width: 20px; - height: 15px; - } - - &.icon-catalogue-hc_small { - background-image: url('../images/catalog/hc_small.png'); - height: 17px; - width: 31px; - } - - &.icon-catalogue-hc_big { - background: url('../images/catalog/hc_big.png'); - width: 68px; - height: 40px; - } - - &.icon-sign-exclamation { - background: url('../images/icons/sign-exclamation.png'); - width: 7px; - height: 17px; - } - - &.icon-sign-heart { - background: url('../images/icons/sign-heart.png'); - width: 15px; - height: 13px; - } - - &.icon-sign-red { - background: url('../images/icons/sign-red.png'); - width: 11px; - height: 19px; - } - - &.icon-sign-yellow { - background: url('../images/icons/sign-yellow.png'); - width: 11px; - height: 19px; - } - - &.icon-sign-skull { - background: url('../images/icons/sign-skull.png'); - width: 12px; - height: 12px; - } - - &.icon-sign-smile { - background: url('../images/icons/sign-smile.png'); - width: 7px; - height: 14px; - } - - &.icon-sign-soccer { - background: url('../images/icons/sign-soccer.png'); - width: 20px; - height: 20px; - } - - &.icon-camera-colormatrix { - background: url('../images/icons/camera-colormatrix.png'); - width: 32px; - height: 14px; - } - - &.icon-camera-composite { - background: url('../images/icons/camera-composite.png'); - width: 32px; - height: 14px; - } - - &.icon-user-profile { - background: url('../images/icons/user-profile.png'); - width: 13px; - height: 11px; - - &:hover { - background: url('../images/icons/user-profile-hover.png'); - } - } - - &.icon-fb-profile { - background: url('../images/toolbar/icons/friend-bar/profile.png'); - width: 21px; - height: 21px; - } - - &.icon-fb-chat { - background: url('../images/toolbar/icons/friend-bar/chat.png'); - width: 20px; - height: 21px; - } - - &.icon-fb-visit { - background: url('../images/toolbar/icons/friend-bar/visit.png'); - width: 21px; - height: 21px; - } - - &.spin { - animation: rotating 1s linear infinite; - } - - @keyframes rotating { - from { - transform: rotate(0); - } - - to { - transform: rotate(360deg); - } + } + + &.sh-icon { + background-image: url('../images/avatareditor/sh-icon.png'); + width: 37px; + height: 10px; + + &.selected { + background-image: url('../images/avatareditor/sh-selected-icon.png'); + } + } + + &.wa-icon { + background-image: url('../images/avatareditor/wa-icon.png'); + width: 36px; + height: 18px; + + &.selected { + background-image: url('../images/avatareditor/wa-selected-icon.png'); + } + } + + &.chatstyles-icon { + background-image: url('../images/chat/styles-icon.png'); + width: 17px; + height: 19px; + } + + &.pencil-icon { + background-image: url('../images/infostand/pencil-icon.png'); + width: 17px; + height: 18px; + } + + &.trade-locked-icon { + background-image: url('../images/inventory/trading/locked-icon.png'); + width: 29px; + height: 43px; + } + + &.trade-unlocked-icon { + background-image: url('../images/inventory/trading/unlocked-icon.png'); + width: 29px; + height: 43px; + } + + &.modtool-room-icon { + background-image: url('../images/modtool/room.png'); + width: 20px; + height: 15px; + } + + &.modtool-chatlog-icon { + background-image: url('../images/modtool/chatlog.gif'); + width: 20px; + height: 15px; + } + + &.modtool-user-icon{ + background-image: url('../images/modtool/user.gif'); + width: 20px; + height: 15px; + } + + &.modtool-reports-icon { + background-image: url('../images/modtool/reports.png'); + width: 20px; + height: 15px; + } + + &.modtool-wrench-icon { + background-image: url('../images/modtool/wrench.gif'); + width: 20px; + height: 15px; + } + + &.modtool-key-icon { + background-image: url('../images/modtool/key.gif'); + width: 20px; + height: 15px; + } + + &.icon-catalogue-hc_small { + background-image: url('../images/catalog/hc_small.png'); + height: 17px; + width: 31px; + } + + &.icon-catalogue-hc_big { + background: url('../images/catalog/hc_big.png'); + width: 68px; + height: 40px; + } + + &.icon-sign-exclamation { + background: url('../images/icons/sign-exclamation.png'); + width: 7px; + height: 17px; + } + + &.icon-sign-heart { + background: url('../images/icons/sign-heart.png'); + width: 15px; + height: 13px; + } + + &.icon-sign-red { + background: url('../images/icons/sign-red.png'); + width: 11px; + height: 19px; + } + + &.icon-sign-yellow { + background: url('../images/icons/sign-yellow.png'); + width: 11px; + height: 19px; + } + + &.icon-sign-skull { + background: url('../images/icons/sign-skull.png'); + width: 12px; + height: 12px; + } + + &.icon-sign-smile { + background: url('../images/icons/sign-smile.png'); + width: 7px; + height: 14px; + } + + &.icon-sign-soccer { + background: url('../images/icons/sign-soccer.png'); + width: 20px; + height: 20px; + } + + &.icon-camera-colormatrix { + background: url('../images/icons/camera-colormatrix.png'); + width: 32px; + height: 14px; + } + + &.icon-camera-composite { + background: url('../images/icons/camera-composite.png'); + width: 32px; + height: 14px; + } + + &.icon-user-profile { + background: url('../images/icons/user-profile.png'); + width: 13px; + height: 11px; + + &:hover { + background: url('../images/icons/user-profile-hover.png'); + } + } + + &.icon-fb-profile { + background: url('../images/toolbar/icons/friend-bar/profile.png'); + width: 21px; + height: 21px; + } + + &.icon-fb-chat { + background: url('../images/toolbar/icons/friend-bar/chat.png'); + width: 20px; + height: 21px; + } + + &.icon-fb-visit { + background: url('../images/toolbar/icons/friend-bar/visit.png'); + width: 21px; + height: 21px; + } + + &.spin { + animation: rotating 1s linear infinite; + } + + @keyframes rotating { + from { + transform: rotate(0); + } + + to { + transform: rotate(360deg); } } } diff --git a/src/layout/card/grid/NitroCardGridView.scss b/src/layout/card/grid/NitroCardGridView.scss index 44a1ee42..e424066a 100644 --- a/src/layout/card/grid/NitroCardGridView.scss +++ b/src/layout/card/grid/NitroCardGridView.scss @@ -10,6 +10,17 @@ } } } + + .row-cols-4 { + + .col { + padding-right: 0.25rem; + + &:nth-child(4n+4) { + padding-right: 0; + } + } + } .row-cols-5 { diff --git a/src/layout/card/grid/NitroCardGridView.tsx b/src/layout/card/grid/NitroCardGridView.tsx index 25b9fe47..4726910c 100644 --- a/src/layout/card/grid/NitroCardGridView.tsx +++ b/src/layout/card/grid/NitroCardGridView.tsx @@ -1,15 +1,18 @@ import { FC } from 'react'; -import { NitroCardGridViewProps } from './NitroCardGridView.types'; +import { NitroCardGridContextProvider } from './context/NitroCardGridContext'; +import { NitroCardGridThemes, NitroCardGridViewProps } from './NitroCardGridView.types'; export const NitroCardGridView: FC = props => { - const { columns = 5, children = null } = props; + const { columns = 5, theme = NitroCardGridThemes.THEME_DEFAULT, children = null } = props; return ( -
-
- { children } + +
+
+ { children } +
-
+ ); } diff --git a/src/layout/card/grid/NitroCardGridView.types.ts b/src/layout/card/grid/NitroCardGridView.types.ts index b24763d1..58c052ac 100644 --- a/src/layout/card/grid/NitroCardGridView.types.ts +++ b/src/layout/card/grid/NitroCardGridView.types.ts @@ -1,4 +1,11 @@ export interface NitroCardGridViewProps { columns?: number; + theme?: string; +} + +export class NitroCardGridThemes +{ + public static THEME_DEFAULT: string = 'theme-default'; + public static THEME_SHADOWED: string = 'theme-shadowed'; } diff --git a/src/layout/card/grid/context/NitroCardGridContext.tsx b/src/layout/card/grid/context/NitroCardGridContext.tsx new file mode 100644 index 00000000..18661b76 --- /dev/null +++ b/src/layout/card/grid/context/NitroCardGridContext.tsx @@ -0,0 +1,13 @@ +import { createContext, FC, useContext } from 'react'; +import { INitroCardGridContext, NitroCardGridContextProps } from './NitroCardGridContext.types'; + +const NitroCardGridContext = createContext({ + theme: null +}); + +export const NitroCardGridContextProvider: FC = props => +{ + return { props.children } +} + +export const useNitroCardGridContext = () => useContext(NitroCardGridContext); diff --git a/src/layout/card/grid/context/NitroCardGridContext.types.ts b/src/layout/card/grid/context/NitroCardGridContext.types.ts new file mode 100644 index 00000000..a0f97c95 --- /dev/null +++ b/src/layout/card/grid/context/NitroCardGridContext.types.ts @@ -0,0 +1,11 @@ +import { ProviderProps } from 'react'; + +export interface INitroCardGridContext +{ + theme: string; +} + +export interface NitroCardGridContextProps extends ProviderProps +{ + +} diff --git a/src/layout/card/grid/context/index.ts b/src/layout/card/grid/context/index.ts new file mode 100644 index 00000000..9e3f79e8 --- /dev/null +++ b/src/layout/card/grid/context/index.ts @@ -0,0 +1,2 @@ +export * from './NitroCardGridContext'; +export * from './NitroCardGridContext.types'; diff --git a/src/layout/card/grid/item/NitroCardGridItemView.scss b/src/layout/card/grid/item/NitroCardGridItemView.scss index 2ff2f0fd..19f6c716 100644 --- a/src/layout/card/grid/item/NitroCardGridItemView.scss +++ b/src/layout/card/grid/item/NitroCardGridItemView.scss @@ -1,15 +1,49 @@ .grid-item-container { - height: 48px; - max-height: 48px; + height: 50px; + max-height: 50px; .grid-item { + position: relative; width: 100%; height: 100%; - border-color: $grid-border-color !important; - background-color: $grid-bg-color; background-position: center; background-repeat: no-repeat; overflow: hidden; + + &.theme-default { + border-radius: $border-radius; + border-color: $grid-border-color !important; + background-color: $grid-bg-color; + border: nth(map-values($border-widths), 2) solid; + } + + &.theme-shadowed { + border-radius: $border-radius; + background-color: $light; + + &::after { + position: absolute; + content: ''; + top: 0; + bottom: 0; + left: 0; + right: 0; + border-radius: $border-radius; + border-bottom: 2px solid white; + border-right: 2px solid white; + box-shadow: -2px -2px rgba(0, 0, 0, .4), inset 3px 3px rgba(0, 0, 0, .2); + } + + &.active { + border: nth(map-values($border-widths), 2) solid; + border-color: $oslo-gray !important; + background-color: #F5F5F5; + + &:after { + content: unset; + } + } + } &.active { border-color: $grid-active-border-color !important; diff --git a/src/layout/card/grid/item/NitroCardGridItemView.tsx b/src/layout/card/grid/item/NitroCardGridItemView.tsx index 985a24bd..445851e1 100644 --- a/src/layout/card/grid/item/NitroCardGridItemView.tsx +++ b/src/layout/card/grid/item/NitroCardGridItemView.tsx @@ -1,16 +1,19 @@ import { FC } from 'react'; import { LimitedEditionStyledNumberView } from '../../../../views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView'; +import { useNitroCardGridContext } from '../context'; +import { NitroCardGridThemes } from '../NitroCardGridView.types'; import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types'; export const NitroCardGridItemView: FC = props => { - const { itemImage = null, itemActive = false, itemCount = 1, itemUnique = false, itemUniqueNumber = 0, itemUnseen = false, className = '', style = {}, children = null, ...rest } = props; + const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUnique = false, itemUniqueNumber = 0, itemUnseen = false, className = '', style = {}, children = null, ...rest } = props; + const { theme = NitroCardGridThemes.THEME_DEFAULT } = useNitroCardGridContext(); const imageUrl = `url(${ itemImage })`; return (
-
+
{ (itemCount > 1) && { itemCount } } { itemUnique && diff --git a/src/layout/card/grid/item/NitroCardGridItemView.types.ts b/src/layout/card/grid/item/NitroCardGridItemView.types.ts index da6295c3..52e0242c 100644 --- a/src/layout/card/grid/item/NitroCardGridItemView.types.ts +++ b/src/layout/card/grid/item/NitroCardGridItemView.types.ts @@ -3,6 +3,7 @@ import { DetailsHTMLAttributes } from 'react'; export interface NitroCardGridItemViewProps extends DetailsHTMLAttributes { itemImage?: string; + itemColor?: string; itemActive?: boolean; itemCount?: number; itemUnique?: boolean; diff --git a/src/views/avatar-editor/AvatarEditorView.scss b/src/views/avatar-editor/AvatarEditorView.scss index ecc8cf0c..d94a3cdc 100644 --- a/src/views/avatar-editor/AvatarEditorView.scss +++ b/src/views/avatar-editor/AvatarEditorView.scss @@ -1,8 +1,51 @@ .nitro-avatar-editor { - width: 550px; + width: 600px; .content-area { - height: 300px; - max-height: 300px; + height: 330px; + max-height: 330px; + } + + .figure-preview-container { + position: relative; + height: 100%; + background-color: $pale-sky; + overflow: hidden; + z-index: 1; + + .avatar-image { + margin: 45px auto 0; + z-index: 2; + } + + .arrow-container { + position: absolute; + width: 100%; + margin: 0 auto; + display: flex; + justify-content: center; + bottom: 12px; + z-index: 3; + + .icon { + cursor: pointer; + } + + .arrow-left-icon { + margin-right: 10px; + } + } + + &:after { + position: absolute; + content: ''; + top: 75%; + bottom: 0; + left: 0; + right: 0; + border-radius: 50%; + background-color: red; + transform: scale(2); + } } } diff --git a/src/views/avatar-editor/AvatarEditorView.tsx b/src/views/avatar-editor/AvatarEditorView.tsx index 8fe50d8c..b8d5a07d 100644 --- a/src/views/avatar-editor/AvatarEditorView.tsx +++ b/src/views/avatar-editor/AvatarEditorView.tsx @@ -1,5 +1,6 @@ import { AvatarEditorFigureCategory } from 'nitro-renderer'; import { FC, useCallback, useEffect, useReducer, useState } from 'react'; +import { GetSessionDataManager } from '../../api'; import { AvatarEditorEvent } from '../../events/avatar-editor'; import { useUiEvent } from '../../hooks/events/ui/ui-event'; import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout'; @@ -7,6 +8,7 @@ import { LocalizeText } from '../../utils/LocalizeText'; import { AvatarEditorViewProps } from './AvatarEditorView.types'; import { AvatarEditor } from './common/AvatarEditor'; import { BodyModel } from './common/BodyModel'; +import { FigureData } from './common/FigureData'; import { HeadModel } from './common/HeadModel'; import { IAvatarEditorCategoryModel } from './common/IAvatarEditorCategoryModel'; import { LegModel } from './common/LegModel'; @@ -24,6 +26,79 @@ export const AvatarEditorView: FC = props => const [ activeCategory, setActiveCategory ] = useState(null); const [ isInitalized, setIsInitalized ] = useState(false); + const selectCategory = useCallback((name: string) => + { + setActiveCategory(categories.get(name)); + }, [ categories ]); + + const resetCategories = useCallback((editor: AvatarEditor) => + { + const categories = new Map(); + + categories.set(AvatarEditorFigureCategory.GENERIC, new BodyModel(editor)); + categories.set(AvatarEditorFigureCategory.HEAD, new HeadModel(editor)); + categories.set(AvatarEditorFigureCategory.TORSO, new TorsoModel(editor)); + categories.set(AvatarEditorFigureCategory.LEGS, new LegModel(editor)); + + setCategories(categories); + setActiveCategory(categories.get(AvatarEditorFigureCategory.GENERIC)); + }, []); + + const selectGender = useCallback((gender: string) => + { + if(gender === avatarEditor.gender) return; + + avatarEditor.gender = gender; + + resetCategories(avatarEditor); + }, [ avatarEditor, resetCategories ]); + + const loadAvatarInEditor = useCallback((figure: string, gender: string, reset: boolean = true) => + { + if(!avatarEditor) return; + + switch(gender) + { + case FigureData.MALE: + case 'm': + case 'M': + gender = FigureData.MALE; + break; + case FigureData.FEMALE: + case 'f': + case 'F': + gender = FigureData.FEMALE; + break; + default: + gender = FigureData.MALE; + } + + let update = false; + + if(gender !== avatarEditor.gender) + { + avatarEditor.gender = gender; + + update = true; + } + + const figureData = avatarEditor.figureData; + + if(!figureData) return; + + if(figure !== figureData.getFigureString()) + { + update = true; + } + + figureData.loadAvatarData(figure, gender); + + if(update) + { + resetCategories(avatarEditor); + } + }, [ avatarEditor, resetCategories ]); + const onAvatarEditorEvent = useCallback((event: AvatarEditorEvent) => { switch(event.type) @@ -35,7 +110,7 @@ export const AvatarEditorView: FC = props => setIsVisible(false); return; case AvatarEditorEvent.TOGGLE_EDITOR: - setIsVisible(value => !value); + setIsVisible(prevValue => !prevValue); return; } }, []); @@ -44,11 +119,6 @@ export const AvatarEditorView: FC = props => useUiEvent(AvatarEditorEvent.HIDE_EDITOR, onAvatarEditorEvent); useUiEvent(AvatarEditorEvent.TOGGLE_EDITOR, onAvatarEditorEvent); - const selectCategory = useCallback((name: string) => - { - setActiveCategory(categories.get(name)); - }, [ categories ]); - useEffect(() => { if(!isVisible || isInitalized) return; @@ -56,26 +126,23 @@ export const AvatarEditorView: FC = props => const newEditor = new AvatarEditor(); setAvatarEditor(newEditor); - - const categories = new Map(); - - categories.set(AvatarEditorFigureCategory.GENERIC, new BodyModel(newEditor)); - categories.set(AvatarEditorFigureCategory.HEAD, new HeadModel(newEditor)); - categories.set(AvatarEditorFigureCategory.TORSO, new TorsoModel(newEditor)); - categories.set(AvatarEditorFigureCategory.LEGS, new LegModel(newEditor)); - - setCategories(categories); - setActiveCategory(categories.get(AvatarEditorFigureCategory.GENERIC)); setIsInitalized(true); }, [ isVisible, isInitalized ]); + useEffect(() => + { + if(!isVisible || !avatarEditor) return; + + loadAvatarInEditor(GetSessionDataManager().figure, GetSessionDataManager().gender); + }, [ isVisible, avatarEditor, loadAvatarInEditor ]); + return ( { isVisible && setIsVisible(false) } /> - { categories && Array.from(categories.keys()).map(category => + { categories && (categories.size > 0) && Array.from(categories.keys()).map(category => { return ( selectCategory(category) }> @@ -85,7 +152,7 @@ export const AvatarEditorView: FC = props => })} - { activeCategory && } + { activeCategory && } } diff --git a/src/views/avatar-editor/common/AvatarEditor.ts b/src/views/avatar-editor/common/AvatarEditor.ts index 4bd882b6..3ba88477 100644 --- a/src/views/avatar-editor/common/AvatarEditor.ts +++ b/src/views/avatar-editor/common/AvatarEditor.ts @@ -1,9 +1,10 @@ -import { FigureData, IPalette, IPartColor, ISetType, IStructureData } from 'nitro-renderer'; +import { IPalette, IPartColor, ISetType, IStructureData } from 'nitro-renderer'; import { GetAvatarRenderManager, GetConfiguration, GetSessionDataManager } from '../../../api'; import { AvatarEditorGridColorItem } from './AvatarEditorGridColorItem'; import { AvatarEditorGridPartItem } from './AvatarEditorGridPartItem'; import { CategoryBaseModel } from './CategoryBaseModel'; import { CategoryData } from './CategoryData'; +import { FigureData } from './FigureData'; const MAX_PALETTES: number = 2; const DEFAULT_MALE_FIGURE: string = 'hr-100.hd-180-7.ch-215-66.lg-270-79.sh-305-62.ha-1002-70.wa-2007'; @@ -11,16 +12,13 @@ const DEFAULT_FEMALE_FIGURE: string = 'hr-515-33.hd-600-1.ch-635-70.lg-716-66-62 export class AvatarEditor { - private _figureStructureData: IStructureData; - private _figures: Map; - private _gender: string; + private _figureStructureData: IStructureData = GetAvatarRenderManager().structureData; + private _figures: Map = new Map(); + private _gender: string = FigureData.MALE; + private _notifier: () => void = null; constructor() { - this._figureStructureData = GetAvatarRenderManager().structureData; - this._figures = new Map(); - this._gender = FigureData.MALE; - const maleFigure = new FigureData(); const femaleFigure = new FigureData(); @@ -160,6 +158,7 @@ export class AvatarEditor if(partSet.isSellable) { + isValid = false; //isValid = (this._inventoryService && this._inventoryService.hasFigureSetId(partSet.id)); } @@ -284,6 +283,24 @@ export class AvatarEditor public set gender(gender: string) { + if(this._gender === gender) return; + this._gender = gender; + + if(this.figureData) this.figureData.notify = this.notify; + + if(this.notify) this.notify(); + } + + public get notify(): () => void + { + return this._notifier; + } + + public set notify(notifier: () => void) + { + if(this.figureData) this.figureData.notify = notifier; + + this._notifier = notifier; } } diff --git a/src/views/avatar-editor/common/AvatarEditorGridColorItem.ts b/src/views/avatar-editor/common/AvatarEditorGridColorItem.ts index b6e99efd..9757b1fc 100644 --- a/src/views/avatar-editor/common/AvatarEditorGridColorItem.ts +++ b/src/views/avatar-editor/common/AvatarEditorGridColorItem.ts @@ -6,6 +6,7 @@ export class AvatarEditorGridColorItem private _isDisabled: boolean; private _isHC: boolean; private _isSelected: boolean; + private _notifier: () => void; constructor(partColor: IPartColor, isDisabled: boolean = false) { @@ -48,5 +49,17 @@ export class AvatarEditorGridColorItem public set isSelected(flag: boolean) { this._isSelected = flag; + + if(this.notify) this.notify(); + } + + public get notify(): () => void + { + return this._notifier; + } + + public set notify(notifier: () => void) + { + this._notifier = notifier; } } diff --git a/src/views/avatar-editor/common/AvatarEditorGridPartItem.ts b/src/views/avatar-editor/common/AvatarEditorGridPartItem.ts index f22b3718..4ac82a7f 100644 --- a/src/views/avatar-editor/common/AvatarEditorGridPartItem.ts +++ b/src/views/avatar-editor/common/AvatarEditorGridPartItem.ts @@ -1,5 +1,6 @@ -import { AvatarFigurePartType, FigureData, IAvatarImageListener, IAvatarRenderManager, IFigurePart, IFigurePartSet, IGraphicAsset, IPartColor, NitroContainer, NitroSprite, TextureUtils } from 'nitro-renderer'; +import { AvatarFigurePartType, IAvatarImageListener, IAvatarRenderManager, IFigurePart, IFigurePartSet, IGraphicAsset, IPartColor, NitroContainer, NitroSprite, TextureUtils } from 'nitro-renderer'; import { GetAvatarRenderManager } from '../../../api'; +import { FigureData } from './FigureData'; export class AvatarEditorGridPartItem implements IAvatarImageListener { @@ -47,6 +48,7 @@ export class AvatarEditorGridPartItem implements IAvatarImageListener private _isSelected: boolean; private _disposed: boolean; private _isInitalized: boolean; + private _notifier: () => void; constructor(partSet: IFigurePartSet, partColors: IPartColor[], useColors: boolean = true, isDisabled: boolean = false) { @@ -210,6 +212,8 @@ export class AvatarEditorGridPartItem implements IAvatarImageListener if(this._isDisabled) this.setAlpha(container, 0.2); this._imageUrl = TextureUtils.generateImageUrl(container); + + if(this.notify) this.notify(); } private setAlpha(container: NitroContainer, alpha: number): NitroContainer @@ -259,21 +263,21 @@ export class AvatarEditorGridPartItem implements IAvatarImageListener return this._partSet; } - public set colors(partColors: IPartColor[]) + public set partColors(partColors: IPartColor[]) { this._partColors = partColors; this.update(); } - public get isDisabledForWearing(): boolean + public get isDisabled(): boolean { return this._isDisabled; } - public set iconImage(k: NitroContainer) + public set thumbContainer(container: NitroContainer) { - this._thumbContainer = k; + this._thumbContainer = container; this.update(); } @@ -283,7 +287,7 @@ export class AvatarEditorGridPartItem implements IAvatarImageListener return this._imageUrl; } - public get colorLayerCount(): number + public get maxColorIndex(): number { return this._maxColorIndex; } @@ -316,5 +320,17 @@ export class AvatarEditorGridPartItem implements IAvatarImageListener public set isSelected(flag: boolean) { this._isSelected = flag; + + if(this.notify) this.notify(); + } + + public get notify(): () => void + { + return this._notifier; + } + + public set notify(notifier: () => void) + { + this._notifier = notifier; } } diff --git a/src/views/avatar-editor/common/BodyModel.ts b/src/views/avatar-editor/common/BodyModel.ts index b1419c10..41971d51 100644 --- a/src/views/avatar-editor/common/BodyModel.ts +++ b/src/views/avatar-editor/common/BodyModel.ts @@ -1,6 +1,7 @@ -import { AvatarEditorFigureCategory, AvatarScaleType, AvatarSetType, FigureData, IAvatarImageListener } from 'nitro-renderer'; +import { AvatarEditorFigureCategory, AvatarScaleType, AvatarSetType, IAvatarImageListener } from 'nitro-renderer'; import { GetAvatarRenderManager } from '../../../api'; import { CategoryBaseModel } from './CategoryBaseModel'; +import { FigureData } from './FigureData'; export class BodyModel extends CategoryBaseModel implements IAvatarImageListener { @@ -50,7 +51,7 @@ export class BodyModel extends CategoryBaseModel implements IAvatarImageListener { sprite.y = 10; - part.iconImage = sprite; + part.thumbContainer = sprite; setTimeout(() => avatarImage.dispose(), 0); } diff --git a/src/views/avatar-editor/common/CategoryBaseModel.ts b/src/views/avatar-editor/common/CategoryBaseModel.ts index d7ea50a2..9d1100ee 100644 --- a/src/views/avatar-editor/common/CategoryBaseModel.ts +++ b/src/views/avatar-editor/common/CategoryBaseModel.ts @@ -174,7 +174,7 @@ export class CategoryBaseModel implements IAvatarEditorCategoryModel if(!partItem) return; - if(partItem.isDisabledForWearing) + if(partItem.isDisabled) { categoryData.selectPartIndex(selectedPartIndex); @@ -183,7 +183,7 @@ export class CategoryBaseModel implements IAvatarEditorCategoryModel return; } - this._maxPaletteCount = partItem.colorLayerCount; + this._maxPaletteCount = partItem.maxColorIndex; this._editor.figureData.savePartData(category, partItem.id, categoryData.getSelectedColorIds(), true); } @@ -233,7 +233,7 @@ export class CategoryBaseModel implements IAvatarEditorCategoryModel public get maxPaletteCount(): number { - return this._maxPaletteCount; + return (this._maxPaletteCount || 1); } public set maxPaletteCount(count: number) diff --git a/src/views/avatar-editor/common/CategoryData.ts b/src/views/avatar-editor/common/CategoryData.ts index 54ffaa89..1b740037 100644 --- a/src/views/avatar-editor/common/CategoryData.ts +++ b/src/views/avatar-editor/common/CategoryData.ts @@ -266,7 +266,7 @@ export class CategoryData if(!partItem) return null; - return colorIds.slice(0, Math.max(partItem.colorLayerCount, 1)); + return colorIds.slice(0, Math.max(partItem.maxColorIndex, 1)); } private getSelectedColors(): IPartColor[] @@ -333,7 +333,7 @@ export class CategoryData for(const partItem of this._parts) { - if(partItem) partItem.colors = partColors; + if(partItem) partItem.partColors = partColors; } } diff --git a/src/views/avatar-editor/common/FigureData.ts b/src/views/avatar-editor/common/FigureData.ts new file mode 100644 index 00000000..2e447cb3 --- /dev/null +++ b/src/views/avatar-editor/common/FigureData.ts @@ -0,0 +1,271 @@ +export class FigureData +{ + public static MALE: string = 'M'; + public static FEMALE: string = 'F'; + public static UNISEX: string = 'U'; + public static SCALE: string = 'h'; + public static STD: string = 'std'; + public static DEFAULT_FRAME: string = '0'; + public static FACE: string = 'hd'; + public static HAIR: string = 'hr'; + public static HAT: string = 'ha'; + public static HEAD_ACCESSORIES: string = 'he'; + public static EYE_ACCESSORIES: string = 'ea'; + public static FACE_ACCESSORIES: string = 'fa'; + public static JACKET: string = 'cc'; + public static SHIRT: string = 'ch'; + public static CHEST_ACCESSORIES: string = 'ca'; + public static CHEST_PRINTS: string = 'cp'; + public static TROUSERS: string = 'lg'; + public static SHOES: string = 'sh'; + public static TROUSER_ACCESSORIES: string = 'wa'; + public static PREVIEW_AVATAR_DIRECTION: number = 4; + + private _data: Map; + private _colors: Map; + private _gender: string = 'M'; + private _avatarEffectType: number = -1; + private _notifier: () => void = null; + + public loadAvatarData(figureString: string, gender: string): void + { + this._data = new Map(); + this._colors = new Map(); + this._gender = gender; + + this.parseFigureString(figureString); + this.updateView(); + } + + private parseFigureString(figure: string): void + { + if(!figure) return; + + const sets = figure.split('.'); + + if(!sets || !sets.length) return; + + for(const set of sets) + { + const parts = set.split('-'); + + if(!parts.length) continue; + + const setType = parts[0]; + const setId = parseInt(parts[1]); + const colorIds: number[] = []; + + let offset = 2; + + while(offset < parts.length) + { + colorIds.push(parseInt(parts[offset])); + + offset++; + } + + if(!colorIds.length) colorIds.push(0); + + this.savePartSetId(setType, setId, false); + this.savePartSetColourId(setType, colorIds, false); + } + } + + public getPartSetId(partSetId: string): number + { + const existing = this._data.get(partSetId); + + if(existing !== undefined) return existing; + + return -1; + } + + public getColourIds(colorId: string): number[] + { + const existing = this._colors.get(colorId); + + if(existing !== undefined) return existing; + + return []; + // return [this._avatarEditor._Str_24919(k)]; + } + + public getFigureString(): string + { + let figureString = ''; + const setParts: string[] = []; + + for(const [ setType, setId ] of this._data.entries()) + { + const colorIds = this._colors.get(setType); + + let setPart = ((setType + '-') + setId); + + if(colorIds && colorIds.length) + { + let i = 0; + + while(i < colorIds.length) + { + setPart = (setPart + ('-' + colorIds[i])); + + i++; + } + } + + setParts.push(setPart); + } + + let i = 0; + + while(i < setParts.length) + { + figureString = (figureString + setParts[i]); + + if(i < (setParts.length - 1)) figureString = (figureString + '.'); + + i++; + } + + return figureString; + } + + public savePartData(k: string, _arg_2: number, _arg_3: number[], _arg_4: boolean = false): void + { + this.savePartSetId(k, _arg_2, _arg_4); + this.savePartSetColourId(k, _arg_3, _arg_4); + } + + private savePartSetId(k: string, _arg_2: number, _arg_3: boolean = true): void + { + switch(k) + { + case FigureData.FACE: + case FigureData.HAIR: + case FigureData.HAT: + case FigureData.HEAD_ACCESSORIES: + case FigureData.EYE_ACCESSORIES: + case FigureData.FACE_ACCESSORIES: + case FigureData.SHIRT: + case FigureData.JACKET: + case FigureData.CHEST_ACCESSORIES: + case FigureData.CHEST_PRINTS: + case FigureData.TROUSERS: + case FigureData.SHOES: + case FigureData.TROUSER_ACCESSORIES: + if(_arg_2 >= 0) + { + this._data.set(k, _arg_2); + } + else + { + this._data.delete(k); + } + break; + } + + if(_arg_3) this.updateView(); + } + + public savePartSetColourId(k: string, _arg_2: number[], _arg_3: boolean = true): void + { + switch(k) + { + case FigureData.FACE: + case FigureData.HAIR: + case FigureData.HAT: + case FigureData.HEAD_ACCESSORIES: + case FigureData.EYE_ACCESSORIES: + case FigureData.FACE_ACCESSORIES: + case FigureData.SHIRT: + case FigureData.JACKET: + case FigureData.CHEST_ACCESSORIES: + case FigureData.CHEST_PRINTS: + case FigureData.TROUSERS: + case FigureData.SHOES: + case FigureData.TROUSER_ACCESSORIES: + this._colors.set(k, _arg_2); + break; + } + + if(_arg_3) this.updateView(); + } + + public getFigureStringWithFace(k: number, override = true): string + { + let figureString = ''; + + const setTypes: string[] = [ FigureData.FACE ]; + const figureSets: string[] = []; + + for(const setType of setTypes) + { + const colors = this._colors.get(setType); + + if(colors === undefined) continue; + + let setId = this._data.get(setType); + + if((setType === FigureData.FACE) && override) setId = k; + + let figureSet = ((setType + '-') + setId); + + if(setId >= 0) + { + let i = 0; + + while(i < colors.length) + { + figureSet = (figureSet + ('-' + colors[i])); + + i++; + } + } + + figureSets.push(figureSet); + } + + let i = 0; + + while(i < figureSets.length) + { + figureString = (figureString + figureSets[i]); + + if(i < (figureSets.length - 1)) figureString = (figureString + '.'); + + i++; + } + + return figureString; + } + + public updateView(): void + { + if(this.notify) this.notify(); + } + + public get gender(): string + { + return this._gender; + } + + public set avatarEffectType(k: number) + { + this._avatarEffectType = k; + } + + public get avatarEffectType(): number + { + return this._avatarEffectType; + } + + public get notify(): () => void + { + return this._notifier; + } + + public set notify(notifier: () => void) + { + this._notifier = notifier; + } +} diff --git a/src/views/avatar-editor/common/HeadModel.ts b/src/views/avatar-editor/common/HeadModel.ts index 1635b79a..bb6276e8 100644 --- a/src/views/avatar-editor/common/HeadModel.ts +++ b/src/views/avatar-editor/common/HeadModel.ts @@ -1,5 +1,6 @@ -import { AvatarEditorFigureCategory, FigureData } from 'nitro-renderer'; +import { AvatarEditorFigureCategory } from 'nitro-renderer'; import { CategoryBaseModel } from './CategoryBaseModel'; +import { FigureData } from './FigureData'; export class HeadModel extends CategoryBaseModel { diff --git a/src/views/avatar-editor/common/LegModel.ts b/src/views/avatar-editor/common/LegModel.ts index 73b7bafe..02aec797 100644 --- a/src/views/avatar-editor/common/LegModel.ts +++ b/src/views/avatar-editor/common/LegModel.ts @@ -1,5 +1,6 @@ -import { AvatarEditorFigureCategory, FigureData } from 'nitro-renderer'; +import { AvatarEditorFigureCategory } from 'nitro-renderer'; import { CategoryBaseModel } from './CategoryBaseModel'; +import { FigureData } from './FigureData'; export class LegModel extends CategoryBaseModel { diff --git a/src/views/avatar-editor/common/TorsoModel.ts b/src/views/avatar-editor/common/TorsoModel.ts index 089ca366..2875ffa4 100644 --- a/src/views/avatar-editor/common/TorsoModel.ts +++ b/src/views/avatar-editor/common/TorsoModel.ts @@ -1,5 +1,6 @@ -import { AvatarEditorFigureCategory, FigureData } from 'nitro-renderer'; +import { AvatarEditorFigureCategory } from 'nitro-renderer'; import { CategoryBaseModel } from './CategoryBaseModel'; +import { FigureData } from './FigureData'; export class TorsoModel extends CategoryBaseModel { diff --git a/src/views/avatar-editor/views/figure-preview/AvatarEditorFigurePreviewView.tsx b/src/views/avatar-editor/views/figure-preview/AvatarEditorFigurePreviewView.tsx new file mode 100644 index 00000000..73e37a69 --- /dev/null +++ b/src/views/avatar-editor/views/figure-preview/AvatarEditorFigurePreviewView.tsx @@ -0,0 +1,28 @@ +import { FC, useCallback, useEffect, useState } from 'react'; +import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView'; +import { AvatarEditorFigurePreviewViewProps } from './AvatarEditorFigurePreviewView.types'; + +export const AvatarEditorFigurePreviewView: FC = props => +{ + const { editor = null } = props; + const [ updateId, setUpdateId ] = useState(-1); + + const rerender = useCallback(() => + { + setUpdateId(prevValue => (prevValue + 1)); + }, []); + + useEffect(() => + { + if(!editor) return; + + editor.notify = rerender; + + return () => + { + editor.notify = null; + } + }, [ editor, rerender ] ); + + return +} diff --git a/src/views/avatar-editor/views/figure-preview/AvatarEditorFigurePreviewView.types.ts b/src/views/avatar-editor/views/figure-preview/AvatarEditorFigurePreviewView.types.ts new file mode 100644 index 00000000..0bfcf8f9 --- /dev/null +++ b/src/views/avatar-editor/views/figure-preview/AvatarEditorFigurePreviewView.types.ts @@ -0,0 +1,6 @@ +import { AvatarEditor } from '../../common/AvatarEditor'; + +export interface AvatarEditorFigurePreviewViewProps +{ + editor: AvatarEditor; +} diff --git a/src/views/avatar-editor/views/figure-set-item/AvatarEditorFigureSetItemView.tsx b/src/views/avatar-editor/views/figure-set-item/AvatarEditorFigureSetItemView.tsx index fcb268cc..ef4c0cc4 100644 --- a/src/views/avatar-editor/views/figure-set-item/AvatarEditorFigureSetItemView.tsx +++ b/src/views/avatar-editor/views/figure-set-item/AvatarEditorFigureSetItemView.tsx @@ -1,16 +1,31 @@ -import { FC, useEffect, useState } from 'react'; +import { FC, useCallback, useEffect, useState } from 'react'; import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView'; +import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon'; import { AvatarEditorFigureSetItemViewProps } from './AvatarEditorFigureSetItemView.types'; export const AvatarEditorFigureSetItemView: FC = props => { const { partItem = null, onClick = null } = props; - const [ imageUrl, setImageUrl ] = useState(null); + const [ updateId, setUpdateId ] = useState(-1); + + const rerender = useCallback(() => + { + setUpdateId(prevValue => (prevValue + 1)); + }, []); useEffect(() => { - setImageUrl(partItem.imageUrl); - }, [ partItem.imageUrl ]); + partItem.notify = rerender; - return onClick(partItem) } /> + return () => + { + partItem.notify = null; + } + }) + + return ( + onClick(partItem) }> + { partItem.isHC && } + + ); } diff --git a/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx b/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx index e16afae6..c97fffdd 100644 --- a/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx +++ b/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx @@ -1,28 +1,33 @@ import { FC, useCallback } from 'react'; import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView'; +import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types'; import { AvatarEditorGridPartItem } from '../../common/AvatarEditorGridPartItem'; import { AvatarEditorFigureSetItemView } from '../figure-set-item/AvatarEditorFigureSetItemView'; import { AvatarEditorFigureSetViewProps } from './AvatarEditorFigureSetView.types'; export const AvatarEditorFigureSetView: FC = props => { - const { model = null, category = null } = props; + const { model = null, category = null, setMaxPaletteCount = null } = props; - const selectPart = useCallback((part: AvatarEditorGridPartItem) => + const selectPart = useCallback((item: AvatarEditorGridPartItem) => { - const index = category.parts.indexOf(part); + const index = category.parts.indexOf(item); if(index === -1) return; model.selectPart(category.name, index); - }, [ model, category ]); + + const partItem = category.getCurrentPart(); + + setMaxPaletteCount(partItem.maxColorIndex || 1); + }, [ model, category, setMaxPaletteCount ]); return ( - + { (category.parts.length > 0) && category.parts.map((item, index) => { return ; }) } - ) + ); } diff --git a/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.types.ts b/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.types.ts index b44992be..d2e9e5cf 100644 --- a/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.types.ts +++ b/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.types.ts @@ -1,3 +1,4 @@ +import { Dispatch, SetStateAction } from 'react'; import { CategoryData } from '../../common/CategoryData'; import { IAvatarEditorCategoryModel } from '../../common/IAvatarEditorCategoryModel'; @@ -5,4 +6,5 @@ export interface AvatarEditorFigureSetViewProps { model: IAvatarEditorCategoryModel; category: CategoryData; + setMaxPaletteCount: Dispatch>; } diff --git a/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx b/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx index 4dfc58d0..c842c94e 100644 --- a/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx +++ b/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx @@ -1,17 +1,19 @@ +import { UserFigureComposer } from 'nitro-renderer'; import { FC, useCallback, useEffect, useState } from 'react'; +import { SendMessageHook } from '../../../../hooks'; +import { LocalizeText } from '../../../../utils/LocalizeText'; import { CategoryData } from '../../common/CategoryData'; +import { FigureData } from '../../common/FigureData'; +import { AvatarEditorFigurePreviewView } from '../figure-preview/AvatarEditorFigurePreviewView'; import { AvatarEditorFigureSetView } from '../figure-set/AvatarEditorFigureSetView'; +import { AvatarEditorPaletteSetView } from '../palette-set/AvatarEditorPaletteSetView'; import { AvatarEditorModelViewProps } from './AvatarEditorModelView.types'; export const AvatarEditorModelView: FC = props => { - const { model = null, editor = null } = props; + const { model = null, editor = null, selectGender = null } = props; const [ activeCategory, setActiveCategory ] = useState(null); - - const selectGender = useCallback((gender: string) => - { - editor.gender = gender; - }, [ editor ]); + const [ maxPaletteCount, setMaxPaletteCount ] = useState(1); const selectCategory = useCallback((name: string) => { @@ -27,12 +29,19 @@ export const AvatarEditorModelView: FC = props => { if(!part || !part.isSelected) continue; - model.maxPaletteCount = part.colorLayerCount; + setMaxPaletteCount(part.maxColorIndex || 1); break; } }, [ model ]); + const saveFigure = useCallback(() => + { + const figureData = editor.figureData; + + SendMessageHook(new UserFigureComposer(figureData.gender, figureData.getFigureString())); + }, [ editor ]); + useEffect(() => { model.init(); @@ -45,16 +54,54 @@ export const AvatarEditorModelView: FC = props => } }, [ model, selectCategory ]); - if(!activeCategory) return null; + if(!model || !activeCategory) return null; return (
-
-
- +
+ { model.canSetGender && + <> + selectGender(FigureData.MALE) } /> + selectGender(FigureData.FEMALE) } /> + } + { !model.canSetGender && model.categories && (model.categories.size > 0) && Array.from(model.categories.keys()).map(name => + { + const category = model.categories.get(name); + + return ( + selectCategory(name) } /> + ); + })} +
+
+ +
+
+
+ +
+ + +
+
+
+
+ + +
+ +
+
+
+ { (maxPaletteCount >= 1) && + } + { (maxPaletteCount === 2) && + }
-
-
); } diff --git a/src/views/avatar-editor/views/model/AvatarEditorModelView.types.ts b/src/views/avatar-editor/views/model/AvatarEditorModelView.types.ts index 322e9a86..dc81491a 100644 --- a/src/views/avatar-editor/views/model/AvatarEditorModelView.types.ts +++ b/src/views/avatar-editor/views/model/AvatarEditorModelView.types.ts @@ -5,4 +5,5 @@ export interface AvatarEditorModelViewProps { model: IAvatarEditorCategoryModel; editor: AvatarEditor; + selectGender: (gender: string) => void; } diff --git a/src/views/avatar-editor/views/palette-set-item/AvatarEditorPaletteSetItem.tsx b/src/views/avatar-editor/views/palette-set-item/AvatarEditorPaletteSetItem.tsx new file mode 100644 index 00000000..2dab88d1 --- /dev/null +++ b/src/views/avatar-editor/views/palette-set-item/AvatarEditorPaletteSetItem.tsx @@ -0,0 +1,26 @@ +import { FC, useCallback, useEffect, useState } from 'react'; +import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView'; +import { AvatarEditorPaletteSetItemProps } from './AvatarEditorPaletteSetItem.types'; + +export const AvatarEditorPaletteSetItem: FC = props => +{ + const { colorItem = null, onClick = null } = props; + const [ updateId, setUpdateId ] = useState(-1); + + const rerender = useCallback(() => + { + setUpdateId(prevValue => (prevValue + 1)); + }, []); + + useEffect(() => + { + colorItem.notify = rerender; + + return () => + { + colorItem.notify = null; + } + }) + + return onClick(colorItem) } /> +} diff --git a/src/views/avatar-editor/views/palette-set-item/AvatarEditorPaletteSetItem.types.ts b/src/views/avatar-editor/views/palette-set-item/AvatarEditorPaletteSetItem.types.ts new file mode 100644 index 00000000..5930f9a4 --- /dev/null +++ b/src/views/avatar-editor/views/palette-set-item/AvatarEditorPaletteSetItem.types.ts @@ -0,0 +1,7 @@ +import { AvatarEditorGridColorItem } from '../../common/AvatarEditorGridColorItem'; + +export interface AvatarEditorPaletteSetItemProps +{ + colorItem: AvatarEditorGridColorItem; + onClick: (item: AvatarEditorGridColorItem) => void; +} diff --git a/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx b/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx new file mode 100644 index 00000000..fc8c4fc9 --- /dev/null +++ b/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx @@ -0,0 +1,29 @@ +import { FC, useCallback } from 'react'; +import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView'; +import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types'; +import { AvatarEditorGridColorItem } from '../../common/AvatarEditorGridColorItem'; +import { AvatarEditorPaletteSetItem } from '../palette-set-item/AvatarEditorPaletteSetItem'; +import { AvatarEditorPaletteSetViewProps } from './AvatarEditorPaletteSetView.types'; + +export const AvatarEditorPaletteSetView: FC = props => +{ + const { model = null, category = null, paletteSet = [], paletteIndex = -1 } = props; + + const selectColor = useCallback((item: AvatarEditorGridColorItem) => + { + const index = paletteSet.indexOf(item); + + if(index === -1) return; + + model.selectColor(category.name, index, paletteIndex); + }, [ model, category, paletteSet, paletteIndex ]); + + return ( + + { (paletteSet.length > 0) && paletteSet.map((item, index) => + { + return ; + }) } + + ); +} diff --git a/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.types.ts b/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.types.ts new file mode 100644 index 00000000..9fa8e2b6 --- /dev/null +++ b/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.types.ts @@ -0,0 +1,11 @@ +import { AvatarEditorGridColorItem } from '../../common/AvatarEditorGridColorItem'; +import { CategoryData } from '../../common/CategoryData'; +import { IAvatarEditorCategoryModel } from '../../common/IAvatarEditorCategoryModel'; + +export interface AvatarEditorPaletteSetViewProps +{ + model: IAvatarEditorCategoryModel; + category: CategoryData; + paletteSet: AvatarEditorGridColorItem[]; + paletteIndex: number; +} diff --git a/src/views/room/widgets/furniture/context-menu/views/purchaseable-clothing/PurchasableClothingConfirmView.tsx b/src/views/room/widgets/furniture/context-menu/views/purchaseable-clothing/PurchasableClothingConfirmView.tsx index 859a1f69..de3c10c4 100644 --- a/src/views/room/widgets/furniture/context-menu/views/purchaseable-clothing/PurchasableClothingConfirmView.tsx +++ b/src/views/room/widgets/furniture/context-menu/views/purchaseable-clothing/PurchasableClothingConfirmView.tsx @@ -1,8 +1,9 @@ -import { FigureData, RedeemItemClothingComposer, RoomObjectCategory, UserFigureComposer } from 'nitro-renderer'; +import { RedeemItemClothingComposer, RoomObjectCategory, UserFigureComposer } from 'nitro-renderer'; import { FC, useCallback, useEffect, useState } from 'react'; import { GetAvatarRenderManager, GetConnection, GetFurnitureDataForRoomObject, GetSessionDataManager } from '../../../../../../../api'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../../layout'; import { LocalizeText } from '../../../../../../../utils/LocalizeText'; +import { FigureData } from '../../../../../../avatar-editor/common/FigureData'; import { FurniCategory } from '../../../../../../inventory/common/FurniCategory'; import { AvatarImageView } from '../../../../../../shared/avatar-image/AvatarImageView'; import { useRoomContext } from '../../../../../context/RoomContext'; diff --git a/src/views/shared/avatar-image/AvatarImage.scss b/src/views/shared/avatar-image/AvatarImage.scss index c1d05822..f85ca9c4 100644 --- a/src/views/shared/avatar-image/AvatarImage.scss +++ b/src/views/shared/avatar-image/AvatarImage.scss @@ -5,4 +5,5 @@ background-repeat: no-repeat; background-position-x: center; background-position-y: -8px !important; + pointer-events: none; } diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx index 28419e69..72ed9010 100644 --- a/src/views/toolbar/ToolbarView.tsx +++ b/src/views/toolbar/ToolbarView.tsx @@ -1,4 +1,4 @@ -import { Dispose, DropBounce, EaseOut, JumpBy, Motions, NitroToolbarAnimateIconEvent, Queue, Wait } from 'nitro-renderer'; +import { Dispose, DropBounce, EaseOut, JumpBy, Motions, NitroToolbarAnimateIconEvent, Queue, UserFigureEvent, Wait } from 'nitro-renderer'; import { UserInfoEvent } from 'nitro-renderer/src/nitro/communication/messages/incoming/user/data/UserInfoEvent'; import { UserInfoDataParser } from 'nitro-renderer/src/nitro/communication/messages/parser/user/data/UserInfoDataParser'; import { FC, useCallback, useState } from 'react'; @@ -17,6 +17,7 @@ export const ToolbarView: FC = props => const { isInRoom } = props; const [ userInfo, setUserInfo ] = useState(null); + const [ userFigure, setUserFigure ] = useState(null); const [ isMeExpanded, setMeExpanded ] = useState(false); const [ unseenInventoryCount, setUnseenInventoryCount ] = useState(0); @@ -28,10 +29,20 @@ export const ToolbarView: FC = props => const parser = event.getParser(); setUserInfo(parser.userInfo); + setUserFigure(parser.userInfo.figure); }, []); CreateMessageHook(UserInfoEvent, onUserInfoEvent); + const onUserFigureEvent = useCallback((event: UserFigureEvent) => + { + const parser = event.getParser(); + + setUserFigure(parser.figure); + }, []); + + CreateMessageHook(UserFigureEvent, onUserFigureEvent); + const onUnseenItemTrackerUpdateEvent = useCallback((event: UnseenItemTrackerUpdateEvent) => { setUnseenInventoryCount(event.count); @@ -116,7 +127,7 @@ export const ToolbarView: FC = props =>
setMeExpanded(!isMeExpanded) }> - { userInfo && } + { userFigure && }
{ (unseenAchievementsCount > 0) && (