TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-25 03:29:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: more accessible full screen mode

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-04-01 21:33:47 -05:00
1 parent d0d905ccfb
commit 5b889f8483
5 files changed
+41 -36
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/tankopedia/[id]/components/AntagonistBar.tsx
+5 -22
View File
@@ -99,14 +99,6 @@ 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>
)}
{!floating && (
<Dialog.Root
open={antagonistSelectorOpen}
onOpenChange={setAntagonistSelectorVisible}
@@ -176,12 +168,8 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
<Flex gap="2" wrap="wrap">
<Flex>
{antagonist.tank.turrets.map(
(turret, index) => (
<Tooltip
content={turret.name}
key={turret.id}
>
{antagonist.tank.turrets.map((turret, index) => (
<Tooltip content={turret.name} key={turret.id}>
<ModuleButton
rowChild
first={index === 0}
@@ -211,8 +199,7 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
module="turret"
/>
</Tooltip>
),
)}
))}
</Flex>
<Flex>
{antagonist.turret.guns.map((gun, index) => (
@@ -227,8 +214,7 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
onClick={() => {
mutateDuel((draft) => {
draft.antagonist!.gun = gun;
draft.antagonist!.shell =
gun.shells[0];
draft.antagonist!.shell = gun.shells[0];
});
}}
selected={antagonist.gun.id === gun.id}
@@ -259,9 +245,7 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
<li key={shell.id}>
{SHELL_NAMES[shell.type]}:{' '}
<b>
{resolveNearPenetration(
shell.penetration,
)}
{resolveNearPenetration(shell.penetration)}
mm
</b>
, {shell.damage.armor}HP
@@ -276,7 +260,6 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
</Tabs.Root>
</Dialog.Content>
</Dialog.Root>
)}
</Flex>
</Flex>
</Card>
src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx
+8 -8
View File
@@ -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}
>
src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
+2 -6
View File
@@ -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,7 +50,6 @@ export function Options({ isFullScreen, canvasWrapper }: OptionsProps) {
right: 18,
}}
>
{!isFullScreen && (
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<Button variant="ghost">
@@ -72,9 +71,7 @@ export function Options({ isFullScreen, canvasWrapper }: OptionsProps) {
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
)}
{!isFullScreen && (
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<Button variant="ghost">
@@ -179,7 +176,6 @@ export function Options({ isFullScreen, canvasWrapper }: OptionsProps) {
</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 />}
src/components/Navbar/index.tsx
+5
View File
@@ -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
src/hooks/useFullScreen.ts
+21
View File
@@ -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;
}