nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-18 13:26:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

add hc center - lineheight changes 2

Browse Source
This commit is contained in:
Layne 2021-12-05 08:14:43 -05:00
parent 785b411889
commit 910314a099
20 changed files with 683 additions and 353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/ui-config.json
View File

@ -5,7 +5,7 @@
"thumbnails.url": "https://nitro.nitrots.co/camera/thumbnail/%thumbnail%.png", "thumbnails.url": "https://nitro.nitrots.co/camera/thumbnail/%thumbnail%.png",
"url.prefix": "http://localhost:3000", "url.prefix": "http://localhost:3000",
"floorplan.tile.url": "${asset.url}/floorplan-editor/tiles.json", "floorplan.tile.url": "${asset.url}/floorplan-editor/tiles.json",
"habbopages.url": "http://localhost:3000/", "habbopages.url": "https://swf.nitrots.co/gamedata/habbopages/",
"chat.viewer.height.percentage": 0.40, "chat.viewer.height.percentage": 0.40,
"widget.dimmer.colorwheel": false, "widget.dimmer.colorwheel": false,
"hotelview": { "hotelview": {
@ -47,6 +47,15 @@
5, 5,
101 101
], ],
"hc.center": {
"benefits.info": true,
"payday.info": true,
"gift.info": true,
"benefits.habbopage": "habboclub",
"payday.habbopage": "hcpayday",
"catalog.buy": "habbo_club",
"catalog.gifts": "club_gifts"
},
"currency.display.number.short": false, "currency.display.number.short": false,
"currency.asset.icon.url": "${images.url}/wallet/%type%.png", "currency.asset.icon.url": "${images.url}/wallet/%type%.png",
"catalog.asset.url": "${image.library.url}catalogue", "catalog.asset.url": "${image.library.url}catalogue",

BIN
src/assets/images/hc-center/benefits.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/images/hc-center/clock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 267 B

BIN
src/assets/images/hc-center/hc_logo.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/images/hc-center/payday.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 721 B

210
src/assets/styles/bootstrap/_nav.scss
View File

@ -4,34 +4,37 @@
// `<nav>`s, `<ul>`s or `<ol>`s. // `<nav>`s, `<ul>`s or `<ol>`s.
.nav { .nav {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
list-style: none; list-style: none;
} }
.nav-link { .nav-link {
display: block; display: block;
padding: $nav-link-padding-y $nav-link-padding-x; padding: $nav-link-padding-y $nav-link-padding-x;
@include font-size($nav-link-font-size); @include font-size($nav-link-font-size);
font-weight: $nav-link-font-weight; font-weight: $nav-link-font-weight;
color: $nav-link-color; color: $nav-link-color;
text-decoration: if($link-decoration == none, null, none); text-decoration: if($link-decoration == none, null, none);
@include transition($nav-link-transition); @include transition($nav-link-transition);
&:hover, display: flex;
&:focus { align-items: center;
color: $nav-link-hover-color;
text-decoration: if($link-hover-decoration == underline, none, null);
}
// Disabled state lightens text &:hover,
&.disabled { &:focus {
color: $nav-link-disabled-color; color: $nav-link-hover-color;
pointer-events: none; text-decoration: if($link-hover-decoration == underline, none, null);
cursor: default; }
}
// Disabled state lightens text
&.disabled {
color: $nav-link-disabled-color;
pointer-events: none;
cursor: default;
}
} }
// //
@ -39,122 +42,119 @@
// //
.nav-tabs { .nav-tabs {
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
.nav-link { .nav-link {
position: relative; position: relative;
margin-bottom: -$nav-tabs-border-width; margin-bottom: -$nav-tabs-border-width;
background-color: $nav-tabs-link-bg; background-color: $nav-tabs-link-bg;
border: $nav-tabs-border-width solid $nav-tabs-border-color; border: $nav-tabs-border-width solid $nav-tabs-border-color;
@include border-top-radius($nav-tabs-border-radius); @include border-top-radius($nav-tabs-border-radius);
&.active { &.active {
&:before { &:before {
background: #FFFFFF; background: #ffffff;
} }
}
&:before {
content: "";
position: absolute;
width: 93%;
height: 3px;
border-radius: $border-radius;
top: 1.5px;
left: 0;
right: 0;
margin: auto;
background: #c2c9d1;
z-index: 1;
}
&:hover,
&:focus {
border-color: $nav-tabs-link-hover-border-color;
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
isolation: isolate;
}
&.disabled {
color: $nav-link-disabled-color;
background-color: transparent;
border-color: transparent;
}
} }
&:before { .nav-link.active,
content: ""; .nav-item.show .nav-link {
position: absolute; color: $nav-tabs-link-active-color;
width: 93%; background-color: $nav-tabs-link-active-bg;
height: 3px; border-color: $nav-tabs-link-active-border-color;
border-radius: $border-radius;
top: 1.5px;
left: 0;
right: 0;
margin: auto;
background: #C2C9D1;
z-index: 1;
} }
&:hover, .dropdown-menu {
&:focus { // Make dropdown border overlap tab border
border-color: $nav-tabs-link-hover-border-color; margin-top: -$nav-tabs-border-width;
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link // Remove the top rounded corners here since there is a hard edge above the menu
isolation: isolate; @include border-top-radius(0);
} }
&.disabled {
color: $nav-link-disabled-color;
background-color: transparent;
border-color: transparent;
}
}
.nav-link.active,
.nav-item.show .nav-link {
color: $nav-tabs-link-active-color;
background-color: $nav-tabs-link-active-bg;
border-color: $nav-tabs-link-active-border-color;
}
.dropdown-menu {
// Make dropdown border overlap tab border
margin-top: -$nav-tabs-border-width;
// Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0);
}
} }
// //
// Pills // Pills
// //
.nav-pills { .nav-pills {
.nav-link { .nav-link {
background: none; background: none;
border: 0; border: 0;
@include border-radius($nav-pills-border-radius); @include border-radius($nav-pills-border-radius);
} }
.nav-link.active, .nav-link.active,
.show > .nav-link { .show > .nav-link {
color: $nav-pills-link-active-color; color: $nav-pills-link-active-color;
@include gradient-bg($nav-pills-link-active-bg); @include gradient-bg($nav-pills-link-active-bg);
} }
} }
// //
// Justified variants // Justified variants
// //
.nav-fill { .nav-fill {
> .nav-link, > .nav-link,
.nav-item { .nav-item {
flex: 1 1 auto; flex: 1 1 auto;
text-align: center; text-align: center;
} }
} }
.nav-justified { .nav-justified {
> .nav-link, > .nav-link,
.nav-item { .nav-item {
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
text-align: center; text-align: center;
} }
} }
.nav-fill, .nav-fill,
.nav-justified { .nav-justified {
.nav-item .nav-link { .nav-item .nav-link {
width: 100%; // Make sure button will grow width: 100%; // Make sure button will grow
} }
} }
// Tabbable tabs // Tabbable tabs
// //
// Hide tabbable panes to start, show them when `.active` // Hide tabbable panes to start, show them when `.active`
.tab-content { .tab-content {
> .tab-pane { > .tab-pane {
display: none; display: none;
} }
> .active { > .active {
display: block; display: block;
} }
} }

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

