nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 06:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

start game center, missing queue window n such

Browse Source
This commit is contained in:
laynester 2022-11-09 06:12:54 -05:00
parent 306440c9de
commit 4b6cc38f5d
14 changed files with 458 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,4 +23,11 @@ export class ColorUtils
{ {
return parseInt(color.replace('#', ''), 16); return parseInt(color.replace('#', ''), 16);
} }
public static uintHexColor(color: number): string
{
const realColor = color >>>0;
return ColorUtils.makeColorHex(realColor.toString(16).substring(2));
}
} }

BIN
src/assets/images/gamecenter/selectedIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 248 B

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

@ -11,11 +11,11 @@
background-position: center; background-position: center;
&.icon-nitro-light { &.icon-nitro-light {
background-image: url('../images/nitro/nitro-n-light.svg'); background-image: url("../images/nitro/nitro-n-light.svg");
} }
&.icon-nitro-dark { &.icon-nitro-dark {
background-image: url('../images/nitro/nitro-n-dark.svg'); background-image: url("../images/nitro/nitro-n-dark.svg");
} }
&.icon-nitro-light, &.icon-nitro-light,
@ -25,572 +25,578 @@
} }
&.icon-catalog { &.icon-catalog {
background-image: url('../images/toolbar/icons/catalog.png'); background-image: url("../images/toolbar/icons/catalog.png");
width: 37px; width: 37px;
height: 36px; height: 36px;
} }
&.icon-game {
background-image: url("../images/toolbar/icons/game.png");
width: 44px;
height: 25px;
}
&.icon-rooms { &.icon-rooms {
background-image: url('../images/toolbar/icons/rooms.png'); background-image: url("../images/toolbar/icons/rooms.png");
width: 44px; width: 44px;
height: 30px; height: 30px;
} }
&.icon-house { &.icon-house {
background-image: url('../images/toolbar/icons/house.png'); background-image: url("../images/toolbar/icons/house.png");
height: 30px; height: 30px;
width: 32px; width: 32px;
} }
&.gray { &.gray {
opacity: .5; opacity: 0.5;
} }
&.icon-inventory { &.icon-inventory {
background-image: url('../images/toolbar/icons/inventory.png'); background-image: url("../images/toolbar/icons/inventory.png");
height: 41px; height: 41px;
width: 44px; width: 44px;
} }
&.icon-modtools { &.icon-modtools {
background-image: url('../images/toolbar/icons/modtools.png'); background-image: url("../images/toolbar/icons/modtools.png");
height: 34px; height: 34px;
width: 29px; width: 29px;
} }
&.icon-friendall { &.icon-friendall {
background-image: url('../images/toolbar/icons/friend_all.png'); background-image: url("../images/toolbar/icons/friend_all.png");
height: 33px; height: 33px;
width: 32px; width: 32px;
} }
&.icon-friendsearch { &.icon-friendsearch {
background-image: url('../images/toolbar/icons/friend_search.png'); background-image: url("../images/toolbar/icons/friend_search.png");
height: 33px; height: 33px;
width: 29px; width: 29px;
} }
&.icon-sendmessage { &.icon-sendmessage {
background-image: url('../images/toolbar/icons/sendmessage.png'); background-image: url("../images/toolbar/icons/sendmessage.png");
width: 20px; width: 20px;
height: 21px; height: 21px;
} }
&.icon-me-talents { &.icon-me-talents {
background-image: url('../images/toolbar/icons/me-menu/talents.png'); background-image: url("../images/toolbar/icons/me-menu/talents.png");
width: 32px; width: 32px;
height: 30px; height: 30px;
} }
&.icon-me-helper-tool { &.icon-me-helper-tool {
background-image: url('../images/toolbar/icons/me-menu/helper-tool.png'); background-image: url("../images/toolbar/icons/me-menu/helper-tool.png");
width: 32px; width: 32px;
height: 30px; height: 30px;
} }
&.icon-me-profile { &.icon-me-profile {
background-image: url('../images/toolbar/icons/me-menu/profile.png'); background-image: url("../images/toolbar/icons/me-menu/profile.png");
width: 32px; width: 32px;
height: 30px; height: 30px;
} }
&.icon-me-forums { &.icon-me-forums {
background-image: url('../images/toolbar/icons/me-menu/forums.png'); background-image: url("../images/toolbar/icons/me-menu/forums.png");
width: 32px; width: 32px;
height: 30px; height: 30px;
} }
&.icon-me-rooms { &.icon-me-rooms {
background-image: url('../images/toolbar/icons/me-menu/my-rooms.png'); background-image: url("../images/toolbar/icons/me-menu/my-rooms.png");
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
&.icon-me-achievements { &.icon-me-achievements {
background-image: url('../images/toolbar/icons/me-menu/achievements.png'); background-image: url("../images/toolbar/icons/me-menu/achievements.png");
width: 31px; width: 31px;
height: 30px; height: 30px;
} }
&.icon-me-clothing { &.icon-me-clothing {
background-image: url('../images/toolbar/icons/me-menu/clothing.png'); background-image: url("../images/toolbar/icons/me-menu/clothing.png");
width: 27px; width: 27px;
height: 30px; height: 30px;
} }
&.icon-me-settings { &.icon-me-settings {
background-image: url('../images/toolbar/icons/me-menu/cog.png'); background-image: url("../images/toolbar/icons/me-menu/cog.png");
width: 28px; width: 28px;
height: 34px; height: 34px;
} }
&.icon-cog { &.icon-cog {
background: url('../images/icons/icon_cog.png'); background: url("../images/icons/icon_cog.png");
width: 14px; width: 14px;
height: 15px; height: 15px;
} }
&.icon-help { &.icon-help {
background: url('../images/icons/help.png'); background: url("../images/icons/help.png");
width: 13px; width: 13px;
height: 23px; height: 23px;
} }
&.icon-joinroom { &.icon-joinroom {
background-image: url('../images/toolbar/icons/joinroom.png'); background-image: url("../images/toolbar/icons/joinroom.png");
width: 21px; width: 21px;
height: 21px; height: 21px;
} }
&.icon-habbo { &.icon-habbo {
background-image: url('../images/toolbar/icons/habbo.png'); background-image: url("../images/toolbar/icons/habbo.png");
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
&.icon-camera { &.icon-camera {
background-image: url('../images/toolbar/icons/camera.png'); background-image: url("../images/toolbar/icons/camera.png");
width: 38px; width: 38px;
height: 45px; height: 45px;
} }
&.icon-message { &.icon-message {
background-image: url('../images/toolbar/icons/message.png'); background-image: url("../images/toolbar/icons/message.png");
width: 36px; width: 36px;
height: 32px; height: 32px;
&.is-unseen { &.is-unseen {
background-image: url('../images/toolbar/icons/message_unsee.gif'); background-image: url("../images/toolbar/icons/message_unsee.gif");
} }
} }
&.icon-wired-trigger { &.icon-wired-trigger {
background-image: url('../images/wired/icon_trigger.png'); background-image: url("../images/wired/icon_trigger.png");
width: 13px; width: 13px;
height: 14px; height: 14px;
} }
&.icon-wired-condition { &.icon-wired-condition {
background-image: url('../images/wired/icon_condition.png'); background-image: url("../images/wired/icon_condition.png");
width: 13px; width: 13px;
height: 14px; height: 14px;
} }
&.icon-wired-action { &.icon-wired-action {
background-image: url('../images/wired/icon_action.png'); background-image: url("../images/wired/icon_action.png");
width: 13px; width: 13px;
height: 14px; height: 14px;
} }
&.chatstyles-icon { &.chatstyles-icon {
background-image: url('../images/chat/styles-icon.png'); background-image: url("../images/chat/styles-icon.png");
width: 17px; width: 17px;
height: 19px; height: 19px;
} }
&.pencil-icon { &.pencil-icon {
background-image: url('../images/infostand/pencil-icon.png'); background-image: url("../images/infostand/pencil-icon.png");
width: 17px; width: 17px;
height: 18px; height: 18px;
} }
&.trade-locked-icon { &.trade-locked-icon {
background-image: url('../images/inventory/trading/locked-icon.png'); background-image: url("../images/inventory/trading/locked-icon.png");
width: 29px; width: 29px;
height: 43px; height: 43px;
} }
&.trade-unlocked-icon { &.trade-unlocked-icon {
background-image: url('../images/inventory/trading/unlocked-icon.png'); background-image: url("../images/inventory/trading/unlocked-icon.png");
width: 29px; width: 29px;
height: 43px; height: 43px;
} }
&.modtool-room-icon { &.modtool-room-icon {
background-image: url('../images/modtool/room.png'); background-image: url("../images/modtool/room.png");
width: 20px; width: 20px;
height: 15px; height: 15px;
} }
&.modtool-chatlog-icon { &.modtool-chatlog-icon {
background-image: url('../images/modtool/chatlog.gif'); background-image: url("../images/modtool/chatlog.gif");
width: 20px; width: 20px;
height: 15px; height: 15px;
} }
&.modtool-user-icon { &.modtool-user-icon {
background-image: url('../images/modtool/user.gif'); background-image: url("../images/modtool/user.gif");
width: 20px; width: 20px;
height: 15px; height: 15px;
} }
&.modtool-reports-icon { &.modtool-reports-icon {
background-image: url('../images/modtool/reports.png'); background-image: url("../images/modtool/reports.png");
width: 20px; width: 20px;
height: 15px; height: 15px;
} }
&.modtool-wrench-icon { &.modtool-wrench-icon {
background-image: url('../images/modtool/wrench.gif'); background-image: url("../images/modtool/wrench.gif");
width: 20px; width: 20px;
height: 15px; height: 15px;
} }
&.modtool-key-icon { &.modtool-key-icon {
background-image: url('../images/modtool/key.gif'); background-image: url("../images/modtool/key.gif");
width: 20px; width: 20px;
height: 15px; height: 15px;
} }
&.icon-catalogue-hc_small { &.icon-catalogue-hc_small {
background-image: url('../images/catalog/hc_small.png'); background-image: url("../images/catalog/hc_small.png");
height: 17px; height: 17px;
width: 31px; width: 31px;
} }
&.icon-catalogue-hc_big { &.icon-catalogue-hc_big {
background: url('../images/catalog/hc_big.png'); background: url("../images/catalog/hc_big.png");
width: 68px; width: 68px;
height: 40px; height: 40px;
} }
&.icon-sign-exclamation { &.icon-sign-exclamation {
background: url('../images/icons/sign-exclamation.png'); background: url("../images/icons/sign-exclamation.png");
width: 7px; width: 7px;
height: 17px; height: 17px;
} }
&.icon-sign-heart { &.icon-sign-heart {
background: url('../images/icons/sign-heart.png'); background: url("../images/icons/sign-heart.png");
width: 15px; width: 15px;
height: 13px; height: 13px;
} }
&.icon-sign-red { &.icon-sign-red {
background: url('../images/icons/sign-red.png'); background: url("../images/icons/sign-red.png");
width: 11px; width: 11px;
height: 19px; height: 19px;
} }
&.icon-sign-yellow { &.icon-sign-yellow {
background: url('../images/icons/sign-yellow.png'); background: url("../images/icons/sign-yellow.png");
width: 11px; width: 11px;
height: 19px; height: 19px;
} }
&.icon-sign-skull { &.icon-sign-skull {
background: url('../images/icons/sign-skull.png'); background: url("../images/icons/sign-skull.png");
width: 12px; width: 12px;
height: 12px; height: 12px;
} }
&.icon-sign-smile { &.icon-sign-smile {
background: url('../images/icons/sign-smile.png'); background: url("../images/icons/sign-smile.png");
width: 7px; width: 7px;
height: 14px; height: 14px;
} }
&.icon-sign-soccer { &.icon-sign-soccer {
background: url('../images/icons/sign-soccer.png'); background: url("../images/icons/sign-soccer.png");
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
&.icon-house-small { &.icon-house-small {
background: url('../images/icons/house-small.png'); background: url("../images/icons/house-small.png");
width: 19px; width: 19px;
height: 14px; height: 14px;
} }
&.icon-camera-small { &.icon-camera-small {
background: url('../images/icons/camera-small.png'); background: url("../images/icons/camera-small.png");
width: 17px; width: 17px;
height: 15px; height: 15px;
} }
&.icon-small-room { &.icon-small-room {
background: url('../images/icons/small-room.png'); background: url("../images/icons/small-room.png");
width: 17px; width: 17px;
height: 16px; height: 16px;
} }
&.icon-cog { &.icon-cog {
background: url('../images/icons/cog.png'); background: url("../images/icons/cog.png");
width: 21px; width: 21px;
height: 21px; height: 21px;
} }
&.icon-chat-history { &.icon-chat-history {
background: url('../images/icons/chat-history.png'); background: url("../images/icons/chat-history.png");
width: 17px; width: 17px;
height: 21px; height: 21px;
} }
&.icon-room-link { &.icon-room-link {
background: url('../images/icons/room-link.png'); background: url("../images/icons/room-link.png");
width: 17px; width: 17px;
height: 15px; height: 15px;
} }
&.icon-zoom-more { &.icon-zoom-more {
background: url('../images/icons/zoom-more.png'); background: url("../images/icons/zoom-more.png");
width: 12px; width: 12px;
height: 22px; height: 22px;
} }
&.icon-zoom-less { &.icon-zoom-less {
background: url('../images/icons/zoom-less.png'); background: url("../images/icons/zoom-less.png");
width: 12px; width: 12px;
height: 22px; height: 22px;
} }
&.icon-like-room { &.icon-like-room {
background: url('../images/icons/like-room.png'); background: url("../images/icons/like-room.png");
width: 20px; width: 20px;
height: 22px; height: 22px;
} }
&.icon-arrows { &.icon-arrows {
background: url('../images/icons/arrows.png'); background: url("../images/icons/arrows.png");
width: 17px; width: 17px;
height: 15px; height: 15px;
} }
&.icon-camera-colormatrix { &.icon-camera-colormatrix {
background: url('../images/icons/camera-colormatrix.png'); background: url("../images/icons/camera-colormatrix.png");
width: 32px; width: 32px;
height: 21px; height: 21px;
} }
&.icon-camera-composite { &.icon-camera-composite {
background: url('../images/icons/camera-composite.png'); background: url("../images/icons/camera-composite.png");
width: 32px; width: 32px;
height: 21px; height: 21px;
} }
&.icon-pf-online { &.icon-pf-online {
background: url('../images/profile/icons/online.gif'); background: url("../images/profile/icons/online.gif");
width: 40px; width: 40px;
height: 16px; height: 16px;
} }
&.icon-pf-offline { &.icon-pf-offline {
background: url('../images/profile/icons/offline.png'); background: url("../images/profile/icons/offline.png");
width: 39px; width: 39px;
height: 16px; height: 16px;
} }
&.icon-pf-tick { &.icon-pf-tick {
background: url('../images/profile/icons/tick.png'); background: url("../images/profile/icons/tick.png");
width: 11px; width: 11px;
height: 10px; height: 10px;
} }
&.icon-group-type-0 { &.icon-group-type-0 {
background: url('../images/groups/icons/grouptype_icon_0.png'); background: url("../images/groups/icons/grouptype_icon_0.png");
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
&.icon-group-type-1 { &.icon-group-type-1 {
background: url('../images/groups/icons/grouptype_icon_1.png'); background: url("../images/groups/icons/grouptype_icon_1.png");
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
&.icon-group-type-2 { &.icon-group-type-2 {
background: url('../images/groups/icons/grouptype_icon_2.png'); background: url("../images/groups/icons/grouptype_icon_2.png");
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
&.icon-group-decorate { &.icon-group-decorate {
background: url('../images/groups/icons/group_decorate_icon.png'); background: url("../images/groups/icons/group_decorate_icon.png");
width: 15px; width: 15px;
height: 15px; height: 15px;
} }
&.icon-group-member { &.icon-group-member {
background: url('../images/groups/icons/group_icon_big_member.png'); background: url("../images/groups/icons/group_icon_big_member.png");
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
&.icon-group-admin { &.icon-group-admin {
background: url('../images/groups/icons/group_icon_big_admin.png'); background: url("../images/groups/icons/group_icon_big_admin.png");
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
&.icon-group-owner { &.icon-group-owner {
background: url('../images/groups/icons/group_icon_big_owner.png'); background: url("../images/groups/icons/group_icon_big_owner.png");
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
&.icon-group-favorite { &.icon-group-favorite {
background: url('../images/groups/icons/group_favorite.png'); background: url("../images/groups/icons/group_favorite.png");
width: 14px; width: 14px;
height: 14px; height: 14px;
} }
&.icon-group-not-favorite { &.icon-group-not-favorite {
background: url('../images/groups/icons/group_notfavorite.png'); background: url("../images/groups/icons/group_notfavorite.png");
width: 14px; width: 14px;
height: 14px; height: 14px;
} }
&.icon-group-small-admin { &.icon-group-small-admin {
background: url('../images/groups/icons/group_icon_admin.png'); background: url("../images/groups/icons/group_icon_admin.png");
width: 11px; width: 11px;
height: 13px; height: 13px;
} }
&.icon-group-small-not-admin { &.icon-group-small-not-admin {
background: url('../images/groups/icons/group_icon_not_admin.png'); background: url("../images/groups/icons/group_icon_not_admin.png");
width: 11px; width: 11px;
height: 13px; height: 13px;
} }
&.icon-group-small-owner { &.icon-group-small-owner {
background: url('../images/groups/icons/group_icon_small_owner.png'); background: url("../images/groups/icons/group_icon_small_owner.png");
width: 13px; width: 13px;
height: 13px; height: 13px;
} }
&.icon-navigator-info { &.icon-navigator-info {
background: url('../images/navigator/icons/info.png'); background: url("../images/navigator/icons/info.png");
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
&.icon-navigator-room-locked { &.icon-navigator-room-locked {
background: url('../images/navigator/icons/room_locked.png'); background: url("../images/navigator/icons/room_locked.png");
width: 13px; width: 13px;
height: 16px; height: 16px;
} }
&.icon-navigator-room-password { &.icon-navigator-room-password {
background: url('../images/navigator/icons/room_password.png'); background: url("../images/navigator/icons/room_password.png");
width: 13px; width: 13px;
height: 16px; height: 16px;
} }
&.icon-navigator-room-invisible { &.icon-navigator-room-invisible {
background: url('../images/navigator/icons/room_invisible.png'); background: url("../images/navigator/icons/room_invisible.png");
width: 13px; width: 13px;
height: 16px; height: 16px;
} }
&.icon-navigator-room-group { &.icon-navigator-room-group {
background: url('../images/navigator/icons/room_group.png'); background: url("../images/navigator/icons/room_group.png");
width: 13px; width: 13px;
height: 11px; height: 11px;
} }
&.icon-youtube-next { &.icon-youtube-next {
background: url('../images/room-widgets/youtube-widget/next.png'); background: url("../images/room-widgets/youtube-widget/next.png");
width: 21px; width: 21px;
height: 16px; height: 16px;
} }
&.icon-youtube-prev { &.icon-youtube-prev {
background: url('../images/room-widgets/youtube-widget/prev.png'); background: url("../images/room-widgets/youtube-widget/prev.png");
width: 21px; width: 21px;
height: 16px; height: 16px;
} }
&.icon-hc-banner { &.icon-hc-banner {
background: url('../images/catalog/hc_big.png'); background: url("../images/catalog/hc_big.png");
width: 68px; width: 68px;
height: 40px; height: 40px;
} }
&.icon-set-tile { &.icon-set-tile {
background-image: url('../images/floorplaneditor/icon-tile-set.png'); background-image: url("../images/floorplaneditor/icon-tile-set.png");
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
&.icon-unset-tile { &.icon-unset-tile {
background-image: url('../images/floorplaneditor/icon-tile-unset.png'); background-image: url("../images/floorplaneditor/icon-tile-unset.png");
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
&.icon-increase-height { &.icon-increase-height {
background-image: url('../images/floorplaneditor/icon-tile-up.png'); background-image: url("../images/floorplaneditor/icon-tile-up.png");
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
&.icon-decrease-height { &.icon-decrease-height {
background-image: url('../images/floorplaneditor/icon-tile-down.png'); background-image: url("../images/floorplaneditor/icon-tile-down.png");
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
&.icon-set-door { &.icon-set-door {
background-image: url('../images/floorplaneditor/icon-door.png'); background-image: url("../images/floorplaneditor/icon-door.png");
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
&.icon-door-direction-0 { &.icon-door-direction-0 {
background-image: url('../images/floorplaneditor/door-direction-0.png'); background-image: url("../images/floorplaneditor/door-direction-0.png");
width: 80px; width: 80px;
height: 45px; height: 45px;
} }
&.icon-door-direction-1 { &.icon-door-direction-1 {
background-image: url('../images/floorplaneditor/door-direction-1.png'); background-image: url("../images/floorplaneditor/door-direction-1.png");
width: 80px; width: 80px;
height: 45px; height: 45px;
} }
&.icon-door-direction-2 { &.icon-door-direction-2 {
background-image: url('../images/floorplaneditor/door-direction-2.png'); background-image: url("../images/floorplaneditor/door-direction-2.png");
width: 80px; width: 80px;
height: 45px; height: 45px;
} }
&.icon-door-direction-3 { &.icon-door-direction-3 {
background-image: url('../images/floorplaneditor/door-direction-3.png'); background-image: url("../images/floorplaneditor/door-direction-3.png");
width: 80px; width: 80px;
height: 45px; height: 45px;
} }
&.icon-door-direction-4 { &.icon-door-direction-4 {
background-image: url('../images/floorplaneditor/door-direction-4.png'); background-image: url("../images/floorplaneditor/door-direction-4.png");
width: 80px; width: 80px;
height: 45px; height: 45px;
} }
&.icon-door-direction-5 { &.icon-door-direction-5 {
background-image: url('../images/floorplaneditor/door-direction-5.png'); background-image: url("../images/floorplaneditor/door-direction-5.png");
width: 80px; width: 80px;
height: 45px; height: 45px;
} }
&.icon-door-direction-6 { &.icon-door-direction-6 {
background-image: url('../images/floorplaneditor/door-direction-6.png'); background-image: url("../images/floorplaneditor/door-direction-6.png");
width: 80px; width: 80px;
height: 45px; height: 45px;
} }
&.icon-door-direction-7 { &.icon-door-direction-7 {
background-image: url('../images/floorplaneditor/door-direction-7.png'); background-image: url("../images/floorplaneditor/door-direction-7.png");
width: 80px; width: 80px;
height: 45px; height: 45px;
} }
&.icon-tickets { &.icon-tickets {
background-image: url('../images/icons/tickets.png'); background-image: url("../images/icons/tickets.png");
width: 17px; width: 17px;
height: 17px; height: 17px;
} }
&.icon-user { &.icon-user {
background-image: url('../images/icons/user.png'); background-image: url("../images/icons/user.png");
width: 18px; width: 18px;
height: 19px; height: 19px;
} }

44
src/components/game-center/GameCenterView.scss Normal file
View File

@ -0,0 +1,44 @@
.game-center-stage {
width: 100%;
height: calc(100% - 55px);
background-color: black;
position: absolute;
inset: 0;
}
.game-center-main {
width: 1280px;
height: calc(100% - 55px);
background: #93d4f3;
.game-view {
background-position: bottom center;
background-repeat: no-repeat;
> div {
color: inherit;
}
}
.gameList-container {
min-height: 107px;
.game-icon {
width: 83px;
height: 83px;
background-position: center;
background-repeat: no-repeat;
&.selected {
position: relative;
&::after {
content: "";
background-image: url("../../assets/images/gamecenter/selectedIcon.png");
width: 83px;
height: 83px;
position: absolute;
inset: 0;
}
}
}
}
}

50
src/components/game-center/GameCenterView.tsx Normal file
View File

@ -0,0 +1,50 @@
import { ILinkEventTracker } from '@nitrots/nitro-renderer';
import { useEffect } from 'react';
import { AddEventLinkTracker, RemoveLinkEventTracker } from '../../api';
import { Flex } from '../../common';
import { useGameCenter } from '../../hooks';
import { GameListView } from './views/GameListView';
import { GameStageView } from './views/GameStageView';
import { GameView } from './views/GameView';
export const GameCenterView = () =>
{
const{ isVisible, setIsVisible, games, accountStatus } = useGameCenter();
useEffect(() =>
{
const toggleGameCenter = () =>
{
setIsVisible(prev => !prev);
}
const linkTracker: ILinkEventTracker = {
linkReceived: (url: string) =>
{
const value = url.split('/');
switch(value[1])
{
case 'toggle':
toggleGameCenter();
break;
}
},
eventUrlPrefix: 'games/'
};
AddEventLinkTracker(linkTracker);
return () => RemoveLinkEventTracker(linkTracker);
}, [ ]);
if(!isVisible || !games || !accountStatus) return;
return <Flex position="absolute" className="top-0 bottom-0 start-0 end-0 bg-black" justifyContent="center">
<Flex className="game-center-main" column>
<GameView/>
<GameListView />
</Flex>
<GameStageView />
</Flex>
}

32
src/components/game-center/views/GameListView.tsx Normal file
View File

@ -0,0 +1,32 @@
import { GameConfigurationData } from '@nitrots/nitro-renderer';
import { LocalizeText } from '../../../api';
import { Base, Flex } from '../../../common';
import { useGameCenter } from '../../../hooks';
export const GameListView = () =>
{
const { games,selectedGame, setSelectedGame } = useGameCenter();
const getClasses = (game: GameConfigurationData) =>
{
let classes = [ 'game-icon' ];
if(selectedGame === game) classes.push('selected');
return classes.join(' ');
}
const getIconImage = (game: GameConfigurationData): string =>
{
return `url(${ game.assetUrl }${ game.gameNameId }_icon.png)`
}
return <Base fullWidth className="gameList-container bg-dark p-1">
{ LocalizeText('gamecenter.game_list_title') }
<Flex gap={ 3 }>
{ games && games.map((game,index) =>
<Base key={ index } className={ getClasses(game) } onClick={ evt => setSelectedGame(game) } style={ { backgroundImage: getIconImage(game) } }/>
) }
</Flex>
</Base>
}

47
src/components/game-center/views/GameStageView.tsx Normal file
View File

@ -0,0 +1,47 @@
import { Game2ExitGameMessageComposer } from '@nitrots/nitro-renderer';
import { useEffect, useRef, useState } from 'react';
import { SendMessageComposer } from '../../../api';
import { Base } from '../../../common';
import { useGameCenter } from '../../../hooks';
export const GameStageView = () =>
{
const { gameURL,setGameURL } = useGameCenter();
const [ loadTimes, setLoadTimes ] = useState<number>(0);
const ref = useRef<HTMLDivElement>();
useEffect(()=>
{
if(!ref || ref && !ref.current) return;
setLoadTimes(0);
let frame: HTMLIFrameElement = document.createElement('iframe');
frame.src = gameURL;
frame.classList.add('game-center-stage');
frame.classList.add('h-100');
frame.onload = () =>
{
setLoadTimes(prev => prev += 1)
}
ref.current.innerHTML = '';
ref.current.appendChild(frame);
},[ ref, gameURL ]);
useEffect(()=>
{
if(loadTimes > 1)
{
setGameURL(null);
SendMessageComposer(new Game2ExitGameMessageComposer());
}
},[ loadTimes,setGameURL ])
if(!gameURL) return null;
return <Base innerRef={ ref }className="game-center-stage"/>
}

58
src/components/game-center/views/GameView.tsx Normal file
View File

@ -0,0 +1,58 @@
import { Game2GetAccountGameStatusMessageComposer, GetGameStatusMessageComposer, JoinQueueMessageComposer } from '@nitrots/nitro-renderer';
import { useEffect } from 'react';
import { ColorUtils, LocalizeText, SendMessageComposer } from '../../../api';
import { Base, Button, Flex, LayoutItemCountView, Text } from '../../../common';
import { useGameCenter } from '../../../hooks';
export const GameView = () =>
{
const { selectedGame, accountStatus } = useGameCenter();
useEffect(()=>
{
if(selectedGame)
{
SendMessageComposer(new GetGameStatusMessageComposer(selectedGame.gameId));
SendMessageComposer(new Game2GetAccountGameStatusMessageComposer(selectedGame.gameId));
}
},[ selectedGame ])
const getBgColour = (): string =>
{
return ColorUtils.uintHexColor(selectedGame.bgColor)
}
const getBgImage = (): string =>
{
return `url(${ selectedGame.assetUrl }${ selectedGame.gameNameId }_theme.png)`
}
const getColor = () =>
{
return ColorUtils.uintHexColor(selectedGame.textColor);
}
const onPlay = () =>
{
SendMessageComposer(new JoinQueueMessageComposer(selectedGame.gameId));
}
return <Flex className="game-view py-4" fullHeight style={ { backgroundColor: getBgColour(), backgroundImage: getBgImage(), color: getColor() } }>
<Flex className="w-75" column alignItems="center" gap={ 2 }>
<Text bold>{ LocalizeText(`gamecenter.${ selectedGame.gameNameId }.description_title`) }</Text>
<img src={ selectedGame.assetUrl + selectedGame.gameNameId + '_logo.png' }/>
{ (accountStatus.hasUnlimitedGames || accountStatus.freeGamesLeft > 0) && <>
<Button variant="light" position="relative" className="px-4" onClick={ onPlay }>
{ LocalizeText('gamecenter.play_now') }
{ !accountStatus.hasUnlimitedGames &&
<LayoutItemCountView className="me-n1 mt-n1" count={ accountStatus.freeGamesLeft }/> }
</Button>
</> }
<Text bold className="w-50" center>{ LocalizeText(`gamecenter.${ selectedGame.gameNameId }.description_content`) }</Text>
</Flex>
<Base className="w-25">
</Base>
</Flex>
}

53
src/components/index.scss
View File

@ -1,26 +1,27 @@
@import './achievements/AchievementsView'; @import "./achievements/AchievementsView";
@import './avatar-editor/AvatarEditorView'; @import "./avatar-editor/AvatarEditorView";
@import './camera/CameraWidgetView'; @import "./camera/CameraWidgetView";
@import './campaign/CampaignView'; @import "./campaign/CampaignView";
@import './catalog/CatalogView'; @import "./catalog/CatalogView";
@import './chat-history/ChatHistoryView'; @import "./chat-history/ChatHistoryView";
@import './floorplan-editor/FloorplanEditorView'; @import "./floorplan-editor/FloorplanEditorView";
@import './friends/FriendsView'; @import "./friends/FriendsView";
@import './groups/GroupView'; @import "./groups/GroupView";
@import './guide-tool/GuideToolView'; @import "./guide-tool/GuideToolView";
@import './hc-center/HcCenterView'; @import "./hc-center/HcCenterView";
@import './help/HelpView'; @import "./help/HelpView";
@import './hotel-view/HotelView'; @import "./hotel-view/HotelView";
@import './inventory/InventoryView'; @import "./inventory/InventoryView";
@import './loading/LoadingView'; @import "./loading/LoadingView";
@import './mod-tools/ModToolsView'; @import "./mod-tools/ModToolsView";
@import './navigator/NavigatorView'; @import "./navigator/NavigatorView";
@import './nitropedia/NitropediaView'; @import "./nitropedia/NitropediaView";
@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 './toolbar/ToolbarView'; @import "./toolbar/ToolbarView";
@import './user-profile/UserProfileVew'; @import "./user-profile/UserProfileVew";
@import './user-settings/UserSettingsView'; @import "./user-settings/UserSettingsView";
@import './wired/WiredView'; @import "./wired/WiredView";
@import "./game-center/GameCenterView.scss";

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

@ -11,6 +11,7 @@ import { CatalogView } from '../catalog/CatalogView';
import { ChatHistoryView } from '../chat-history/ChatHistoryView'; 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 { GameCenterView } from '../game-center/GameCenterView';
import { GroupsView } from '../groups/GroupsView'; import { GroupsView } from '../groups/GroupsView';
import { GuideToolView } from '../guide-tool/GuideToolView'; import { GuideToolView } from '../guide-tool/GuideToolView';
import { HcCenterView } from '../hc-center/HcCenterView'; import { HcCenterView } from '../hc-center/HcCenterView';
@ -105,6 +106,7 @@ export const MainView: FC<{}> = props =>
<GuideToolView /> <GuideToolView />
<HcCenterView /> <HcCenterView />
<CampaignView /> <CampaignView />
<GameCenterView />
</Base> </Base>
); );
} }

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

@ -1,6 +1,6 @@
import { Dispose, DropBounce, EaseOut, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait } from '@nitrots/nitro-renderer'; import { Dispose, DropBounce, EaseOut, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait } from '@nitrots/nitro-renderer';
import { FC, useState } from 'react'; import { FC, useState } from 'react';
import { CreateLinkEvent, GetSessionDataManager, MessengerIconState, OpenMessengerChat, VisitDesktop } from '../../api'; import { CreateLinkEvent, GetConfiguration, GetSessionDataManager, MessengerIconState, OpenMessengerChat, VisitDesktop } from '../../api';
import { Base, Flex, LayoutAvatarImageView, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes } from '../../common'; import { Base, Flex, LayoutAvatarImageView, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes } from '../../common';
import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useRoomEngineEvent, useSessionInfo } from '../../hooks'; import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useRoomEngineEvent, useSessionInfo } from '../../hooks';
import { ToolbarMeView } from './ToolbarMeView'; import { ToolbarMeView } from './ToolbarMeView';
@ -81,6 +81,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
{ !isInRoom && { !isInRoom &&
<Base pointer className="navigation-item icon icon-house" onClick={ event => CreateLinkEvent('navigator/goto/home') } /> } <Base pointer className="navigation-item icon icon-house" onClick={ event => CreateLinkEvent('navigator/goto/home') } /> }
<Base pointer className="navigation-item icon icon-rooms" onClick={ event => CreateLinkEvent('navigator/toggle') } /> <Base pointer className="navigation-item icon icon-rooms" onClick={ event => CreateLinkEvent('navigator/toggle') } />
{ GetConfiguration('game.center.enabled') && <Base pointer className="navigation-item icon icon-game" onClick={ event => CreateLinkEvent('games/toggle') } /> }
<Base pointer className="navigation-item icon icon-catalog" onClick={ event => CreateLinkEvent('catalog/toggle') } /> <Base pointer className="navigation-item icon icon-catalog" onClick={ event => CreateLinkEvent('catalog/toggle') } />
<Base pointer className="navigation-item icon icon-inventory" onClick={ event => CreateLinkEvent('inventory/toggle') }> <Base pointer className="navigation-item icon icon-inventory" onClick={ event => CreateLinkEvent('inventory/toggle') }>
{ (getFullCount > 0) && { (getFullCount > 0) &&

1
src/hooks/game-center/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './useGameCenter';

83
src/hooks/game-center/useGameCenter.ts Normal file
View File

@ -0,0 +1,83 @@
import { Game2AccountGameStatusMessageEvent, Game2AccountGameStatusMessageParser, GameConfigurationData, GameListMessageEvent, GameStatusMessageEvent, GetGameListMessageComposer, LoadGameUrlEvent } from '@nitrots/nitro-renderer';
import { useEffect, useState } from 'react';
import { useBetween } from 'use-between';
import { SendMessageComposer, VisitDesktop } from '../../api';
import { useMessageEvent } from '../events';
const useGameCenterState = () =>
{
const [ isVisible, setIsVisible ] = useState<boolean>(false);
const [ games, setGames ] = useState<GameConfigurationData[]>(null);
const [ selectedGame, setSelectedGame ] = useState<GameConfigurationData>(null);
const [ accountStatus, setAccountStatus ] = useState<Game2AccountGameStatusMessageParser>(null);
const [ gameOffline, setGameOffline ] = useState<boolean>(false);
const [ gameURL, setGameURL ] = useState<string>(null);
useMessageEvent<GameListMessageEvent>(GameListMessageEvent, event =>
{
let parser = event.getParser();
if(!parser || parser && !parser.games.length) return;
setSelectedGame(parser.games[0]);
setGames(parser.games);
});
useMessageEvent<Game2AccountGameStatusMessageEvent>(Game2AccountGameStatusMessageEvent, event =>
{
let parser = event.getParser();
if(!parser) return;
setAccountStatus(parser);
});
useMessageEvent<GameStatusMessageEvent>(GameStatusMessageEvent, event =>
{
let parser = event.getParser();
if(!parser) return;
setGameOffline(parser.isInMaintenance);
})
useMessageEvent<LoadGameUrlEvent>(LoadGameUrlEvent, event =>
{
let parser = event.getParser();
if(!parser) return;
switch(parser.gameTypeId)
{
case 2:
return console.log('snowwar')
default:
return setGameURL(parser.url);
}
});
useEffect(()=>
{
if(isVisible)
{
SendMessageComposer(new GetGameListMessageComposer());
VisitDesktop();
}
else
{
// dispose or wtv
}
},[ isVisible ]);
return {
isVisible, setIsVisible,
games,
accountStatus,
selectedGame, setSelectedGame,
gameOffline,
gameURL, setGameURL
}
}
export const useGameCenter = () => useBetween(useGameCenterState);

1
src/hooks/index.ts
View File

@ -6,6 +6,7 @@ export * from './events';
export * from './events/core'; export * from './events/core';
export * from './events/nitro'; export * from './events/nitro';
export * from './friends'; export * from './friends';
export * from './game-center';
export * from './groups'; export * from './groups';
export * from './help'; export * from './help';
export * from './inventory'; export * from './inventory';