From 6753a72d97a4e63d40ceba53fc700dc8ca54dc67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Sat, 6 Jan 2024 17:56:12 -0600 Subject: [PATCH] feat: better ui sizing --- .../[id]/components/RotationInputs.tsx | 197 +++++++++--------- src/app/tools/tankopedia/[id]/page.tsx | 147 ++++++++----- src/app/tools/tankopedia/page.css.ts | 2 +- src/app/tools/tankopedia/page.tsx | 5 +- 4 files changed, 202 insertions(+), 149 deletions(-) diff --git a/src/app/tools/tankopedia/[id]/components/RotationInputs.tsx b/src/app/tools/tankopedia/[id]/components/RotationInputs.tsx index 73601c6fd..d3c118022 100644 --- a/src/app/tools/tankopedia/[id]/components/RotationInputs.tsx +++ b/src/app/tools/tankopedia/[id]/components/RotationInputs.tsx @@ -46,115 +46,120 @@ export function RotationInputs({ return ( - - Hull - { - const normalized = normalizeAnglePI( - -Number(hullYawInput.current?.value) * (Math.PI / 180), - ); - mutateTankopedia((state) => { - state.model.hullYaw = normalized; - }); - hullYawInput.current!.value = `${Math.round(normalized)}`; + { - if (event.key === 'Enter') { - hullYawInput.current?.blur(); - } - }} - onFocus={() => hullYawInput.current?.focus()} - ref={hullYawInput} - style={{ textAlign: 'right' }} - /> - ° - + > + Hull + { + const normalized = normalizeAnglePI( + -Number(hullYawInput.current?.value) * (Math.PI / 180), + ); + mutateTankopedia((state) => { + state.model.hullYaw = normalized; + }); + hullYawInput.current!.value = `${Math.round(normalized)}`; + }} + onKeyDown={(event) => { + if (event.key === 'Enter') { + hullYawInput.current?.blur(); + } + }} + onFocus={() => hullYawInput.current?.focus()} + ref={hullYawInput} + style={{ textAlign: 'right' }} + /> + ° + - - Turret - { - const [pitch, yaw] = applyPitchYawLimits( - model.gunPitch, - -Number(turretYawInput.current?.value) * (Math.PI / 180), - gunModelDefinition.pitch, - turretModelDefinition.yaw, - ); - mutateTankopedia((state) => { - state.model.gunPitch = pitch; - state.model.turretYaw = yaw; - }); - turretYawInput.current!.value = `${Math.round( - yaw * (180 / Math.PI), - )}`; + { - if (event.key === 'Enter') { - turretYawInput.current?.blur(); - } - }} - onFocus={() => turretYawInput.current?.focus()} - ref={turretYawInput} - style={{ textAlign: 'right' }} - /> - ° - + > + Turret + { + const [pitch, yaw] = applyPitchYawLimits( + model.gunPitch, + -Number(turretYawInput.current?.value) * (Math.PI / 180), + gunModelDefinition.pitch, + turretModelDefinition.yaw, + ); + mutateTankopedia((state) => { + state.model.gunPitch = pitch; + state.model.turretYaw = yaw; + }); + turretYawInput.current!.value = `${Math.round( + yaw * (180 / Math.PI), + )}`; + }} + onKeyDown={(event) => { + if (event.key === 'Enter') { + turretYawInput.current?.blur(); + } + }} + onFocus={() => turretYawInput.current?.focus()} + ref={turretYawInput} + style={{ textAlign: 'right' }} + /> + ° + - - Gun - { - const [pitch, yaw] = applyPitchYawLimits( - -Number(gunPitchInput.current?.value) * (Math.PI / 180), - model.turretYaw, - gunModelDefinition.pitch, - turretModelDefinition.yaw, - ); - mutateTankopedia((state) => { - state.model.gunPitch = pitch; - state.model.turretYaw = yaw; - }); - gunPitchInput.current!.value = `${Math.round( - pitch * (180 / Math.PI), - )}`; + { - if (event.key === 'Enter') { - gunPitchInput.current?.blur(); - } - }} - onFocus={() => gunPitchInput.current?.focus()} - ref={gunPitchInput} - style={{ textAlign: 'right' }} - /> - ° - + > + Gun + { + const [pitch, yaw] = applyPitchYawLimits( + -Number(gunPitchInput.current?.value) * (Math.PI / 180), + model.turretYaw, + gunModelDefinition.pitch, + turretModelDefinition.yaw, + ); + mutateTankopedia((state) => { + state.model.gunPitch = pitch; + state.model.turretYaw = yaw; + }); + gunPitchInput.current!.value = `${Math.round( + pitch * (180 / Math.PI), + )}`; + }} + onKeyDown={(event) => { + if (event.key === 'Enter') { + gunPitchInput.current?.blur(); + } + }} + onFocus={() => gunPitchInput.current?.focus()} + ref={gunPitchInput} + style={{ textAlign: 'right' }} + /> + ° + + ); } diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx index 022a293e7..743054bae 100644 --- a/src/app/tools/tankopedia/[id]/page.tsx +++ b/src/app/tools/tankopedia/[id]/page.tsx @@ -3,6 +3,8 @@ import { ArrowLeftIcon, CaretRightIcon, + EnterFullScreenIcon, + ExitFullScreenIcon, MagnifyingGlassIcon, } from '@radix-ui/react-icons'; import { @@ -24,7 +26,7 @@ import { Canvas } from '@react-three/fiber'; import { go } from 'fuzzysort'; import { debounce } from 'lodash'; import Link from 'next/link'; -import { Suspense, use, useRef, useState } from 'react'; +import { Suspense, use, useEffect, useRef, useState } from 'react'; import { Group, Vector3 } from 'three'; import { Flag } from '../../../../components/Flag'; import { ModuleButtons } from '../../../../components/ModuleButton'; @@ -37,7 +39,6 @@ import { } from '../../../../core/blitzkrieg/tankDefinitions'; import { theme } from '../../../../stitches.config'; import { Loader } from '../../components/Loader'; -import * as styles from '../page.css'; import { Controls } from './components/Control'; import { RotationInputs } from './components/RotationInputs'; import { SceneProps } from './components/SceneProps'; @@ -64,6 +65,8 @@ export default function Page({ params }: { params: { id: string } }) { const [versusGun, setVersusGun] = useState(versusTurret.guns.at(-1)!); const [versusTankTab, setVersusTankTab] = useState('search'); const canvas = useRef(null); + const canvasWrapper = useRef(null); + const [isFullScreen, setIsFullScreen] = useState(false); function handlePointerDown() { window.addEventListener('pointermove', handlePointerMove); @@ -79,6 +82,18 @@ export default function Page({ params }: { params: { id: string } }) { window.removeEventListener('pointerup', handlePointerUp); } + useEffect(() => { + function handleFullScreenChange() { + setIsFullScreen(document.fullscreenElement !== null); + } + + document.addEventListener('fullscreenchange', handleFullScreenChange); + + return () => { + document.removeEventListener('fullscreenchange', handleFullScreenChange); + }; + }); + return ( @@ -90,7 +105,7 @@ export default function Page({ params }: { params: { id: string } }) { > - Back to tankopedia + Back @@ -100,59 +115,91 @@ export default function Page({ params }: { params: { id: string } }) { - - - - - Model - Armor - - - -
- + + + - - + + + Model + Armor + + - - + + + + + + + + } + > + - - } + + +
+ + - {mode === 'armor' && ( - - - Enhanced armor + - )} - - - - + + + diff --git a/src/app/tools/tankopedia/page.css.ts b/src/app/tools/tankopedia/page.css.ts index c5cc972f4..4065c1427 100644 --- a/src/app/tools/tankopedia/page.css.ts +++ b/src/app/tools/tankopedia/page.css.ts @@ -41,7 +41,7 @@ export const listingImage = style({ }, }); -export const enhancedArmor = style({ +export const alignTopRight = style({ '@media': { 'screen and (min-width: 400px)': { position: 'absolute', diff --git a/src/app/tools/tankopedia/page.tsx b/src/app/tools/tankopedia/page.tsx index a41a99c00..d69003d52 100644 --- a/src/app/tools/tankopedia/page.tsx +++ b/src/app/tools/tankopedia/page.tsx @@ -16,6 +16,7 @@ import { TextField, } from '@radix-ui/themes'; import { go } from 'fuzzysort'; +import Link from 'next/link'; import { Suspense, use, useEffect, useMemo, useRef, useState } from 'react'; import PageWrapper from '../../../components/PageWrapper'; import { asset } from '../../../core/blitzkrieg/asset'; @@ -198,7 +199,7 @@ export default function Page() { {searchedList .map((tank) => ( - - + )) .slice(page * TANKS_PER_PAGE, (page + 1) * TANKS_PER_PAGE)}