diff --git a/.vscode/settings.json b/.vscode/settings.json index ba397879..3fdf856d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,9 +6,9 @@ "typescript.format.placeOpenBraceOnNewLineForFunctions": true, "editor.wordWrap": "on", "editor.codeActionsOnSave": { - "source.fixAll.eslint": "explicit", - "source.fixAll.sortJSON": "never", - "source.organizeImports": "explicit" + "source.fixAll.eslint": true, + "source.fixAll.sortJSON": false, + "source.organizeImports": true }, "editor.formatOnSave": false, "git.ignoreLimitWarning": true, diff --git a/src/App.scss b/src/App.scss index 17823c8f..2000adec 100644 --- a/src/App.scss +++ b/src/App.scss @@ -51,8 +51,8 @@ $nitro-widget-crafting-height: 300px; $chat-history-width: 300px; $chat-history-height: 300px; -$friends-list-width: 275px; -$friends-list-height: 325px; +$friends-list-width: 250px; +$friends-list-height: 300px; $help-width: 450px; $help-height: 290px; diff --git a/src/App.tsx b/src/App.tsx index bad487bb..072b05dd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -22,7 +22,6 @@ export const App: FC<{}> = props => if(!NitroConfig) throw new Error('NitroConfig is not defined!'); Nitro.bootstrap(); - Nitro.instance.application.renderer.backgroundColor = 0xFFFFFF; } const handler = useCallback(async (event: NitroEvent) => diff --git a/src/api/utils/ColorUtils.ts b/src/api/utils/ColorUtils.ts index 3474ff5e..c32f8fba 100644 --- a/src/api/utils/ColorUtils.ts +++ b/src/api/utils/ColorUtils.ts @@ -62,42 +62,4 @@ export class ColorUtils return 'rgba(' + [ r, g, b, 1 ].join(',') + ')'; } - - public static hslToHex(h, s, l) - { - // Convert HSL to RGB first - let r, g, b; - - if (s === 0) - { - r = g = b = l; // achromatic - } - else - { - const hue2rgb = (p, q, t) => - { - if (t < 0) t += 1; - if (t > 1) t -= 1; - if (t < 1 / 6) return p + (q - p) * 6 * t; - if (t < 1 / 2) return q; - if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; - return p; - }; - - const q = l < 0.5 ? l * (1 + s) : l + s - l * s; - const p = 2 * l - q; - r = hue2rgb(p, q, h + 1 / 3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1 / 3); - } - - // Convert RGB to hexadecimal - const toHex = (c) => - { - const hex = Math.round(c * 255).toString(16); - return hex.length === 1 ? '0' + hex : hex; - }; - - return `#${ toHex(r) }${ toHex(g) }${ toHex(b) }`; - } } diff --git a/src/api/utils/LocalizeFormattedNumber.ts b/src/api/utils/LocalizeFormattedNumber.ts index 9ad2c7b0..fab30d46 100644 --- a/src/api/utils/LocalizeFormattedNumber.ts +++ b/src/api/utils/LocalizeFormattedNumber.ts @@ -2,5 +2,5 @@ export function LocalizeFormattedNumber(number: number): string { if(!number || isNaN(number)) return '0'; - return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); + return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' '); }; diff --git a/src/assets/images/fusion/background.png b/src/assets/images/fusion/background.png deleted file mode 100644 index 01ad341c..00000000 Binary files a/src/assets/images/fusion/background.png and /dev/null differ diff --git a/src/assets/images/fusion/cards/card-close.png b/src/assets/images/fusion/cards/card-close.png deleted file mode 100644 index e3b32a96..00000000 Binary files a/src/assets/images/fusion/cards/card-close.png and /dev/null differ diff --git a/src/assets/images/fusion/cards/yellow-bg.png b/src/assets/images/fusion/cards/yellow-bg.png deleted file mode 100644 index b4db3be6..00000000 Binary files a/src/assets/images/fusion/cards/yellow-bg.png and /dev/null differ diff --git a/src/assets/images/fusion/friends/online.png b/src/assets/images/fusion/friends/online.png deleted file mode 100644 index 99464d60..00000000 Binary files a/src/assets/images/fusion/friends/online.png and /dev/null differ diff --git a/src/assets/images/fusion/friends/search.png b/src/assets/images/fusion/friends/search.png deleted file mode 100644 index 81deba3e..00000000 Binary files a/src/assets/images/fusion/friends/search.png and /dev/null differ diff --git a/src/assets/images/fusion/inventory/ach.png b/src/assets/images/fusion/inventory/ach.png deleted file mode 100644 index 3969d065..00000000 Binary files a/src/assets/images/fusion/inventory/ach.png and /dev/null differ diff --git a/src/assets/images/fusion/inventory/bots.png b/src/assets/images/fusion/inventory/bots.png deleted file mode 100644 index 15e1128a..00000000 Binary files a/src/assets/images/fusion/inventory/bots.png and /dev/null differ diff --git a/src/assets/images/fusion/inventory/furni.png b/src/assets/images/fusion/inventory/furni.png deleted file mode 100644 index 54772b18..00000000 Binary files a/src/assets/images/fusion/inventory/furni.png and /dev/null differ diff --git a/src/assets/images/fusion/inventory/pets.png b/src/assets/images/fusion/inventory/pets.png deleted file mode 100644 index 6d056f3a..00000000 Binary files a/src/assets/images/fusion/inventory/pets.png and /dev/null differ diff --git a/src/assets/images/toolbar/icons/catalog.png b/src/assets/images/toolbar/icons/catalog.png index de279cae..f6809217 100644 Binary files a/src/assets/images/toolbar/icons/catalog.png and b/src/assets/images/toolbar/icons/catalog.png differ diff --git a/src/assets/images/toolbar/icons/inventory.png b/src/assets/images/toolbar/icons/inventory.png index 897a2577..d848586a 100644 Binary files a/src/assets/images/toolbar/icons/inventory.png and b/src/assets/images/toolbar/icons/inventory.png differ diff --git a/src/assets/styles/bootstrap/_buttons.scss b/src/assets/styles/bootstrap/_buttons.scss index 948753a7..3c2cba9c 100644 --- a/src/assets/styles/bootstrap/_buttons.scss +++ b/src/assets/styles/bootstrap/_buttons.scss @@ -15,6 +15,7 @@ cursor: if($enable-button-pointers, pointer, null); user-select: none; background-color: transparent; + border: $btn-border-width solid transparent; @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius); @include transition($btn-transition); diff --git a/src/assets/styles/bootstrap/_functions.scss b/src/assets/styles/bootstrap/_functions.scss index 2ed11b61..977f0eed 100644 --- a/src/assets/styles/bootstrap/_functions.scss +++ b/src/assets/styles/bootstrap/_functions.scss @@ -168,7 +168,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 $l1: luminance($background); $l2: luminance(opaque($background, $foreground)); - @return if($l1 > $l2, divide($l1 + .01, $l2 + .01), divide($l2 + .01, $l1 + .01)); + @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05)); } // Return WCAG2.0 relative luminance diff --git a/src/assets/styles/bootstrap/_reboot.scss b/src/assets/styles/bootstrap/_reboot.scss index 73887d89..4345886d 100644 --- a/src/assets/styles/bootstrap/_reboot.scss +++ b/src/assets/styles/bootstrap/_reboot.scss @@ -51,7 +51,7 @@ body { line-height: var(--#{$variable-prefix}body-line-height); color: var(--#{$variable-prefix}body-color); text-align: var(--#{$variable-prefix}body-text-align); - background-color: #001d2a; // 2 + background-color: var(--#{$variable-prefix}body-bg); // 2 -webkit-text-size-adjust: 100%; // 3 -webkit-tap-highlight-color: rgba($black, 0); // 4 } diff --git a/src/assets/styles/bootstrap/_variables.scss b/src/assets/styles/bootstrap/_variables.scss index a4e42a38..eb668b31 100644 --- a/src/assets/styles/bootstrap/_variables.scss +++ b/src/assets/styles/bootstrap/_variables.scss @@ -42,7 +42,7 @@ $purple: #6f42c1 !default; $pink: #d63384 !default; $red: #a81a12 !default; $orange: #fd7e14 !default; -$yellow: #fcbe00 !default; +$yellow: #ffc107 !default; $green: #00800b !default; $teal: #20c997 !default; $cyan: #0dcaf0 !default; @@ -70,10 +70,10 @@ $colors: ( // scss-docs-end colors-map // scss-docs-start theme-color-variables -$primary: #3986b1 !default; -$secondary: darken($primary,10) !default; -$tertiary: $primary !default; -$quaternary: darken($primary,10) !default; +$primary: #1E7295 !default; +$secondary: #185D79 !default; +$tertiary: #2DABC2 !default; +$quaternary: #2B91A7 !default; $mirage: #131e25 !default; $aztec: #0d171d !default; $cello-light: #21516e !default; @@ -91,13 +91,9 @@ $info: $cyan !default; $warning: $yellow !default; $danger: $red !default; -$f-grey: #555555; -$f-grey-sec: #444444; - -$light: #e3e3d8 !default; -$dark: $f-grey-sec !default; +$light: #DFDFDF !default; +$dark: rgba(28,28,32,.9803921568627451) !default; $light-dark: $gray-800 !default; - // scss-docs-end theme-color-variables $bg-tertiary-split-background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%) !default; @@ -131,8 +127,7 @@ $theme-colors: ( "black": $black, "muted": $muted, "purple": $purple, - "gainsboro": $gainsboro, - 'f-grey': $f-grey + "gainsboro": $gainsboro ) !default; // scss-docs-end theme-colors-map @@ -565,11 +560,11 @@ $border-widths: ( 5: 5px ) !default; -$border-color: black !default; +$border-color: #283F5D !default; // scss-docs-end border-variables // scss-docs-start border-radius-variables -$border-radius: .30rem !default; +$border-radius: .25rem !default; $border-radius-sm: .2rem !default; $border-radius-lg: .3rem !default; $border-radius-pill: 50rem !default; @@ -624,7 +619,7 @@ $font-family-code: var(--#{$variable-prefix}font-monospace) !default; // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins // $font-size-base affects the font size of the body text $font-size-root: null !default; -$font-size-base: .75rem !default; // Assumes the browser default, typically `16px` +$font-size-base: .9rem !default; // Assumes the browser default, typically `16px` $font-size-sm: $font-size-base * .875 !default; $font-size-lg: $font-size-base * 1.25 !default; @@ -1134,7 +1129,7 @@ $nav-link-hover-color: null !default; $nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default; $nav-link-disabled-color: $gray-600 !default; -$nav-tabs-border-color: black !default; +$nav-tabs-border-color: #283F5D !default; $nav-tabs-border-width: $border-width !default; $nav-tabs-border-radius: $border-radius !default; $nav-tabs-link-bg: $muted !default; diff --git a/src/assets/styles/bootstrap/mixins/_buttons.scss b/src/assets/styles/bootstrap/mixins/_buttons.scss index 8696c00c..b6749966 100644 --- a/src/assets/styles/bootstrap/mixins/_buttons.scss +++ b/src/assets/styles/bootstrap/mixins/_buttons.scss @@ -20,31 +20,13 @@ ) { color: $color; @include gradient-bg($background); - border: 1px solid darken($background, 20%); - box-shadow: inset 0 -2px darken($background, 5%); - filter: drop-shadow(0px 1px 0 rgba(white,.3)) drop-shadow(0px -1px 0 rgba(black,.2)); - position: relative; + border-color: $border; + @include box-shadow($btn-box-shadow); - &::before { - content:''; - height:2px; - position: absolute; - top:0; - left:0; - right:0; - margin:1px; - border-radius: 1px; - background: lighten($background, 10%); - } - - &:hover, - &.inset { - background: darken($background, 10%); - box-shadow: inset 0 2px darken($background, 15%); - - &::before { - height: 0; - } + &:hover { + color: $hover-color; + @include gradient-bg($hover-background); + border-color: $hover-border; } .btn-check:focus + &, @@ -101,27 +83,12 @@ $active-color: color-contrast($active-background) ) { color: $color; - border: 1px solid $color; - border-radius: 0 !important; - box-shadow: none; - filter:unset !important; - position: relative; + border-color: $color; &:hover { color: $color-hover; + background-color: $active-background; border-color: $active-border; - - &::before { - content:''; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin:1px; - background-color: $active-background; - z-index: -2; - } } .btn-check:focus + &, diff --git a/src/assets/styles/fonts.scss b/src/assets/styles/fonts.scss index 88508e4b..dbb7f866 100644 --- a/src/assets/styles/fonts.scss +++ b/src/assets/styles/fonts.scss @@ -1,4 +1,4 @@ @font-face { font-family: Ubuntu; - src: url('@/assets/webfonts/Ubuntu.ttf'); + src: url('@/assets/webfonts/Ubuntu-C.ttf'); } diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss index 6db239a4..509952b3 100644 --- a/src/assets/styles/icons.scss +++ b/src/assets/styles/icons.scss @@ -25,8 +25,8 @@ &.icon-catalog { background-image: url('@/assets/images/toolbar/icons/catalog.png'); - width: 33px; - height: 33px; + width: 37px; + height: 36px; } &.icon-game { @@ -53,8 +53,8 @@ &.icon-inventory { background-image: url('@/assets/images/toolbar/icons/inventory.png'); - height: 29px; - width: 28px; + height: 41px; + width: 44px; } &.icon-modtools { @@ -367,25 +367,6 @@ height: 22px; } - &.icon-search { - background: url('@/assets/images/fusion/friends/search.png'); - width: 18px; - height: 18px; - } - - &.icon-online-friends { - background: url('@/assets/images/fusion/friends/online.png'); - width: 18px; - height: 18px; - } - - &.icon-offline-friends { - background: url('@/assets/images/fusion/friends/online.png'); - width: 18px; - height: 18px; - filter: saturate(0); - } - &.icon-arrows { background: url('@/assets/images/icons/arrows.png'); width: 17px; diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 851dfa65..dc1c5dad 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -4,7 +4,6 @@ @import './slider'; @import './icons'; @import './utils'; -@import './inputs.scss'; .btn-sm { min-height: 28px; diff --git a/src/assets/styles/inputs.scss b/src/assets/styles/inputs.scss deleted file mode 100644 index 07c16673..00000000 --- a/src/assets/styles/inputs.scss +++ /dev/null @@ -1,12 +0,0 @@ -.fi { - &.fi-white { - background:transparent; - border:1px solid white; - color:white; - } - - outline: none !important; - &* { - outline: none !important; - } -} diff --git a/src/common/Button.tsx b/src/common/Button.tsx index 644618fc..e93039d2 100644 --- a/src/common/Button.tsx +++ b/src/common/Button.tsx @@ -8,22 +8,17 @@ export interface ButtonProps extends FlexProps size?: ButtonSizeType; active?: boolean; disabled?: boolean; - outline?: boolean; - tp?: boolean; } export const Button: FC = props => { - const { variant = 'primary', size = 'sm', active = false, disabled = false, classNames = [], outline = false, tp = false, ...rest } = props; + const { variant = 'primary', size = 'sm', active = false, disabled = false, classNames = [], ...rest } = props; const getClassNames = useMemo(() => { const newClassNames: string[] = [ 'btn' ]; - - if(outline && variant) newClassNames.push('btn-outline-' + variant) - else if (variant) newClassNames.push('btn-' + variant); - - if (tp) newClassNames.push('btn-transparent'); + + if(variant) newClassNames.push('btn-' + variant); if(size) newClassNames.push('btn-' + size); @@ -31,10 +26,10 @@ export const Button: FC = props => if(disabled) newClassNames.push('disabled'); - if (classNames.length) newClassNames.push(...classNames); + if(classNames.length) newClassNames.push(...classNames); return newClassNames; - }, [ variant, size, active, disabled, classNames, outline ]); + }, [ variant, size, active, disabled, classNames ]); return ; } diff --git a/src/common/card/NitroCardHeaderView.tsx b/src/common/card/NitroCardHeaderView.tsx index 7716b485..98837c76 100644 --- a/src/common/card/NitroCardHeaderView.tsx +++ b/src/common/card/NitroCardHeaderView.tsx @@ -1,5 +1,5 @@ import { FC, MouseEvent, useMemo } from 'react'; -import { FaFlag } from 'react-icons/fa'; +import { FaFlag, FaTimes } from 'react-icons/fa'; import { Base, Column, ColumnProps, Flex } from '..'; interface NitroCardHeaderViewProps extends ColumnProps @@ -32,14 +32,16 @@ export const NitroCardHeaderView: FC = props => return ( - + { headerText } { isGalleryPhoto && } - + + + ); diff --git a/src/common/card/NitroCardView.scss b/src/common/card/NitroCardView.scss index 624df0f3..a552182e 100644 --- a/src/common/card/NitroCardView.scss +++ b/src/common/card/NitroCardView.scss @@ -1,8 +1,5 @@ -$nitro-card-header-height: 29px; -$nitro-card-tabs-height: 29px; - -$lp: lighten($primary, 15); -$ls: lighten($secondary, 15); +$nitro-card-header-height: 33px; +$nitro-card-tabs-height: 33px; .nitro-card { resize: both; @@ -12,41 +9,40 @@ $ls: lighten($secondary, 15); max-height: 100vh !important; } - &.theme-primary, - &.theme-yellow { + &.theme-primary { border: $border-width solid $border-color; - border-bottom-width: 3px; - box-shadow: 0 0 10px 0px black; .nitro-card-header { - min-height:$nitro-card-header-height; - max-height: $nitro-card-header-height; + min-height: 33px; + max-height: 33px; background: $primary; - border-bottom: 1px solid $secondary; - border-radius: $border-radius $border-radius 0 0; - box-shadow: 0 1px $primary, inset 0 1px $lp, inset 1px 0 $lp, inset -1px 0 $lp; - - .nitro-header-stuff { - justify-content: center !important; - } .nitro-card-header-text { color: $white; - text-shadow: 0px -1px rgba(black, 0.5); + text-shadow: 0px 4px 4px rgba($black, 0.25); @include font-size($h4-font-size); } .nitro-card-header-close { - width:19px; - height:20px; - background-image: url(@/assets/images/fusion/cards/card-close.png); + cursor: pointer; + padding: 2px 2px; + line-height: 1; + border-radius: $border-radius; + box-shadow: 0 0 0 1.6px $white; + border: 2px solid #921911; + background: repeating-linear-gradient( + rgba(245, 80, 65, 1), + rgba(245, 80, 65, 1) 50%, + rgba(194, 48, 39, 1) 50%, + rgba(194, 48, 39, 1) 100% + ); &:hover { - background-position: -38px 0px; + filter: brightness(1.2); } &:active { - background-position: -19px 0px; + filter: brightness(0.8); } } @@ -76,91 +72,97 @@ $ls: lighten($secondary, 15); .nitro-card-tabs { background-color: $secondary; - box-shadow: inset 1px 0 $ls, inset -1px 0 $ls, inset 0 -1px $ls; .nav-item { padding: $nav-link-padding-y $nav-link-padding-x; - background-color: rgba($light, 0.7); + background-color: $muted; color: $black; z-index: 1; margin-bottom: -1px; - border-color: rgba(black, 0.7) !important; - border-bottom: 0px solid black; - margin-left:-1px; &.active { background-color: $light; border-color: $border-color $border-color $light !important; - border-width: 2px !important; + border-bottom: 1px solid black; &:before { background: $white; } + } - box-shadow: 0 2px $light, inset 0 -2px $light, inset 0 0 0 2px white; + &:before { + content: ''; + position: absolute; + width: 93%; + height: 3px; + border-radius: 0.25rem; + top: 1.5px; + left: 0; + right: 0; + margin: auto; + background: #c2c9d1; + z-index: 1; } } } .content-area { background-color: $light; - box-shadow: inset 0 0 0 2px white; } } - &.theme-primary-slim, - &.theme-yellow-slim { + &.theme-primary-slim { border: $border-width solid $border-color; - background-color: $f-grey-sec; - box-shadow: inset 0 0 0 2px white; - border-radius: $border-radius-lg !important; - border-bottom-width: 3px; - box-shadow: inset 0 0 0 1px rgba(white, 0.3), $box-shadow !important; - padding:1px; - padding-bottom: 3px; .nitro-card-header { position: relative; - min-height: 29px; - max-height: 29px; - background: repeating-linear-gradient($f-grey, $f-grey 50%, $f-grey-sec 50%, $f-grey-sec 100%); - border-radius: $border-radius-sm $border-radius-sm 0 0; + min-height: 28px; + max-height: 28px; + background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%); + border-bottom: 2px solid darken($quaternary, 5); + box-shadow: 0 2px white; + width: 100%; + margin: 0; + padding-top:2px; - &::before { - content:''; + &:before { position: absolute; - height:1px; - top:0; - bottom:0; + content: ' '; + top: 0; left: 0; - right:0; - margin:auto; - background: $f-grey-sec; - box-shadow: 0 1px $f-grey; - z-index: 1; - } - - > * { - z-index: 3; + width: 100%; + height: 2px; + background-color: rgba($white, 0.3); } .nitro-card-header-text { - color: white; - text-shadow: 0px -1px rgba(black, 0.5); + color: $white; + text-shadow: 0px 4px 4px rgba($black, 0.25); @include font-size($h5-font-size); + min-height: 21px; } .nitro-card-header-close { - width:19px; - height:20px; - background-image: url(@/assets/images/fusion/cards/card-close.png); + cursor: pointer; + padding: 0px 2px; + line-height: 1; + @include font-size($h7-font-size); + border-radius: $border-radius; + box-shadow: 0 0 0 1.6px $white; + border: 2px solid #921911; + background: repeating-linear-gradient( + rgba(245, 80, 65, 1), + rgba(245, 80, 65, 1) 50%, + rgba(194, 48, 39, 1) 50%, + rgba(194, 48, 39, 1) 100% + ); &:hover { - background-position: -38px 0px; + filter: brightness(1.2); } &:active { - background-position: -19px 0px; + filter: brightness(0.8); } } @@ -195,102 +197,7 @@ $ls: lighten($secondary, 15); } .content-area { - z-index: 4; - border:1px solid black; - border-radius: 0 0 $border-radius-sm $border-radius-sm; background-color: $light; - margin:0 2px; - width: auto !important; - box-shadow: 0 -1px rgba(white,.3); - - } - } - - &.theme-yellow { - background: darken($warning, 10); - box-shadow: inset 1px 0 $warning, inset -1px 0 $warning, inset 0 -1px $warning; - - .nitro-card-header { - background: $warning; - box-shadow: 0 1px $warning, inset 0 1px lighten($warning,15), inset 1px 0 lighten($warning,15), inset -1px 0 lighten($warning,15); - border-bottom: 1px solid darken($warning, 15); - } - - .nitro-card-tabs { - border-bottom:0; - background-color: darken($warning, 10); - box-shadow: inset 1px 0 $warning, inset -1px 0 $warning; - gap:3px; - padding-left:5px; - padding-right:5px; - - .nav-item { - background-color: $warning; - margin-left: 0px; - border-radius: $border-radius-lg; - box-shadow: 0 1px $warning, 0 -1px darken($warning, 20), inset 0 -2px darken($warning, 10); - width: 100%; - - &.active { - background-color: #b67f04; - border-color: $border-color !important; - border-width: 1px !important; - box-shadow: inset 0 3px darken($warning, 25), 0 1px $warning, 0 -1px darken($warning, 20); - - &:before { - background: $white; - } - } - } - } - - .content-area { - background-image: url(@/assets/images/fusion/cards/yellow-bg.png); - color:white; - box-shadow: inset 0 0 0 2px rgba(0,0,0,.3); - border:1px solid black; - margin:5px; - width: auto !important; - } - } - - &.theme-yellow-slim { - background-color: darken($warning,8); - padding:1px 3px 3px 3px; - box-shadow: inset 0 0 0 1px lighten($warning,20), $box-shadow !important; - - .nitro-card-header { - background: repeating-linear-gradient($warning, $warning 50%, darken($warning,8) 50%, darken($warning,8) 100%); - margin: 0 -2px; - width: calc(100% + 4px); - - .nitro-header-stuff { - justify-content: space-between !important; - } - - .nitro-card-header-text { - color: darken($warning, 50); - text-shadow: 0px -1px rgba(black, 0.5), 0 1px lighten($warning,15); - } - - &::before { - background: darken($warning,8); - box-shadow: 0 1px $warning; - } - } - - - >:not(:first-child) { - margin:0 4px; - } - - .content-area { - background-image: url(@/assets/images/fusion/cards/yellow-bg.png); - color:white; - border-radius: $border-radius-lg; - width: auto !important; - box-shadow: 0 -1px lighten($warning,10), inset 0 0 0 4px rgba(0,0,0,.3), 0 1px darken($warning, 23); - padding:8px; } } } @@ -304,10 +211,6 @@ $ls: lighten($secondary, 15); &.theme-dark { background-color: #1C323F !important; } - - .btn { - filter: drop-shadow(0px 1px 0 white) drop-shadow(0px -1px 0 rgba(black,.2)); - } } @include media-breakpoint-down(lg) { @@ -335,6 +238,7 @@ $ls: lighten($secondary, 15); &.active { height: 100%; overflow: hidden; + background: rgba($white, 0.5); border-bottom: 1px solid rgba($black, 0.2); } diff --git a/src/common/card/NitroCardView.tsx b/src/common/card/NitroCardView.tsx index e89a5376..46c4126b 100644 --- a/src/common/card/NitroCardView.tsx +++ b/src/common/card/NitroCardView.tsx @@ -15,7 +15,7 @@ export const NitroCardView: FC = props => const getClassNames = useMemo(() => { - const newClassNames: string[] = [ 'nitro-card', 'rounded', ]; + const newClassNames: string[] = [ 'nitro-card', 'rounded', 'shadow', ]; newClassNames.push(`theme-${ theme || 'primary' }`); @@ -24,35 +24,35 @@ export const NitroCardView: FC = props => return newClassNames; }, [ theme, classNames ]); - // useEffect(() => - // { - // if(!uniqueKey || !elementRef || !elementRef.current) return; + /* useEffect(() => + { + if(!uniqueKey || !elementRef || !elementRef.current) return; - // const localStorage = GetLocalStorage(`nitro.windows.${ uniqueKey }`); - // const element = elementRef.current; + const localStorage = GetLocalStorage(`nitro.windows.${ uniqueKey }`); + const element = elementRef.current; - // if(localStorage && localStorage.size) - // { - // //element.style.width = `${ localStorage.size.width }px`; - // //element.style.height = `${ localStorage.size.height }px`; - // } + if(localStorage && localStorage.size) + { + //element.style.width = `${ localStorage.size.width }px`; + //element.style.height = `${ localStorage.size.height }px`; + } - // const observer = new ResizeObserver(event => - // { - // const newStorage = { ...GetLocalStorage>(`nitro.windows.${ uniqueKey }`) } as WindowSaveOptions; + const observer = new ResizeObserver(event => + { + const newStorage = { ...GetLocalStorage>(`nitro.windows.${ uniqueKey }`) } as WindowSaveOptions; - // newStorage.size = { width: element.offsetWidth, height: element.offsetHeight }; + newStorage.size = { width: element.offsetWidth, height: element.offsetHeight }; - // SetLocalStorage(`nitro.windows.${ uniqueKey }`, newStorage); - // }); + SetLocalStorage(`nitro.windows.${ uniqueKey }`, newStorage); + }); - // observer.observe(element); + observer.observe(element); - // return () => - // { - // observer.disconnect(); - // } - // }, [ uniqueKey ]); + return () => + { + observer.disconnect(); + } + }, [ uniqueKey ]); */ return ( diff --git a/src/common/card/accordion/NitroCardAccordionSetView.tsx b/src/common/card/accordion/NitroCardAccordionSetView.tsx index 19e2833f..d9e0656e 100644 --- a/src/common/card/accordion/NitroCardAccordionSetView.tsx +++ b/src/common/card/accordion/NitroCardAccordionSetView.tsx @@ -71,7 +71,7 @@ export const NitroCardAccordionSetView: FC = pro return ( - { headerText } + { headerText } { isOpen && } { !isOpen && } diff --git a/src/common/card/tabs/NitroCardTabsView.tsx b/src/common/card/tabs/NitroCardTabsView.tsx index ff759db4..1a64a126 100644 --- a/src/common/card/tabs/NitroCardTabsView.tsx +++ b/src/common/card/tabs/NitroCardTabsView.tsx @@ -3,7 +3,7 @@ import { Flex, FlexProps } from '../..'; export const NitroCardTabsView: FC = props => { - const { justifyContent = 'start', gap = 0, classNames = [], children = null, ...rest } = props; + const { justifyContent = 'center', gap = 1, classNames = [], children = null, ...rest } = props; const getClassNames = useMemo(() => { diff --git a/src/common/draggable-window/DraggableWindow.tsx b/src/common/draggable-window/DraggableWindow.tsx index e0a68970..286d51d1 100644 --- a/src/common/draggable-window/DraggableWindow.tsx +++ b/src/common/draggable-window/DraggableWindow.tsx @@ -2,11 +2,10 @@ import { MouseEventType, TouchEventType } from '@nitrots/nitro-renderer'; import { CSSProperties, FC, Key, MouseEvent as ReactMouseEvent, ReactNode, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { Base } from '..'; -import { GetLocalStorage, WindowSaveOptions } from '../../api'; +import { GetLocalStorage, SetLocalStorage, WindowSaveOptions } from '../../api'; import { DraggableWindowPosition } from './DraggableWindowPosition'; const CURRENT_WINDOWS: HTMLElement[] = []; -const POS_MEMORY: Map = new Map(); const BOUNDS_THRESHOLD_TOP: number = 0; const BOUNDS_THRESHOLD_LEFT: number = 0; @@ -139,7 +138,14 @@ export const DraggableWindow: FC = props => setOffset({ x: offsetX, y: offsetY }); setIsDragging(false); - if(uniqueKey !== null) POS_MEMORY.set(uniqueKey, { x: offsetX, y: offsetY }); + if(uniqueKey !== null) + { + const newStorage = { ...GetLocalStorage(`nitro.windows.${ uniqueKey }`) } as WindowSaveOptions; + + newStorage.offset = { x: offsetX, y: offsetY }; + + SetLocalStorage(`nitro.windows.${ uniqueKey }`, newStorage); + } }, [ dragHandler, delta, offset, uniqueKey ]); const onDragMouseUp = useCallback((event: MouseEvent) => @@ -188,17 +194,6 @@ export const DraggableWindow: FC = props => break; } - if(uniqueKey !== null) - { - const memory = POS_MEMORY.get(uniqueKey); - - if(memory) - { - offsetX = memory.x; - offsetY = memory.y; - } - } - setDelta({ x: 0, y: 0 }); setOffset({ x: offsetX, y: offsetY }); diff --git a/src/common/layout/LayoutNotificationAlertView.tsx b/src/common/layout/LayoutNotificationAlertView.tsx index 56b345e4..8db771af 100644 --- a/src/common/layout/LayoutNotificationAlertView.tsx +++ b/src/common/layout/LayoutNotificationAlertView.tsx @@ -1,4 +1,4 @@ -import { FC, ReactNode, useMemo } from 'react'; +import { FC, useMemo } from 'react'; import { NotificationAlertType } from '../../api'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroCardViewProps } from '../card'; @@ -7,12 +7,11 @@ export interface LayoutNotificationAlertViewProps extends NitroCardViewProps title?: string; type?: string; onClose: () => void; - options?: ReactNode; } export const LayoutNotificationAlertView: FC = props => { - const { title = '', onClose = null, classNames = [], children = null,type = NotificationAlertType.DEFAULT, options = null, ...rest } = props; + const { title = '', onClose = null, classNames = [], children = null,type = NotificationAlertType.DEFAULT, ...rest } = props; const getClassNames = useMemo(() => { @@ -31,7 +30,6 @@ export const LayoutNotificationAlertView: FC = { children } - { options } ); } diff --git a/src/common/types/ColorVariantType.ts b/src/common/types/ColorVariantType.ts index df86320f..1ff6f60b 100644 --- a/src/common/types/ColorVariantType.ts +++ b/src/common/types/ColorVariantType.ts @@ -1 +1 @@ -export type ColorVariantType = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black' | 'white' | 'dark' | 'warning' | 'muted' | 'light' | 'f-grey'; +export type ColorVariantType = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black' | 'white' | 'dark' | 'warning' | 'muted' | 'light'; diff --git a/src/components/friends/FriendsView.scss b/src/components/friends/FriendsView.scss index 0456fa86..b45fff42 100644 --- a/src/components/friends/FriendsView.scss +++ b/src/components/friends/FriendsView.scss @@ -1,5 +1,3 @@ -@import './views/friends-list/myinfo/MyInfo.scss'; - .nitro-friends-spritesheet { background: url('@/assets/images/friends/friends-spritesheet.png') transparent no-repeat; @@ -120,35 +118,18 @@ position: relative; padding-left:38px; text-align: left; - position: relative; - pointer-events: all; - - &:not(:last-of-type)::before { - content:''; - width:1px; - background-color: black; - box-shadow: 0px 1px 0 lighten($f-grey, 10%), 0px -1px 0 darken($f-grey-sec, 10); - height: 33px; - position: absolute; - left:100%; - } &.friend-bar-item-active { - .friend-bar-item-head { - &.avatar { - top: -50px; - left: -30px; - } - } + margin-bottom:21px; } .friend-bar-item-head { &.avatar { - top: -40px; + top: -30px; left: -30px; } &.group { - top: -15px; + top: -5px; left: -5px; } diff --git a/src/components/friends/views/friends-bar/FriendBarItemView.tsx b/src/components/friends/views/friends-bar/FriendBarItemView.tsx index 4e24ab87..52f7568f 100644 --- a/src/components/friends/views/friends-bar/FriendBarItemView.tsx +++ b/src/components/friends/views/friends-bar/FriendBarItemView.tsx @@ -33,7 +33,7 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props => if(!friend) { return ( -
+
{ LocalizeText('friend.bar.find.title') }
@@ -41,18 +41,19 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props => } return ( -
setVisible(true) } onMouseOut={ () => setVisible(false) }> +
setVisible(prevValue => !prevValue) }>
0 ? 'avatar': 'group' }` }> - { (friend.id > 0) && } + { (friend.id > 0) && } { (friend.id <= 0) && }
- { isVisible ? -
- OpenMessengerChat(friend.id) } /> - { friend.followingAllowed && +
{ friend.name }
+ { isVisible && +
+ OpenMessengerChat(friend.id) } /> + { friend.followingAllowed && followFriend(friend) } /> } - GetUserProfile(friend.id) } /> -
:
{ friend.name }
} + GetUserProfile(friend.id) } /> +
}
); } diff --git a/src/components/friends/views/friends-bar/FriendsBarView.tsx b/src/components/friends/views/friends-bar/FriendsBarView.tsx index 222a86ce..03231b17 100644 --- a/src/components/friends/views/friends-bar/FriendsBarView.tsx +++ b/src/components/friends/views/friends-bar/FriendsBarView.tsx @@ -1,62 +1,19 @@ -import { FC, useCallback, useEffect, useRef, useState } from 'react'; +import { FC, useRef, useState } from 'react'; import { FaChevronLeft, FaChevronRight } from 'react-icons/fa'; import { MessengerFriend } from '../../../../api'; import { Button, Flex } from '../../../../common'; import { FriendBarItemView } from './FriendBarItemView'; +const MAX_DISPLAY_COUNT = 3; + export const FriendBarView: FC<{ onlineFriends: MessengerFriend[] }> = props => { const { onlineFriends = null } = props; const [ indexOffset, setIndexOffset ] = useState(0); - const [ MAX_DISPLAY_COUNT, setMaxDisplayCount ] = useState(1); - - const friendWidth = 150; - const friendRef = useRef(); - - const calculateDisplayCount = useCallback(() => - { - let min = 1 + onlineFriends.length; - - if(!friendRef.current) return min; - - let max = Math.floor((friendRef?.current?.getBoundingClientRect().width - 60) / friendWidth); - - if(min >= max) min = max; - - setMaxDisplayCount( min ); - }, [ friendWidth, onlineFriends ]) - - - useEffect(() => - { - if(!friendRef.current) return; - - const resizeObserver = new ResizeObserver(() => - { - calculateDisplayCount(); - resizeObserver.disconnect(); - }); - - resizeObserver.observe(friendRef.current); - - window.addEventListener('resize', () => - { - calculateDisplayCount() - }); - - return () => - { - resizeObserver.disconnect(); - window.removeEventListener('resize', () => - { - calculateDisplayCount() - }); - - } - }, [ calculateDisplayCount, friendRef ]); + const elementRef = useRef(); return ( - + diff --git a/src/components/friends/views/friends-list/FriendsListSearchView.tsx b/src/components/friends/views/friends-list/FriendsListSearchView.tsx index 2d960ce0..69073a22 100644 --- a/src/components/friends/views/friends-list/FriendsListSearchView.tsx +++ b/src/components/friends/views/friends-list/FriendsListSearchView.tsx @@ -1,7 +1,7 @@ import { HabboSearchComposer, HabboSearchResultData, HabboSearchResultEvent } from '@nitrots/nitro-renderer'; import { FC, useEffect, useState } from 'react'; import { LocalizeText, OpenMessengerChat, SendMessageComposer } from '../../../../api'; -import { Base, Column, Flex, NitroCardAccordionItemView, NitroCardAccordionSetViewProps, Text, UserProfileIconView } from '../../../../common'; +import { Base, Column, Flex, NitroCardAccordionItemView, NitroCardAccordionSetView, NitroCardAccordionSetViewProps, Text, UserProfileIconView } from '../../../../common'; import { useFriends, useMessageEvent } from '../../../../hooks'; interface FriendsSearchViewProps extends NitroCardAccordionSetViewProps @@ -39,18 +39,19 @@ export const FriendsSearchView: FC = props => return () => clearTimeout(timeout); }, [ searchValue ]); - return <> - { LocalizeText('friendlist.tip.tab.3') } - setSearchValue(event.target.value) } /> - - { friendResults && + return ( + + setSearchValue(event.target.value) } /> + + { friendResults && <> { (friendResults.length === 0) && - { LocalizeText('friendlist.search.nofriendsfound') } } + { LocalizeText('friendlist.search.nofriendsfound') } } { (friendResults.length > 0) && - - { LocalizeText('friendlist.search.friendscaption', [ 'cnt' ], [ friendResults.length.toString() ]) } - + + { LocalizeText('friendlist.search.friendscaption', [ 'cnt' ], [ friendResults.length.toString() ]) } +
+ { friendResults.map(result => { return ( @@ -69,14 +70,15 @@ export const FriendsSearchView: FC = props => } } - { otherResults && + { otherResults && <> { (otherResults.length === 0) && - { LocalizeText('friendlist.search.noothersfound') } } + { LocalizeText('friendlist.search.noothersfound') } } { (otherResults.length > 0) && - - { LocalizeText('friendlist.search.otherscaption', [ 'cnt' ], [ otherResults.length.toString() ]) } - + + { LocalizeText('friendlist.search.otherscaption', [ 'cnt' ], [ otherResults.length.toString() ]) } +
+ { otherResults.map(result => { return ( @@ -95,6 +97,7 @@ export const FriendsSearchView: FC = props => } } - - + + + ); } diff --git a/src/components/friends/views/friends-list/FriendsListView.tsx b/src/components/friends/views/friends-list/FriendsListView.tsx index 3169a0d3..d98e93a6 100644 --- a/src/components/friends/views/friends-list/FriendsListView.tsx +++ b/src/components/friends/views/friends-list/FriendsListView.tsx @@ -1,13 +1,13 @@ import { ILinkEventTracker, RemoveFriendComposer, SendRoomInviteComposer } from '@nitrots/nitro-renderer'; import { FC, useCallback, useEffect, useMemo, useState } from 'react'; import { AddEventLinkTracker, LocalizeText, MessengerFriend, RemoveLinkEventTracker, SendMessageComposer } from '../../../../api'; -import { Button, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common'; +import { Button, Flex, NitroCardAccordionSetView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common'; import { useFriends } from '../../../../hooks'; +import { FriendsListGroupView } from './friends-list-group/FriendsListGroupView'; +import { FriendsListRequestView } from './friends-list-request/FriendsListRequestView'; import { FriendsRemoveConfirmationView } from './FriendsListRemoveConfirmationView'; import { FriendsRoomInviteView } from './FriendsListRoomInviteView'; import { FriendsSearchView } from './FriendsListSearchView'; -import { FriendsListGroupView } from './friends-list-group/FriendsListGroupView'; -import { MyInfoView } from './myinfo/MyInfoView'; export const FriendsListView: FC<{}> = props => { @@ -17,8 +17,6 @@ export const FriendsListView: FC<{}> = props => const [ showRemoveFriendsConfirmation, setShowRemoveFriendsConfirmation ] = useState(false); const { onlineFriends = [], offlineFriends = [], requests = [], requestFriend = null } = useFriends(); - const [ tab, setTab ] = useState(0); - const removeFriendsText = useMemo(() => { if(!selectedFriendsIds || !selectedFriendsIds.length) return ''; @@ -85,30 +83,6 @@ export const FriendsListView: FC<{}> = props => setShowRemoveFriendsConfirmation(false); } - const getView = () => - { - switch(tab) - { - case 0: return - case 1: return <> - { LocalizeText('friendlist.friends') + ` (${ onlineFriends.length })` } - - { selectedFriendsIds && selectedFriendsIds.length > 0 && - - - - } - ; - case 2: return <> - { LocalizeText('friendlist.friends.offlinecaption')+ ` (${ offlineFriends.length })` } - - - case 3: return ; - default: - return null - } - } - useEffect(() => { const linkTracker: ILinkEventTracker = { @@ -147,11 +121,10 @@ export const FriendsListView: FC<{}> = props => return ( <> - + setIsVisible(false) } /> - - { getView() } - { /* + + @@ -165,25 +138,8 @@ export const FriendsListView: FC<{}> = props => - } */ } + } - - - - - - - { showRoomInvite && setShowRoomInvite(false) } sendRoomInvite={ sendRoomInvite } /> } diff --git a/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupItemView.tsx b/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupItemView.tsx index fc4e91a2..03cd7e98 100644 --- a/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupItemView.tsx +++ b/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupItemView.tsx @@ -52,34 +52,7 @@ export const FriendsListGroupItemView: FC<{ friend: MessengerFriend, selected: b } } - if (!friend) return null; - - return selectFriend(friend.id) } className={ selected ? 'bg-primary text-white' : '' }> - - event.stopPropagation() }> - - -
{ friend.name }
- - - { !isRelationshipOpen && - <> - { friend.followingAllowed && - } - { friend.online && - } - { (friend.id > 0) && - } - } - { isRelationshipOpen && - <> - clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_HEART) } /> - clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_SMILE) } /> - clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_BOBBA) } /> - clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_NONE) } /> - } - - + if(!friend) return null; return ( selectFriend(friend.id) }> diff --git a/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupView.tsx b/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupView.tsx index 9876037e..c593003a 100644 --- a/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupView.tsx +++ b/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupView.tsx @@ -1,6 +1,5 @@ import { FC } from 'react'; import { MessengerFriend } from '../../../../../api'; -import { Column } from '../../../../../common'; import { FriendsListGroupItemView } from './FriendsListGroupItemView'; interface FriendsListGroupViewProps @@ -17,8 +16,8 @@ export const FriendsListGroupView: FC = props => if(!list || !list.length) return null; return ( - + <> { list.map((item, index) => = 0) } selectFriend={ selectFriend } />) } - + ); } diff --git a/src/components/friends/views/friends-list/myinfo/MyInfo.scss b/src/components/friends/views/friends-list/myinfo/MyInfo.scss deleted file mode 100644 index cba3046b..00000000 --- a/src/components/friends/views/friends-list/myinfo/MyInfo.scss +++ /dev/null @@ -1,16 +0,0 @@ -.friends-myinfo { - > :first-child { - border-bottom: 1px dashed white; - } - - .myinfo-avatar { - height: 60px; - width: 60px; - display: flex; - justify-content: center; - - .avatar-image { - margin-top: -17px; - } - } -} diff --git a/src/components/friends/views/friends-list/myinfo/MyInfoView.tsx b/src/components/friends/views/friends-list/myinfo/MyInfoView.tsx deleted file mode 100644 index 270efc6a..00000000 --- a/src/components/friends/views/friends-list/myinfo/MyInfoView.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { KeyboardEvent } from 'react'; -import { Base, Column, Flex, LayoutAvatarImageView, Text } from '../../../../../common'; -import { useFriends, useMessenger, useSessionInfo } from '../../../../../hooks'; - -export const MyInfoView = () => -{ - const { userFigure = null, userName = null, motto,setMotto, saveMotto } = useSessionInfo(); - const { unreadThreads = 0 } = useMessenger(); - const { requests = [] } = useFriends(); - - const onMottoKeyDown = (event: KeyboardEvent) => - { - event.stopPropagation(); - - switch(event.key) - { - case 'Enter': - saveMotto((event.target as HTMLInputElement).value); - return; - } - } - - return - - - - - - { userName } - setMotto(event.target.value) } onKeyDown={ onMottoKeyDown } /> - - - - - { unreadThreads } Unread Messages - { requests.length } Friend Requests - - - -} diff --git a/src/components/inventory/InventoryView.scss b/src/components/inventory/InventoryView.scss index aeec30bc..5a843c86 100644 --- a/src/components/inventory/InventoryView.scss +++ b/src/components/inventory/InventoryView.scss @@ -14,27 +14,4 @@ padding: 1px 2px; z-index: 5; } - - .tab-icon { - width:18px; - height:18px; - background-position: center; - background-repeat: no-repeat; - - &.tab-inventory-furni { - background-image: url(@/assets/images/fusion/inventory/furni.png); - } - - &.tab-inventory-bots { - background-image: url(@/assets/images/fusion/inventory/bots.png); - } - - &.tab-inventory-furni-tab-pets { - background-image: url(@/assets/images/fusion/inventory/pets.png); - } - - &.tab-inventory-badges { - background-image: url(@/assets/images/fusion/inventory/ach.png); - } - } } diff --git a/src/components/inventory/InventoryView.tsx b/src/components/inventory/InventoryView.tsx index 4f6f0759..8a3410a8 100644 --- a/src/components/inventory/InventoryView.tsx +++ b/src/components/inventory/InventoryView.tsx @@ -1,7 +1,7 @@ import { BadgePointLimitsEvent, ILinkEventTracker, IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent } from '@nitrots/nitro-renderer'; import { FC, useEffect, useState } from 'react'; -import { AddEventLinkTracker, GetLocalization, GetRoomEngine, LocalizeText, RemoveLinkEventTracker, UnseenItemCategory, isObjectMoverRequested, setObjectMoverRequested } from '../../api'; -import { Base, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common'; +import { AddEventLinkTracker, GetLocalization, GetRoomEngine, isObjectMoverRequested, LocalizeText, RemoveLinkEventTracker, setObjectMoverRequested, UnseenItemCategory } from '../../api'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common'; import { useInventoryTrade, useInventoryUnseenTracker, useMessageEvent, useRoomEngineEvent, useRoomSessionManagerEvent } from '../../hooks'; import { InventoryBadgeView } from './views/badge/InventoryBadgeView'; import { InventoryBotView } from './views/bot/InventoryBotView'; @@ -127,7 +127,7 @@ export const InventoryView: FC<{}> = props => { return ( setCurrentTab(name) } count={ getCount(UNSEEN_CATEGORIES[index]) }> - + { LocalizeText(name) } ); }) } diff --git a/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx b/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx index 7c40bbb2..87bb66ed 100644 --- a/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx +++ b/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx @@ -21,14 +21,8 @@ export const NotificationDefaultAlertView: FC const hasFrank = (item.alertType === NotificationAlertType.DEFAULT); - const options = - { !item.clickUrl && - } - { item.clickUrl && (item.clickUrl.length > 0) && } - - return ( - + { hasFrank && !item.imageUrl && } { item.imageUrl && !imageFailed && { @@ -42,8 +36,20 @@ export const NotificationDefaultAlertView: FC return ; }) } + { item.clickUrl && (item.clickUrl.length > 0) && (item.imageUrl && !imageFailed) && <> +
+ + } + { (!item.imageUrl || (item.imageUrl && imageFailed)) && <> + +
+ { !item.clickUrl && + } + { item.clickUrl && (item.clickUrl.length > 0) && } + + } ); diff --git a/src/components/purse/PurseView.scss b/src/components/purse/PurseView.scss index 5b69f804..a860c41a 100644 --- a/src/components/purse/PurseView.scss +++ b/src/components/purse/PurseView.scss @@ -1,13 +1,6 @@ .nitro-purse-container { - pointer-events: none; - position: absolute; - left: 0; - right: 0; - margin: auto; - display: flex; - justify-content: center; - align-items: center; - z-index: 0; + font-size: $font-size-sm; + pointer-events: all; .nitro-purse { background-color: rgba($dark, 0.95); diff --git a/src/components/purse/PurseView.tsx b/src/components/purse/PurseView.tsx index 102a217a..1fb91c89 100644 --- a/src/components/purse/PurseView.tsx +++ b/src/components/purse/PurseView.tsx @@ -1,9 +1,10 @@ import { FriendlyTime, HabboClubLevelEnum } from '@nitrots/nitro-renderer'; import { FC, useMemo } from 'react'; import { CreateLinkEvent, GetConfiguration, LocalizeText } from '../../api'; -import { Button, Flex, LayoutCurrencyIcon, Text } from '../../common'; +import { Column, Flex, Grid, LayoutCurrencyIcon, Text } from '../../common'; import { usePurse } from '../../hooks'; import { CurrencyView } from './views/CurrencyView'; +import { SeasonalView } from './views/SeasonalView'; export const PurseView: FC<{}> = props => { @@ -47,9 +48,10 @@ export const PurseView: FC<{}> = props => for(const type of types) { - if ((limit > -1) && (count === limit)) break; - - elements.push() + if((limit > -1) && (count === limit)) break; + + if(seasonal) elements.push(); + else elements.push(); count++; } @@ -57,14 +59,32 @@ export const PurseView: FC<{}> = props => return elements; } - if (!purse) return null; - - return - - { getCurrencyElements(0, -1) } - { !hcDisabled && } - ; + if(!purse) return null; + + return ( + + + + + + { getCurrencyElements(0, 2) } + + { !hcDisabled && + CreateLinkEvent('habboUI/open/hccenter') }> + + { getClubText } + } + + CreateLinkEvent('help/show') }> + + + CreateLinkEvent('user-settings/toggle') } > + + + + + + { getCurrencyElements(2, -1, true) } + + ); } diff --git a/src/components/purse/views/CurrencyView.tsx b/src/components/purse/views/CurrencyView.tsx index 35ffe7e0..73f13c03 100644 --- a/src/components/purse/views/CurrencyView.tsx +++ b/src/components/purse/views/CurrencyView.tsx @@ -1,7 +1,7 @@ import { FC, useMemo } from 'react'; import { OverlayTrigger, Tooltip } from 'react-bootstrap'; -import { CreateLinkEvent, LocalizeFormattedNumber, LocalizeShortNumber } from '../../../api'; -import { Button, LayoutCurrencyIcon, Text } from '../../../common'; +import { LocalizeFormattedNumber, LocalizeShortNumber } from '../../../api'; +import { Flex, LayoutCurrencyIcon, Text } from '../../../common'; interface CurrencyViewProps { @@ -16,10 +16,11 @@ export const CurrencyView: FC = props => const element = useMemo(() => { - return + return ( + + { short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) } + + ); }, [ amount, short, type ]); if(!short) return element; diff --git a/src/components/right-side/RightSideView.tsx b/src/components/right-side/RightSideView.tsx index 89a74b48..92e81290 100644 --- a/src/components/right-side/RightSideView.tsx +++ b/src/components/right-side/RightSideView.tsx @@ -3,6 +3,7 @@ import { Column } from '../../common'; import { OfferView } from '../catalog/views/targeted-offer/OfferView'; import { GroupRoomInformationView } from '../groups/views/GroupRoomInformationView'; import { NotificationCenterView } from '../notification-center/NotificationCenterView'; +import { PurseView } from '../purse/PurseView'; import { MysteryBoxExtensionView } from '../room/widgets/mysterybox/MysteryBoxExtensionView'; import { RoomPromotesWidgetView } from '../room/widgets/room-promotes/RoomPromotesWidgetView'; @@ -11,6 +12,7 @@ export const RightSideView: FC<{}> = props => return (
+ diff --git a/src/components/room/RoomView.tsx b/src/components/room/RoomView.tsx index 448e5565..b1714d31 100644 --- a/src/components/room/RoomView.tsx +++ b/src/components/room/RoomView.tsx @@ -34,7 +34,7 @@ export const RoomView: FC<{}> = props => }, []); return ( - + { roomSession && <> diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx index 3da76358..5f2641c0 100644 --- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx +++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx @@ -3,7 +3,7 @@ import { Dispatch, FC, FocusEvent, KeyboardEvent, SetStateAction, useEffect, use import { FaPencilAlt, FaTimes } from 'react-icons/fa'; import { AvatarInfoUser, CloneObject, GetConfiguration, GetGroupInformation, GetSessionDataManager, GetUserProfile, LocalizeText, SendMessageComposer } from '../../../../../api'; import { Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../../common'; -import { useMessageEvent, useRoom, useRoomSessionManagerEvent, useSessionInfo } from '../../../../../hooks'; +import { useMessageEvent, useRoom, useRoomSessionManagerEvent } from '../../../../../hooks'; import { InfoStandWidgetUserRelationshipsView } from './InfoStandWidgetUserRelationshipsView'; import { InfoStandWidgetUserTagsView } from './InfoStandWidgetUserTagsView'; @@ -21,7 +21,15 @@ export const InfoStandWidgetUserView: FC = props = const [ isEditingMotto, setIsEditingMotto ] = useState(false); const [ relationships, setRelationships ] = useState(null); const { roomSession = null } = useRoom(); - const { saveMotto } = useSessionInfo(); + + const saveMotto = (motto: string) => + { + if(!isEditingMotto || (motto.length > GetConfiguration('motto.max.length', 38))) return; + + roomSession.sendMottoMessage(motto); + + setIsEditingMotto(false); + } const onMottoBlur = (event: FocusEvent) => saveMotto(event.target.value); diff --git a/src/components/room/widgets/chat-input/ChatInputView.scss b/src/components/room/widgets/chat-input/ChatInputView.scss index b5291f1f..ca1357ad 100644 --- a/src/components/room/widgets/chat-input/ChatInputView.scss +++ b/src/components/room/widgets/chat-input/ChatInputView.scss @@ -10,12 +10,6 @@ padding-right: 10px; width: 100%; overflow: hidden; - position: absolute; - bottom:55px; - left:0; - right:0; - max-width: 500px; - margin:auto; @include media-breakpoint-down(sm) { display: flex; diff --git a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx index 5062f36c..0bd2656b 100644 --- a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx +++ b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx @@ -1,7 +1,7 @@ import { GetGuestRoomResultEvent, NavigatorSearchComposer, RateFlatMessageComposer } from '@nitrots/nitro-renderer'; import { FC, useEffect, useState } from 'react'; import { CreateLinkEvent, GetRoomEngine, LocalizeText, SendMessageComposer } from '../../../../api'; -import { Base, Column, Flex, Text, TransitionAnimation, TransitionAnimationTypes, classNames } from '../../../../common'; +import { Base, classNames, Column, Flex, Text, TransitionAnimation, TransitionAnimationTypes } from '../../../../common'; import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks'; export const RoomToolsWidgetView: FC<{}> = props => @@ -76,7 +76,6 @@ export const RoomToolsWidgetView: FC<{}> = props => handleToolClick('settings') } /> handleToolClick('zoom') } className={ classNames('icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more')) } /> handleToolClick('chat_history') } className="icon icon-chat-history" /> - CreateLinkEvent('camera/toggle') } className="icon icon-camera-small" /> { navigatorData.canRate && handleToolClick('like_room') } className="icon icon-like-room" /> } diff --git a/src/components/toolbar/ToolbarView.scss b/src/components/toolbar/ToolbarView.scss index 615b290f..6e7f6519 100644 --- a/src/components/toolbar/ToolbarView.scss +++ b/src/components/toolbar/ToolbarView.scss @@ -1,54 +1,17 @@ -.nitro-toolbar, -.nitro-friendbar { +.nitro-toolbar { position: absolute; + bottom: 0; left: 0; - right:0; - width: 100%; + width: 100%; + height: $toolbar-height; z-index: $toolbar-zindex; - background: repeating-linear-gradient($f-grey, $f-grey 50%, $f-grey-sec 50%, $f-grey-sec 100%); - border-bottom:1px solid black; - border-top:1px solid black; - box-shadow: inset 0 1px lighten($f-grey, 10%), inset 0 -1px lighten($f-grey-sec, 10%); pointer-events: all; - - - &::before { - content:''; - position: absolute; - height:1px; - top:0; - bottom:0; - left: 0; - right:0; - margin:auto; - background: $f-grey-sec; - box-shadow: 0 1px $f-grey; - z-index: 1; - } - - .tb-splitter { - width:1px; - background-color: black; - box-shadow: 0px 1px 0 lighten($f-grey, 10%), 0px -1px 0 darken($f-grey-sec, 10); - height: 33px; - } - - .btn { - filter: drop-shadow(0px 1px 0 lighten($f-grey, 10%)) drop-shadow(0px -1px 0 darken($f-grey-sec, 10)); - &:not(:disabled) { - pointer-events: all; - } - } - - > * { - z-index: 2; - } + background: rgba($dark, 0.95); + box-shadow: inset 0px 5px lighten(rgba($dark, 0.6), 2.5), + inset 0 -4px darken(rgba($dark, 0.6), 4); .navigation-item { position: relative; - z-index: 40; - - filter: drop-shadow(0px 1px 0 lighten($f-grey, 10%)) drop-shadow(0px -1px 0 darken($f-grey-sec, 10)); &.item-avatar { width: 50px; @@ -57,7 +20,7 @@ .avatar-image { margin-left: -5px; - margin-top: 40px; + margin-top: 25px; } } @@ -74,15 +37,14 @@ filter: none; } } -} -.nitro-friendbar{ - bottom:0; -} + #toolbar-chat-input-container { - -.nitro-toolbar { - top:0; + @include media-breakpoint-down(sm) { + width: 0px; + height: 0px; + } + } } .nitro-toolbar-me { diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx index 3519146f..0efab76f 100644 --- a/src/components/toolbar/ToolbarView.tsx +++ b/src/components/toolbar/ToolbarView.tsx @@ -3,7 +3,6 @@ import { FC, useState } from 'react'; import { CreateLinkEvent, GetConfiguration, GetSessionDataManager, MessengerIconState, OpenMessengerChat, VisitDesktop } from '../../api'; import { Base, Flex, LayoutAvatarImageView, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes } from '../../common'; import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useRoomEngineEvent, useSessionInfo } from '../../hooks'; -import { PurseView } from '../purse/PurseView'; import { ToolbarMeView } from './ToolbarMeView'; export const ToolbarView: FC<{ isInRoom: boolean }> = props => @@ -11,7 +10,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props => const { isInRoom } = props; const [ isMeExpanded, setMeExpanded ] = useState(false); const [ useGuideTool, setUseGuideTool ] = useState(false); - const { userFigure = null, userName = null } = useSessionInfo(); + const { userFigure = null } = useSessionInfo(); const { getFullCount = 0 } = useInventoryUnseenTracker(); const { getTotalUnseen = 0 } = useAchievements(); const { requests = [] } = useFriends(); @@ -69,53 +68,43 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props => - - - { isInRoom && - VisitDesktop() } /> } - { !isInRoom && - CreateLinkEvent('navigator/goto/home') } /> } - CreateLinkEvent('navigator/toggle') } /> - { GetConfiguration('game.center.enabled') && CreateLinkEvent('games/toggle') } /> } - CreateLinkEvent('catalog/toggle') } /> - CreateLinkEvent('inventory/toggle') }> - { (getFullCount > 0) && - } - - - - - - - { isMod && - CreateLinkEvent('mod-tools/toggle') } /> } - CreateLinkEvent('help/show') }> - - - CreateLinkEvent('user-settings/toggle') } > - - - + + + setMeExpanded(!isMeExpanded) }> - + { (getTotalUnseen > 0) && } - { userName } + { isInRoom && + VisitDesktop() } /> } + { !isInRoom && + CreateLinkEvent('navigator/goto/home') } /> } + CreateLinkEvent('navigator/toggle') } /> + { GetConfiguration('game.center.enabled') && CreateLinkEvent('games/toggle') } /> } + CreateLinkEvent('catalog/toggle') } /> + CreateLinkEvent('inventory/toggle') }> + { (getFullCount > 0) && + } + + { isInRoom && + CreateLinkEvent('camera/toggle') } /> } + { isMod && + CreateLinkEvent('mod-tools/toggle') } /> } + - - - - - CreateLinkEvent('friends/toggle') }> - { (requests.length > 0) && + + + CreateLinkEvent('friends/toggle') }> + { (requests.length > 0) && } - - { ((iconState === MessengerIconState.SHOW) || (iconState === MessengerIconState.UNREAD)) && + + { ((iconState === MessengerIconState.SHOW) || (iconState === MessengerIconState.UNREAD)) && OpenMessengerChat() } /> } + + - ); diff --git a/src/hooks/friends/useMessenger.ts b/src/hooks/friends/useMessenger.ts index dd89facb..a48b6cf1 100644 --- a/src/hooks/friends/useMessenger.ts +++ b/src/hooks/friends/useMessenger.ts @@ -17,17 +17,6 @@ const useMessengerState = () => const visibleThreads = useMemo(() => messageThreads.filter(thread => (hiddenThreadIds.indexOf(thread.threadId) === -1)), [ messageThreads, hiddenThreadIds ]); const activeThread = useMemo(() => ((activeThreadId > 0) && visibleThreads.find(thread => (thread.threadId === activeThreadId) || null)), [ activeThreadId, visibleThreads ]); - const unreadThreads = useMemo(() => - { - let count = 0; - - messageThreads.forEach(t => - { - count += t.unreadCount - }) - - return count - }, [ messageThreads ] ) const getMessageThread = (userId: number) => { @@ -192,7 +181,7 @@ const useMessengerState = () => }); }, [ visibleThreads ]); - return { messageThreads, activeThread, iconState, visibleThreads, getMessageThread, setActiveThreadId, closeThread, sendMessage, unreadThreads }; + return { messageThreads, activeThread, iconState, visibleThreads, getMessageThread, setActiveThreadId, closeThread, sendMessage }; } export const useMessenger = () => useBetween(useMessengerState); diff --git a/src/hooks/rooms/useRoom.ts b/src/hooks/rooms/useRoom.ts index 7c44e024..af1c12ac 100644 --- a/src/hooks/rooms/useRoom.ts +++ b/src/hooks/rooms/useRoom.ts @@ -27,8 +27,6 @@ const useRoomState = () => { roomBackground.tint = newColor; } - - console.log(hue, saturation, lightness); } const updateRoomFilter = (color: number) => @@ -58,7 +56,7 @@ const useRoomState = () => if(RoomId.isRoomPreviewerId(event.roomId)) return; if(event.enable) updateRoomBackgroundColor(event.hue, event.saturation, event.lightness, true); - else updateRoomBackgroundColor(146, 206, 21, true); + else updateRoomBackgroundColor(0, 0, 0, true); }); useRoomEngineEvent(RoomBackgroundColorEvent.ROOM_COLOR, event => @@ -93,26 +91,6 @@ const useRoomState = () => case RoomEngineEvent.INITIALIZED: SetActiveRoomId(event.roomId); setRoomSession(session); - - // const room = GetRoomEngine().createTextureFromRoom(roomSession.roomId, 1); - // const canvas = GetRoomEngine().getRoomInstanceRenderingCanvas(roomSession.roomId, 1); - - // const texture = new NitroSprite(room); - - // console.log(TextureUtils.generateImageUrl(texture)) - - // if (!canvas) return; - - // const master = (canvas.master as NitroContainer); - - // texture.width = room.width; - // texture.height = room.height - - // texture.x = 30; - // texture.y = 30; - - // master.addChildAt(texture, 1); - return; case RoomEngineEvent.DISPOSED: setRoomSession(null); @@ -244,26 +222,10 @@ const useRoomState = () => const filter = new AdjustmentFilter(); const master = (canvas.master as NitroContainer); - background.tint = ColorConverter.hslToRGB(((((146 & 0xFF) << 16) + ((206 & 0xFF) << 8)) + (21 & 0xFF))); + background.tint = 0; background.width = width; background.height = height; - - // const room = GetRoomEngine().createTextureFromRoom(roomSession.roomId, 1); - // const texture = new NitroSprite(room); - - // texture.width = room.width; - // texture.height = room.height - - // texture.x = room.frame.x - // texture.y = room.frame.y - - // texture.tint = 0 - // texture.alpha = 0.5 - - // console.log(TextureUtils.generateImageUrl(texture)) - - //master.addChildAt(texture,0) master.addChildAt(background, 0); master.filters = [ filter ]; diff --git a/src/hooks/session/useSessionInfo.ts b/src/hooks/session/useSessionInfo.ts index 27d26c12..6f480fea 100644 --- a/src/hooks/session/useSessionInfo.ts +++ b/src/hooks/session/useSessionInfo.ts @@ -1,7 +1,7 @@ -import { FigureUpdateEvent, RoomUnitChatStyleComposer, UserInfoDataParser, UserInfoEvent, UserMottoComposer, UserSettingsEvent } from '@nitrots/nitro-renderer'; +import { FigureUpdateEvent, RoomUnitChatStyleComposer, UserInfoDataParser, UserInfoEvent, UserSettingsEvent } from '@nitrots/nitro-renderer'; import { useEffect, useState } from 'react'; import { useBetween } from 'use-between'; -import { GetConfiguration, GetLocalStorage, GetSessionDataManager, SendMessageComposer } from '../../api'; +import { GetLocalStorage, GetSessionDataManager, SendMessageComposer } from '../../api'; import { useMessageEvent } from '../events'; import { useLocalStorage } from '../useLocalStorage'; @@ -9,8 +9,6 @@ const useSessionInfoState = () => { const [ userInfo, setUserInfo ] = useState(null); const [ userFigure, setUserFigure ] = useState(null); - const [ userName, setUserName ] = useState(null); - const [ motto, setMotto ] = useState(''); const [ chatStyleId, setChatStyleId ] = useState(0); const [ userRespectRemaining, setUserRespectRemaining ] = useState(0); const [ petRespectRemaining, setPetRespectRemaining ] = useState(0); @@ -37,20 +35,11 @@ const useSessionInfoState = () => setPetRespectRemaining(GetSessionDataManager().respectsPetLeft); } - const saveMotto = (motto: string) => - { - if (motto.length > GetConfiguration('motto.max.length', 38)) return; - setMotto(motto); - SendMessageComposer(new UserMottoComposer(motto)) - } - useMessageEvent(UserInfoEvent, event => { const parser = event.getParser(); setUserInfo(parser.userInfo); - setUserName(parser.userInfo.username); - setMotto(parser.userInfo.motto); setUserFigure(parser.userInfo.figure); setUserRespectRemaining(parser.userInfo.respectsRemaining); setPetRespectRemaining(parser.userInfo.respectsPetRemaining); @@ -98,7 +87,7 @@ const useSessionInfoState = () => } }, [ setScreenSize ]); - return { userInfo, userFigure, userName,motto, chatStyleId, userRespectRemaining, petRespectRemaining, respectUser, respectPet, updateChatStyleId, setMotto, saveMotto }; + return { userInfo, userFigure, chatStyleId, userRespectRemaining, petRespectRemaining, respectUser, respectPet, updateChatStyleId }; } export const useSessionInfo = () => useBetween(useSessionInfoState);