From b9c5c3c9316bfa7677b96db7a709dbc67ced6347 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Thu, 22 Feb 2024 19:04:44 -0600 Subject: [PATCH] feat: better fullscreen --- .../[id]/components/AntagonistBar.tsx | 270 ++++++++++++++++++ .../[id]/components/AntagonistBar/index.tsx | 240 ---------------- .../[id]/components/Model/TankSandbox.tsx | 10 +- .../components/Model/components/Options.tsx | 186 ++++++------ .../[id]/components/QuickInputs/index.tsx | 8 +- 5 files changed, 378 insertions(+), 336 deletions(-) create mode 100644 src/app/tools/tankopedia/[id]/components/AntagonistBar.tsx delete mode 100644 src/app/tools/tankopedia/[id]/components/AntagonistBar/index.tsx diff --git a/src/app/tools/tankopedia/[id]/components/AntagonistBar.tsx b/src/app/tools/tankopedia/[id]/components/AntagonistBar.tsx new file mode 100644 index 000000000..b0bbe65dc --- /dev/null +++ b/src/app/tools/tankopedia/[id]/components/AntagonistBar.tsx @@ -0,0 +1,270 @@ +import { CaretRightIcon, Cross1Icon, ShuffleIcon } from '@radix-ui/react-icons'; +import { + Button, + Card, + Dialog, + Flex, + Heading, + Tabs, + Text, + Tooltip, +} from '@radix-ui/themes'; +import { useState } from 'react'; +import { ModuleButton } from '../../../../../components/ModuleButtons/ModuleButton'; +import { ShellButton } from '../../../../../components/ModuleButtons/ShellButton'; +import { SmallTankIcon } from '../../../../../components/SmallTankIcon'; +import { resolveNearPenetration } from '../../../../../core/blitz/resolveNearPenetration'; +import { + SHELL_NAMES, + TIER_ROMAN_NUMERALS, +} from '../../../../../core/blitzkrieg/tankDefinitions'; +import { mutateDuel, useDuel } from '../../../../../stores/duel'; +import { + mutateTankopediaTemporary, + useTankopediaPersistent, +} from '../../../../../stores/tankopedia'; +import { TankSearch } from '../../components/TankSearch'; + +interface AntagonistBarProps { + floating?: boolean; +} + +export function AntagonistBar({ floating }: AntagonistBarProps) { + const antagonist = useDuel((state) => state.antagonist!); + const mode = useTankopediaPersistent((state) => state.mode); + const [tab, setTab] = useState('search'); + const [antagonistSelectorOpen, setAntagonistSelectorVisible] = + useState(false); + + if (mode !== 'armor') return null; + + return ( + + + + {antagonist.gun.shells.map((shell, index) => { + return ( + { + mutateDuel((draft) => { + draft.antagonist!.shell = shell; + mutateTankopediaTemporary((draft) => { + draft.shot = undefined; + }); + }); + }} + /> + ); + })} + + + + {!floating && Versus} + + {floating && ( + + Versus {antagonist.tank.name} + + + )} + + {!floating && ( + + + + + + + + + + + + + + Search + Configure + + + + + { + 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" + /> + + ))} + + + + + + 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/AntagonistBar/index.tsx b/src/app/tools/tankopedia/[id]/components/AntagonistBar/index.tsx deleted file mode 100644 index 736a04e71..000000000 --- a/src/app/tools/tankopedia/[id]/components/AntagonistBar/index.tsx +++ /dev/null @@ -1,240 +0,0 @@ -import { CaretRightIcon, Cross1Icon, ShuffleIcon } from '@radix-ui/react-icons'; -import { - Button, - Card, - Dialog, - Flex, - Heading, - Tabs, - Text, - Tooltip, -} from '@radix-ui/themes'; -import { useState } from 'react'; -import { ModuleButton } from '../../../../../../components/ModuleButtons/ModuleButton'; -import { ShellButton } from '../../../../../../components/ModuleButtons/ShellButton'; -import { SmallTankIcon } from '../../../../../../components/SmallTankIcon'; -import { resolveNearPenetration } from '../../../../../../core/blitz/resolveNearPenetration'; -import { - SHELL_NAMES, - TIER_ROMAN_NUMERALS, -} from '../../../../../../core/blitzkrieg/tankDefinitions'; -import { mutateDuel, useDuel } from '../../../../../../stores/duel'; -import { - mutateTankopediaTemporary, - useTankopediaPersistent, -} from '../../../../../../stores/tankopedia'; -import { TankSearch } from '../../../components/TankSearch'; - -export function AntagonistBar() { - const antagonist = useDuel((state) => state.antagonist!); - const mode = useTankopediaPersistent((state) => state.mode); - const [tab, setTab] = useState('search'); - const [antagonistSelectorOpen, setAntagonistSelectorVisible] = - useState(false); - - if (mode !== 'armor') return null; - - return ( - - - - {antagonist.gun.shells.map((shell, index) => { - return ( - { - mutateDuel((draft) => { - draft.antagonist!.shell = shell; - mutateTankopediaTemporary((draft) => { - draft.shot = undefined; - }); - }); - }} - /> - ); - })} - - - - Versus - - - - - - - - - - - - - - - Search - Configure - - - - - { - 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" - /> - - ))} - - - - - - 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 30e9488a6..a8a087792 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx @@ -17,6 +17,7 @@ import mutateTankopediaPersistent, { mutateTankopediaTemporary, useTankopediaPersistent, } from '../../../../../../stores/tankopedia'; +import { AntagonistBar } from '../AntagonistBar'; import { Controls } from '../Control'; import { Lighting } from '../Lighting'; import { RotationInputs } from '../QuickInputs'; @@ -242,9 +243,14 @@ export function TankSandbox() { )} - + - {loadModel && } + {isFullScreen && } + + {loadModel && } 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 a19a4cb34..9896894d8 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx @@ -14,10 +14,10 @@ import { ENVIRONMENTS } from '../../Lighting'; interface OptionsProps { isFullScreen: boolean; - canvas: RefObject; + canvasWrapper: RefObject; } -export function Options({ isFullScreen, canvas }: OptionsProps) { +export function Options({ isFullScreen, canvasWrapper }: OptionsProps) { const showGrid = useTankopediaPersistent( (state) => state.model.visual.showGrid, ); @@ -45,103 +45,107 @@ export function Options({ isFullScreen, canvas }: 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 && ( + + + + - - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.greenPenetration = checked; - }); - }} - > - Green penetration - + + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.greenPenetration = checked; + }); + }} + > + Green penetration + - { - 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)} + + ))} + + + - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.wireframe = checked; - }); - }} - > - Wireframe - - - + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.wireframe = checked; + }); + }} + > + Wireframe + + + + )} {fullScreenAvailable && (