mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-23 03:13:06 +02:00
add hc center - lineheight changes 2
This commit is contained in:
Layne
parent
785b411889
commit
910314a099
@ -5,7 +5,7 @@
|
||||
"thumbnails.url": "https://nitro.nitrots.co/camera/thumbnail/%thumbnail%.png",
|
||||
"url.prefix": "http://localhost:3000",
|
||||
"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,
|
||||
"widget.dimmer.colorwheel": false,
|
||||
"hotelview": {
|
||||
@ -47,6 +47,15 @@
|
||||
5,
|
||||
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.asset.icon.url": "${images.url}/wallet/%type%.png",
|
||||
"catalog.asset.url": "${image.library.url}catalogue",
|
||||
|
||||
BIN
src/assets/images/hc-center/benefits.png
Normal file
BIN
src/assets/images/hc-center/benefits.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/images/hc-center/clock.png
Normal file
BIN
src/assets/images/hc-center/clock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 267 B |
BIN
src/assets/images/hc-center/hc_logo.gif
Normal file
BIN
src/assets/images/hc-center/hc_logo.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/images/hc-center/payday.png
Normal file
BIN
src/assets/images/hc-center/payday.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 721 B |
@ -4,34 +4,37 @@
|
||||
// `<nav>`s, `<ul>`s or `<ol>`s.
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: $nav-link-padding-y $nav-link-padding-x;
|
||||
@include font-size($nav-link-font-size);
|
||||
font-weight: $nav-link-font-weight;
|
||||
color: $nav-link-color;
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
@include transition($nav-link-transition);
|
||||
display: block;
|
||||
padding: $nav-link-padding-y $nav-link-padding-x;
|
||||
@include font-size($nav-link-font-size);
|
||||
font-weight: $nav-link-font-weight;
|
||||
color: $nav-link-color;
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
@include transition($nav-link-transition);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $nav-link-hover-color;
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
// Disabled state lightens text
|
||||
&.disabled {
|
||||
color: $nav-link-disabled-color;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $nav-link-hover-color;
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
}
|
||||
|
||||
// Disabled state lightens text
|
||||
&.disabled {
|
||||
color: $nav-link-disabled-color;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
@ -39,122 +42,119 @@
|
||||
//
|
||||
|
||||
.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 {
|
||||
position: relative;
|
||||
margin-bottom: -$nav-tabs-border-width;
|
||||
background-color: $nav-tabs-link-bg;
|
||||
border: $nav-tabs-border-width solid $nav-tabs-border-color;
|
||||
@include border-top-radius($nav-tabs-border-radius);
|
||||
.nav-link {
|
||||
position: relative;
|
||||
margin-bottom: -$nav-tabs-border-width;
|
||||
background-color: $nav-tabs-link-bg;
|
||||
border: $nav-tabs-border-width solid $nav-tabs-border-color;
|
||||
@include border-top-radius($nav-tabs-border-radius);
|
||||
|
||||
&.active {
|
||||
&:before {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
&.active {
|
||||
&:before {
|
||||
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 {
|
||||
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;
|
||||
.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;
|
||||
}
|
||||
|
||||
&: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;
|
||||
.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);
|
||||
}
|
||||
|
||||
&.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
|
||||
//
|
||||
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
background: none;
|
||||
border: 0;
|
||||
@include border-radius($nav-pills-border-radius);
|
||||
}
|
||||
.nav-link {
|
||||
background: none;
|
||||
border: 0;
|
||||
@include border-radius($nav-pills-border-radius);
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.show > .nav-link {
|
||||
color: $nav-pills-link-active-color;
|
||||
@include gradient-bg($nav-pills-link-active-bg);
|
||||
}
|
||||
.nav-link.active,
|
||||
.show > .nav-link {
|
||||
color: $nav-pills-link-active-color;
|
||||
@include gradient-bg($nav-pills-link-active-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Justified variants
|
||||
//
|
||||
|
||||
.nav-fill {
|
||||
> .nav-link,
|
||||
.nav-item {
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
}
|
||||
> .nav-link,
|
||||
.nav-item {
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-justified {
|
||||
> .nav-link,
|
||||
.nav-item {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
> .nav-link,
|
||||
.nav-item {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-fill,
|
||||
.nav-justified {
|
||||
.nav-item .nav-link {
|
||||
width: 100%; // Make sure button will grow
|
||||
}
|
||||
.nav-item .nav-link {
|
||||
width: 100%; // Make sure button will grow
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tabbable tabs
|
||||
//
|
||||
// Hide tabbable panes to start, show them when `.active`
|
||||
|
||||
.tab-content {
|
||||
> .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
> .active {
|
||||
display: block;
|
||||
}
|
||||
> .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
> .active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
|
||||
|
||||
|
||||
// Reboot
|
||||
//
|
||||
// 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
|
||||
|
||||
|
||||
// Document
|
||||
//
|
||||
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
|
||||
@ -16,27 +14,26 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
line-height: normal;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
// Root
|
||||
//
|
||||
// Ability to the value of the root font sizes, affecting the value of `rem`.
|
||||
// null by default, thus nothing is generated.
|
||||
|
||||
:root {
|
||||
@if $font-size-root != null {
|
||||
font-size: var(--#{$variable-prefix}-root-font-size);
|
||||
}
|
||||
|
||||
@if $enable-smooth-scroll {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
scroll-behavior: smooth;
|
||||
@if $font-size-root != null {
|
||||
font-size: var(--#{$variable-prefix}-root-font-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-smooth-scroll {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Body
|
||||
//
|
||||
@ -47,38 +44,36 @@
|
||||
|
||||
// scss-docs-start reboot-body-rules
|
||||
body {
|
||||
margin: 0; // 1
|
||||
font-family: var(--#{$variable-prefix}body-font-family);
|
||||
@include font-size(var(--#{$variable-prefix}body-font-size));
|
||||
font-weight: var(--#{$variable-prefix}body-font-weight);
|
||||
line-height: var(--#{$variable-prefix}body-line-height);
|
||||
color: var(--#{$variable-prefix}body-color);
|
||||
text-align: var(--#{$variable-prefix}body-text-align);
|
||||
background-color: var(--#{$variable-prefix}body-bg); // 2
|
||||
-webkit-text-size-adjust: 100%; // 3
|
||||
-webkit-tap-highlight-color: rgba($black, 0); // 4
|
||||
margin: 0; // 1
|
||||
font-family: var(--#{$variable-prefix}body-font-family);
|
||||
@include font-size(var(--#{$variable-prefix}body-font-size));
|
||||
font-weight: var(--#{$variable-prefix}body-font-weight);
|
||||
line-height: var(--#{$variable-prefix}body-line-height);
|
||||
color: var(--#{$variable-prefix}body-color);
|
||||
text-align: var(--#{$variable-prefix}body-text-align);
|
||||
background-color: var(--#{$variable-prefix}body-bg); // 2
|
||||
-webkit-text-size-adjust: 100%; // 3
|
||||
-webkit-tap-highlight-color: rgba($black, 0); // 4
|
||||
}
|
||||
// scss-docs-end reboot-body-rules
|
||||
|
||||
|
||||
// Content grouping
|
||||
//
|
||||
// 1. Reset Firefox's gray color
|
||||
// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
|
||||
|
||||
hr {
|
||||
margin: $hr-margin-y 0;
|
||||
color: $hr-color; // 1
|
||||
background-color: currentColor;
|
||||
border: 0;
|
||||
opacity: $hr-opacity;
|
||||
margin: $hr-margin-y 0;
|
||||
color: $hr-color; // 1
|
||||
background-color: currentColor;
|
||||
border: 0;
|
||||
opacity: $hr-opacity;
|
||||
}
|
||||
|
||||
hr:not([size]) {
|
||||
height: $hr-height; // 2
|
||||
height: $hr-height; // 2
|
||||
}
|
||||
|
||||
|
||||
// Typography
|
||||
//
|
||||
// 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.
|
||||
|
||||
%heading {
|
||||
margin-top: 0; // 1
|
||||
margin-bottom: $headings-margin-bottom;
|
||||
font-family: $headings-font-family;
|
||||
font-style: $headings-font-style;
|
||||
font-weight: $headings-font-weight;
|
||||
line-height: $headings-line-height;
|
||||
color: $headings-color;
|
||||
margin-top: 0; // 1
|
||||
margin-bottom: $headings-margin-bottom;
|
||||
font-family: $headings-font-family;
|
||||
font-style: $headings-font-style;
|
||||
font-weight: $headings-font-weight;
|
||||
line-height: $headings-line-height;
|
||||
color: $headings-color;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend %heading;
|
||||
@include font-size($h1-font-size);
|
||||
@extend %heading;
|
||||
@include font-size($h1-font-size);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %heading;
|
||||
@include font-size($h2-font-size);
|
||||
@extend %heading;
|
||||
@include font-size($h2-font-size);
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend %heading;
|
||||
@include font-size($h3-font-size);
|
||||
@extend %heading;
|
||||
@include font-size($h3-font-size);
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend %heading;
|
||||
@include font-size($h4-font-size);
|
||||
@extend %heading;
|
||||
@include font-size($h4-font-size);
|
||||
}
|
||||
|
||||
h5 {
|
||||
@extend %heading;
|
||||
@include font-size($h5-font-size);
|
||||
@extend %heading;
|
||||
@include font-size($h5-font-size);
|
||||
}
|
||||
|
||||
h6 {
|
||||
@extend %heading;
|
||||
@include font-size($h6-font-size);
|
||||
@extend %heading;
|
||||
@include font-size($h6-font-size);
|
||||
}
|
||||
|
||||
|
||||
// Reset margins on paragraphs
|
||||
//
|
||||
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
|
||||
// bottom margin to use `rem` units instead of `em`.
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: $paragraph-margin-bottom;
|
||||
margin-top: 0;
|
||||
margin-bottom: $paragraph-margin-bottom;
|
||||
}
|
||||
|
||||
|
||||
// Abbreviations
|
||||
//
|
||||
// 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.
|
||||
|
||||
abbr[title],
|
||||
abbr[data-bs-original-title] { // 1
|
||||
text-decoration: underline dotted; // 2
|
||||
cursor: help; // 3
|
||||
text-decoration-skip-ink: none; // 4
|
||||
abbr[data-bs-original-title] {
|
||||
// 1
|
||||
text-decoration: underline dotted; // 2
|
||||
cursor: help; // 3
|
||||
text-decoration-skip-ink: none; // 4
|
||||
}
|
||||
|
||||
|
||||
// Address
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
|
||||
// Lists
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 2rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: $dt-font-weight;
|
||||
font-weight: $dt-font-weight;
|
||||
}
|
||||
|
||||
// 1. Undo browser default
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0; // 1
|
||||
margin-bottom: 0.5rem;
|
||||
margin-left: 0; // 1
|
||||
}
|
||||
|
||||
|
||||
// Blockquote
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
|
||||
// Strong
|
||||
//
|
||||
// Add the correct font weight in Chrome, Edge, and Safari
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: $font-weight-bolder;
|
||||
font-weight: $font-weight-bolder;
|
||||
}
|
||||
|
||||
|
||||
// Small
|
||||
//
|
||||
// Add the correct font size in all browsers
|
||||
|
||||
small {
|
||||
@include font-size($small-font-size);
|
||||
@include font-size($small-font-size);
|
||||
}
|
||||
|
||||
|
||||
// Mark
|
||||
|
||||
mark {
|
||||
padding: $mark-padding;
|
||||
background-color: $mark-bg;
|
||||
padding: $mark-padding;
|
||||
background-color: $mark-bg;
|
||||
}
|
||||
|
||||
|
||||
// Sub and Sup
|
||||
//
|
||||
// Prevent `sub` and `sup` elements from affecting the line height in
|
||||
@ -235,26 +222,29 @@ mark {
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
@include font-size($sub-sup-font-size);
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
position: relative;
|
||||
@include font-size($sub-sup-font-size);
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub { bottom: -.25em; }
|
||||
sup { top: -.5em; }
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
// Links
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: $link-decoration;
|
||||
color: $link-color;
|
||||
text-decoration: $link-decoration;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
}
|
||||
&:hover {
|
||||
color: $link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
}
|
||||
}
|
||||
|
||||
// And undo these styles for placeholder links/named anchors (without href).
|
||||
@ -263,24 +253,25 @@ a {
|
||||
// See https://github.com/twbs/bootstrap/issues/19402
|
||||
|
||||
a:not([href]):not([class]) {
|
||||
&,
|
||||
&:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
&,
|
||||
&:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Code
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: $font-family-code;
|
||||
@include font-size(1em); // Correct the odd `em` font sizing in all browsers.
|
||||
direction: ltr #{"/* rtl:ignore */"};
|
||||
unicode-bidi: bidi-override;
|
||||
font-family: $font-family-code;
|
||||
@include font-size(
|
||||
1em
|
||||
); // Correct the odd `em` font sizing in all browsers.
|
||||
direction: ltr #{"/* rtl:ignore */"};
|
||||
unicode-bidi: bidi-override;
|
||||
}
|
||||
|
||||
// 1. Remove browser default top margin
|
||||
@ -288,78 +279,75 @@ samp {
|
||||
// 3. Don't allow content to break outside
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0; // 1
|
||||
margin-bottom: 1rem; // 2
|
||||
overflow: auto; // 3
|
||||
@include font-size($code-font-size);
|
||||
color: $pre-color;
|
||||
display: block;
|
||||
margin-top: 0; // 1
|
||||
margin-bottom: 1rem; // 2
|
||||
overflow: auto; // 3
|
||||
@include font-size($code-font-size);
|
||||
color: $pre-color;
|
||||
|
||||
// Account for some code outputs that place code tags in pre tags
|
||||
code {
|
||||
@include font-size(inherit);
|
||||
color: inherit;
|
||||
word-break: normal;
|
||||
}
|
||||
// Account for some code outputs that place code tags in pre tags
|
||||
code {
|
||||
@include font-size(inherit);
|
||||
color: inherit;
|
||||
word-break: normal;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
@include font-size($code-font-size);
|
||||
color: $code-color;
|
||||
word-wrap: break-word;
|
||||
@include font-size($code-font-size);
|
||||
color: $code-color;
|
||||
word-wrap: break-word;
|
||||
|
||||
// Streamline the style when inside anchors to avoid broken underline and more
|
||||
a > & {
|
||||
color: inherit;
|
||||
}
|
||||
// Streamline the style when inside anchors to avoid broken underline and more
|
||||
a > & {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: $kbd-padding-y $kbd-padding-x;
|
||||
@include font-size($kbd-font-size);
|
||||
color: $kbd-color;
|
||||
background-color: $kbd-bg;
|
||||
@include border-radius($border-radius-sm);
|
||||
padding: $kbd-padding-y $kbd-padding-x;
|
||||
@include font-size($kbd-font-size);
|
||||
color: $kbd-color;
|
||||
background-color: $kbd-bg;
|
||||
@include border-radius($border-radius-sm);
|
||||
|
||||
kbd {
|
||||
padding: 0;
|
||||
@include font-size(1em);
|
||||
font-weight: $nested-kbd-font-weight;
|
||||
}
|
||||
kbd {
|
||||
padding: 0;
|
||||
@include font-size(1em);
|
||||
font-weight: $nested-kbd-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Figures
|
||||
//
|
||||
// Apply a consistent margin strategy (matches our type styles).
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
|
||||
// Images and content
|
||||
|
||||
img,
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
// Tables
|
||||
//
|
||||
// Prevent double borders
|
||||
|
||||
table {
|
||||
caption-side: bottom;
|
||||
border-collapse: collapse;
|
||||
caption-side: bottom;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: $table-cell-padding-y;
|
||||
padding-bottom: $table-cell-padding-y;
|
||||
color: $table-caption-color;
|
||||
text-align: left;
|
||||
padding-top: $table-cell-padding-y;
|
||||
padding-bottom: $table-cell-padding-y;
|
||||
color: $table-caption-color;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// 1. Removes font-weight bold by inheriting
|
||||
@ -367,9 +355,9 @@ caption {
|
||||
// 3. Fix alignment for Safari
|
||||
|
||||
th {
|
||||
font-weight: $table-th-font-weight; // 1
|
||||
text-align: inherit; // 2
|
||||
text-align: -webkit-match-parent; // 3
|
||||
font-weight: $table-th-font-weight; // 1
|
||||
text-align: inherit; // 2
|
||||
text-align: -webkit-match-parent; // 3
|
||||
}
|
||||
|
||||
thead,
|
||||
@ -378,26 +366,25 @@ tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
|
||||
// Forms
|
||||
//
|
||||
// 1. Allow labels to use `margin` for spacing.
|
||||
|
||||
label {
|
||||
display: inline-block; // 1
|
||||
display: inline-block; // 1
|
||||
}
|
||||
|
||||
// Remove the default `border-radius` that macOS Chrome adds.
|
||||
// See https://github.com/twbs/bootstrap/issues/24093
|
||||
|
||||
button {
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-radius: 0;
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// 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.
|
||||
|
||||
button:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// 1. Remove the margin in Firefox and Safari
|
||||
@ -416,40 +403,40 @@ button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0; // 1
|
||||
font-family: inherit;
|
||||
@include font-size(inherit);
|
||||
line-height: inherit;
|
||||
margin: 0; // 1
|
||||
font-family: inherit;
|
||||
@include font-size(inherit);
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
// Remove the inheritance of text transform in Firefox
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
text-transform: none;
|
||||
}
|
||||
// Set the cursor for non-`<button>` buttons
|
||||
//
|
||||
// Details at https://github.com/twbs/bootstrap/pull/30562
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select {
|
||||
// Remove the inheritance of word-wrap in Safari.
|
||||
// See https://github.com/twbs/bootstrap/issues/24990
|
||||
word-wrap: normal;
|
||||
// Remove the inheritance of word-wrap in Safari.
|
||||
// See https://github.com/twbs/bootstrap/issues/24990
|
||||
word-wrap: normal;
|
||||
|
||||
// Undo the opacity change from Chrome
|
||||
&:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
// Undo the opacity change from Chrome
|
||||
&:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove the dropdown arrow in Chrome from inputs built with datalists.
|
||||
// See https://stackoverflow.com/a/54997118
|
||||
|
||||
[list]::-webkit-calendar-picker-indicator {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
@ -461,26 +448,26 @@ button,
|
||||
[type="button"], // 1
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; // 2
|
||||
-webkit-appearance: button; // 2
|
||||
|
||||
@if $enable-button-pointers {
|
||||
&:not(:disabled) {
|
||||
cursor: pointer; // 3
|
||||
@if $enable-button-pointers {
|
||||
&:not(:disabled) {
|
||||
cursor: pointer; // 3
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
|
||||
|
||||
::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
||||
|
||||
textarea {
|
||||
resize: vertical; // 1
|
||||
resize: vertical; // 1
|
||||
}
|
||||
|
||||
// 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.
|
||||
|
||||
fieldset {
|
||||
min-width: 0; // 1
|
||||
padding: 0; // 2
|
||||
margin: 0; // 2
|
||||
border: 0; // 2
|
||||
min-width: 0; // 1
|
||||
padding: 0; // 2
|
||||
margin: 0; // 2
|
||||
border: 0; // 2
|
||||
}
|
||||
|
||||
// 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
|
||||
|
||||
legend {
|
||||
float: left; // 1
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: $legend-margin-bottom;
|
||||
@include font-size($legend-font-size);
|
||||
font-weight: $legend-font-weight;
|
||||
line-height: inherit;
|
||||
float: left; // 1
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: $legend-margin-bottom;
|
||||
@include font-size($legend-font-size);
|
||||
font-weight: $legend-font-weight;
|
||||
line-height: inherit;
|
||||
|
||||
+ * {
|
||||
clear: left; // 2
|
||||
}
|
||||
+ * {
|
||||
clear: left; // 2
|
||||
}
|
||||
}
|
||||
|
||||
// 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-month-field,
|
||||
::-webkit-datetime-edit-year-field {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-inner-spin-button {
|
||||
height: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// 1. Correct the outline style in Safari.
|
||||
@ -540,8 +527,8 @@ legend {
|
||||
// https://github.com/twbs/bootstrap/issues/11586.
|
||||
|
||||
[type="search"] {
|
||||
outline-offset: -2px; // 1
|
||||
-webkit-appearance: textfield; // 2
|
||||
outline-offset: -2px; // 1
|
||||
-webkit-appearance: textfield; // 2
|
||||
}
|
||||
|
||||
// 1. A few input types should stay LTR
|
||||
@ -561,40 +548,39 @@ legend {
|
||||
// Remove the inner padding in Chrome and Safari on macOS.
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// Remove padding around color pickers in webkit browsers
|
||||
|
||||
::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
// Inherit font family and line height for file input buttons
|
||||
|
||||
::file-selector-button {
|
||||
font: inherit;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
// 1. Change font properties to `inherit`
|
||||
// 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit; // 1
|
||||
-webkit-appearance: button; // 2
|
||||
font: inherit; // 1
|
||||
-webkit-appearance: button; // 2
|
||||
}
|
||||
|
||||
// Correct element displays
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Remove border from iframe
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Summary
|
||||
@ -602,24 +588,22 @@ iframe {
|
||||
// 1. Add the correct display in all browsers
|
||||
|
||||
summary {
|
||||
display: list-item; // 1
|
||||
cursor: pointer;
|
||||
display: list-item; // 1
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
// Progress
|
||||
//
|
||||
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
|
||||
// Hidden attribute
|
||||
//
|
||||
// Always hide an element with the `hidden` HTML attribute.
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@ -390,7 +390,7 @@ $enable-cssgrid: true !default;
|
||||
$enable-button-pointers: true !default;
|
||||
$enable-rfs: true !default;
|
||||
$enable-validation-icons: true !default;
|
||||
$enable-negative-margins: false !default;
|
||||
$enable-negative-margins: true !default;
|
||||
$enable-deprecation-messages: true !default;
|
||||
$enable-important-utilities: true !default;
|
||||
|
||||
|
||||
6
src/events/hc-center/HcCenterEvent.ts
Normal file
6
src/events/hc-center/HcCenterEvent.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
|
||||
export class HcCenterEvent extends NitroEvent
|
||||
{
|
||||
public static TOGGLE_HC_CENTER: string = 'HCC_TOGGLE';
|
||||
}
|
||||
@ -66,6 +66,7 @@ $nitro-card-tabs-height: 33px;
|
||||
|
||||
.nitro-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: calc(100% - #{$toolbar-height});
|
||||
margin: 0;
|
||||
|
||||
@ -1,26 +1,27 @@
|
||||
@import './shared/Shared';
|
||||
@import './avatar-editor/AvatarEditorView';
|
||||
@import './camera/CameraWidgetView';
|
||||
@import './catalog/CatalogView';
|
||||
@import './friends/FriendsView';
|
||||
@import './groups/GroupView';
|
||||
@import './hotel-view/HotelView';
|
||||
@import './inventory/InventoryView';
|
||||
@import './loading/LoadingView';
|
||||
@import './main/MainView';
|
||||
@import './navigator/NavigatorView';
|
||||
@import './notification-center/NotificationCenterView';
|
||||
@import './purse/PurseView';
|
||||
@import './right-side/RightSideView';
|
||||
@import './room/RoomView';
|
||||
@import './room-host/RoomHostView';
|
||||
@import './toolbar/ToolbarView';
|
||||
@import './wired/WiredView';
|
||||
@import './mod-tools/ModToolsView';
|
||||
@import './achievements/AchievementsView';
|
||||
@import './user-settings/UserSettingsView';
|
||||
@import './user-profile/UserProfileVew';
|
||||
@import './chat-history/ChatHistoryView';
|
||||
@import './help/HelpView';
|
||||
@import './floorplan-editor/FloorplanEditorView';
|
||||
@import './nitropedia/NitropediaView';
|
||||
@import "./shared/Shared";
|
||||
@import "./avatar-editor/AvatarEditorView";
|
||||
@import "./camera/CameraWidgetView";
|
||||
@import "./catalog/CatalogView";
|
||||
@import "./friends/FriendsView";
|
||||
@import "./groups/GroupView";
|
||||
@import "./hotel-view/HotelView";
|
||||
@import "./inventory/InventoryView";
|
||||
@import "./loading/LoadingView";
|
||||
@import "./main/MainView";
|
||||
@import "./navigator/NavigatorView";
|
||||
@import "./notification-center/NotificationCenterView";
|
||||
@import "./purse/PurseView";
|
||||
@import "./right-side/RightSideView";
|
||||
@import "./room/RoomView";
|
||||
@import "./room-host/RoomHostView";
|
||||
@import "./toolbar/ToolbarView";
|
||||
@import "./wired/WiredView";
|
||||
@import "./mod-tools/ModToolsView";
|
||||
@import "./achievements/AchievementsView";
|
||||
@import "./user-settings/UserSettingsView";
|
||||
@import "./user-profile/UserProfileVew";
|
||||
@import "./chat-history/ChatHistoryView";
|
||||
@import "./help/HelpView";
|
||||
@import "./floorplan-editor/FloorplanEditorView";
|
||||
@import "./nitropedia/NitropediaView";
|
||||
@import "./hc-center/HcCenterView.scss";
|
||||
|
||||
@ -169,13 +169,14 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutVipBuyViewProps> = props =
|
||||
</div>
|
||||
</NitroCardGridItemView>
|
||||
);
|
||||
}) }
|
||||
})}
|
||||
<div className="mt-auto text-black">{ LocalizeText('catalog.vip.buy.hccenter') }</div>
|
||||
</NitroCardGridView>
|
||||
</NitroLayoutGridColumn>
|
||||
<NitroLayoutGridColumn size={ 5 }>
|
||||
<NitroLayoutFlexColumn className="justify-content-center align-items-center h-100" overflow="hidden" gap={ 2 }>
|
||||
{ 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>
|
||||
{ pendingOffer && <div className="mt-auto w-100 text-black">
|
||||
<div className="d-flex gap-2 mb-2 align-items-center">
|
||||
|
||||
44
src/views/hc-center/HcCenterView.scss
Normal file
44
src/views/hc-center/HcCenterView.scss
Normal 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
244
src/views/hc-center/HcCenterView.tsx
Normal 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
23
src/views/hc-center/util/BadgeResolver.ts
Normal 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
6
src/views/hc-center/util/ClubStatus.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export class ClubStatus
|
||||
{
|
||||
public static ACTIVE: string = 'active';
|
||||
public static NONE: string = 'none';
|
||||
public static EXPIRED: string = 'expired';
|
||||
}
|
||||
@ -11,6 +11,7 @@ import { ChatHistoryView } from '../chat-history/ChatHistoryView';
|
||||
import { FloorplanEditorView } from '../floorplan-editor/FloorplanEditorView';
|
||||
import { FriendsView } from '../friends/FriendsView';
|
||||
import { GroupsView } from '../groups/GroupsView';
|
||||
import { HcCenterView } from '../hc-center/HcCenterView';
|
||||
import { HelpView } from '../help/HelpView';
|
||||
import { HotelView } from '../hotel-view/HotelView';
|
||||
import { InventoryView } from '../inventory/InventoryView';
|
||||
@ -77,6 +78,7 @@ export const MainView: FC<MainViewProps> = props =>
|
||||
<HelpView />
|
||||
<FloorplanEditorView />
|
||||
<NitropediaView />
|
||||
<HcCenterView />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,21 +1,22 @@
|
||||
.nitro-purse {
|
||||
background-color: rgba($dark,.95);
|
||||
background-color: rgba($dark, 0.95);
|
||||
font-size: $font-size-sm;
|
||||
pointer-events: all;
|
||||
margin-bottom: 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 {
|
||||
color:lighten($dark,20);
|
||||
color: lighten($dark, 20);
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
pointer-events: all;
|
||||
display: none
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nitro-purse-hc {
|
||||
background-color: rgba($light,.1);
|
||||
background-color: rgba($light, 0.1);
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
@ -29,9 +30,10 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($light,.1);
|
||||
background-color: rgba($light, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import './views';
|
||||
@import "./views";
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { FriendlyTime, HabboClubLevelEnum, UserCurrencyComposer, UserSubscriptionComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { GetConfiguration, LocalizeText } from '../../api';
|
||||
import { HcCenterEvent } from '../../events/hc-center/HcCenterEvent';
|
||||
import { HelpEvent } from '../../events/help/HelpEvent';
|
||||
import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
|
||||
import { dispatchUiEvent } from '../../hooks';
|
||||
@ -30,6 +31,11 @@ export const PurseView: FC<{}> = props =>
|
||||
dispatchUiEvent(new HelpEvent(HelpEvent.TOGGLE_HELP_CENTER));
|
||||
}, []);
|
||||
|
||||
const handleHcCenterClick = useCallback(() =>
|
||||
{
|
||||
dispatchUiEvent(new HcCenterEvent(HcCenterEvent.TOGGLE_HC_CENTER));
|
||||
}, []);
|
||||
|
||||
const displayedCurrencies = useMemo(() =>
|
||||
{
|
||||
return GetConfiguration<number[]>('system.currency.types', []);
|
||||
@ -139,7 +145,8 @@ export const PurseView: FC<{}> = props =>
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
<span>{ getClubText() }</span>
|
||||
</div>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
@import './currency/CurrencyView';
|
||||
@import './seasonal/SeasonalView';
|
||||
@import "./currency/CurrencyView";
|
||||
@import "./seasonal/SeasonalView";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user