🆙 Init V3

src/components/game-center/views/GameListView.tsx

@@ -0,0 +1,31 @@
+import { GameConfigurationData } from '@nitrots/nitro-renderer';
+import { LocalizeText } from '../../../api';
+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 <div className="gameList-container bg-dark p-1 w-full">
+        { LocalizeText('gamecenter.game_list_title') }
+        <div className="flex gap-3">
+            { games && games.map((game, index) =>
+                <div key={ index } className={ getClasses(game) } style={ { backgroundImage: getIconImage(game) } } onClick={ evt => setSelectedGame(game) } />
+            ) }
+        </div>
+    </div>;
+};

src/components/game-center/views/GameStageView.tsx

@@ -0,0 +1,46 @@
+import { Game2ExitGameMessageComposer } from '@nitrots/nitro-renderer';
+import { useEffect, useRef, useState } from 'react';
+import { SendMessageComposer } from '../../../api';
+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-full');
+
+        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 <div ref={ ref } className="game-center-stage" />;
+};

src/components/game-center/views/GameView.tsx

@@ -0,0 +1,55 @@
+import { Game2GetAccountGameStatusMessageComposer, GetGameStatusMessageComposer, JoinQueueMessageComposer } from '@nitrots/nitro-renderer';
+import { useEffect } from 'react';
+import { ColorUtils, LocalizeText, SendMessageComposer } from '../../../api';
+import { 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 fullHeight className="game-view py-4" style={ { backgroundColor: getBgColour(), backgroundImage: getBgImage(), color: getColor() } }>
+        <Flex column alignItems="center" className="w-75" 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 className="px-4" position="relative" variant="light" onClick={ onPlay }>
+                    { LocalizeText('gamecenter.play_now') }
+                    { !accountStatus.hasUnlimitedGames &&
+                    <LayoutItemCountView className="me-n1 mt-n1" count={ accountStatus.freeGamesLeft }/> }
+                </Button>
+            </> }
+            <Text bold center className="w-50">{ LocalizeText(`gamecenter.${ selectedGame.gameNameId }.description_content`) }</Text>
+        </Flex>
+        <div className="w-25" />
+    </Flex>;
+};