nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-22 14:20:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Revert "stuff ui"

Browse Source 
This reverts commit da9aba9867.
This commit is contained in:
Laynester 2024-04-03 02:30:36 -04:00
parent da9aba9867
commit 8cba640a71
59 changed files with 320 additions and 829 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.vscode/settings.json vendored
View File

@ -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,

4
src/App.scss
View File

@ -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;

1
src/App.tsx
View File

@ -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) =>

38
src/api/utils/ColorUtils.ts
View File

@ -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) }`;
}
}

2
src/api/utils/LocalizeFormattedNumber.ts
View File

@ -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, ' ');
};

BIN
src/assets/images/fusion/background.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/images/fusion/cards/card-close.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/assets/images/fusion/cards/yellow-bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/images/fusion/friends/online.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 294 B

BIN
src/assets/images/fusion/friends/search.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/images/fusion/inventory/ach.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/images/fusion/inventory/bots.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 291 B

BIN
src/assets/images/fusion/inventory/furni.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 351 B

BIN
src/assets/images/fusion/inventory/pets.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 264 B

BIN
src/assets/images/toolbar/icons/catalog.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/images/toolbar/icons/inventory.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

1
src/assets/styles/bootstrap/_buttons.scss
View File

@ -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);

2
src/assets/styles/bootstrap/_functions.scss
View File

@ -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

2
src/assets/styles/bootstrap/_reboot.scss
View File

@ -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
}

29
src/assets/styles/bootstrap/_variables.scss
View File

@ -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;

49
src/assets/styles/bootstrap/mixins/_buttons.scss
View File

@ -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;
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;
}
border-color: $active-border;
}
.btn-check:focus + &,

2
src/assets/styles/fonts.scss
View File

@ -1,4 +1,4 @@
@font-face {
font-family: Ubuntu;
src: url('@/assets/webfonts/Ubuntu.ttf');
src: url('@/assets/webfonts/Ubuntu-C.ttf');
}

27
src/assets/styles/icons.scss
View File

@ -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;

1
src/assets/styles/index.scss
View File

@ -4,7 +4,6 @@
@import './slider';
@import './icons';
@import './utils';
@import './inputs.scss';
.btn-sm {
min-height: 28px;

12
src/assets/styles/inputs.scss
View File

@ -1,12 +0,0 @@
.fi {
&.fi-white {
background:transparent;
border:1px solid white;
color:white;
}
outline: none !important;
&* {
outline: none !important;
}
}

13
src/common/Button.tsx
View File

@ -8,22 +8,17 @@ export interface ButtonProps extends FlexProps
size?: ButtonSizeType;
active?: boolean;
disabled?: boolean;
outline?: boolean;
tp?: boolean;
}
export const Button: FC<ButtonProps> = 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<ButtonProps> = 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 <Flex center classNames={ getClassNames } { ...rest } />;
}

8
src/common/card/NitroCardHeaderView.tsx
View File

@ -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<NitroCardHeaderViewProps> = props =>
return (
<Column center position="relative" classNames={ getClassNames } { ...rest }>
<Flex fullWidth alignItems="center" justifyContent="between" className="nitro-header-stuff">
<Flex fullWidth center>
<span className="nitro-card-header-text">{ headerText }</span>
{ isGalleryPhoto &&
<Base position="absolute" className="end-4 nitro-card-header-report-camera" onClick={ onReportPhoto }>
<FaFlag className="fa-icon" />
</Base>
}
<Flex center position="absolute" className="end-2 nitro-card-header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick } />
<Flex center position="absolute" className="end-2 nitro-card-header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
<FaTimes className="fa-icon w-12 h-12" />
</Flex>
</Flex>
</Column>
);

234
src/common/card/NitroCardView.scss
View File

@ -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);
}

46
src/common/card/NitroCardView.tsx
View File

@ -15,7 +15,7 @@ export const NitroCardView: FC<NitroCardViewProps> = 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<NitroCardViewProps> = props =>
return newClassNames;
}, [ theme, classNames ]);
// useEffect(() =>
// {
// if(!uniqueKey || !elementRef || !elementRef.current) return;
/* useEffect(() =>
{
if(!uniqueKey || !elementRef || !elementRef.current) return;
// const localStorage = GetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`);
// const element = elementRef.current;
const localStorage = GetLocalStorage<WindowSaveOptions>(`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<Partial<WindowSaveOptions>>(`nitro.windows.${ uniqueKey }`) } as WindowSaveOptions;
const observer = new ResizeObserver(event =>
{
const newStorage = { ...GetLocalStorage<Partial<WindowSaveOptions>>(`nitro.windows.${ uniqueKey }`) } as WindowSaveOptions;
// newStorage.size = { width: element.offsetWidth, height: element.offsetHeight };
newStorage.size = { width: element.offsetWidth, height: element.offsetHeight };
// SetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`, newStorage);
// });
SetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`, newStorage);
});
// observer.observe(element);
observer.observe(element);
// return () =>
// {
// observer.disconnect();
// }
// }, [ uniqueKey ]);
return () =>
{
observer.disconnect();
}
}, [ uniqueKey ]); */
return (
<NitroCardContextProvider value={ { theme } }>

2
src/common/card/accordion/NitroCardAccordionSetView.tsx
View File

@ -71,7 +71,7 @@ export const NitroCardAccordionSetView: FC<NitroCardAccordionSetViewProps> = pro
return (
<Column classNames={ getClassNames } gap={ gap } { ...rest }>
<Flex pointer justifyContent="between" className="nitro-card-accordion-set-header px-2 py-1" onClick={ onClick }>
<Text variant="white">{ headerText }</Text>
<Text>{ headerText }</Text>
{ isOpen && <FaCaretUp className="fa-icon" /> }
{ !isOpen && <FaCaretDown className="fa-icon" /> }
</Flex>

2
src/common/card/tabs/NitroCardTabsView.tsx
View File

@ -3,7 +3,7 @@ import { Flex, FlexProps } from '../..';
export const NitroCardTabsView: FC<FlexProps> = props =>
{
const { justifyContent = 'start', gap = 0, classNames = [], children = null, ...rest } = props;
const { justifyContent = 'center', gap = 1, classNames = [], children = null, ...rest } = props;
const getClassNames = useMemo(() =>
{

23
src/common/draggable-window/DraggableWindow.tsx
View File

@ -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<Key, { x: number, y: number }> = new Map();
const BOUNDS_THRESHOLD_TOP: number = 0;
const BOUNDS_THRESHOLD_LEFT: number = 0;
@ -139,7 +138,14 @@ export const DraggableWindow: FC<DraggableWindowProps> = 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<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`) } as WindowSaveOptions;
newStorage.offset = { x: offsetX, y: offsetY };
SetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`, newStorage);
}
}, [ dragHandler, delta, offset, uniqueKey ]);
const onDragMouseUp = useCallback((event: MouseEvent) =>
@ -188,17 +194,6 @@ export const DraggableWindow: FC<DraggableWindowProps> = 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 });

6
src/common/layout/LayoutNotificationAlertView.tsx
View File

@ -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<LayoutNotificationAlertViewProps> = 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<LayoutNotificationAlertViewProps> =
<NitroCardContentView grow justifyContent="between" overflow="hidden" className="text-black" gap={ 0 }>
{ children }
</NitroCardContentView>
{ options }
</NitroCardView>
);
}

2
src/common/types/ColorVariantType.ts
View File

@ -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';

25
src/components/friends/FriendsView.scss
View File

@ -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;
}

13
src/components/friends/views/friends-bar/FriendBarItemView.tsx
View File

@ -33,7 +33,7 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
if(!friend)
{
return (
<div ref={ elementRef } className="btn btn-f-grey friend-bar-search">
<div ref={ elementRef } className="btn btn-primary friend-bar-item friend-bar-search">
<div className="friend-bar-item-head position-absolute"/>
<div className="text-truncate">{ LocalizeText('friend.bar.find.title') }</div>
</div>
@ -41,18 +41,19 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
}
return (
<div ref={ elementRef } className={ 'friend-bar-item d-flex align-items-center ' + (isVisible ? 'friend-bar-item-active' : '') } onMouseOver={ () => setVisible(true) } onMouseOut={ () => setVisible(false) }>
<div ref={ elementRef } className={ 'btn btn-success friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '') } onClick={ event => setVisible(prevValue => !prevValue) }>
<div className={ `friend-bar-item-head position-absolute ${ friend.id > 0 ? 'avatar': 'group' }` }>
{ (friend.id > 0) && <LayoutAvatarImageView figure={ friend.figure } direction={ isVisible ? 2 : 3 } /> }
{ (friend.id > 0) && <LayoutAvatarImageView headOnly={ true } figure={ friend.figure } direction={ 2 } /> }
{ (friend.id <= 0) && <LayoutBadgeImageView isGroup={ true } badgeCode={ friend.figure } /> }
</div>
{ isVisible ?
<div className="d-flex justify-content-between w-100 gap-2 pe-1">
<div className="text-truncate">{ friend.name }</div>
{ isVisible &&
<div className="d-flex justify-content-between">
<Base className="nitro-friends-spritesheet icon-friendbar-chat cursor-pointer" onClick={ event => OpenMessengerChat(friend.id) } />
{ friend.followingAllowed &&
<Base className="nitro-friends-spritesheet icon-friendbar-visit cursor-pointer" onClick={ event => followFriend(friend) } /> }
<Base className="nitro-friends-spritesheet icon-profile cursor-pointer" onClick={ event => GetUserProfile(friend.id) } />
</div> : <div className="text-truncate w-100 pe-1">{ friend.name }</div> }
</div> }
</div>
);
}

53
src/components/friends/views/friends-bar/FriendsBarView.tsx
View File

@ -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<HTMLDivElement>();
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<HTMLDivElement>();
return (
<Flex innerRef={ friendRef } className="w-100 justify-content-center align-items-center friend-bar" gap={ 1 }>
<Flex innerRef={ elementRef } alignItems="center" className="friend-bar">
<Button variant="black" className="friend-bar-button" disabled={ (indexOffset <= 0) } onClick={ event => setIndexOffset(indexOffset - 1) }>
<FaChevronLeft className="fa-icon" />
</Button>

31
src/components/friends/views/friends-list/FriendsListSearchView.tsx
View File

@ -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<FriendsSearchViewProps> = props =>
return () => clearTimeout(timeout);
}, [ searchValue ]);
return <>
<Text bold variant="white">{ LocalizeText('friendlist.tip.tab.3') }</Text>
<input type="text" className="fi fi-white" placeholder={ LocalizeText('generic.search') } value={ searchValue } maxLength={ 50 } onChange={ event => setSearchValue(event.target.value) } />
<Column gap={ 1 } fullHeight overflow="hidden">
return (
<NitroCardAccordionSetView { ...rest }>
<input type="text" className="search-input form-control form-control-sm w-100 rounded-0" placeholder={ LocalizeText('generic.search') } value={ searchValue } maxLength={ 50 } onChange={ event => setSearchValue(event.target.value) } />
<Column>
{ friendResults &&
<>
{ (friendResults.length === 0) &&
<Text bold small variant="white">{ LocalizeText('friendlist.search.nofriendsfound') }</Text> }
<Text bold small className="px-2 py-1">{ LocalizeText('friendlist.search.nofriendsfound') }</Text> }
{ (friendResults.length > 0) &&
<Column gap={ 0 } fullHeight overflow="hidden">
<Text bold small variant="white">{ LocalizeText('friendlist.search.friendscaption', [ 'cnt' ], [ friendResults.length.toString() ]) }</Text>
<Column gap={ 0 } fullHeight className="overflow-y-scroll">
<Column gap={ 0 }>
<Text bold small className="px-2 py-1">{ LocalizeText('friendlist.search.friendscaption', [ 'cnt' ], [ friendResults.length.toString() ]) }</Text>
<hr className="mx-2 mt-0 mb-1 text-black" />
<Column gap={ 0 }>
{ friendResults.map(result =>
{
return (
@ -72,11 +73,12 @@ export const FriendsSearchView: FC<FriendsSearchViewProps> = props =>
{ otherResults &&
<>
{ (otherResults.length === 0) &&
<Text bold small variant="white">{ LocalizeText('friendlist.search.noothersfound') }</Text> }
<Text bold small className="px-2 py-1">{ LocalizeText('friendlist.search.noothersfound') }</Text> }
{ (otherResults.length > 0) &&
<Column gap={ 0 } fullHeight overflow="hidden">
<Text bold small variant="white">{ LocalizeText('friendlist.search.otherscaption', [ 'cnt' ], [ otherResults.length.toString() ]) }</Text>
<Column gap={ 0 } fullHeight className="overflow-y-scroll">
<Column gap={ 0 }>
<Text bold small className="px-2 py-1">{ LocalizeText('friendlist.search.otherscaption', [ 'cnt' ], [ otherResults.length.toString() ]) }</Text>
<hr className="mx-2 mt-0 mb-1 text-black" />
<Column gap={ 0 }>
{ otherResults.map(result =>
{
return (
@ -96,5 +98,6 @@ export const FriendsSearchView: FC<FriendsSearchViewProps> = props =>
</Column> }
</> }
</Column>
</>
</NitroCardAccordionSetView>
);
}

58
src/components/friends/views/friends-list/FriendsListView.tsx
View File

@ -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<boolean>(false);
const { onlineFriends = [], offlineFriends = [], requests = [], requestFriend = null } = useFriends();
const [ tab, setTab ] = useState<number>(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 <MyInfoView />
case 1: return <>
<Text variant="white" bold>{ LocalizeText('friendlist.friends') + ` (${ onlineFriends.length })` }</Text>
<FriendsListGroupView list={ onlineFriends } selectedFriendsIds={ selectedFriendsIds } selectFriend={ selectFriend } />
{ selectedFriendsIds && selectedFriendsIds.length > 0 &&
<Flex gap={ 1 } className="p-1">
<Button outline fullWidth variant="white" onClick={ () => setShowRoomInvite(true) }>{ LocalizeText('friendlist.tip.invite') }</Button>
<Button outline fullWidth variant="white" onClick={ event => setShowRemoveFriendsConfirmation(true) }>{ LocalizeText('generic.delete') }</Button>
</Flex> }
</>;
case 2: return <>
<Text variant="white" bold>{ LocalizeText('friendlist.friends.offlinecaption')+ ` (${ offlineFriends.length })` }</Text>
<FriendsListGroupView list={ offlineFriends } selectedFriendsIds={ selectedFriendsIds } selectFriend={ selectFriend } />
</>
case 3: return <FriendsSearchView headerText={ LocalizeText('people.search.title') } />;
default:
return null
}
}
useEffect(() =>
{
const linkTracker: ILinkEventTracker = {
@ -147,11 +121,10 @@ export const FriendsListView: FC<{}> = props =>
return (
<>
<NitroCardView className="nitro-friends" uniqueKey="nitro-friends" theme="yellow-slim">
<NitroCardView className="nitro-friends" uniqueKey="nitro-friends" theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ event => setIsVisible(false) } />
<NitroCardContentView overflow="hidden" gap={ 1 } className="mb-2">
{ getView() }
{ /* <NitroCardAccordionView fullHeight overflow="hidden">
<NitroCardContentView overflow="hidden" gap={ 1 } className="text-black p-0">
<NitroCardAccordionView fullHeight overflow="hidden">
<NitroCardAccordionSetView headerText={ LocalizeText('friendlist.friends') + ` (${ onlineFriends.length })` } isExpanded={ true }>
<FriendsListGroupView list={ onlineFriends } selectedFriendsIds={ selectedFriendsIds } selectFriend={ selectFriend } />
</NitroCardAccordionSetView>
@ -165,25 +138,8 @@ export const FriendsListView: FC<{}> = props =>
<Flex gap={ 1 } className="p-1">
<Button fullWidth onClick={ () => setShowRoomInvite(true) }>{ LocalizeText('friendlist.tip.invite') }</Button>
<Button fullWidth variant="danger" onClick={ event => setShowRemoveFriendsConfirmation(true) }>{ LocalizeText('generic.delete') }</Button>
</Flex> } */ }
</Flex> }
</NitroCardContentView>
<Flex gap={ 1 } className="mb-1">
<Button variant="warning" fullWidth className={ tab == 0 ? 'inset' : '' } onClick={ () => setTab(0) }>
<i className="icon disk-creator" />
</Button>
<Button variant="warning" fullWidth className={ tab == 1 ? 'inset' : '' } onClick={ () => setTab(1) }>
<i className="icon icon-online-friends" />
</Button>
<Button variant="warning" fullWidth className={ tab == 2 ? 'inset' : '' } onClick={ () => setTab(2) }>
<i className="icon icon-offline-friends" />
</Button>
<Button variant="warning" fullWidth className={ tab == 3 ? 'inset' : '' } onClick={ () => setTab(3) }>
<i className="icon icon-search" />
</Button>
<Button variant="warning" fullWidth className={ tab == 4 ? 'inset' : '' } onClick={ () => setTab(4) }>
<i className="nitro-friends-spritesheet icon-chat" />
</Button>
</Flex>
</NitroCardView>
{ showRoomInvite &&
<FriendsRoomInviteView selectedFriendsIds={ selectedFriendsIds } onCloseClick={ () => setShowRoomInvite(false) } sendRoomInvite={ sendRoomInvite } /> }

29
src/components/friends/views/friends-list/friends-list-group/FriendsListGroupItemView.tsx
View File

@ -52,34 +52,7 @@ export const FriendsListGroupItemView: FC<{ friend: MessengerFriend, selected: b
}
}
if (!friend) return null;
return <Flex fullWidth justifyContent="between" onClick={ event => selectFriend(friend.id) } className={ selected ? 'bg-primary text-white' : '' }>
<Flex alignItems="center" gap={ 1 }>
<Base onClick={ event => event.stopPropagation() }>
<UserProfileIconView userId={ friend.id } />
</Base>
<div>{ friend.name }</div>
</Flex>
<Flex alignItems="center" gap={ 1 }>
{ !isRelationshipOpen &&
<>
{ friend.followingAllowed &&
<Base pointer onClick={ clickFollowFriend } className="nitro-friends-spritesheet icon-follow" title={ LocalizeText('friendlist.tip.follow') } /> }
{ friend.online &&
<Base pointer className="nitro-friends-spritesheet icon-chat" onClick={ openMessengerChat } title={ LocalizeText('friendlist.tip.im') } /> }
{ (friend.id > 0) &&
<Base className={ `nitro-friends-spritesheet icon-${ getCurrentRelationshipName() } cursor-pointer` } onClick={ openRelationship } title={ LocalizeText('infostand.link.relationship') } /> }
</> }
{ isRelationshipOpen &&
<>
<Base pointer className="nitro-friends-spritesheet icon-heart" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_HEART) } />
<Base pointer className="nitro-friends-spritesheet icon-smile" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_SMILE) } />
<Base pointer className="nitro-friends-spritesheet icon-bobba" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_BOBBA) } />
<Base pointer className="nitro-friends-spritesheet icon-none" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_NONE) } />
</> }
</Flex>
</Flex>
if(!friend) return null;
return (
<NitroCardAccordionItemView justifyContent="between" className={ `px-2 py-1 ${ selected && 'bg-primary text-white' }` } onClick={ event => selectFriend(friend.id) }>

5
src/components/friends/views/friends-list/friends-list-group/FriendsListGroupView.tsx
View File

@ -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<FriendsListGroupViewProps> = props =>
if(!list || !list.length) return null;
return (
<Column fullHeight className="overflow-y-scroll">
<>
{ list.map((item, index) => <FriendsListGroupItemView key={ index } friend={ item } selected={ selectedFriendsIds && (selectedFriendsIds.indexOf(item.id) >= 0) } selectFriend={ selectFriend } />) }
</Column>
</>
);
}

16
src/components/friends/views/friends-list/myinfo/MyInfo.scss
View File

@ -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;
}
}
}

40
src/components/friends/views/friends-list/myinfo/MyInfoView.tsx
View File

@ -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<HTMLInputElement>) =>
{
event.stopPropagation();
switch(event.key)
{
case 'Enter':
saveMotto((event.target as HTMLInputElement).value);
return;
}
}
return <Column fullHeight fullWidth className="friends-myinfo">
<Flex fullHeight fullWidth center gap={ 1 } className="px-2">
<Base className="myinfo-avatar">
<LayoutAvatarImageView figure={ userFigure } direction={ 3 } position="absolute" headOnly />
</Base>
<Column>
<Text variant="white" bold>{ userName }</Text>
<input className="fi fi-white" value={ motto } onChange={ event => setMotto(event.target.value) } onKeyDown={ onMottoKeyDown } />
</Column>
</Flex>
<Flex fullHeight fullWidth center>
<Column>
<Text variant="white" bold underline>{ unreadThreads } Unread Messages</Text>
<Text variant="white" bold underline>{ requests.length } Friend Requests</Text>
</Column>
</Flex>
</Column>
}

23
src/components/inventory/InventoryView.scss
View File

@ -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);
}
}
}

6
src/components/inventory/InventoryView.tsx
View File

@ -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 (
<NitroCardTabsItemView key={ index } isActive={ (currentTab === name) } onClick={ event => setCurrentTab(name) } count={ getCount(UNSEEN_CATEGORIES[index]) }>
<Base className={ `tab-icon tab-${ name.replaceAll('.','-') }` }/>
{ LocalizeText(name) }
</NitroCardTabsItemView>
);
}) }

20
src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
View File

@ -21,14 +21,8 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
const hasFrank = (item.alertType === NotificationAlertType.DEFAULT);
const options = <Column alignItems="center" center gap={ 0 } className="my-1">
{ !item.clickUrl &&
<Button onClick={ onClose } variant="success">{ LocalizeText('generic.close') }</Button> }
{ item.clickUrl && (item.clickUrl.length > 0) && <Button variant="success" onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</Button> }
</Column>
return (
<LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest } type={ hasFrank ? NotificationAlertType.DEFAULT : item.alertType } options={ options }>
<LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest } type={ hasFrank ? NotificationAlertType.DEFAULT : item.alertType }>
<Flex fullHeight overflow="auto" gap={ hasFrank || (item.imageUrl && !imageFailed) ? 2 : 0 }>
{ hasFrank && !item.imageUrl && <Base className="notification-frank flex-shrink-0" /> }
{ item.imageUrl && !imageFailed && <img src={ item.imageUrl } alt={ item.title } onError={ () =>
@ -42,8 +36,20 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
return <Base key={ index } dangerouslySetInnerHTML={ { __html: htmlText } } />;
}) }
{ item.clickUrl && (item.clickUrl.length > 0) && (item.imageUrl && !imageFailed) && <>
<hr className="my-2 w-100" />
<Button onClick={ visitUrl } className="align-self-center px-3">{ LocalizeText(item.clickUrlText) }</Button>
</> }
</Base>
</Flex>
{ (!item.imageUrl || (item.imageUrl && imageFailed)) && <>
<Column alignItems="center" center gap={ 0 }>
<hr className="my-2 w-100" />
{ !item.clickUrl &&
<Button onClick={ onClose }>{ LocalizeText('generic.close') }</Button> }
{ item.clickUrl && (item.clickUrl.length > 0) && <Button onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</Button> }
</Column>
</> }
</LayoutNotificationAlertView>
);

11
src/components/purse/PurseView.scss
View File

@ -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);

40
src/components/purse/PurseView.tsx
View File

@ -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;
if((limit > -1) && (count === limit)) break;
elements.push(<CurrencyView key={ type } type={ type } amount={ purse.activityPoints.get(type) } short={ currencyDisplayNumberShort } />)
if(seasonal) elements.push(<SeasonalView key={ type } type={ type } amount={ purse.activityPoints.get(type) } />);
else elements.push(<CurrencyView key={ type } type={ type } amount={ purse.activityPoints.get(type) } short={ currencyDisplayNumberShort } />);
count++;
}
@ -57,14 +59,32 @@ export const PurseView: FC<{}> = props =>
return elements;
}
if (!purse) return null;
if(!purse) return null;
return <Flex className="nitro-purse-container" gap={ 2 }>
return (
<Column alignItems="end" className="nitro-purse-container" gap={ 1 }>
<Flex className="nitro-purse rounded-bottom p-1">
<Grid fullWidth gap={ 1 }>
<Column justifyContent="center" size={ hcDisabled ? 10 : 6 } gap={ 0 }>
<CurrencyView type={ -1 } amount={ purse.credits } short={ currencyDisplayNumberShort } />
{ getCurrencyElements(0, -1) }
{ !hcDisabled && <Button className="gap-2 d-flex inset" variant="f-grey" onClick={ event => CreateLinkEvent('habboUI/open/hccenter') }>
<Text truncate bold textEnd variant="white" grow>{ getClubText }</Text>
{ getCurrencyElements(0, 2) }
</Column>
{ !hcDisabled &&
<Column center pointer size={ 4 } gap={ 1 } className="nitro-purse-subscription rounded" onClick={ event => CreateLinkEvent('habboUI/open/hccenter') }>
<LayoutCurrencyIcon type="hc" />
</Button> }
</Flex>;
<Text variant="white">{ getClubText }</Text>
</Column> }
<Column justifyContent="center" size={ 2 } gap={ 0 }>
<Flex center pointer fullHeight className="nitro-purse-button p-1 rounded" onClick={ event => CreateLinkEvent('help/show') }>
<i className="icon icon-help"/>
</Flex>
<Flex center pointer fullHeight className="nitro-purse-button p-1 rounded" onClick={ event => CreateLinkEvent('user-settings/toggle') } >
<i className="icon icon-cog"/>
</Flex>
</Column>
</Grid>
</Flex>
{ getCurrencyElements(2, -1, true) }
</Column>
);
}

11
src/components/purse/views/CurrencyView.tsx
View File

@ -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<CurrencyViewProps> = props =>
const element = useMemo(() =>
{
return <Button className="gap-2 d-flex inset" variant="f-grey" onClick={ () => CreateLinkEvent('catalog/open/currency-' + type) }>
<Text truncate bold textEnd variant="white" grow>{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</Text>
return (
<Flex justifyContent="end" pointer gap={ 1 } className="nitro-purse-button rounded">
<Text truncate textEnd variant="white" grow>{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</Text>
<LayoutCurrencyIcon type={ type } />
</Button>
</Flex>);
}, [ amount, short, type ]);
if(!short) return element;

2
src/components/right-side/RightSideView.tsx
View File

@ -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 (
<div className="nitro-right-side">
<Column position="relative" gap={ 1 }>
<PurseView />
<GroupRoomInformationView />
<MysteryBoxExtensionView />
<OfferView/>

2
src/components/room/RoomView.tsx
View File

@ -34,7 +34,7 @@ export const RoomView: FC<{}> = props =>
}, []);
return (
<Base fit innerRef={ elementRef } className={ (!roomSession && 'd-none') + ' nitro-room' }>
<Base fit innerRef={ elementRef } className={ (!roomSession && 'd-none') }>
{ roomSession &&
<>
<RoomWidgetsView />

12
src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
View File

@ -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<InfoStandWidgetUserViewProps> = props =
const [ isEditingMotto, setIsEditingMotto ] = useState(false);
const [ relationships, setRelationships ] = useState<RelationshipStatusInfoMessageParser>(null);
const { roomSession = null } = useRoom();
const { saveMotto } = useSessionInfo();
const saveMotto = (motto: string) =>
{
if(!isEditingMotto || (motto.length > GetConfiguration<number>('motto.max.length', 38))) return;
roomSession.sendMottoMessage(motto);
setIsEditingMotto(false);
}
const onMottoBlur = (event: FocusEvent<HTMLInputElement>) => saveMotto(event.target.value);

6
src/components/room/widgets/chat-input/ChatInputView.scss
View File

@ -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;

3
src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
View File

@ -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 =>
<Base pointer title={ LocalizeText('room.settings.button.text') } className="icon icon-cog" onClick={ () => handleToolClick('settings') } />
<Base pointer title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } className={ classNames('icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more')) } />
<Base pointer title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } className="icon icon-chat-history" />
<Base pointer title={ LocalizeText('room.chathistory.button.text') } onClick={ event => CreateLinkEvent('camera/toggle') } className="icon icon-camera-small" />
{ navigatorData.canRate &&
<Base pointer title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } className="icon icon-like-room" /> }
</Column>

64
src/components/toolbar/ToolbarView.scss
View File

@ -1,54 +1,17 @@
.nitro-toolbar,
.nitro-friendbar {
.nitro-toolbar {
position: absolute;
bottom: 0;
left: 0;
right:0;
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 {

41
src/components/toolbar/ToolbarView.tsx
View File

@ -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,8 +68,14 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
<ToolbarMeView useGuideTool={ useGuideTool } unseenAchievementCount={ getTotalUnseen } setMeExpanded={ setMeExpanded } />
</TransitionAnimation>
<Flex alignItems="center" justifyContent="between" gap={ 2 } className="nitro-toolbar px-4" overflow="hidden">
<Flex gap={ 3 } alignItems="center" fullHeight>
<Flex alignItems="center" justifyContent="between" gap={ 2 } className="nitro-toolbar py-1 px-3">
<Flex gap={ 2 } alignItems="center">
<Flex alignItems="center" gap={ 2 }>
<Flex center pointer className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
<LayoutAvatarImageView figure={ userFigure } direction={ 2 } position="absolute" />
{ (getTotalUnseen > 0) &&
<LayoutItemCountView count={ getTotalUnseen } /> }
</Flex>
{ isInRoom &&
<Base pointer className="navigation-item icon icon-habbo" onClick={ event => VisitDesktop() } /> }
{ !isInRoom &&
@ -82,31 +87,14 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
{ (getFullCount > 0) &&
<LayoutItemCountView count={ getFullCount } /> }
</Base>
<Base className="tb-splitter"/>
</Flex>
<PurseView />
<Flex gap={ 3 } alignItems="center" fullHeight>
<Base className="tb-splitter" />
{ isInRoom &&
<Base pointer className="navigation-item icon icon-camera" onClick={ event => CreateLinkEvent('camera/toggle') } /> }
{ isMod &&
<Base pointer className="navigation-item icon icon-modtools" onClick={ event => CreateLinkEvent('mod-tools/toggle') } /> }
<Flex center pointer fullHeight className="navigation-item" onClick={ event => CreateLinkEvent('help/show') }>
<i className="icon icon-help"/>
</Flex>
<Flex center pointer fullHeight className="navigation-item" onClick={ event => CreateLinkEvent('user-settings/toggle') } >
<i className="icon icon-cog"/>
</Flex>
<Flex gap={ 0 } alignItems="center">
<Flex center pointer className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
<LayoutAvatarImageView figure={ userFigure } direction={ 3 } position="absolute" headOnly />
{ (getTotalUnseen > 0) &&
<LayoutItemCountView count={ getTotalUnseen } /> }
</Flex>
{ userName }
</Flex>
</Flex>
</Flex>
<Flex alignItems="center" id="toolbar-chat-input-container" />
<Flex alignItems="center" gap={ 3 } className="nitro-friendbar px-4 py-1">
</Flex>
<Flex alignItems="center" gap={ 2 }>
<Flex gap={ 2 }>
<Base pointer className="navigation-item icon icon-friendall" onClick={ event => CreateLinkEvent('friends/toggle') }>
{ (requests.length > 0) &&
@ -115,7 +103,8 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
{ ((iconState === MessengerIconState.SHOW) || (iconState === MessengerIconState.UNREAD)) &&
<Base pointer className={ `navigation-item icon icon-message ${ (iconState === MessengerIconState.UNREAD) && 'is-unseen' }` } onClick={ event => OpenMessengerChat() } /> }
</Flex>
<Base id="toolbar-friend-bar-container" fullWidth position="absolute" className="pe-none" />
<Base id="toolbar-friend-bar-container" className="d-none d-lg-block" />
</Flex>
</Flex>
</>
);

13
src/hooks/friends/useMessenger.ts
View File

@ -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);

42
src/hooks/rooms/useRoom.ts
View File

@ -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>(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 ];

17
src/hooks/session/useSessionInfo.ts
View File

@ -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<UserInfoDataParser>(null);
const [ userFigure, setUserFigure ] = useState<string>(null);
const [ userName, setUserName ] = useState<string>(null);
const [ motto, setMotto ] = useState<string>('');
const [ chatStyleId, setChatStyleId ] = useState<number>(0);
const [ userRespectRemaining, setUserRespectRemaining ] = useState<number>(0);
const [ petRespectRemaining, setPetRespectRemaining ] = useState<number>(0);
@ -37,20 +35,11 @@ const useSessionInfoState = () =>
setPetRespectRemaining(GetSessionDataManager().respectsPetLeft);
}
const saveMotto = (motto: string) =>
{
if (motto.length > GetConfiguration<number>('motto.max.length', 38)) return;
setMotto(motto);
SendMessageComposer(new UserMottoComposer(motto))
}
useMessageEvent<UserInfoEvent>(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);