From 5b889f8483aaa94f434218b1a2f7101fa3d7a2f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Mon, 1 Apr 2024 21:33:47 -0500 Subject: [PATCH] feat: more accessible full screen mode --- .../[id]/components/AntagonistBar.tsx | 323 +++++++++--------- .../[id]/components/Model/TankSandbox.tsx | 16 +- .../components/Model/components/Options.tsx | 232 +++++++------ src/components/Navbar/index.tsx | 5 + src/hooks/useFullScreen.ts | 21 ++ 5 files changed, 301 insertions(+), 296 deletions(-) create mode 100644 src/hooks/useFullScreen.ts diff --git a/src/app/tools/tankopedia/[id]/components/AntagonistBar.tsx b/src/app/tools/tankopedia/[id]/components/AntagonistBar.tsx index dbdb90fcb..88672ce5c 100644 --- a/src/app/tools/tankopedia/[id]/components/AntagonistBar.tsx +++ b/src/app/tools/tankopedia/[id]/components/AntagonistBar.tsx @@ -99,184 +99,167 @@ export function AntagonistBar({ floating }: AntagonistBarProps) { - {floating && ( - - Versus {antagonist.tank.name} - - - )} + + + + - {!floating && ( - - - - + + + + + - - - - - + { + 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); + }} + /> + + - - - Search - Configure - + + + + + {antagonist.tank.name} modules + - - - { - 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); - }} - /> - - - - - - - - {antagonist.tank.name} modules - - - - - {antagonist.tank.turrets.map( - (turret, index) => ( - - { - 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" - /> - - ), - )} - - - {antagonist.turret.guns.map((gun, index) => ( - - { - 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" - /> - - ))} - + + + {antagonist.tank.turrets.map((turret, index) => ( + + { + 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" + /> + + ))} + + + {antagonist.turret.guns.map((gun, index) => ( + + { + 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" + /> + + ))} - - - Properties - -
    -
  • - Turret: {antagonist.turret.name} -
    • -
  • - Gun: {antagonist.gun.name} -
    • -
  • Shells:
    • -
      - {antagonist.gun.shells.map((shell) => ( -
    • - {SHELL_NAMES[shell.type]}:{' '} - - {resolveNearPenetration( - shell.penetration, - )} - mm - - , {shell.damage.armor}HP -
      • - ))} -
    -
- - - - - - - )} + + + Properties + +
    +
  • + Turret: {antagonist.turret.name} +
    • +
  • + Gun: {antagonist.gun.name} +
    • +
  • Shells:
    • +
      + {antagonist.gun.shells.map((shell) => ( +
    • + {SHELL_NAMES[shell.type]}:{' '} + + {resolveNearPenetration(shell.penetration)} + mm + + , {shell.damage.armor}HP +
      • + ))} +
    +
+ + + + + + + diff --git a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx b/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx index 8d814b3ca..a4897ec19 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx @@ -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(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() { diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx index fcbd8b5cd..3553edf89 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx @@ -18,7 +18,7 @@ interface OptionsProps { canvasWrapper: RefObject; } -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 && ( - - - - + + + + - - poseEvent.emit(Pose.HullDown)}> - Hull down - + + poseEvent.emit(Pose.HullDown)}> + Hull down + - poseEvent.emit(Pose.FaceHug)}> - Face hug - + poseEvent.emit(Pose.FaceHug)}> + Face hug + - poseEvent.emit(Pose.Default)}> - Default - - - - )} + poseEvent.emit(Pose.Default)}> + Default + + + - {!isFullScreen && ( - - - - + + + + - - Armor + + Armor - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.showSpacedArmor = checked; - }); - mutateTankopediaTemporary((draft) => { - draft.shot = undefined; - }); - }} - > - Spaced armor - + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.showSpacedArmor = checked; + }); + mutateTankopediaTemporary((draft) => { + draft.shot = undefined; + }); + }} + > + Spaced armor + - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.greenPenetration = checked; - }); - }} - > - Green penetration - + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.greenPenetration = checked; + }); + }} + > + Green penetration + - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.wireframe = checked; - }); - }} - > - Wireframe - + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.wireframe = checked; + }); + }} + > + Wireframe + - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.opaque = checked; - }); - }} - > - Opaque - + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.opaque = checked; + }); + }} + > + Opaque + - Environment + Environment - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.showGrid = checked; - }); - }} - > - Show grid - + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.showGrid = checked; + }); + }} + > + Show grid + - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.showEnvironment = checked; - }); - }} - > - View environment - + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.showEnvironment = checked; + }); + }} + > + View environment + - - Lighting + + Lighting - - - {ENVIRONMENTS.map((environment) => ( - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.environment = environment; - }); - }} - > - {environment[0].toUpperCase() + environment.slice(1)} - - ))} - - - - - - )} + + + {ENVIRONMENTS.map((environment) => ( + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.environment = environment; + }); + }} + > + {environment[0].toUpperCase() + environment.slice(1)} + + ))} + + + + + {fullScreenAvailable && (