mirror of
https://github.com/exogen/t2-mapper.git
synced 2026-07-13 15:34:58 +00:00
add map info dialog
This commit is contained in:
Brian Beck
parent
0b345facea
commit
c44df43a91
36 changed files with 2051 additions and 1068 deletions
44
app/page.tsx
44
app/page.tsx
|
|
@ -1,5 +1,12 @@
|
|||
"use client";
|
||||
import { useState, useEffect, useCallback, Suspense, useRef } from "react";
|
||||
import {
|
||||
useState,
|
||||
useEffect,
|
||||
useCallback,
|
||||
Suspense,
|
||||
useRef,
|
||||
lazy,
|
||||
} from "react";
|
||||
import { Canvas, GLProps } from "@react-three/fiber";
|
||||
import { NoToneMapping, SRGBColorSpace, PCFShadowMap, Camera } from "three";
|
||||
import { Mission } from "@/src/components/Mission";
|
||||
|
|
@ -25,6 +32,12 @@ import { CamerasProvider } from "@/src/components/CamerasProvider";
|
|||
import { getMissionList, getMissionInfo } from "@/src/manifest";
|
||||
import { createParser, parseAsBoolean, useQueryState } from "nuqs";
|
||||
|
||||
const MapInfoDialog = lazy(() =>
|
||||
import("@/src/components/MapInfoDialog").then((mod) => ({
|
||||
default: mod.MapInfoDialog,
|
||||
})),
|
||||
);
|
||||
|
||||
// Three.js has its own loaders for textures and models, but we need to load other
|
||||
// stuff too, e.g. missions, terrains, and more. This client is used for those.
|
||||
const queryClient = new QueryClient();
|
||||
|
|
@ -94,6 +107,7 @@ function MapInspector() {
|
|||
|
||||
const isTouch = useTouchDevice();
|
||||
const { missionName, missionType } = currentMission;
|
||||
const [mapInfoOpen, setMapInfoOpen] = useState(false);
|
||||
const [loadingProgress, setLoadingProgress] = useState(0);
|
||||
const [showLoadingIndicator, setShowLoadingIndicator] = useState(true);
|
||||
const isLoading = loadingProgress < 1;
|
||||
|
|
@ -127,6 +141,23 @@ function MapInspector() {
|
|||
};
|
||||
}, [changeMission]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKey = (e: KeyboardEvent) => {
|
||||
if (e.code !== "KeyI" || e.metaKey || e.ctrlKey || e.altKey) return;
|
||||
const target = e.target as HTMLElement;
|
||||
if (
|
||||
target.tagName === "INPUT" ||
|
||||
target.tagName === "TEXTAREA" ||
|
||||
target.isContentEditable
|
||||
) {
|
||||
return;
|
||||
}
|
||||
setMapInfoOpen(true);
|
||||
};
|
||||
window.addEventListener("keydown", handleKey);
|
||||
return () => window.removeEventListener("keydown", handleKey);
|
||||
}, []);
|
||||
|
||||
const handleLoadingChange = useCallback(
|
||||
(_loading: boolean, progress: number = 0) => {
|
||||
setLoadingProgress(progress);
|
||||
|
|
@ -208,9 +239,20 @@ function MapInspector() {
|
|||
missionName={missionName}
|
||||
missionType={missionType}
|
||||
onChangeMission={changeMission}
|
||||
onOpenMapInfo={() => setMapInfoOpen(true)}
|
||||
cameraRef={cameraRef}
|
||||
isTouch={isTouch}
|
||||
/>
|
||||
{mapInfoOpen && (
|
||||
<Suspense fallback={null}>
|
||||
<MapInfoDialog
|
||||
open={mapInfoOpen}
|
||||
onClose={() => setMapInfoOpen(false)}
|
||||
missionName={missionName}
|
||||
missionType={missionType ?? ""}
|
||||
/>
|
||||
</Suspense>
|
||||
)}
|
||||
</KeyboardControls>
|
||||
</SettingsProvider>
|
||||
</main>
|
||||
|
|
|
|||
300
app/style.css
300
app/style.css
|
|
@ -10,6 +10,9 @@ html {
|
|||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
|
@ -203,6 +206,10 @@ input[type="range"] {
|
|||
.LabelledButton .ButtonLabel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.MapInfoButton {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.CopyCoordinatesButton[data-copied="true"] {
|
||||
|
|
@ -569,6 +576,295 @@ input[type="range"] {
|
|||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.MapInfoDialog-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.MapInfoDialog {
|
||||
position: relative;
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
max-width: calc(100dvw - 40px);
|
||||
max-height: calc(100dvh - 40px);
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 1fr auto;
|
||||
background: rgba(20, 37, 38, 0.8);
|
||||
border: 1px solid rgba(65, 131, 139, 0.6);
|
||||
border-radius: 3px;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0, 190, 220, 0.12),
|
||||
0 0 60px rgba(0, 140, 180, 0.12),
|
||||
inset 0 0 60px rgba(1, 7, 13, 0.6);
|
||||
color: #bccec3;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
outline: none;
|
||||
user-select: text;
|
||||
-webkit-touch-callout: default;
|
||||
}
|
||||
|
||||
.MapInfoDialog-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.MapInfoDialog-left {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 24px 28px;
|
||||
}
|
||||
|
||||
.MapInfoDialog-right {
|
||||
border-left: 1px solid rgba(0, 190, 220, 0.3);
|
||||
height: 100%;
|
||||
width: auto;
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.MapInfoDialog-preview {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.MapInfoDialog-preview--floated {
|
||||
float: right;
|
||||
clear: right;
|
||||
margin: 0 0 16px 20px;
|
||||
max-height: 260px;
|
||||
max-width: 30%;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.MapInfoDialog-title {
|
||||
font-size: 26px;
|
||||
font-weight: 500;
|
||||
color: #7dffff;
|
||||
margin: 0;
|
||||
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.MapInfoDialog-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 16px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
/* text-transform: uppercase; */
|
||||
}
|
||||
|
||||
.MapInfoDialog-planet {
|
||||
color: rgba(219, 202, 168, 0.7);
|
||||
}
|
||||
|
||||
.MapInfoDialog-quote {
|
||||
margin: 16px 0;
|
||||
padding: 0 0 0 14px;
|
||||
border-left: 2px solid rgba(0, 190, 220, 0.35);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.MapInfoDialog-quote p {
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
.MapInfoDialog-quote cite {
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.MapInfoDialog-blurb {
|
||||
font-size: 13px;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.MapInfoDialog-section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.MapInfoDialog-sectionTitle {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #7dffff;
|
||||
margin: 0 0 8px;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 0 16px rgba(0, 210, 240, 0.25);
|
||||
}
|
||||
|
||||
.MapInfoDialog-musicTrack {
|
||||
margin-top: 16px;
|
||||
font-size: 14px;
|
||||
color: rgba(202, 208, 172, 0.5);
|
||||
font-style: italic;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.MapInfoDialog-musicTrack[data-playing="true"] {
|
||||
color: rgba(247, 253, 216, 0.7);
|
||||
}
|
||||
|
||||
.MapInfoDialog-musicBtn {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: rgb(85, 118, 99);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 20px;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.MapInfoDialog-musicTrack[data-playing="true"] .MapInfoDialog-musicBtn {
|
||||
color: rgb(109, 255, 170);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.MapInfoDialog-musicTrack[data-playing="true"] .MapInfoDialog-musicBtn:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.MapInfoDialog-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 10px 12px;
|
||||
border-top: 1px solid rgba(0, 190, 220, 0.25);
|
||||
background: rgba(2, 20, 21, 0.7);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.MapInfoDialog-closeBtn {
|
||||
padding: 4px 18px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(41, 172, 156, 0.7),
|
||||
rgba(0, 80, 65, 0.7)
|
||||
);
|
||||
border: 1px solid rgba(41, 97, 84, 0.6);
|
||||
border-top-color: rgba(101, 185, 176, 0.5);
|
||||
border-radius: 3px;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(120, 220, 195, 0.2),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.3),
|
||||
0 2px 4px rgba(0, 0, 0, 0.4);
|
||||
color: rgba(154, 239, 225, 0.9);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.MapInfoDialog-closeBtn:active {
|
||||
transform: translate(0, 1px);
|
||||
}
|
||||
|
||||
.MapInfoDialog-hint {
|
||||
font-size: 12px;
|
||||
color: rgba(201, 220, 216, 0.3);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 719px) {
|
||||
.MapInfoDialog-inner {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.MapInfoDialog-hint {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.MapInfoDialog-left {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.MapInfoDialog-right {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.MapInfoDialog-preview {
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 16px auto;
|
||||
}
|
||||
|
||||
.MapInfoDialog-closeBtn {
|
||||
width: 220px;
|
||||
height: 36px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.GuiMarkup-line {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.GuiMarkup-spacer {
|
||||
height: 0.6em;
|
||||
}
|
||||
|
||||
.GuiMarkup-bulletLine {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 5px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.GuiMarkup-bulletIcon {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.GuiMarkup-bulletText {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.GuiMarkup-bitmap {
|
||||
max-height: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.GuiMarkup-bullet {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.TouchJoystick {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
|
|
@ -609,3 +905,7 @@ input[type="range"] {
|
|||
inset 0 1px 0 rgba(255, 255, 255, 0.15),
|
||||
inset 0 -1px 2px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
.MusicTrackName {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue