mirror of
https://github.com/Bubberstation/Bubberstation.git
synced 2025-12-10 09:42:29 +00:00
2e5642f4d9
## About The Pull Request Giant file diff, but 99% of this PR is just swapping imports We've tested changes slowly with #83789, #84660, and #87763. I think tgui-core is in a good place and the risk of not fully switching is outweighing inaction (in that people are getting confused that there's two sets of ui components #86495). This PR makes some small changes here and there that I saw, spot checks like importing `TableCell` when you don't need to, triple boolean casts `!!!` etc. ## Why It's Good For The Game Most of all, code improvement. Tgui has been sitting in limbo as I ironed out errors with tgui core. We now have one source of all components, common functions etc for tgui. This enables cross-game collaboration between the different versions of SS13 running TGUI.
103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
/**
|
|
* @file
|
|
* @copyright 2020 Aleksej Komarov
|
|
* @license MIT
|
|
*/
|
|
|
|
import { Pane } from 'tgui/layouts';
|
|
import { Button, Section, Stack } from 'tgui-core/components';
|
|
|
|
import { NowPlayingWidget, useAudio } from './audio';
|
|
import { ChatPanel, ChatTabs } from './chat';
|
|
import { useGame } from './game';
|
|
import { Notifications } from './Notifications';
|
|
import { PingIndicator } from './ping';
|
|
import { ReconnectButton } from './reconnect';
|
|
import { SettingsPanel, useSettings } from './settings';
|
|
|
|
export const Panel = (props) => {
|
|
const audio = useAudio();
|
|
const settings = useSettings();
|
|
const game = useGame();
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
const { useDebug, KitchenSink } = require('tgui/debug');
|
|
const debug = useDebug();
|
|
if (debug.kitchenSink) {
|
|
return <KitchenSink panel />;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Pane theme={settings.theme}>
|
|
<Stack fill vertical>
|
|
<Stack.Item>
|
|
<Section fitted>
|
|
<Stack mr={1} align="center">
|
|
<Stack.Item grow overflowX="auto">
|
|
<ChatTabs />
|
|
</Stack.Item>
|
|
<Stack.Item>
|
|
<PingIndicator />
|
|
</Stack.Item>
|
|
<Stack.Item>
|
|
<Button
|
|
color="grey"
|
|
selected={audio.visible}
|
|
icon="music"
|
|
tooltip="Music player"
|
|
tooltipPosition="bottom-start"
|
|
onClick={() => audio.toggle()}
|
|
/>
|
|
</Stack.Item>
|
|
<Stack.Item>
|
|
<Button
|
|
icon={settings.visible ? 'times' : 'cog'}
|
|
selected={settings.visible}
|
|
tooltip={
|
|
settings.visible ? 'Close settings' : 'Open settings'
|
|
}
|
|
tooltipPosition="bottom-start"
|
|
onClick={() => settings.toggle()}
|
|
/>
|
|
</Stack.Item>
|
|
</Stack>
|
|
</Section>
|
|
</Stack.Item>
|
|
{audio.visible && (
|
|
<Stack.Item>
|
|
<Section>
|
|
<NowPlayingWidget />
|
|
</Section>
|
|
</Stack.Item>
|
|
)}
|
|
{settings.visible && (
|
|
<Stack.Item>
|
|
<SettingsPanel />
|
|
</Stack.Item>
|
|
)}
|
|
<Stack.Item grow>
|
|
<Section fill fitted position="relative">
|
|
<Pane.Content scrollable>
|
|
<ChatPanel lineHeight={settings.lineHeight} />
|
|
</Pane.Content>
|
|
<Notifications>
|
|
{game.connectionLostAt && (
|
|
<Notifications.Item rightSlot={<ReconnectButton />}>
|
|
You are either AFK, experiencing lag or the connection has
|
|
closed.
|
|
</Notifications.Item>
|
|
)}
|
|
{game.roundRestartedAt && (
|
|
<Notifications.Item>
|
|
The connection has been closed because the server is
|
|
restarting. Please wait while you automatically reconnect.
|
|
</Notifications.Item>
|
|
)}
|
|
</Notifications>
|
|
</Section>
|
|
</Stack.Item>
|
|
</Stack>
|
|
</Pane>
|
|
);
|
|
};
|