@ -1,6 +1,5 @@
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
// Reboot // Reboot
// //
// Normalization of HTML elements, manually forked from Normalize.css to remove // Normalization of HTML elements, manually forked from Normalize.css to remove
@ -8,7 +7,6 @@
// //
// Normalize is licensed MIT. https://github.com/necolas/normalize.css // Normalize is licensed MIT. https://github.com/necolas/normalize.css
// Document // Document
// //
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
@ -16,27 +14,26 @@
*, *,
*::before, *::before,
*::after { *::after {
box-sizing: border-box; line-height: normal;
box-sizing: border-box;
} }
// Root // Root
// //
// Ability to the value of the root font sizes, affecting the value of `rem`. // Ability to the value of the root font sizes, affecting the value of `rem`.
// null by default, thus nothing is generated. // null by default, thus nothing is generated.
:root { :root {
@if $font-size-root != null { @if $font-size-root != null {
font-size: var(--#{$variable-prefix}-root-font-size); font-size: var(--#{$variable-prefix}-root-font-size);
}
@if $enable-smooth-scroll {
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
} }
}
}
@if $enable-smooth-scroll {
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
}
}
// Body // Body
// //
@ -47,38 +44,36 @@
// scss-docs-start reboot-body-rules // scss-docs-start reboot-body-rules
body { body {
margin: 0; // 1 margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family); font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size)); @include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight); font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height); line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color); color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align); text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2 background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3 -webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4 -webkit-tap-highlight-color: rgba($black, 0); // 4
} }
// scss-docs-end reboot-body-rules // scss-docs-end reboot-body-rules
// Content grouping // Content grouping
// //
// 1. Reset Firefox's gray color // 1. Reset Firefox's gray color
// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field // 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
hr { hr {
margin: $hr-margin-y 0; margin: $hr-margin-y 0;
color: $hr-color; // 1 color: $hr-color; // 1
background-color: currentColor; background-color: currentColor;
border: 0; border: 0;
opacity: $hr-opacity; opacity: $hr-opacity;
} }
hr:not([size]) { hr:not([size]) {
height: $hr-height; // 2 height: $hr-height; // 2
} }
// Typography // Typography
// //
// 1. Remove top margins from headings // 1. Remove top margins from headings
@ -86,57 +81,55 @@ hr:not([size]) {
// margin for easier control within type scales as it avoids margin collapsing. // margin for easier control within type scales as it avoids margin collapsing.
%heading { %heading {
margin-top: 0; // 1 margin-top: 0; // 1
margin-bottom: $headings-margin-bottom; margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family; font-family: $headings-font-family;
font-style: $headings-font-style; font-style: $headings-font-style;
font-weight: $headings-font-weight; font-weight: $headings-font-weight;
line-height: $headings-line-height; line-height: $headings-line-height;
color: $headings-color; color: $headings-color;
} }
h1 { h1 {
@extend %heading; @extend %heading;
@include font-size($h1-font-size); @include font-size($h1-font-size);
} }
h2 { h2 {
@extend %heading; @extend %heading;
@include font-size($h2-font-size); @include font-size($h2-font-size);
} }
h3 { h3 {
@extend %heading; @extend %heading;
@include font-size($h3-font-size); @include font-size($h3-font-size);
} }
h4 { h4 {
@extend %heading; @extend %heading;
@include font-size($h4-font-size); @include font-size($h4-font-size);
} }
h5 { h5 {
@extend %heading; @extend %heading;
@include font-size($h5-font-size); @include font-size($h5-font-size);
} }
h6 { h6 {
@extend %heading; @extend %heading;
@include font-size($h6-font-size); @include font-size($h6-font-size);
} }
// Reset margins on paragraphs // Reset margins on paragraphs
// //
// Similarly, the top margin on `<p>`s get reset. However, we also reset the // Similarly, the top margin on `<p>`s get reset. However, we also reset the
// bottom margin to use `rem` units instead of `em`. // bottom margin to use `rem` units instead of `em`.
p { p {
margin-top: 0; margin-top: 0;
margin-bottom: $paragraph-margin-bottom; margin-bottom: $paragraph-margin-bottom;
} }
// Abbreviations // Abbreviations
// //
// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin // 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
@ -145,89 +138,83 @@ p {
// 4. Prevent the text-decoration to be skipped. // 4. Prevent the text-decoration to be skipped.
abbr[title], abbr[title],
abbr[data-bs-original-title] { // 1 abbr[data-bs-original-title] {
text-decoration: underline dotted; // 2 // 1
cursor: help; // 3 text-decoration: underline dotted; // 2
text-decoration-skip-ink: none; // 4 cursor: help; // 3
text-decoration-skip-ink: none; // 4
} }
// Address // Address
address { address {
margin-bottom: 1rem; margin-bottom: 1rem;
font-style: normal; font-style: normal;
line-height: inherit; line-height: inherit;
} }
// Lists // Lists
ol, ol,
ul { ul {
padding-left: 2rem; padding-left: 2rem;
} }
ol, ol,
ul, ul,
dl { dl {
margin-top: 0; margin-top: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
ol ol, ol ol,
ul ul, ul ul,
ol ul, ol ul,
ul ol { ul ol {
margin-bottom: 0; margin-bottom: 0;
} }
dt { dt {
font-weight: $dt-font-weight; font-weight: $dt-font-weight;
} }
// 1. Undo browser default // 1. Undo browser default
dd { dd {
margin-bottom: .5rem; margin-bottom: 0.5rem;
margin-left: 0; // 1 margin-left: 0; // 1
} }
// Blockquote // Blockquote
blockquote { blockquote {
margin: 0 0 1rem; margin: 0 0 1rem;
} }
// Strong // Strong
// //
// Add the correct font weight in Chrome, Edge, and Safari // Add the correct font weight in Chrome, Edge, and Safari
b, b,
strong { strong {
font-weight: $font-weight-bolder; font-weight: $font-weight-bolder;
} }
// Small // Small
// //
// Add the correct font size in all browsers // Add the correct font size in all browsers
small { small {
@include font-size($small-font-size); @include font-size($small-font-size);
} }
// Mark // Mark
mark { mark {
padding: $mark-padding; padding: $mark-padding;
background-color: $mark-bg; background-color: $mark-bg;
} }
// Sub and Sup // Sub and Sup
// //
// Prevent `sub` and `sup` elements from affecting the line height in // Prevent `sub` and `sup` elements from affecting the line height in
@ -235,26 +222,29 @@ mark {
sub, sub,
sup { sup {
position: relative; position: relative;
@include font-size($sub-sup-font-size); @include font-size($sub-sup-font-size);
line-height: 0; line-height: 0;
vertical-align: baseline; vertical-align: baseline;
} }
sub { bottom: -.25em; } sub {
sup { top: -.5em; } bottom: -0.25em;
}
sup {
top: -0.5em;
}
// Links // Links
a { a {
color: $link-color; color: $link-color;
text-decoration: $link-decoration; text-decoration: $link-decoration;
&:hover { &:hover {
color: $link-hover-color; color: $link-hover-color;
text-decoration: $link-hover-decoration; text-decoration: $link-hover-decoration;
} }
} }
// And undo these styles for placeholder links/named anchors (without href). // And undo these styles for placeholder links/named anchors (without href).
@ -263,24 +253,25 @@ a {
// See https://github.com/twbs/bootstrap/issues/19402 // See https://github.com/twbs/bootstrap/issues/19402
a:not([href]):not([class]) { a:not([href]):not([class]) {
&, &,
&:hover { &:hover {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
} }
// Code // Code
pre, pre,
code, code,
kbd, kbd,
samp { samp {
font-family: $font-family-code; font-family: $font-family-code;
@include font-size(1em); // Correct the odd `em` font sizing in all browsers. @include font-size(
direction: ltr #{"/* rtl:ignore */"}; 1em
unicode-bidi: bidi-override; ); // Correct the odd `em` font sizing in all browsers.
direction: ltr #{"/* rtl:ignore */"};
unicode-bidi: bidi-override;
} }
// 1. Remove browser default top margin // 1. Remove browser default top margin
@ -288,78 +279,75 @@ samp {
// 3. Don't allow content to break outside // 3. Don't allow content to break outside
pre { pre {
display: block; display: block;
margin-top: 0; // 1 margin-top: 0; // 1
margin-bottom: 1rem; // 2 margin-bottom: 1rem; // 2
overflow: auto; // 3 overflow: auto; // 3
@include font-size($code-font-size); @include font-size($code-font-size);
color: $pre-color; color: $pre-color;
// Account for some code outputs that place code tags in pre tags // Account for some code outputs that place code tags in pre tags
code { code {
@include font-size(inherit); @include font-size(inherit);
color: inherit; color: inherit;
word-break: normal; word-break: normal;
} }
} }
code { code {
@include font-size($code-font-size); @include font-size($code-font-size);
color: $code-color; color: $code-color;
word-wrap: break-word; word-wrap: break-word;
// Streamline the style when inside anchors to avoid broken underline and more // Streamline the style when inside anchors to avoid broken underline and more
a > & { a > & {
color: inherit; color: inherit;
} }
} }
kbd { kbd {
padding: $kbd-padding-y $kbd-padding-x; padding: $kbd-padding-y $kbd-padding-x;
@include font-size($kbd-font-size); @include font-size($kbd-font-size);
color: $kbd-color; color: $kbd-color;
background-color: $kbd-bg; background-color: $kbd-bg;
@include border-radius($border-radius-sm); @include border-radius($border-radius-sm);
kbd { kbd {
padding: 0; padding: 0;
@include font-size(1em); @include font-size(1em);
font-weight: $nested-kbd-font-weight; font-weight: $nested-kbd-font-weight;
} }
} }
// Figures // Figures
// //
// Apply a consistent margin strategy (matches our type styles). // Apply a consistent margin strategy (matches our type styles).
figure { figure {
margin: 0 0 1rem; margin: 0 0 1rem;
} }
// Images and content // Images and content
img, img,
svg { svg {
vertical-align: middle; vertical-align: middle;
} }
// Tables // Tables
// //
// Prevent double borders // Prevent double borders
table { table {
caption-side: bottom; caption-side: bottom;
border-collapse: collapse; border-collapse: collapse;
} }
caption { caption {
padding-top: $table-cell-padding-y; padding-top: $table-cell-padding-y;
padding-bottom: $table-cell-padding-y; padding-bottom: $table-cell-padding-y;
color: $table-caption-color; color: $table-caption-color;
text-align: left; text-align: left;
} }
// 1. Removes font-weight bold by inheriting // 1. Removes font-weight bold by inheriting
@ -367,9 +355,9 @@ caption {
// 3. Fix alignment for Safari // 3. Fix alignment for Safari
th { th {
font-weight: $table-th-font-weight; // 1 font-weight: $table-th-font-weight; // 1
text-align: inherit; // 2 text-align: inherit; // 2
text-align: -webkit-match-parent; // 3 text-align: -webkit-match-parent; // 3
} }
thead, thead,
@ -378,26 +366,25 @@ tfoot,
tr, tr,
td, td,
th { th {
border-color: inherit; border-color: inherit;
border-style: solid; border-style: solid;
border-width: 0; border-width: 0;
} }
// Forms // Forms
// //
// 1. Allow labels to use `margin` for spacing. // 1. Allow labels to use `margin` for spacing.
label { label {
display: inline-block; // 1 display: inline-block; // 1
} }
// Remove the default `border-radius` that macOS Chrome adds. // Remove the default `border-radius` that macOS Chrome adds.
// See https://github.com/twbs/bootstrap/issues/24093 // See https://github.com/twbs/bootstrap/issues/24093
button { button {
// stylelint-disable-next-line property-disallowed-list // stylelint-disable-next-line property-disallowed-list
border-radius: 0; border-radius: 0;
} }
// Explicitly remove focus outline in Chromium when it shouldn't be // Explicitly remove focus outline in Chromium when it shouldn't be
@ -406,7 +393,7 @@ button {
// confused and applies its very visible two-tone outline anyway. // confused and applies its very visible two-tone outline anyway.
button:focus:not(:focus-visible) { button:focus:not(:focus-visible) {
outline: 0; outline: 0;
} }
// 1. Remove the margin in Firefox and Safari // 1. Remove the margin in Firefox and Safari
@ -416,40 +403,40 @@ button,
select, select,
optgroup, optgroup,
textarea { textarea {
margin: 0; // 1 margin: 0; // 1
font-family: inherit; font-family: inherit;
@include font-size(inherit); @include font-size(inherit);
line-height: inherit; line-height: inherit;
} }
// Remove the inheritance of text transform in Firefox // Remove the inheritance of text transform in Firefox
button, button,
select { select {
text-transform: none; text-transform: none;
} }
// Set the cursor for non-`<button>` buttons // Set the cursor for non-`<button>` buttons
// //
// Details at https://github.com/twbs/bootstrap/pull/30562 // Details at https://github.com/twbs/bootstrap/pull/30562
[role="button"] { [role="button"] {
cursor: pointer; cursor: pointer;
} }
select { select {
// Remove the inheritance of word-wrap in Safari. // Remove the inheritance of word-wrap in Safari.
// See https://github.com/twbs/bootstrap/issues/24990 // See https://github.com/twbs/bootstrap/issues/24990
word-wrap: normal; word-wrap: normal;
// Undo the opacity change from Chrome // Undo the opacity change from Chrome
&:disabled { &:disabled {
opacity: 1; opacity: 1;
} }
} }
// Remove the dropdown arrow in Chrome from inputs built with datalists. // Remove the dropdown arrow in Chrome from inputs built with datalists.
// See https://stackoverflow.com/a/54997118 // See https://stackoverflow.com/a/54997118
[list]::-webkit-calendar-picker-indicator { [list]::-webkit-calendar-picker-indicator {
display: none; display: none;
} }
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
@ -461,26 +448,26 @@ button,
[type="button"], // 1 [type="button"], // 1
[type="reset"], [type="reset"],
[type="submit"] { [type="submit"] {
-webkit-appearance: button; // 2 -webkit-appearance: button; // 2
@if $enable-button-pointers { @if $enable-button-pointers {
&:not(:disabled) { &:not(:disabled) {
cursor: pointer; // 3 cursor: pointer; // 3
}
} }
}
} }
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize. // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
::-moz-focus-inner { ::-moz-focus-inner {
padding: 0; padding: 0;
border-style: none; border-style: none;
} }
// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers. // 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
textarea { textarea {
resize: vertical; // 1 resize: vertical; // 1
} }
// 1. Browsers set a default `min-width: min-content;` on fieldsets, // 1. Browsers set a default `min-width: min-content;` on fieldsets,
@ -491,10 +478,10 @@ textarea {
// 2. Reset the default outline behavior of fieldsets so they don't affect page layout. // 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
fieldset { fieldset {
min-width: 0; // 1 min-width: 0; // 1
padding: 0; // 2 padding: 0; // 2
margin: 0; // 2 margin: 0; // 2
border: 0; // 2 border: 0; // 2
} }
// 1. By using `float: left`, the legend will behave like a block element. // 1. By using `float: left`, the legend will behave like a block element.
@ -503,17 +490,17 @@ fieldset {
// See https://github.com/twbs/bootstrap/issues/29712 // See https://github.com/twbs/bootstrap/issues/29712
legend { legend {
float: left; // 1 float: left; // 1
width: 100%; width: 100%;
padding: 0; padding: 0;
margin-bottom: $legend-margin-bottom; margin-bottom: $legend-margin-bottom;
@include font-size($legend-font-size); @include font-size($legend-font-size);
font-weight: $legend-font-weight; font-weight: $legend-font-weight;
line-height: inherit; line-height: inherit;
+ * { + * {
clear: left; // 2 clear: left; // 2
} }
} }
// Fix height of inputs with a type of datetime-local, date, month, week, or time // Fix height of inputs with a type of datetime-local, date, month, week, or time
@ -526,11 +513,11 @@ legend {
::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field { ::-webkit-datetime-edit-year-field {
padding: 0; padding: 0;
} }
::-webkit-inner-spin-button { ::-webkit-inner-spin-button {
height: auto; height: auto;
} }
// 1. Correct the outline style in Safari. // 1. Correct the outline style in Safari.
@ -540,8 +527,8 @@ legend {
// https://github.com/twbs/bootstrap/issues/11586. // https://github.com/twbs/bootstrap/issues/11586.
[type="search"] { [type="search"] {
outline-offset: -2px; // 1 outline-offset: -2px; // 1
-webkit-appearance: textfield; // 2 -webkit-appearance: textfield; // 2
} }
// 1. A few input types should stay LTR // 1. A few input types should stay LTR
@ -561,40 +548,39 @@ legend {
// Remove the inner padding in Chrome and Safari on macOS. // Remove the inner padding in Chrome and Safari on macOS.
::-webkit-search-decoration { ::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
// Remove padding around color pickers in webkit browsers // Remove padding around color pickers in webkit browsers
::-webkit-color-swatch-wrapper { ::-webkit-color-swatch-wrapper {
padding: 0; padding: 0;
} }
// Inherit font family and line height for file input buttons // Inherit font family and line height for file input buttons
::file-selector-button { ::file-selector-button {
font: inherit; font: inherit;
} }
// 1. Change font properties to `inherit` // 1. Change font properties to `inherit`
// 2. Correct the inability to style clickable types in iOS and Safari. // 2. Correct the inability to style clickable types in iOS and Safari.
::-webkit-file-upload-button { ::-webkit-file-upload-button {
font: inherit; // 1 font: inherit; // 1
-webkit-appearance: button; // 2 -webkit-appearance: button; // 2
} }
// Correct element displays // Correct element displays
output { output {
display: inline-block; display: inline-block;
} }
// Remove border from iframe // Remove border from iframe
iframe { iframe {
border: 0; border: 0;
} }
// Summary // Summary
@ -602,24 +588,22 @@ iframe {
// 1. Add the correct display in all browsers // 1. Add the correct display in all browsers
summary { summary {
display: list-item; // 1 display: list-item; // 1
cursor: pointer; cursor: pointer;
} }
// Progress // Progress
// //
// Add the correct vertical alignment in Chrome, Firefox, and Opera. // Add the correct vertical alignment in Chrome, Firefox, and Opera.
progress { progress {
vertical-align: baseline; vertical-align: baseline;
} }
// Hidden attribute // Hidden attribute
// //
// Always hide an element with the `hidden` HTML attribute. // Always hide an element with the `hidden` HTML attribute.
[hidden] { [hidden] {
display: none !important; display: none !important;
} }

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

@ -390,7 +390,7 @@ $enable-cssgrid: true !default;
$enable-button-pointers: true !default; $enable-button-pointers: true !default;
$enable-rfs: true !default; $enable-rfs: true !default;
$enable-validation-icons: true !default; $enable-validation-icons: true !default;
$enable-negative-margins: false !default; $enable-negative-margins: true !default;
$enable-deprecation-messages: true !default; $enable-deprecation-messages: true !default;
$enable-important-utilities: true !default; $enable-important-utilities: true !default;

6
src/events/hc-center/HcCenterEvent.ts Normal file
View File

@ -0,0 +1,6 @@
import { NitroEvent } from '@nitrots/nitro-renderer';
export class HcCenterEvent extends NitroEvent
{
public static TOGGLE_HC_CENTER: string = 'HCC_TOGGLE';
}

1
src/layout/card/NitroCardView.scss
View File

@ -66,6 +66,7 @@ $nitro-card-tabs-height: 33px;
.nitro-card { .nitro-card {
width: 100%; width: 100%;
height: 100%;
max-width: 100%; max-width: 100%;
max-height: calc(100% - #{$toolbar-height}); max-height: calc(100% - #{$toolbar-height});
margin: 0; margin: 0;

53
src/views/Styles.scss
View File

@ -1,26 +1,27 @@
@import './shared/Shared'; @import "./shared/Shared";
@import './avatar-editor/AvatarEditorView'; @import "./avatar-editor/AvatarEditorView";
@import './camera/CameraWidgetView'; @import "./camera/CameraWidgetView";
@import './catalog/CatalogView'; @import "./catalog/CatalogView";
@import './friends/FriendsView'; @import "./friends/FriendsView";
@import './groups/GroupView'; @import "./groups/GroupView";
@import './hotel-view/HotelView'; @import "./hotel-view/HotelView";
@import './inventory/InventoryView'; @import "./inventory/InventoryView";
@import './loading/LoadingView'; @import "./loading/LoadingView";
@import './main/MainView'; @import "./main/MainView";
@import './navigator/NavigatorView'; @import "./navigator/NavigatorView";
@import './notification-center/NotificationCenterView'; @import "./notification-center/NotificationCenterView";
@import './purse/PurseView'; @import "./purse/PurseView";
@import './right-side/RightSideView'; @import "./right-side/RightSideView";
@import './room/RoomView'; @import "./room/RoomView";
@import './room-host/RoomHostView'; @import "./room-host/RoomHostView";
@import './toolbar/ToolbarView'; @import "./toolbar/ToolbarView";
@import './wired/WiredView'; @import "./wired/WiredView";
@import './mod-tools/ModToolsView'; @import "./mod-tools/ModToolsView";
@import './achievements/AchievementsView'; @import "./achievements/AchievementsView";
@import './user-settings/UserSettingsView'; @import "./user-settings/UserSettingsView";
@import './user-profile/UserProfileVew'; @import "./user-profile/UserProfileVew";
@import './chat-history/ChatHistoryView'; @import "./chat-history/ChatHistoryView";
@import './help/HelpView'; @import "./help/HelpView";
@import './floorplan-editor/FloorplanEditorView'; @import "./floorplan-editor/FloorplanEditorView";
@import './nitropedia/NitropediaView'; @import "./nitropedia/NitropediaView";
@import "./hc-center/HcCenterView.scss";

5
src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx
View File

@ -169,13 +169,14 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutVipBuyViewProps> = props =
</div> </div>
</NitroCardGridItemView> </NitroCardGridItemView>
); );
}) } })}
<div className="mt-auto text-black">{ LocalizeText('catalog.vip.buy.hccenter') }</div>
</NitroCardGridView> </NitroCardGridView>
</NitroLayoutGridColumn> </NitroLayoutGridColumn>
<NitroLayoutGridColumn size={ 5 }> <NitroLayoutGridColumn size={ 5 }>
<NitroLayoutFlexColumn className="justify-content-center align-items-center h-100" overflow="hidden" gap={ 2 }> <NitroLayoutFlexColumn className="justify-content-center align-items-center h-100" overflow="hidden" gap={ 2 }>
{ GetCatalogPageImage(pageParser, 1) && <img className="" alt="" src={ GetCatalogPageImage(pageParser, 1) } /> } { GetCatalogPageImage(pageParser, 1) && <img className="" alt="" src={ GetCatalogPageImage(pageParser, 1) } /> }
<NitroLayoutBase className="text-center text-black" overflow="auto" dangerouslySetInnerHTML={ { __html: getSubscriptionDetails } } /> <NitroLayoutBase className="text-center text-black" overflow="auto" dangerouslySetInnerHTML={{ __html: getSubscriptionDetails }} />
</NitroLayoutFlexColumn> </NitroLayoutFlexColumn>
{ pendingOffer && <div className="mt-auto w-100 text-black"> { pendingOffer && <div className="mt-auto w-100 text-black">
<div className="d-flex gap-2 mb-2 align-items-center"> <div className="d-flex gap-2 mb-2 align-items-center">

44
src/views/hc-center/HcCenterView.scss Normal file
View File

@ -0,0 +1,44 @@
.nitro-hc-center {
width: 430px;
resize: none;
.hc-logo {
width: 213px;
height: 37px;
background-image: url("../../assets/images/hc-center/hc_logo.gif");
}
.payday-special {
height: 128px;
}
.payday {
width: 222px;
height: 150px;
background-image: url("../../assets/images/hc-center/payday.png");
z-index: 3;
color: #6b3502;
}
.clock {
width: 24px;
height: 24px;
background-image: url("../../assets/images/hc-center/clock.png");
}
.streak-info {
min-height: 64px;
line-height: 16px;
}
.habbo-avatar {
z-index: 4;
}
.benefits {
background-image: url("../../assets/images/hc-center/benefits.png");
background-position: right top;
background-repeat: no-repeat;
height: 100%;
}
}

244
src/views/hc-center/HcCenterView.tsx Normal file
View File

@ -0,0 +1,244 @@
import { ClubGiftInfoEvent, FriendlyTime, GetClubGiftInfo, RequestBadgesComposer, ScrKickbackData, ScrSendKickbackInfoMessageEvent, UserInfoEvent, UserSubscriptionEvent } from '@nitrots/nitro-renderer';
import { BadgesEvent, FigureUpdateEvent } from '@nitrots/nitro-renderer/src';
import { ScrGetKickbackInfoMessageComposer } from '@nitrots/nitro-renderer/src/nitro/communication/messages/outgoing/user/ScrGetKickbackInfoMessageComposer';
import { FC, useCallback, useEffect, useState } from 'react';
import { OverlayTrigger, Popover } from 'react-bootstrap';
import { CreateLinkEvent, GetConfiguration, LocalizeText } from '../../api';
import { HcCenterEvent } from '../../events/hc-center/HcCenterEvent';
import { CreateMessageHook, SendMessageHook, useUiEvent } from '../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
import { AvatarImageView } from '../shared/avatar-image/AvatarImageView';
import { BadgeImageView } from '../shared/badge-image/BadgeImageView';
import { BadgeResolver } from './util/BadgeResolver';
import { ClubStatus } from './util/ClubStatus';
export const HcCenterView: FC<{}> = props =>
{
const [isVisible, setIsVisible] = useState(false);
const [userFigure, setUserFigure] = useState<string>(null);
const [kickbackData, setKickbackData] = useState<ScrKickbackData>(null);
const [clubDays, setClubDays] = useState(0);
const [pastClubDays, setPastClubDays] = useState(0);
const [clubPeriods, setPastClubPeriods] = useState(0);
const [minsTillExpire, setMinsTillExpire] = useState(0);
const [clubStatus, setClubStatus] = useState(ClubStatus.NONE);
const [unclaimedGifts, setUnclaimedGifts] = useState(0);
const [badgeCode, setBadgeCode] = useState(BadgeResolver.default_badge);
const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
{
const parser = event.getParser();
setUserFigure(parser.userInfo.figure);
}, []);
const onUserFigureEvent = useCallback((event: FigureUpdateEvent) =>
{
const parser = event.getParser();
setUserFigure(parser.figure);
}, []);
CreateMessageHook(UserInfoEvent, onUserInfoEvent);
CreateMessageHook(FigureUpdateEvent, onUserFigureEvent);
const onHcCenterEvent = useCallback((event: HcCenterEvent) =>
{
switch(event.type)
{
case HcCenterEvent.TOGGLE_HC_CENTER:
setIsVisible(!isVisible);
break;
}
}, [isVisible]);
useUiEvent(HcCenterEvent.TOGGLE_HC_CENTER, onHcCenterEvent);
const onClubGiftInfoEvent = useCallback((event: ClubGiftInfoEvent) =>
{
const parser = event.getParser();
setUnclaimedGifts(parser.giftsAvailable);
}, []);
const onScrSendKickbackInfo = useCallback((event: ScrSendKickbackInfoMessageEvent) =>
{
const parser = event.getParser();
setKickbackData(parser.data)
}, []);
const onBadges = useCallback((event: BadgesEvent) =>
{
const parser = event.getParser();
setBadgeCode(BadgeResolver.getClubBadge(parser.getAllBadgeCodes()));
}, [])
CreateMessageHook(ClubGiftInfoEvent, onClubGiftInfoEvent);
CreateMessageHook(ScrSendKickbackInfoMessageEvent, onScrSendKickbackInfo);
CreateMessageHook(BadgesEvent, onBadges);
useEffect(() =>
{
SendMessageHook(new GetClubGiftInfo());
SendMessageHook(new ScrGetKickbackInfoMessageComposer());
SendMessageHook(new RequestBadgesComposer());
}, []);
const onUserSubscriptionEvent = useCallback((event: UserSubscriptionEvent) =>
{
const parser = event.getParser();
const productName = parser.productName;
if((productName !== 'club_habbo') && (productName !== 'habbo_club')) return;
setClubDays(Math.max(0, parser.daysToPeriodEnd));
setPastClubPeriods(Math.max(0, parser.periodsSubscribedAhead));
setPastClubDays(Math.max(0, parser.pastClubDays));
setMinsTillExpire(Math.max(0, parser.minutesUntilExpiration));
}, []);
useEffect(() =>
{
if(clubDays > 0) return setClubStatus(ClubStatus.ACTIVE)
if(pastClubDays > 0) return setClubStatus(ClubStatus.EXPIRED);
}, [clubDays, pastClubDays]);
CreateMessageHook(UserSubscriptionEvent, onUserSubscriptionEvent);
const getClubText = useCallback(() =>
{
const totalDays = ((clubPeriods * 31) + clubDays);
const minutesUntilExpiration = minsTillExpire;
if(clubStatus !== ClubStatus.ACTIVE)
{
return LocalizeText('purse.clubdays.zero.amount.text');
}
else if((minutesUntilExpiration > -1) && (minutesUntilExpiration < (60 * 24)))
{
return FriendlyTime.shortFormat(minutesUntilExpiration * 60);
}
else
{
return FriendlyTime.shortFormat(totalDays * 86400);
}
}, [clubStatus, clubDays, clubPeriods, minsTillExpire]);
const getInfoText = useCallback(() =>
{
switch(clubStatus)
{
case ClubStatus.ACTIVE:
return LocalizeText('hccenter.status.' + clubStatus + '.info',
['timeleft', 'joindate', 'streakduration'],
[getClubText(), kickbackData.firstSubscriptionDate, FriendlyTime.shortFormat(kickbackData.currentHcStreak * 86400)]);
case ClubStatus.EXPIRED:
return LocalizeText('hccenter.status.' + clubStatus + '.info', ['joindate'], [kickbackData.firstSubscriptionDate])
default:
return LocalizeText('hccenter.status.' + clubStatus + '.info');
}
}, [clubStatus, kickbackData, getClubText]);
const getHcPaydayTime = useCallback(() =>
{
if(kickbackData.timeUntilPayday < 60) return LocalizeText('hccenter.special.time.soon');
return FriendlyTime.shortFormat(kickbackData.timeUntilPayday * 60);
}, [kickbackData]);
const getHcPaydayAmount = useCallback(() =>
{
return LocalizeText('hccenter.special.sum', ['credits'], [(kickbackData.creditRewardForStreakBonus + kickbackData.creditRewardForMonthlySpent).toString()])
}, [kickbackData])
if(!isVisible) return null;
const popover = (
<Popover id="popover-basic">
<Popover.Body className="text-black py-2 px-3">
<h5>{LocalizeText('hccenter.breakdown.title')}</h5>
<div>{LocalizeText('hccenter.breakdown.creditsspent', ['credits'], [kickbackData.totalCreditsSpent.toString()])}</div>
<div>{LocalizeText('hccenter.breakdown.paydayfactor.percent', ['percent'], [(kickbackData.kickbackPercentage * 100).toString()])}</div>
<div>{LocalizeText('hccenter.breakdown.streakbonus', ['credits'], [kickbackData.creditRewardForStreakBonus.toString()])}</div>
<hr className="w-100 text-black my-1" />
<div>{LocalizeText('hccenter.breakdown.total', ['credits', 'actual'], [getHcPaydayAmount(),
((((kickbackData.kickbackPercentage * kickbackData.totalCreditsSpent) + kickbackData.creditRewardForStreakBonus) * 100) / 100).toString()])}</div>
<div className="btn btn-link text-primary p-0" onClick={() => { CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['payday.habbopage']) }}>{
LocalizeText('hccenter.special.infolink')}
</div>
</Popover.Body>
</Popover>
);
return (
<NitroCardView simple={true} className="nitro-hc-center">
<NitroCardHeaderView headerText={LocalizeText('generic.hccenter')} onCloseClick={() => setIsVisible(false)} />
<div className="bg-muted p-2 position-relative">
<div className="hc-logo mb-2" />
<button className="btn btn-success" onClick={ () => { CreateLinkEvent('catalog/open/' + GetConfiguration('hc.center')['catalog.buy']) } }>
{LocalizeText(clubStatus === ClubStatus.ACTIVE ? 'hccenter.btn.extend' : 'hccenter.btn.buy')}
</button>
<div className="position-absolute end-0 p-4 top-0 habbo-avatar">
<AvatarImageView figure={userFigure} direction={4} scale={2} />
</div>
</div>
<NitroCardContentView>
<div className="d-flex flex-row mb-1">
<BadgeImageView badgeCode={badgeCode} className="align-self-center flex-shrink-0 me-1" />
<div className="w-100 text-black streak-info">
<h6 className="mb-0">{LocalizeText('hccenter.status.' + clubStatus)}</h6>
<div dangerouslySetInnerHTML={{ __html: getInfoText() }} />
</div>
</div>
{GetConfiguration('hc.center')['payday.info'] &&
<div className="d-flex flex-row align-items-center mb-n2">
<div className="rounded-start bg-primary p-2 payday-special mb-1 d-flex flex-column">
<h4 className="mb-1">{LocalizeText('hccenter.special.title')}</h4>
<div>{LocalizeText('hccenter.special.info')}</div>
<div className="btn btn-link text-white p-0 mt-auto align-self-baseline" onClick={() => { CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['payday.habbopage']) }}>{LocalizeText('hccenter.special.infolink')}</div>
</div>
<div className="payday flex-shrink-0 p-2">
<h5 className="mb-2 ms-2">{LocalizeText('hccenter.special.time.title')}</h5>
<div className="d-flex flex-row mb-2">
<div className="clock me-2" />
<h6 className="mb-0 align-self-center">{getHcPaydayTime()}</h6>
</div>
{clubStatus === ClubStatus.ACTIVE &&
<div className="pe-3">
<h5 className="ms-2 mb-1 bolder">{LocalizeText('hccenter.special.amount.title')}</h5>
<div className="d-flex flex-column">
<div className="w-100 text-center ms-4n">{getHcPaydayAmount()}</div>
<OverlayTrigger trigger="hover" placement="left" overlay={popover}>
<div className="btn btn-link align-self-end text-primary">
{LocalizeText('hccenter.breakdown.infolink')}
</div>
</OverlayTrigger>
</div>
</div>
}
</div>
</div>
}
{GetConfiguration('hc.center')['gift.info'] &&
<div className="rounded bg-success p-2 d-flex flex-row mb-0">
<div>
<h4 className="mb-1">{LocalizeText('hccenter.gift.title')}</h4>
<div dangerouslySetInnerHTML={{ __html: unclaimedGifts > 0 ? LocalizeText('hccenter.unclaimedgifts', ['unclaimedgifts'], [unclaimedGifts.toString()]) : LocalizeText('hccenter.gift.info') }}></div>
</div>
<button className="btn btn-primary btn-lg align-self-center ms-auto" onClick={() => { CreateLinkEvent('catalog/open/' + GetConfiguration('hc.center')['catalog.gifts']) }}>{LocalizeText(clubStatus === ClubStatus.ACTIVE ? 'hccenter.btn.gifts.redeem' : 'hccenter.btn.gifts.view')}</button>
</div>
}
{GetConfiguration('hc.center')['benefits.info'] &&
<div className="benefits text-black py-2">
<h5 className="mb-1 text-primary">{LocalizeText('hccenter.general.title')}</h5>
<div className="mb-2" dangerouslySetInnerHTML={{ __html: LocalizeText('hccenter.general.info') }} />
<button className="btn btn-link p-0 text-primary" onClick={() => { CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['benefits.habbopage']) }}>{LocalizeText('hccenter.general.infolink')}</button>
</div>
}
</NitroCardContentView>
</NitroCardView>
);
}

23
src/views/hc-center/util/BadgeResolver.ts Normal file
View File

@ -0,0 +1,23 @@
export class BadgeResolver
{
public static default_badge: string = 'HC1';
public static badges: string[] = ['ACH_VipHC1', 'ACH_VipHC2', 'ACH_VipHC3', 'ACH_VipHC4', 'ACH_VipHC5', 'HC1', 'HC2', 'HC3', 'HC4', 'HC5'];
public static getClubBadge(k: string[]): string
{
var badgeCode: string = null;
this.badges.forEach(badge =>
{
if (k.indexOf(badge) > -1)
{
badgeCode = badge;
}
});
return badgeCode || this.default_badge;
}
}

6
src/views/hc-center/util/ClubStatus.ts Normal file
View File

@ -0,0 +1,6 @@
export class ClubStatus
{
public static ACTIVE: string = 'active';
public static NONE: string = 'none';
public static EXPIRED: string = 'expired';
}

2
src/views/main/MainView.tsx
View File

@ -11,6 +11,7 @@ import { ChatHistoryView } from '../chat-history/ChatHistoryView';
import { FloorplanEditorView } from '../floorplan-editor/FloorplanEditorView'; import { FloorplanEditorView } from '../floorplan-editor/FloorplanEditorView';
import { FriendsView } from '../friends/FriendsView'; import { FriendsView } from '../friends/FriendsView';
import { GroupsView } from '../groups/GroupsView'; import { GroupsView } from '../groups/GroupsView';
import { HcCenterView } from '../hc-center/HcCenterView';
import { HelpView } from '../help/HelpView'; import { HelpView } from '../help/HelpView';
import { HotelView } from '../hotel-view/HotelView'; import { HotelView } from '../hotel-view/HotelView';
import { InventoryView } from '../inventory/InventoryView'; import { InventoryView } from '../inventory/InventoryView';
@ -77,6 +78,7 @@ export const MainView: FC<MainViewProps> = props =>
<HelpView /> <HelpView />
<FloorplanEditorView /> <FloorplanEditorView />
<NitropediaView /> <NitropediaView />
<HcCenterView />
</div> </div>
); );
} }

16
src/views/purse/PurseView.scss
View File

@ -1,21 +1,22 @@
.nitro-purse { .nitro-purse {
background-color: rgba($dark,.95); background-color: rgba($dark, 0.95);
font-size: $font-size-sm; font-size: $font-size-sm;
pointer-events: all; pointer-events: all;
margin-bottom: 5px; margin-bottom: 5px;
padding: 6px 5px; padding: 6px 5px;
box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4); box-shadow: inset 0px 5px lighten(rgba($dark, 0.6), 2.5),
inset 0 -4px darken(rgba($dark, 0.6), 4);
.notification-button { .notification-button {
color:lighten($dark,20); color: lighten($dark, 20);
cursor: pointer; cursor: pointer;
font-size: 0.9rem; font-size: 0.9rem;
pointer-events: all; pointer-events: all;
display: none display: none;
} }
.nitro-purse-hc { .nitro-purse-hc {
background-color: rgba($light,.1); background-color: rgba($light, 0.1);
margin: 0 5px; margin: 0 5px;
} }
@ -29,9 +30,10 @@
} }
&:hover { &:hover {
background-color: rgba($light,.1); background-color: rgba($light, 0.1);
cursor: pointer;
} }
} }
} }
@import './views'; @import "./views";

