mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 10:47:04 +02:00
feat: more accessible full screen mode
This commit is contained in:
TrèsAbhi committed
1 parent
d0d905ccfb
commit
5b889f8483
5 files changed
+301
-296
No files matched your search
@@ -99,184 +99,167 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
|
||||
</Button>
|
||||
|
||||
<Flex align="center" gap="4">
|
||||
{floating && (
|
||||
<Flex gap="2" align="center">
|
||||
Versus {antagonist.tank.name}
|
||||
<SmallTankIcon id={antagonist.tank.id} size={16} />
|
||||
</Flex>
|
||||
)}
|
||||
<Dialog.Root
|
||||
open={antagonistSelectorOpen}
|
||||
onOpenChange={setAntagonistSelectorVisible}
|
||||
>
|
||||
<Dialog.Trigger>
|
||||
<Button variant="ghost">
|
||||
<Flex gap="2" align="center">
|
||||
Versus {antagonist.tank.name}
|
||||
<SmallTankIcon id={antagonist.tank.id} size={16} />
|
||||
</Flex>
|
||||
</Button>
|
||||
</Dialog.Trigger>
|
||||
|
||||
{!floating && (
|
||||
<Dialog.Root
|
||||
open={antagonistSelectorOpen}
|
||||
onOpenChange={setAntagonistSelectorVisible}
|
||||
>
|
||||
<Dialog.Trigger>
|
||||
<Button variant="ghost">
|
||||
<Flex gap="2" align="center">
|
||||
Versus {antagonist.tank.name}
|
||||
<SmallTankIcon id={antagonist.tank.id} size={16} />
|
||||
</Flex>
|
||||
</Button>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Content>
|
||||
<Tabs.Root
|
||||
value={tab}
|
||||
onValueChange={setTab}
|
||||
style={{ position: 'relative' }}
|
||||
>
|
||||
<Dialog.Close>
|
||||
<Button
|
||||
variant="ghost"
|
||||
style={{ position: 'absolute', right: 0, top: 8 }}
|
||||
>
|
||||
<Cross1Icon />
|
||||
</Button>
|
||||
</Dialog.Close>
|
||||
|
||||
<Dialog.Content>
|
||||
<Tabs.Root
|
||||
value={tab}
|
||||
onValueChange={setTab}
|
||||
style={{ position: 'relative' }}
|
||||
>
|
||||
<Dialog.Close>
|
||||
<Button
|
||||
variant="ghost"
|
||||
style={{ position: 'absolute', right: 0, top: 8 }}
|
||||
<Flex gap="4" direction="column">
|
||||
<Tabs.List>
|
||||
<Tabs.Trigger value="search">Search</Tabs.Trigger>
|
||||
<Tabs.Trigger value="configure">Configure</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
|
||||
<Tabs.Content value="search">
|
||||
<Flex
|
||||
direction="column"
|
||||
gap="4"
|
||||
style={{ flex: 1 }}
|
||||
justify="center"
|
||||
>
|
||||
<Cross1Icon />
|
||||
</Button>
|
||||
</Dialog.Close>
|
||||
<TankSearch
|
||||
compact
|
||||
onSelect={(tank) => {
|
||||
mutateDuel((draft) => {
|
||||
draft.antagonist!.tank = tank;
|
||||
draft.antagonist!.engine = tank.engines.at(-1)!;
|
||||
draft.antagonist!.track = tank.tracks.at(-1)!;
|
||||
draft.antagonist!.turret = tank.turrets.at(-1)!;
|
||||
draft.antagonist!.gun =
|
||||
draft.antagonist!.turret.guns.at(-1)!;
|
||||
draft.antagonist!.shell =
|
||||
draft.antagonist!.gun.shells[0];
|
||||
});
|
||||
setAntagonistSelectorVisible(false);
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
</Tabs.Content>
|
||||
|
||||
<Flex gap="4" direction="column">
|
||||
<Tabs.List>
|
||||
<Tabs.Trigger value="search">Search</Tabs.Trigger>
|
||||
<Tabs.Trigger value="configure">Configure</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
<Tabs.Content value="configure">
|
||||
<Flex direction="column" gap="4">
|
||||
<Flex direction="column" gap="2" style={{ flex: 1 }}>
|
||||
<Heading size="4">
|
||||
{antagonist.tank.name} modules
|
||||
</Heading>
|
||||
|
||||
<Tabs.Content value="search">
|
||||
<Flex
|
||||
direction="column"
|
||||
gap="4"
|
||||
style={{ flex: 1 }}
|
||||
justify="center"
|
||||
>
|
||||
<TankSearch
|
||||
compact
|
||||
onSelect={(tank) => {
|
||||
mutateDuel((draft) => {
|
||||
draft.antagonist!.tank = tank;
|
||||
draft.antagonist!.engine = tank.engines.at(-1)!;
|
||||
draft.antagonist!.track = tank.tracks.at(-1)!;
|
||||
draft.antagonist!.turret = tank.turrets.at(-1)!;
|
||||
draft.antagonist!.gun =
|
||||
draft.antagonist!.turret.guns.at(-1)!;
|
||||
draft.antagonist!.shell =
|
||||
draft.antagonist!.gun.shells[0];
|
||||
});
|
||||
setAntagonistSelectorVisible(false);
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
</Tabs.Content>
|
||||
|
||||
<Tabs.Content value="configure">
|
||||
<Flex direction="column" gap="4">
|
||||
<Flex direction="column" gap="2" style={{ flex: 1 }}>
|
||||
<Heading size="4">
|
||||
{antagonist.tank.name} modules
|
||||
</Heading>
|
||||
|
||||
<Flex gap="2" wrap="wrap">
|
||||
<Flex>
|
||||
{antagonist.tank.turrets.map(
|
||||
(turret, index) => (
|
||||
<Tooltip
|
||||
content={turret.name}
|
||||
key={turret.id}
|
||||
>
|
||||
<ModuleButton
|
||||
rowChild
|
||||
first={index === 0}
|
||||
last={
|
||||
index ===
|
||||
antagonist.tank.turrets.length - 1
|
||||
}
|
||||
key={turret.id}
|
||||
onClick={() => {
|
||||
mutateDuel((draft) => {
|
||||
draft.antagonist!.turret = turret;
|
||||
draft.antagonist!.gun =
|
||||
turret.guns.at(-1)!;
|
||||
draft.antagonist!.shell =
|
||||
draft.antagonist!.gun.shells[0];
|
||||
});
|
||||
mutateTankopediaTemporary((draft) => {
|
||||
draft.shot = undefined;
|
||||
});
|
||||
}}
|
||||
selected={
|
||||
antagonist.turret.id === turret.id
|
||||
}
|
||||
discriminator={
|
||||
TIER_ROMAN_NUMERALS[turret.tier]
|
||||
}
|
||||
module="turret"
|
||||
/>
|
||||
</Tooltip>
|
||||
),
|
||||
)}
|
||||
</Flex>
|
||||
<Flex>
|
||||
{antagonist.turret.guns.map((gun, index) => (
|
||||
<Tooltip content={gun.name} key={gun.id}>
|
||||
<ModuleButton
|
||||
rowChild
|
||||
first={index === 0}
|
||||
last={
|
||||
index ===
|
||||
antagonist.turret.guns.length - 1
|
||||
}
|
||||
onClick={() => {
|
||||
mutateDuel((draft) => {
|
||||
draft.antagonist!.gun = gun;
|
||||
draft.antagonist!.shell =
|
||||
gun.shells[0];
|
||||
});
|
||||
}}
|
||||
selected={antagonist.gun.id === gun.id}
|
||||
discriminator={
|
||||
TIER_ROMAN_NUMERALS[gun.tier]
|
||||
}
|
||||
module="gun"
|
||||
/>
|
||||
</Tooltip>
|
||||
))}
|
||||
</Flex>
|
||||
<Flex gap="2" wrap="wrap">
|
||||
<Flex>
|
||||
{antagonist.tank.turrets.map((turret, index) => (
|
||||
<Tooltip content={turret.name} key={turret.id}>
|
||||
<ModuleButton
|
||||
rowChild
|
||||
first={index === 0}
|
||||
last={
|
||||
index ===
|
||||
antagonist.tank.turrets.length - 1
|
||||
}
|
||||
key={turret.id}
|
||||
onClick={() => {
|
||||
mutateDuel((draft) => {
|
||||
draft.antagonist!.turret = turret;
|
||||
draft.antagonist!.gun =
|
||||
turret.guns.at(-1)!;
|
||||
draft.antagonist!.shell =
|
||||
draft.antagonist!.gun.shells[0];
|
||||
});
|
||||
mutateTankopediaTemporary((draft) => {
|
||||
draft.shot = undefined;
|
||||
});
|
||||
}}
|
||||
selected={
|
||||
antagonist.turret.id === turret.id
|
||||
}
|
||||
discriminator={
|
||||
TIER_ROMAN_NUMERALS[turret.tier]
|
||||
}
|
||||
module="turret"
|
||||
/>
|
||||
</Tooltip>
|
||||
))}
|
||||
</Flex>
|
||||
<Flex>
|
||||
{antagonist.turret.guns.map((gun, index) => (
|
||||
<Tooltip content={gun.name} key={gun.id}>
|
||||
<ModuleButton
|
||||
rowChild
|
||||
first={index === 0}
|
||||
last={
|
||||
index ===
|
||||
antagonist.turret.guns.length - 1
|
||||
}
|
||||
onClick={() => {
|
||||
mutateDuel((draft) => {
|
||||
draft.antagonist!.gun = gun;
|
||||
draft.antagonist!.shell = gun.shells[0];
|
||||
});
|
||||
}}
|
||||
selected={antagonist.gun.id === gun.id}
|
||||
discriminator={
|
||||
TIER_ROMAN_NUMERALS[gun.tier]
|
||||
}
|
||||
module="gun"
|
||||
/>
|
||||
</Tooltip>
|
||||
))}
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Flex direction="column" style={{ flex: 1 }}>
|
||||
<Heading size="4">Properties</Heading>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
Turret: <b>{antagonist.turret.name}</b>
|
||||
</li>
|
||||
<li>
|
||||
Gun: <b>{antagonist.gun.name}</b>
|
||||
</li>
|
||||
<li>Shells:</li>
|
||||
<ul>
|
||||
{antagonist.gun.shells.map((shell) => (
|
||||
<li key={shell.id}>
|
||||
{SHELL_NAMES[shell.type]}:{' '}
|
||||
<b>
|
||||
{resolveNearPenetration(
|
||||
shell.penetration,
|
||||
)}
|
||||
mm
|
||||
</b>
|
||||
, {shell.damage.armor}HP
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</ul>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Tabs.Content>
|
||||
</Flex>
|
||||
</Tabs.Root>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
)}
|
||||
|
||||
<Flex direction="column" style={{ flex: 1 }}>
|
||||
<Heading size="4">Properties</Heading>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
Turret: <b>{antagonist.turret.name}</b>
|
||||
</li>
|
||||
<li>
|
||||
Gun: <b>{antagonist.gun.name}</b>
|
||||
</li>
|
||||
<li>Shells:</li>
|
||||
<ul>
|
||||
{antagonist.gun.shells.map((shell) => (
|
||||
<li key={shell.id}>
|
||||
{SHELL_NAMES[shell.type]}:{' '}
|
||||
<b>
|
||||
{resolveNearPenetration(shell.penetration)}
|
||||
mm
|
||||
</b>
|
||||
, {shell.damage.armor}HP
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</ul>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Tabs.Content>
|
||||
</Flex>
|
||||
</Tabs.Root>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
|
||||
@@ -12,6 +12,7 @@ import { modelTransformEvent } from '../../../../../../core/blitzkrieg/modelTran
|
||||
import { Pose, poseEvent } from '../../../../../../core/blitzkrieg/pose';
|
||||
import { tankIcon } from '../../../../../../core/blitzkrieg/tankIcon';
|
||||
import { useEquipment } from '../../../../../../hooks/useEquipment';
|
||||
import { useFullScreen } from '../../../../../../hooks/useFullScreen';
|
||||
import { useWideFormat } from '../../../../../../hooks/useWideFormat';
|
||||
import { mutateDuel, useDuel } from '../../../../../../stores/duel';
|
||||
import mutateTankopediaPersistent, {
|
||||
@@ -33,7 +34,6 @@ export function TankSandbox() {
|
||||
const hasImprovedVerticalStabilizer = useEquipment(122);
|
||||
const awaitedModelDefinitions = use(modelDefinitions);
|
||||
const canvasWrapper = useRef<HTMLDivElement>(null);
|
||||
const [isFullScreen, setIsFullScreen] = useState(false);
|
||||
const mode = useTankopediaPersistent((state) => state.mode);
|
||||
const protagonist = useDuel((state) => state.protagonist!);
|
||||
const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id];
|
||||
@@ -43,6 +43,7 @@ export function TankSandbox() {
|
||||
const wideFormat = useWideFormat();
|
||||
const [loadModel, setLoadModel] = useState(wideFormat || !isMobile);
|
||||
const duel = useDuel();
|
||||
const isFullScreen = useFullScreen();
|
||||
|
||||
function handlePointerDown() {
|
||||
window.addEventListener('pointermove', handlePointerMove);
|
||||
@@ -59,10 +60,6 @@ export function TankSandbox() {
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
function handleFullScreenChange() {
|
||||
setIsFullScreen(document.fullscreenElement !== null);
|
||||
}
|
||||
|
||||
function handlePoseEvent(pose: Pose) {
|
||||
switch (pose) {
|
||||
case Pose.HullDown: {
|
||||
@@ -121,10 +118,8 @@ export function TankSandbox() {
|
||||
}
|
||||
|
||||
poseEvent.on(handlePoseEvent);
|
||||
document.addEventListener('fullscreenchange', handleFullScreenChange);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('fullscreenchange', handleFullScreenChange);
|
||||
poseEvent.off(handlePoseEvent);
|
||||
};
|
||||
});
|
||||
@@ -145,8 +140,13 @@ export function TankSandbox() {
|
||||
<Theme radius={isFullScreen ? 'none' : undefined}>
|
||||
<Card
|
||||
style={{
|
||||
position: 'relative',
|
||||
position: isFullScreen ? 'fixed' : 'relative',
|
||||
border: isFullScreen ? 'none' : 'unset',
|
||||
width: isFullScreen ? '100vw' : 'unset',
|
||||
height: isFullScreen ? 'calc(100vh)' : 'unset',
|
||||
top: isFullScreen ? 0 : 'unset',
|
||||
left: isFullScreen ? 0 : 'unset',
|
||||
zIndex: isFullScreen ? 2 : 'unset',
|
||||
}}
|
||||
ref={canvasWrapper}
|
||||
>
|
||||
|
||||
@@ -18,7 +18,7 @@ interface OptionsProps {
|
||||
canvasWrapper: RefObject<HTMLElement>;
|
||||
}
|
||||
|
||||
export function Options({ isFullScreen, canvasWrapper }: OptionsProps) {
|
||||
export function Options({ isFullScreen }: OptionsProps) {
|
||||
const showGrid = useTankopediaPersistent(
|
||||
(state) => state.model.visual.showGrid,
|
||||
);
|
||||
@@ -50,136 +50,132 @@ export function Options({ isFullScreen, canvasWrapper }: OptionsProps) {
|
||||
right: 18,
|
||||
}}
|
||||
>
|
||||
{!isFullScreen && (
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger>
|
||||
<Button variant="ghost">
|
||||
<EyeOpenIcon />
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger>
|
||||
<Button variant="ghost">
|
||||
<EyeOpenIcon />
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
|
||||
<DropdownMenu.Content>
|
||||
<DropdownMenu.Item onClick={() => poseEvent.emit(Pose.HullDown)}>
|
||||
Hull down
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Content>
|
||||
<DropdownMenu.Item onClick={() => poseEvent.emit(Pose.HullDown)}>
|
||||
Hull down
|
||||
</DropdownMenu.Item>
|
||||
|
||||
<DropdownMenu.Item onClick={() => poseEvent.emit(Pose.FaceHug)}>
|
||||
Face hug
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item onClick={() => poseEvent.emit(Pose.FaceHug)}>
|
||||
Face hug
|
||||
</DropdownMenu.Item>
|
||||
|
||||
<DropdownMenu.Item onClick={() => poseEvent.emit(Pose.Default)}>
|
||||
Default
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
)}
|
||||
<DropdownMenu.Item onClick={() => poseEvent.emit(Pose.Default)}>
|
||||
Default
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
|
||||
{!isFullScreen && (
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger>
|
||||
<Button variant="ghost">
|
||||
<GearIcon />
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger>
|
||||
<Button variant="ghost">
|
||||
<GearIcon />
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
|
||||
<DropdownMenu.Content>
|
||||
<DropdownMenu.Label>Armor</DropdownMenu.Label>
|
||||
<DropdownMenu.Content>
|
||||
<DropdownMenu.Label>Armor</DropdownMenu.Label>
|
||||
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={showSpacedArmor}
|
||||
onCheckedChange={(checked) => {
|
||||
mutateTankopediaPersistent((draft) => {
|
||||
draft.model.visual.showSpacedArmor = checked;
|
||||
});
|
||||
mutateTankopediaTemporary((draft) => {
|
||||
draft.shot = undefined;
|
||||
});
|
||||
}}
|
||||
>
|
||||
Spaced armor
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={showSpacedArmor}
|
||||
onCheckedChange={(checked) => {
|
||||
mutateTankopediaPersistent((draft) => {
|
||||
draft.model.visual.showSpacedArmor = checked;
|
||||
});
|
||||
mutateTankopediaTemporary((draft) => {
|
||||
draft.shot = undefined;
|
||||
});
|
||||
}}
|
||||
>
|
||||
Spaced armor
|
||||
</DropdownMenu.CheckboxItem>
|
||||
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={greenPenetration}
|
||||
onCheckedChange={(checked) => {
|
||||
mutateTankopediaPersistent((draft) => {
|
||||
draft.model.visual.greenPenetration = checked;
|
||||
});
|
||||
}}
|
||||
>
|
||||
Green penetration
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={greenPenetration}
|
||||
onCheckedChange={(checked) => {
|
||||
mutateTankopediaPersistent((draft) => {
|
||||
draft.model.visual.greenPenetration = checked;
|
||||
});
|
||||
}}
|
||||
>
|
||||
Green penetration
|
||||
</DropdownMenu.CheckboxItem>
|
||||
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={wireframe}
|
||||
onCheckedChange={(checked) => {
|
||||
mutateTankopediaPersistent((draft) => {
|
||||
draft.model.visual.wireframe = checked;
|
||||
});
|
||||
}}
|
||||
>
|
||||
Wireframe
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={wireframe}
|
||||
onCheckedChange={(checked) => {
|
||||
mutateTankopediaPersistent((draft) => {
|
||||
draft.model.visual.wireframe = checked;
|
||||
});
|
||||
}}
|
||||
>
|
||||
Wireframe
|
||||
</DropdownMenu.CheckboxItem>
|
||||
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={opaque}
|
||||
onCheckedChange={(checked) => {
|
||||
mutateTankopediaPersistent((draft) => {
|
||||
draft.model.visual.opaque = checked;
|
||||
});
|
||||
}}
|
||||
>
|
||||
Opaque
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={opaque}
|
||||
onCheckedChange={(checked) => {
|
||||
mutateTankopediaPersistent((draft) => {
|
||||
draft.model.visual.opaque = checked;
|
||||
});
|
||||
}}
|
||||
>
|
||||
Opaque
|
||||
</DropdownMenu.CheckboxItem>
|
||||
|
||||
<DropdownMenu.Label>Environment</DropdownMenu.Label>
|
||||
<DropdownMenu.Label>Environment</DropdownMenu.Label>
|
||||
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={showGrid}
|
||||
onCheckedChange={(checked) => {
|
||||
mutateTankopediaPersistent((draft) => {
|
||||
draft.model.visual.showGrid = checked;
|
||||
});
|
||||
}}
|
||||
>
|
||||
Show grid
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={showGrid}
|
||||
onCheckedChange={(checked) => {
|
||||
mutateTankopediaPersistent((draft) => {
|
||||
draft.model.visual.showGrid = checked;
|
||||
});
|
||||
}}
|
||||
>
|
||||
Show grid
|
||||
</DropdownMenu.CheckboxItem>
|
||||
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={showEnvironment}
|
||||
onCheckedChange={(checked) => {
|
||||
mutateTankopediaPersistent((draft) => {
|
||||
draft.model.visual.showEnvironment = checked;
|
||||
});
|
||||
}}
|
||||
>
|
||||
View environment
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={showEnvironment}
|
||||
onCheckedChange={(checked) => {
|
||||
mutateTankopediaPersistent((draft) => {
|
||||
draft.model.visual.showEnvironment = checked;
|
||||
});
|
||||
}}
|
||||
>
|
||||
View environment
|
||||
</DropdownMenu.CheckboxItem>
|
||||
|
||||
<DropdownMenu.Sub>
|
||||
<DropdownMenu.SubTrigger>Lighting</DropdownMenu.SubTrigger>
|
||||
<DropdownMenu.Sub>
|
||||
<DropdownMenu.SubTrigger>Lighting</DropdownMenu.SubTrigger>
|
||||
|
||||
<DropdownMenu.SubContent>
|
||||
<DropdownMenu.RadioGroup value={environment}>
|
||||
{ENVIRONMENTS.map((environment) => (
|
||||
<DropdownMenu.RadioItem
|
||||
key={environment}
|
||||
value={environment}
|
||||
onClick={() => {
|
||||
mutateTankopediaPersistent((draft) => {
|
||||
draft.model.visual.environment = environment;
|
||||
});
|
||||
}}
|
||||
>
|
||||
{environment[0].toUpperCase() + environment.slice(1)}
|
||||
</DropdownMenu.RadioItem>
|
||||
))}
|
||||
</DropdownMenu.RadioGroup>
|
||||
</DropdownMenu.SubContent>
|
||||
</DropdownMenu.Sub>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
)}
|
||||
<DropdownMenu.SubContent>
|
||||
<DropdownMenu.RadioGroup value={environment}>
|
||||
{ENVIRONMENTS.map((environment) => (
|
||||
<DropdownMenu.RadioItem
|
||||
key={environment}
|
||||
value={environment}
|
||||
onClick={() => {
|
||||
mutateTankopediaPersistent((draft) => {
|
||||
draft.model.visual.environment = environment;
|
||||
});
|
||||
}}
|
||||
>
|
||||
{environment[0].toUpperCase() + environment.slice(1)}
|
||||
</DropdownMenu.RadioItem>
|
||||
))}
|
||||
</DropdownMenu.RadioGroup>
|
||||
</DropdownMenu.SubContent>
|
||||
</DropdownMenu.Sub>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
|
||||
{fullScreenAvailable && (
|
||||
<Button
|
||||
@@ -187,7 +183,7 @@ export function Options({ isFullScreen, canvasWrapper }: OptionsProps) {
|
||||
onClick={() => {
|
||||
if (isFullScreen) {
|
||||
document.exitFullscreen();
|
||||
} else canvasWrapper.current?.requestFullscreen();
|
||||
} else document.body.requestFullscreen();
|
||||
}}
|
||||
>
|
||||
{isFullScreen ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}
|
||||
|
||||
@@ -1,10 +1,15 @@
|
||||
import { DiscordLogoIcon } from '@radix-ui/react-icons';
|
||||
import { Flex, Text, Theme } from '@radix-ui/themes';
|
||||
import Link from 'next/link';
|
||||
import { useFullScreen } from '../../hooks/useFullScreen';
|
||||
import { BlitzkriegWormWide } from '../../icons/BlitzkriegWormWide';
|
||||
import { theme } from '../../stitches.config';
|
||||
|
||||
export default function Navbar() {
|
||||
const isFullScreen = useFullScreen();
|
||||
|
||||
if (isFullScreen) return null;
|
||||
|
||||
return (
|
||||
<Theme radius="none">
|
||||
<div
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export function useFullScreen() {
|
||||
const [isFullScreen, setIsFullScreen] = useState(
|
||||
document.fullscreenElement !== null,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
function handleFullScreenChange() {
|
||||
setIsFullScreen(document.fullscreenElement !== null);
|
||||
}
|
||||
|
||||
document.addEventListener('fullscreenchange', handleFullScreenChange);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('fullscreenchange', handleFullScreenChange);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return isFullScreen;
|
||||
}
|
||||
Reference in new issue
Block a user