Add coolui test

2026-01-26 19:06:51 +01:00
parent 71a4c6677e
commit d872183654
1734 changed files with 56797 additions and 0 deletions
@@ -0,0 +1,49 @@
+import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
+import { useEffect } from 'react';
+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/'
+        };
+
+        AddLinkEventTracker(linkTracker);
+
+        return () => RemoveLinkEventTracker(linkTracker);
+    }, [ setIsVisible ]);
+
+    if(!isVisible || !games || !accountStatus) return;
+
+    return <Flex className="top-0 bottom-0 start-0 end-0 bg-black" justifyContent="center" position="absolute">
+        <Flex column className="game-center-main">
+            <GameView/>
+            <GameListView />
+        </Flex>
+        <GameStageView />
+    </Flex>;
+};
@@ -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>;
+};
@@ -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" />;
+};
@@ -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>;
+};