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

Merge branch '@feature/game-center' into 'dev'

Browse Source 
@feature/game center

See merge request nitro/nitro-react!100
This commit is contained in:
Bill 2022-11-10 00:30:29 +00:00
commit fc14a4f1dd
15 changed files with 459 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/ui-config.json.example
View File

@ -21,6 +21,7 @@
"wired.action.chat.max.length": 100,
"wired.action.kick.from.room.max.length": 100,
"wired.action.mute.user.max.length": 100,
"game.center.enabled": false,
"navigator.room.models": [
{ "clubLevel": 0, "tileSize": 104, "name": "a" },
{ "clubLevel": 0, "tileSize": 94, "name": "b" },

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

@ -23,4 +23,11 @@ export class ColorUtils
{
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;
&.icon-nitro-light {
background-image: url('../images/nitro/nitro-n-light.svg');
background-image: url("../images/nitro/nitro-n-light.svg");
}
&.icon-nitro-dark {
background-image: url('../images/nitro/nitro-n-dark.svg');
background-image: url("../images/nitro/nitro-n-dark.svg");
}
&.icon-nitro-light,
@ -25,572 +25,578 @@
}
&.icon-catalog {
background-image: url('../images/toolbar/icons/catalog.png');
background-image: url("../images/toolbar/icons/catalog.png");
width: 37px;
height: 36px;
}
&.icon-game {
background-image: url("../images/toolbar/icons/game.png");
width: 44px;
height: 25px;
}
&.icon-rooms {
background-image: url('../images/toolbar/icons/rooms.png');
background-image: url("../images/toolbar/icons/rooms.png");
width: 44px;
height: 30px;
}
&.icon-house {
background-image: url('../images/toolbar/icons/house.png');
background-image: url("../images/toolbar/icons/house.png");
height: 30px;
width: 32px;
}
&.gray {
opacity: .5;
opacity: 0.5;
}
&.icon-inventory {
background-image: url('../images/toolbar/icons/inventory.png');
background-image: url("../images/toolbar/icons/inventory.png");
height: 41px;
width: 44px;
}
&.icon-modtools {
background-image: url('../images/toolbar/icons/modtools.png');
background-image: url("../images/toolbar/icons/modtools.png");
height: 34px;
width: 29px;
}
&.icon-friendall {
background-image: url('../images/toolbar/icons/friend_all.png');
background-image: url("../images/toolbar/icons/friend_all.png");
height: 33px;
width: 32px;
}
&.icon-friendsearch {
background-image: url('../images/toolbar/icons/friend_search.png');
background-image: url("../images/toolbar/icons/friend_search.png");
height: 33px;
width: 29px;
}
&.icon-sendmessage {
background-image: url('../images/toolbar/icons/sendmessage.png');
background-image: url("../images/toolbar/icons/sendmessage.png");
width: 20px;
height: 21px;
}
&.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;
height: 30px;
}
&.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;
height: 30px;
}
&.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;
height: 30px;
}
&.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;
height: 30px;
}
&.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;
height: 30px;
}
&.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;
height: 30px;
}
&.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;
height: 30px;
}
&.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;
height: 34px;
}
&.icon-cog {
background: url('../images/icons/icon_cog.png');
background: url("../images/icons/icon_cog.png");
width: 14px;
height: 15px;
}
&.icon-help {
background: url('../images/icons/help.png');
background: url("../images/icons/help.png");
width: 13px;
height: 23px;
}
&.icon-joinroom {
background-image: url('../images/toolbar/icons/joinroom.png');
background-image: url("../images/toolbar/icons/joinroom.png");
width: 21px;
height: 21px;
}
&.icon-habbo {
background-image: url('../images/toolbar/icons/habbo.png');
background-image: url("../images/toolbar/icons/habbo.png");
width: 28px;
height: 28px;
}
&.icon-camera {
background-image: url('../images/toolbar/icons/camera.png');
background-image: url("../images/toolbar/icons/camera.png");
width: 38px;
height: 45px;
}
&.icon-message {
background-image: url('../images/toolbar/icons/message.png');
background-image: url("../images/toolbar/icons/message.png");
width: 36px;
height: 32px;
&.is-unseen {
background-image: url('../images/toolbar/icons/message_unsee.gif');
background-image: url("../images/toolbar/icons/message_unsee.gif");
}
}
&.icon-wired-trigger {
background-image: url('../images/wired/icon_trigger.png');
background-image: url("../images/wired/icon_trigger.png");
width: 13px;
height: 14px;
}
&.icon-wired-condition {
background-image: url('../images/wired/icon_condition.png');
background-image: url("../images/wired/icon_condition.png");
width: 13px;
height: 14px;
}
&.icon-wired-action {
background-image: url('../images/wired/icon_action.png');
background-image: url("../images/wired/icon_action.png");
width: 13px;
height: 14px;
}
&.chatstyles-icon {
background-image: url('../images/chat/styles-icon.png');
background-image: url("../images/chat/styles-icon.png");
width: 17px;
height: 19px;
}
&.pencil-icon {
background-image: url('../images/infostand/pencil-icon.png');
background-image: url("../images/infostand/pencil-icon.png");
width: 17px;
height: 18px;
}
&.trade-locked-icon {
background-image: url('../images/inventory/trading/locked-icon.png');
background-image: url("../images/inventory/trading/locked-icon.png");
width: 29px;
height: 43px;
}
&.trade-unlocked-icon {
background-image: url('../images/inventory/trading/unlocked-icon.png');
background-image: url("../images/inventory/trading/unlocked-icon.png");
width: 29px;
height: 43px;
}
&.modtool-room-icon {
background-image: url('../images/modtool/room.png');
background-image: url("../images/modtool/room.png");
width: 20px;
height: 15px;
}
&.modtool-chatlog-icon {
background-image: url('../images/modtool/chatlog.gif');
background-image: url("../images/modtool/chatlog.gif");
width: 20px;
height: 15px;
}
&.modtool-user-icon {
background-image: url('../images/modtool/user.gif');
background-image: url("../images/modtool/user.gif");
width: 20px;
height: 15px;
}
&.modtool-reports-icon {
background-image: url('../images/modtool/reports.png');
background-image: url("../images/modtool/reports.png");
width: 20px;
height: 15px;
}
&.modtool-wrench-icon {
background-image: url('../images/modtool/wrench.gif');
background-image: url("../images/modtool/wrench.gif");
width: 20px;
height: 15px;
}
&.modtool-key-icon {
background-image: url('../images/modtool/key.gif');
background-image: url("../images/modtool/key.gif");
width: 20px;
height: 15px;
}
&.icon-catalogue-hc_small {
background-image: url('../images/catalog/hc_small.png');
background-image: url("../images/catalog/hc_small.png");
height: 17px;
width: 31px;
}
&.icon-catalogue-hc_big {
background: url('../images/catalog/hc_big.png');
background: url("../images/catalog/hc_big.png");
width: 68px;
height: 40px;
}
&.icon-sign-exclamation {
background: url('../images/icons/sign-exclamation.png');
background: url("../images/icons/sign-exclamation.png");
width: 7px;
height: 17px;
}
&.icon-sign-heart {
background: url('../images/icons/sign-heart.png');
background: url("../images/icons/sign-heart.png");
width: 15px;
height: 13px;
}
&.icon-sign-red {
background: url('../images/icons/sign-red.png');
background: url("../images/icons/sign-red.png");
width: 11px;
height: 19px;
}
&.icon-sign-yellow {
background: url('../images/icons/sign-yellow.png');
background: url("../images/icons/sign-yellow.png");
width: 11px;
height: 19px;
}
&.icon-sign-skull {
background: url('../images/icons/sign-skull.png');
background: url("../images/icons/sign-skull.png");
width: 12px;
height: 12px;
}
&.icon-sign-smile {
background: url('../images/icons/sign-smile.png');
background: url("../images/icons/sign-smile.png");
width: 7px;
height: 14px;
}
&.icon-sign-soccer {
background: url('../images/icons/sign-soccer.png');
background: url("../images/icons/sign-soccer.png");
width: 20px;
height: 20px;
}
&.icon-house-small {
background: url('../images/icons/house-small.png');
background: url("../images/icons/house-small.png");
width: 19px;
height: 14px;
}
&.icon-camera-small {
background: url('../images/icons/camera-small.png');
background: url("../images/icons/camera-small.png");
width: 17px;
height: 15px;
}
&.icon-small-room {
background: url('../images/icons/small-room.png');
background: url("../images/icons/small-room.png");
width: 17px;
height: 16px;
}
&.icon-cog {
background: url('../images/icons/cog.png');
background: url("../images/icons/cog.png");
width: 21px;
height: 21px;
}
&.icon-chat-history {
background: url('../images/icons/chat-history.png');
background: url("../images/icons/chat-history.png");
width: 17px;
height: 21px;
}
&.icon-room-link {
background: url('../images/icons/room-link.png');
background: url("../images/icons/room-link.png");
width: 17px;
height: 15px;
}
&.icon-zoom-more {
background: url('../images/icons/zoom-more.png');
background: url("../images/icons/zoom-more.png");
width: 12px;
height: 22px;
}
&.icon-zoom-less {
background: url('../images/icons/zoom-less.png');
background: url("../images/icons/zoom-less.png");
width: 12px;
height: 22px;
}
&.icon-like-room {
background: url('../images/icons/like-room.png');
background: url("../images/icons/like-room.png");
width: 20px;
height: 22px;
}
&.icon-arrows {
background: url('../images/icons/arrows.png');
background: url("../images/icons/arrows.png");
width: 17px;
height: 15px;
}
&.icon-camera-colormatrix {
background: url('../images/icons/camera-colormatrix.png');
background: url("../images/icons/camera-colormatrix.png");
width: 32px;
height: 21px;
}
&.icon-camera-composite {
background: url('../images/icons/camera-composite.png');
background: url("../images/icons/camera-composite.png");
width: 32px;
height: 21px;
}
&.icon-pf-online {
background: url('../images/profile/icons/online.gif');
background: url("../images/profile/icons/online.gif");
width: 40px;
height: 16px;
}
&.icon-pf-offline {
background: url('../images/profile/icons/offline.png');
background: url("../images/profile/icons/offline.png");
width: 39px;
height: 16px;
}
&.icon-pf-tick {
background: url('../images/profile/icons/tick.png');
background: url("../images/profile/icons/tick.png");
width: 11px;
height: 10px;
}
&.icon-group-type-0 {
background: url('../images/groups/icons/grouptype_icon_0.png');
background: url("../images/groups/icons/grouptype_icon_0.png");
width: 16px;
height: 16px;
}
&.icon-group-type-1 {
background: url('../images/groups/icons/grouptype_icon_1.png');
background: url("../images/groups/icons/grouptype_icon_1.png");
width: 16px;
height: 16px;
}
&.icon-group-type-2 {
background: url('../images/groups/icons/grouptype_icon_2.png');
background: url("../images/groups/icons/grouptype_icon_2.png");
width: 16px;
height: 16px;
}
&.icon-group-decorate {
background: url('../images/groups/icons/group_decorate_icon.png');
background: url("../images/groups/icons/group_decorate_icon.png");
width: 15px;
height: 15px;
}
&.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;
height: 20px;
}
&.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;
height: 20px;
}
&.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;
height: 20px;
}
&.icon-group-favorite {
background: url('../images/groups/icons/group_favorite.png');
background: url("../images/groups/icons/group_favorite.png");
width: 14px;
height: 14px;
}
&.icon-group-not-favorite {
background: url('../images/groups/icons/group_notfavorite.png');
background: url("../images/groups/icons/group_notfavorite.png");
width: 14px;
height: 14px;
}
&.icon-group-small-admin {
background: url('../images/groups/icons/group_icon_admin.png');
background: url("../images/groups/icons/group_icon_admin.png");
width: 11px;
height: 13px;
}
&.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;
height: 13px;
}
&.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;
height: 13px;
}
&.icon-navigator-info {
background: url('../images/navigator/icons/info.png');
background: url("../images/navigator/icons/info.png");
width: 18px;
height: 18px;
}
&.icon-navigator-room-locked {
background: url('../images/navigator/icons/room_locked.png');
background: url("../images/navigator/icons/room_locked.png");
width: 13px;
height: 16px;
}
&.icon-navigator-room-password {
background: url('../images/navigator/icons/room_password.png');
background: url("../images/navigator/icons/room_password.png");
width: 13px;
height: 16px;
}
&.icon-navigator-room-invisible {
background: url('../images/navigator/icons/room_invisible.png');
background: url("../images/navigator/icons/room_invisible.png");
width: 13px;
height: 16px;
}
&.icon-navigator-room-group {
background: url('../images/navigator/icons/room_group.png');
background: url("../images/navigator/icons/room_group.png");
width: 13px;
height: 11px;
}
&.icon-youtube-next {
background: url('../images/room-widgets/youtube-widget/next.png');
background: url("../images/room-widgets/youtube-widget/next.png");
width: 21px;
height: 16px;
}
&.icon-youtube-prev {
background: url('../images/room-widgets/youtube-widget/prev.png');
background: url("../images/room-widgets/youtube-widget/prev.png");
width: 21px;
height: 16px;
}
&.icon-hc-banner {
background: url('../images/catalog/hc_big.png');
background: url("../images/catalog/hc_big.png");
width: 68px;
height: 40px;
}
&.icon-set-tile {
background-image: url('../images/floorplaneditor/icon-tile-set.png');
background-image: url("../images/floorplaneditor/icon-tile-set.png");
width: 40px;
height: 40px;
}
&.icon-unset-tile {
background-image: url('../images/floorplaneditor/icon-tile-unset.png');
background-image: url("../images/floorplaneditor/icon-tile-unset.png");
width: 40px;
height: 40px;
}
&.icon-increase-height {
background-image: url('../images/floorplaneditor/icon-tile-up.png');
background-image: url("../images/floorplaneditor/icon-tile-up.png");
width: 40px;
height: 40px;
}
&.icon-decrease-height {
background-image: url('../images/floorplaneditor/icon-tile-down.png');
background-image: url("../images/floorplaneditor/icon-tile-down.png");
width: 40px;
height: 40px;
}
&.icon-set-door {
background-image: url('../images/floorplaneditor/icon-door.png');
background-image: url("../images/floorplaneditor/icon-door.png");
width: 40px;
height: 40px;
}
&.icon-door-direction-0 {
background-image: url('../images/floorplaneditor/door-direction-0.png');
background-image: url("../images/floorplaneditor/door-direction-0.png");
width: 80px;
height: 45px;
}
&.icon-door-direction-1 {
background-image: url('../images/floorplaneditor/door-direction-1.png');
background-image: url("../images/floorplaneditor/door-direction-1.png");
width: 80px;
height: 45px;
}
&.icon-door-direction-2 {
background-image: url('../images/floorplaneditor/door-direction-2.png');
background-image: url("../images/floorplaneditor/door-direction-2.png");
width: 80px;
height: 45px;
}
&.icon-door-direction-3 {
background-image: url('../images/floorplaneditor/door-direction-3.png');
background-image: url("../images/floorplaneditor/door-direction-3.png");
width: 80px;
height: 45px;
}
&.icon-door-direction-4 {
background-image: url('../images/floorplaneditor/door-direction-4.png');
background-image: url("../images/floorplaneditor/door-direction-4.png");
width: 80px;
height: 45px;
}
&.icon-door-direction-5 {
background-image: url('../images/floorplaneditor/door-direction-5.png');
background-image: url("../images/floorplaneditor/door-direction-5.png");
width: 80px;
height: 45px;
}
&.icon-door-direction-6 {
background-image: url('../images/floorplaneditor/door-direction-6.png');
background-image: url("../images/floorplaneditor/door-direction-6.png");
width: 80px;
height: 45px;
}
&.icon-door-direction-7 {
background-image: url('../images/floorplaneditor/door-direction-7.png');
background-image: url("../images/floorplaneditor/door-direction-7.png");
width: 80px;
height: 45px;
}
&.icon-tickets {
background-image: url('../images/icons/tickets.png');
background-image: url("../images/icons/tickets.png");
width: 17px;
height: 17px;
}
&.icon-user {
background-image: url('../images/icons/user.png');
background-image: url("../images/icons/user.png");
width: 18px;
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 './avatar-editor/AvatarEditorView';
@import './camera/CameraWidgetView';
@import './campaign/CampaignView';
@import './catalog/CatalogView';
@import './chat-history/ChatHistoryView';
@import './floorplan-editor/FloorplanEditorView';
@import './friends/FriendsView';
@import './groups/GroupView';
@import './guide-tool/GuideToolView';
@import './hc-center/HcCenterView';
@import './help/HelpView';
@import './hotel-view/HotelView';
@import './inventory/InventoryView';
@import './loading/LoadingView';
@import './mod-tools/ModToolsView';
@import './navigator/NavigatorView';
@import './nitropedia/NitropediaView';
@import './notification-center/NotificationCenterView';
@import './purse/PurseView';
@import './right-side/RightSideView';
@import './room/RoomView';
@import './toolbar/ToolbarView';
@import './user-profile/UserProfileVew';
@import './user-settings/UserSettingsView';
@import './wired/WiredView';
@import "./achievements/AchievementsView";
@import "./avatar-editor/AvatarEditorView";
@import "./camera/CameraWidgetView";
@import "./campaign/CampaignView";
@import "./catalog/CatalogView";
@import "./chat-history/ChatHistoryView";
@import "./floorplan-editor/FloorplanEditorView";
@import "./friends/FriendsView";
@import "./groups/GroupView";
@import "./guide-tool/GuideToolView";
@import "./hc-center/HcCenterView";
@import "./help/HelpView";
@import "./hotel-view/HotelView";
@import "./inventory/InventoryView";
@import "./loading/LoadingView";
@import "./mod-tools/ModToolsView";
@import "./navigator/NavigatorView";
@import "./nitropedia/NitropediaView";
@import "./notification-center/NotificationCenterView";
@import "./purse/PurseView";
@import "./right-side/RightSideView";
@import "./room/RoomView";
@import "./toolbar/ToolbarView";
@import "./user-profile/UserProfileVew";
@import "./user-settings/UserSettingsView";
@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 { FloorplanEditorView } from '../floorplan-editor/FloorplanEditorView';
import { FriendsView } from '../friends/FriendsView';
import { GameCenterView } from '../game-center/GameCenterView';
import { GroupsView } from '../groups/GroupsView';
import { GuideToolView } from '../guide-tool/GuideToolView';
import { HcCenterView } from '../hc-center/HcCenterView';
@ -105,6 +106,7 @@ export const MainView: FC<{}> = props =>
<GuideToolView />
<HcCenterView />
<CampaignView />
<GameCenterView />
</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 { 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 { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useRoomEngineEvent, useSessionInfo } from '../../hooks';
import { ToolbarMeView } from './ToolbarMeView';
@ -81,6 +81,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
{ !isInRoom &&
<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') } />
{ 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-inventory" onClick={ event => CreateLinkEvent('inventory/toggle') }>
{ (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/nitro';
export * from './friends';
export * from './game-center';
export * from './groups';
export * from './help';
export * from './inventory';