9
src/views/purse/PurseView.tsx
View File

@ -1,6 +1,7 @@
import { FriendlyTime, HabboClubLevelEnum, UserCurrencyComposer, UserSubscriptionComposer } from '@nitrots/nitro-renderer'; import { FriendlyTime, HabboClubLevelEnum, UserCurrencyComposer, UserSubscriptionComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react'; import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { GetConfiguration, LocalizeText } from '../../api'; import { GetConfiguration, LocalizeText } from '../../api';
import { HcCenterEvent } from '../../events/hc-center/HcCenterEvent';
import { HelpEvent } from '../../events/help/HelpEvent'; import { HelpEvent } from '../../events/help/HelpEvent';
import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent'; import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
import { dispatchUiEvent } from '../../hooks'; import { dispatchUiEvent } from '../../hooks';
@ -30,6 +31,11 @@ export const PurseView: FC<{}> = props =>
dispatchUiEvent(new HelpEvent(HelpEvent.TOGGLE_HELP_CENTER)); dispatchUiEvent(new HelpEvent(HelpEvent.TOGGLE_HELP_CENTER));
}, []); }, []);
const handleHcCenterClick = useCallback(() =>
{
dispatchUiEvent(new HcCenterEvent(HcCenterEvent.TOGGLE_HC_CENTER));
}, []);
const displayedCurrencies = useMemo(() => const displayedCurrencies = useMemo(() =>
{ {
return GetConfiguration<number[]>('system.currency.types', []); return GetConfiguration<number[]>('system.currency.types', []);
@ -139,7 +145,8 @@ export const PurseView: FC<{}> = props =>
</div> </div>
</div> </div>
<div className="col-4 px-0"> <div className="col-4 px-0">
<div className="nitro-purse-hc rounded mx-1 p-1 d-flex flex-column justify-content-center align-items-center h-100"> <div className="nitro-purse-hc nitro-purse-button rounded mx-1 p-1 d-flex flex-column justify-content-center align-items-center h-100"
onClick={ handleHcCenterClick }>
<CurrencyIcon className="flex-shrink-0" type="hc" /> <CurrencyIcon className="flex-shrink-0" type="hc" />
<span>{ getClubText() }</span> <span>{ getClubText() }</span>
</div> </div>

4
src/views/purse/views/index.scss
View File

@ -1,2 +1,2 @@
@import './currency/CurrencyView'; @import "./currency/CurrencyView";
@import './seasonal/SeasonalView'; @import "./seasonal/SeasonalView";