Expand Master of Vega tutorial to cover full gameplay loop
- Add ~25 new steps: nearby stars, pan/zoom lesson, star info, fleet movement, home star/system view, colony management (allocation, focus), end turn, and the full Empire menu tour (Research, Diplomacy, Leaders, Colonies) - Introduce hotspotAction, starPick, advanceOn modes (starPick/fleetInFlight/external), and advanceAction fields in tutorial data schema with validation - Add VegaStarMap.fitToWorldBounds and extend pickFitZoomIndex to support a narrowed viewport area so the reachable-stars frame avoids the docked panel - Bypass openModal gating for System View, Colony View, and Empire screens by calling their open functions directly from VegaTutorial; wire onClose/onColonyOpen callbacks to advance() - Add tutorialFreePan flag so pan/zoom work during the free-pan step while all other map interactions stay frozen - Add multi-target resolution (nearbyStars returns an array), invisible-shape holes, and per-star click hotspots in the tutorial overlay - Update verification script to allow buttonless modal steps that advance via external callbacks
This commit is contained in:
parent
4175da2e26
commit
ce14631544
Binary file not shown.
|
|
@ -26,6 +26,7 @@
|
|||
"highlights": ["homeFleet", "homeStar"],
|
||||
"calloutText": "This is your fleet. A Scout Ship and Colony Ship. Click here to select them.",
|
||||
"advanceOn": "hotspot",
|
||||
"hotspotAction": "selectHomeFleet",
|
||||
"buttons": []
|
||||
},
|
||||
{
|
||||
|
|
@ -48,6 +49,295 @@
|
|||
"buttons": [
|
||||
{ "action": "next", "label": "Next" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "nearby-stars",
|
||||
"kind": "callout",
|
||||
"voice": null,
|
||||
"anchor": "homeFleet",
|
||||
"highlights": ["homeFleet", "homeStar", "nearbyStars"],
|
||||
"calloutText": "Your fleet isn't limited to your home star — it can also travel to any of the other stars highlighted nearby.",
|
||||
"buttons": [
|
||||
{ "action": "next", "label": "Next" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "map-controls",
|
||||
"kind": "callout",
|
||||
"voice": null,
|
||||
"anchor": "homeFleet",
|
||||
"highlights": ["mapArea"],
|
||||
"freePan": true,
|
||||
"calloutText": "Before you send your fleet anywhere, here's how to get around the map. Click and drag anywhere to pan in any direction. Scroll your mouse wheel up to zoom in, or down to zoom out. Try it now, then click Next when you're ready.",
|
||||
"buttons": [
|
||||
{ "action": "next", "label": "Next" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "click-star",
|
||||
"kind": "callout",
|
||||
"voice": null,
|
||||
"anchor": "nearbyStars",
|
||||
"highlights": ["nearbyStars"],
|
||||
"starPick": "info",
|
||||
"advanceOn": "starPick",
|
||||
"fitReachableStars": true,
|
||||
"calloutText": "Now click on one of the highlighted stars to see what's there.",
|
||||
"buttons": []
|
||||
},
|
||||
{
|
||||
"id": "read-star-info",
|
||||
"kind": "callout",
|
||||
"voice": null,
|
||||
"anchor": "panel",
|
||||
"highlights": ["panel"],
|
||||
"calloutText": "This star hasn't been explored yet, so for now the panel only shows its class and a general description — different star classes support different amounts of population. Once a scout of yours actually reaches a system, this same panel will also reveal its worlds, how many of them are habitable for your species, and any colonies or fleets stationed there.",
|
||||
"buttons": [
|
||||
{ "action": "next", "label": "Next" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "move-fleet",
|
||||
"kind": "callout",
|
||||
"voice": null,
|
||||
"anchor": "panel",
|
||||
"highlights": ["nearbyStars", "panel"],
|
||||
"starPick": "order",
|
||||
"advanceOn": "fleetInFlight",
|
||||
"selectHomeFleet": true,
|
||||
"calloutText": "Let's send your fleet on its way. Click one of the highlighted stars again, then review the order in this panel and press Accept to launch your fleet.",
|
||||
"buttons": []
|
||||
},
|
||||
{
|
||||
"id": "fleet-moving",
|
||||
"kind": "callout",
|
||||
"voice": null,
|
||||
"anchor": "travelingFleet",
|
||||
"highlights": ["travelingFleet"],
|
||||
"calloutText": "Your fleet is now underway! The number above it shows how many turns remain until it arrives at its destination.",
|
||||
"buttons": [
|
||||
{ "action": "next", "label": "Got it!" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "home-star",
|
||||
"kind": "callout",
|
||||
"voice": null,
|
||||
"anchor": "homeStar",
|
||||
"highlights": ["homeStar"],
|
||||
"calloutText": "This is your home star. Click it to see your system's information.",
|
||||
"advanceOn": "hotspot",
|
||||
"hotspotAction": "showHomeStar",
|
||||
"buttons": []
|
||||
},
|
||||
{
|
||||
"id": "home-star-info",
|
||||
"kind": "callout",
|
||||
"voice": null,
|
||||
"anchor": "panel",
|
||||
"highlights": ["panel", "homeStar"],
|
||||
"calloutText": "This panel shows your home system: how many worlds orbit it and how many are habitable, your colony's population, factories, output, and defences, and what it's currently building. Press View System at the bottom to see the whole system in detail.",
|
||||
"buttons": [
|
||||
{ "action": "next", "label": "Next" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "view-system",
|
||||
"kind": "callout",
|
||||
"voice": null,
|
||||
"anchor": "panel",
|
||||
"highlights": ["panel"],
|
||||
"calloutText": "Press View System to open a detailed view of your home system.",
|
||||
"advanceOn": "hotspot",
|
||||
"hotspotAction": "openSystemView",
|
||||
"buttons": []
|
||||
},
|
||||
{
|
||||
"id": "system-view-planets",
|
||||
"kind": "modal",
|
||||
"voice": null,
|
||||
"noDim": true,
|
||||
"windowPos": "topBanner",
|
||||
"body": "This is your system view. Click on any of the worlds orbiting your star to inspect it — the panel on the right updates with its type, size, and richness.",
|
||||
"buttons": [
|
||||
{ "action": "next", "label": "Next" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "system-view-colony",
|
||||
"kind": "modal",
|
||||
"voice": null,
|
||||
"noDim": true,
|
||||
"windowPos": "topBanner",
|
||||
"advanceOn": "external",
|
||||
"body": "Click on your home world — the one flying a small colony flag above it — then press View Colony to open its colony screen.",
|
||||
"buttons": []
|
||||
},
|
||||
{
|
||||
"id": "colony-overview",
|
||||
"kind": "modal",
|
||||
"voice": null,
|
||||
"noDim": true,
|
||||
"windowPos": "colonyCenter",
|
||||
"body": "This is your colony screen — everything you need to run this world lives here. The panel on the right shows its population, factories, output, trade, and defences.",
|
||||
"buttons": [
|
||||
{ "action": "next", "label": "Next" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "colony-allocation",
|
||||
"kind": "modal",
|
||||
"voice": null,
|
||||
"noDim": true,
|
||||
"windowPos": "colonyCenter",
|
||||
"body": "Below that, the Allocation sliders split your production across five channels: Construction, Defence, Industry, Ecology, and Research. Drag a slider to change its share — the rest renormalise automatically. Click a channel's lock icon to hold its share fixed while you adjust the others. Ecology is always funded first, off the top.",
|
||||
"buttons": [
|
||||
{ "action": "next", "label": "Next" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "colony-focus",
|
||||
"kind": "modal",
|
||||
"voice": null,
|
||||
"noDim": true,
|
||||
"windowPos": "colonyCenter",
|
||||
"body": "Colony Focus automates your build queue toward a goal — Expansion, Colony Improvement, Research, Fleet Production, Population Growth, Trade, or Homeworld Defense — instead of you queuing every building by hand. Allocation Focus applies a one-time preset to the sliders above, tuned to the same kinds of strategies. Open either one and your advisors will point out their recommended pick with a pulsing arrow and a short reason.",
|
||||
"buttons": [
|
||||
{ "action": "next", "label": "Next" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "colony-close",
|
||||
"kind": "modal",
|
||||
"voice": null,
|
||||
"noDim": true,
|
||||
"windowPos": "topBanner",
|
||||
"advanceOn": "external",
|
||||
"body": "When you're ready, close this colony screen, then close the system view too, to get back to the star map.",
|
||||
"buttons": []
|
||||
},
|
||||
{
|
||||
"id": "end-turn",
|
||||
"kind": "callout",
|
||||
"voice": null,
|
||||
"anchor": "endTurnButton",
|
||||
"highlights": ["endTurnButton"],
|
||||
"calloutText": "You've given your fleet its orders and looked over your colony — press End Turn to advance to the next turn.",
|
||||
"advanceOn": "hotspot",
|
||||
"hotspotAction": "endTurn",
|
||||
"buttons": []
|
||||
},
|
||||
{
|
||||
"id": "empire-menu",
|
||||
"kind": "callout",
|
||||
"voice": null,
|
||||
"anchor": "empireButton",
|
||||
"highlights": ["empireButton"],
|
||||
"calloutText": "Your turn is underway. Let's look at the rest of your empire — click the Empire menu to open it.",
|
||||
"advanceOn": "hotspot",
|
||||
"hotspotAction": "openEmpireMenu",
|
||||
"buttons": []
|
||||
},
|
||||
{
|
||||
"id": "open-research",
|
||||
"kind": "callout",
|
||||
"voice": null,
|
||||
"anchor": "empireMenuResearch",
|
||||
"highlights": ["empireMenuResearch"],
|
||||
"calloutText": "Click Research to see what your empire is investigating.",
|
||||
"advanceOn": "hotspot",
|
||||
"hotspotAction": "openResearch",
|
||||
"buttons": []
|
||||
},
|
||||
{
|
||||
"id": "research-info",
|
||||
"kind": "modal",
|
||||
"voice": null,
|
||||
"noDim": true,
|
||||
"windowPos": "topBanner",
|
||||
"advanceAction": "closeEmpireScreenReopenMenu",
|
||||
"body": "Each tile is a research field — its current level, and a slider (with the same lock icon your colony's allocation sliders have) for how much of your research output feeds it. Click a field to see what you're currently working toward there and what comes after it.",
|
||||
"buttons": [
|
||||
{ "action": "next", "label": "Next" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "open-diplomacy",
|
||||
"kind": "callout",
|
||||
"voice": null,
|
||||
"anchor": "empireMenuDiplomacy",
|
||||
"highlights": ["empireMenuDiplomacy"],
|
||||
"calloutText": "Click Diplomacy to see your relations with the species you've met.",
|
||||
"advanceOn": "hotspot",
|
||||
"hotspotAction": "openDiplomacy",
|
||||
"buttons": []
|
||||
},
|
||||
{
|
||||
"id": "diplomacy-info",
|
||||
"kind": "modal",
|
||||
"voice": null,
|
||||
"noDim": true,
|
||||
"windowPos": "topBanner",
|
||||
"advanceAction": "closeEmpireScreenReopenMenu",
|
||||
"body": "You haven't met another species yet, so this window is empty for now. Once you do, it will list each one here — their portrait, treaty status and attitude toward you, how many colonies and how much power they hold, and a Seek Audience button to open negotiations.",
|
||||
"buttons": [
|
||||
{ "action": "next", "label": "Next" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "open-leaders",
|
||||
"kind": "callout",
|
||||
"voice": null,
|
||||
"anchor": "empireMenuLeaders",
|
||||
"highlights": ["empireMenuLeaders"],
|
||||
"calloutText": "Click Leaders to see who's available to hire.",
|
||||
"advanceOn": "hotspot",
|
||||
"hotspotAction": "openLeaders",
|
||||
"buttons": []
|
||||
},
|
||||
{
|
||||
"id": "leaders-info",
|
||||
"kind": "modal",
|
||||
"voice": null,
|
||||
"noDim": true,
|
||||
"windowPos": "topBanner",
|
||||
"advanceAction": "closeEmpireScreenReopenMenu",
|
||||
"body": "Leaders available for hire are listed here, each with their specialty and a one-time cost. Hire one to post them to a fleet or colony for a standing bonus.",
|
||||
"buttons": [
|
||||
{ "action": "next", "label": "Next" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "open-colonies",
|
||||
"kind": "callout",
|
||||
"voice": null,
|
||||
"anchor": "empireMenuColonies",
|
||||
"highlights": ["empireMenuColonies"],
|
||||
"calloutText": "Click Colonies to see every world you own in one place.",
|
||||
"advanceOn": "hotspot",
|
||||
"hotspotAction": "openColonies",
|
||||
"buttons": []
|
||||
},
|
||||
{
|
||||
"id": "colonies-info",
|
||||
"kind": "modal",
|
||||
"voice": null,
|
||||
"noDim": true,
|
||||
"windowPos": "topBanner",
|
||||
"advanceAction": "closeEmpireScreenAndMenu",
|
||||
"body": "This lists every colony you own — population, factories, what's building, and its Colony Focus and Allocation Focus — so you can check and adjust any of them from one screen instead of opening each individually.",
|
||||
"buttons": [
|
||||
{ "action": "next", "label": "Next" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "keep-exploring",
|
||||
"kind": "modal",
|
||||
"voice": null,
|
||||
"body": "That's the Empire menu. From here, keep exploring nearby star systems with your scouts — once you find a habitable planet, bring a colony ship and found a new colony there to keep growing your empire.",
|
||||
"buttons": [
|
||||
{ "action": "next", "label": "Understood" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -80,6 +80,12 @@ export default class MasterOfVegaGame extends Phaser.Scene {
|
|||
// Arcade already relies on instead of a bespoke in-place teardown.
|
||||
this.pendingSavedState = data?.savedState ?? null;
|
||||
this.modalOpen = false;
|
||||
// Set true by VegaTutorial for the one step that teaches pan/zoom — lets
|
||||
// the star map's own drag/wheel handlers through despite modalOpen, while
|
||||
// onStarClick/onFleetClick (and every other modalOpen-gated control)
|
||||
// still check modalOpen directly and stay frozen. See blockWheel/
|
||||
// blockPointer below.
|
||||
this.tutorialFreePan = false;
|
||||
this.busy = false;
|
||||
// Empire indices with a freshly-claimed contact waiting for their
|
||||
// full-screen Audience — see runAudienceQueue().
|
||||
|
|
@ -652,15 +658,17 @@ export default class MasterOfVegaGame extends Phaser.Scene {
|
|||
onStarClick: (idx) => this.onStarClick(idx),
|
||||
onFleetClick: (fleet) => this.onFleetClick(fleet),
|
||||
onEmptyClick: () => this.clearSelection(),
|
||||
blockWheel: () => this.modalOpen || !!this.panel?.detailOpen,
|
||||
blockWheel: () => (this.modalOpen && !this.tutorialFreePan) || !!this.panel?.detailOpen,
|
||||
// A modal blocks the map outright; so does the panel's ship detail
|
||||
// pop-over, which veils the whole screen without being a modal.
|
||||
// Otherwise only the side panel's own footprint does (so dragging a
|
||||
// slider there doesn't pan the galaxy underneath it). The old
|
||||
// `!this.modalOpen && ...` form always short-circuited to false while a
|
||||
// modal was open, which let drags pan the star map right through the
|
||||
// System View window.
|
||||
blockPointer: (p) => this.modalOpen || !!this.panel?.detailOpen
|
||||
// System View window. `tutorialFreePan` punches a narrow exception
|
||||
// through modalOpen for pan/zoom only — onStarClick/onFleetClick are
|
||||
// untouched, so clicking a star or fleet is still fully frozen.
|
||||
blockPointer: (p) => (this.modalOpen && !this.tutorialFreePan) || !!this.panel?.detailOpen
|
||||
|| !!this.panel?.containsPoint(p.x, p.y),
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -785,15 +785,17 @@ export default class VegaSidePanel {
|
|||
}
|
||||
|
||||
/**
|
||||
* Screen-space bounding box of a named region of the fleet view, for the
|
||||
* guided tutorial's spotlight. `name` is 'shipProfiles' or 'countControls';
|
||||
* returns the union across every task-force stack, or null when the fleet
|
||||
* view is not the thing on screen. Uses the panel's resting position
|
||||
* (this.x0/this.y0), not this.root.x, so it is correct even while the panel
|
||||
* is still sliding in.
|
||||
* Screen-space bounding box of a named region of the panel, for the guided
|
||||
* tutorial's spotlight. `name` is 'shipProfiles' or 'countControls' (union
|
||||
* across every task-force stack in the fleet view), or 'panel' (the whole
|
||||
* docked column, whatever mode — star/fleet/order — it is currently
|
||||
* showing). Uses the panel's resting position (this.x0/this.y0), not
|
||||
* this.root.x, so it is correct even while the panel is still sliding in.
|
||||
*/
|
||||
tutorialRegion(name) {
|
||||
if (!this.root?.visible || this.mode !== 'fleet') return null;
|
||||
if (!this.root?.visible) return null;
|
||||
if (name === 'panel') return { x: this.x0, y: this.y0, w: W, h: this.h };
|
||||
if (this.mode !== 'fleet') return null;
|
||||
const rows = this._tutorRows;
|
||||
if (!rows || !rows.length) return null;
|
||||
const key = name === 'shipProfiles' ? 'profiles'
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import {
|
|||
coloniesAt, empireColonies, fleetEta, habitableForEmpire,
|
||||
} from './VegaLogic.js';
|
||||
import { starFrame } from './VegaArt.js';
|
||||
import { buildZoomLadder, DEFAULT_ZOOM_INDEX } from './VegaZoom.js';
|
||||
import { buildZoomLadder, DEFAULT_ZOOM_INDEX, pickFitZoomIndex } from './VegaZoom.js';
|
||||
import { delaunayTriangulate, triangulationEdges } from './VegaDelaunay.js';
|
||||
import { describeStarTooltip } from './VegaTooltips.js';
|
||||
import { ORBIT } from './VegaScreens.js';
|
||||
|
|
@ -868,6 +868,34 @@ export default class VegaStarMap {
|
|||
this.clampPan();
|
||||
}
|
||||
|
||||
/**
|
||||
* Pick the ladder rung that frames a world-space box (`minX/minY/maxX/
|
||||
* maxY`, plus `padding` on every side) without cropping it — via
|
||||
* VegaZoom.pickFitZoomIndex, same math VegaCombatCamera.js's "frame the
|
||||
* whole fleet" opening shot uses — then pan so the box's center lands at
|
||||
* `(focusX, focusY)` in screen space. `focusX`/`focusY` default to the
|
||||
* viewport's own center, same as `viewW`/`viewH` default to the full
|
||||
* screen; the guided tutorial narrows all four so the frame is biased left
|
||||
* of the docked command panel instead of packing stars in behind it.
|
||||
*/
|
||||
fitToWorldBounds(minX, minY, maxX, maxY, {
|
||||
padding = 0, viewW = GAME_WIDTH, viewH = GAME_HEIGHT,
|
||||
focusX = GAME_WIDTH / 2, focusY = GAME_HEIGHT / 2,
|
||||
} = {}) {
|
||||
const idx = pickFitZoomIndex(this.zooms, maxX - minX, maxY - minY, padding, { viewW, viewH });
|
||||
this.zoomIndex = idx;
|
||||
this.zoom = this.zooms[idx];
|
||||
this.root.setScale(this.zoom);
|
||||
const cx = (minX + maxX) / 2;
|
||||
const cy = (minY + maxY) / 2;
|
||||
this.root.x = focusX - cx * this.zoom;
|
||||
this.root.y = focusY - cy * this.zoom;
|
||||
this.clampPan();
|
||||
this.refreshLabels();
|
||||
this.refreshStars();
|
||||
this.refreshColonyInfo();
|
||||
}
|
||||
|
||||
panToStar(starIdx, duration = 420) {
|
||||
const star = this.state.galaxy.stars[starIdx];
|
||||
if (!star) return;
|
||||
|
|
|
|||
|
|
@ -29,7 +29,14 @@ import {
|
|||
} from './VegaLogic.js';
|
||||
|
||||
export function openSystemView(scene, rules, state, starIdx, art, opts = {}) {
|
||||
const { viewerIdx = state.humanIndex, onChanged = null, onClose = null } = opts;
|
||||
const {
|
||||
viewerIdx = state.humanIndex, onChanged = null, onClose = null,
|
||||
// Fired right when the "View Colony" button opens the colony screen over
|
||||
// this one — nothing else in the game needs to know that
|
||||
// (MasterOfVegaGame.js's openSystemViewFor never passes it), but the
|
||||
// guided tutorial does, since it has no other hook into that click.
|
||||
onColonyOpen = null,
|
||||
} = opts;
|
||||
const star = state.galaxy.stars[starIdx];
|
||||
const shell = modalShell(scene, star.name, onClose, { width: 1620, height: 900 });
|
||||
|
||||
|
|
@ -357,6 +364,7 @@ export function openSystemView(scene, rules, state, starIdx, art, opts = {}) {
|
|||
rebuild();
|
||||
},
|
||||
});
|
||||
onColonyOpen?.(colony);
|
||||
}, { width: panelW, height: 50, fontSize: 21 }));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,13 +21,35 @@
|
|||
// tracked by a per-frame fingerprint in update() and re-laid-out on change.
|
||||
// D.tutorial sits just below D.detail so a ship-detail pop-over the tutorial
|
||||
// invites the player to open layers cleanly on top of the overlay.
|
||||
//
|
||||
// System View / Colony View are opened by calling VegaSystemView.js's
|
||||
// openSystemView() DIRECTLY, bypassing MasterOfVegaGame.openSystemViewFor()/
|
||||
// openModal() — the same reasoning VegaSystemView.js already uses to bypass
|
||||
// openModal for its OWN "View Colony" button ("this one has to stay up,
|
||||
// because it is what is keeping the star map behind it inert"): openModal()
|
||||
// refuses a second modal while one is already up, and the tutorial has had
|
||||
// scene.modalOpen pinned true since start(). Calling openSystemView directly
|
||||
// sidesteps that gate entirely, and its own onClose/onColonyOpen opts are
|
||||
// wired straight to VegaTutorial's own advance() — no polling needed for
|
||||
// those steps (see 'external' in ADVANCE_MODES). The one place
|
||||
// modalOpen genuinely has to move is the End Turn hotspot: onEndTurn() is
|
||||
// gated by the SAME modalOpen check (`if (this.busy || this.modalOpen)
|
||||
// return;`), and there is no direct-call bypass available for something this
|
||||
// stateful, so that one handler flips modalOpen false just long enough to
|
||||
// pass the gate — see _onHotspot's 'endTurn' case.
|
||||
|
||||
import * as Phaser from 'phaser';
|
||||
import { GAME_HEIGHT, GAME_WIDTH } from '../../config.js';
|
||||
import { Button } from './VegaButton.js';
|
||||
import { FONT, D, uiClick } from './VegaScreens.js';
|
||||
import {
|
||||
FONT, D, uiClick, openDiplomacyScreen, openLeaderScreen,
|
||||
} from './VegaScreens.js';
|
||||
import { enqueue as enqueueSpeech, resetQueue as resetSpeechQueue } from '../../ui/SpeechQueue.js';
|
||||
import { resolveSteps } from './VegaTutorialData.js';
|
||||
import { reachableStars } from './VegaLogic.js';
|
||||
import { openSystemView } from './VegaSystemView.js';
|
||||
import { openResearchScreen } from './VegaResearchScreen.js';
|
||||
import { openColoniesScreen } from './VegaColoniesScreen.js';
|
||||
|
||||
const ACCENT = 0x6fc4ff;
|
||||
const HILITE_YELLOW = 0xffd400;
|
||||
|
|
@ -40,6 +62,31 @@ const HOLE_PAD = 18;
|
|||
// gutter — see VegaSidePanel.js) even though it is hidden at tutorial time.
|
||||
const SAFE_RIGHT = GAME_WIDTH - 440;
|
||||
|
||||
// Fixed placements for a `kind: 'modal'` step's window, used only by steps
|
||||
// with `noDim: true` (System View / Colony View are open underneath and must
|
||||
// stay visible/clickable — see the header note on `noDim`). Both dock to an
|
||||
// edge rather than the screen's true center, which the live content behind
|
||||
// them is using: `topBanner` sits in System View's own empty margin above
|
||||
// its shell (VegaSystemView.js's modalShell starts at y=90); `colonyCenter`
|
||||
// sits in the empty stretch of world backdrop between Colony View's top-left
|
||||
// masthead and its right-hand panel (VegaColonyView.js: masthead text ends
|
||||
// well above y=260, the panel starts at x=1416).
|
||||
const WINDOW_POS = Object.freeze({
|
||||
topBanner: {
|
||||
cx: GAME_WIDTH / 2, top: 8, w: 1300, minH: 130,
|
||||
},
|
||||
colonyCenter: {
|
||||
cx: 1020, top: 260, w: 640, minH: 160,
|
||||
},
|
||||
});
|
||||
|
||||
// The Empire dropdown's four rows, top to bottom — fixed order
|
||||
// MasterOfVegaGame.openEmpireMenu() builds them in. Index into this array is
|
||||
// what _empireMenuItemTarget positions.
|
||||
const EMPIRE_MENU_ITEMS = Object.freeze([
|
||||
'empireMenuResearch', 'empireMenuDiplomacy', 'empireMenuLeaders', 'empireMenuColonies',
|
||||
]);
|
||||
|
||||
function cornerTicks(scene, x, y, w, h, len = 22) {
|
||||
const g = scene.add.graphics();
|
||||
g.lineStyle(2.5, ACCENT, 0.9);
|
||||
|
|
@ -74,6 +121,21 @@ export class VegaTutorial {
|
|||
this._voicedStep = -1;
|
||||
this._dead = false;
|
||||
this._started = false;
|
||||
// The directly-opened System View shell (see the header note above), if
|
||||
// one is currently up — destroyed defensively in destroy() in case the
|
||||
// scene tears down mid-step.
|
||||
this._systemView = null;
|
||||
// Whichever Empire-menu screen (Research/Diplomacy/Leaders/Colonies) the
|
||||
// tutorial opened directly is currently up, reduced to a single no-arg
|
||||
// closer — the four screens don't share a return shape (modalShell's
|
||||
// `{ destroy }` vs. openColoniesScreen's `{ close }`), so _openEmpireScreen
|
||||
// normalises it here rather than every caller caring which is which.
|
||||
this._empireScreenClose = null;
|
||||
// Set true the instant the End Turn hotspot fires; update() then polls
|
||||
// scene.busy (cleared only once the WHOLE turn-resolution pipeline —
|
||||
// battles, audiences, turn report, GNN — has drained) before continuing
|
||||
// into the Empire-menu tour.
|
||||
this._awaitingEndTurn = false;
|
||||
this._shutdown = () => this.destroy();
|
||||
}
|
||||
|
||||
|
|
@ -106,6 +168,27 @@ export class VegaTutorial {
|
|||
*/
|
||||
update() {
|
||||
if (this._dead || !this.layer || !this.steps.length || this._skipLayer) return;
|
||||
|
||||
// End Turn is the one action with no direct-call bypass and no button
|
||||
// of the tutorial's own to hook — onEndTurn() runs the whole turn-
|
||||
// resolution pipeline (battles, audiences, turn report, GNN) and only
|
||||
// clears scene.busy once every last bit of it has drained, so that is
|
||||
// the one reliable "fully done" signal. Nothing else in update() should
|
||||
// run meanwhile — the star map/panel underneath may be showing any of
|
||||
// those screens right now.
|
||||
if (this._awaitingEndTurn) {
|
||||
if (!this.scene.busy) {
|
||||
this._awaitingEndTurn = false;
|
||||
// onEndTurn()'s own pipeline manages modalOpen for whatever it
|
||||
// showed along the way and may have left it false (a plain turn with
|
||||
// nothing notable never touches it past the initial unlock either) —
|
||||
// re-freeze it before continuing into the Empire-menu tour.
|
||||
this.scene.modalOpen = true;
|
||||
this.advance();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const step = this.steps[this.stepIndex];
|
||||
if (!step) return;
|
||||
|
||||
|
|
@ -120,6 +203,19 @@ export class VegaTutorial {
|
|||
}
|
||||
}
|
||||
|
||||
// The move-fleet step's Accept button is the REAL side-panel button
|
||||
// (VegaSidePanel.buildOrder → MasterOfVegaGame.confirmOrder), not
|
||||
// anything the tutorial overlay owns, so there is no click to hook —
|
||||
// polling for the fleet actually departing is the only way to know.
|
||||
if (step.advanceOn === 'fleetInFlight') {
|
||||
const st = this.scene.state;
|
||||
const human = st?.humanIndex;
|
||||
if (st?.fleets?.some((f) => f.empireIdx === human && f.toStar >= 0)) {
|
||||
this.advance();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const sig = this._targetsSig(step);
|
||||
if (this._lastTargetsSig !== undefined && sig !== this._lastTargetsSig) {
|
||||
this._lastTargetsSig = sig;
|
||||
|
|
@ -133,6 +229,9 @@ export class VegaTutorial {
|
|||
const ids = [...new Set([...(step.highlights || []), step.anchor].filter(Boolean))];
|
||||
return ids.map((id) => {
|
||||
const t = this._resolveTarget(id);
|
||||
if (Array.isArray(t)) {
|
||||
return `${id}:${t.map((x) => `${Math.round(x.cx)},${Math.round(x.cy)}`).join(';')}`;
|
||||
}
|
||||
return t
|
||||
? `${id}:${Math.round(t.cx)},${Math.round(t.cy)},${Math.round(t.rx)},${Math.round(t.ry)}`
|
||||
: `${id}:none`;
|
||||
|
|
@ -145,6 +244,13 @@ export class VegaTutorial {
|
|||
resetSpeechQueue();
|
||||
if (this._ringTween) { this._ringTween.stop(); this._ringTween = null; }
|
||||
this.scene.events.off('shutdown', this._shutdown);
|
||||
this.scene.tutorialFreePan = false;
|
||||
// Scene teardown tears this down regardless, but a mid-flow destroy from
|
||||
// anywhere else (there's no Skip button once this stretch starts, but
|
||||
// belt-and-braces) shouldn't leave a directly-opened System View orphaned
|
||||
// on screen with nothing left to close it.
|
||||
if (this._systemView) { this._systemView.destroy(); this._systemView = null; }
|
||||
if (this._empireScreenClose) { this._empireScreenClose(); this._empireScreenClose = null; }
|
||||
this.layer?.destroy();
|
||||
this.layer = null;
|
||||
this._stepLayer = null;
|
||||
|
|
@ -182,7 +288,14 @@ export class VegaTutorial {
|
|||
|
||||
_onButton(action) {
|
||||
switch (action) {
|
||||
case 'next': this.advance(); break;
|
||||
case 'next':
|
||||
// A step's own `advanceAction` (VegaTutorialData.js's ADVANCE_ACTIONS)
|
||||
// runs BEFORE advancing — closing whichever Empire-menu screen this
|
||||
// step opened directly, and possibly reopening the dropdown behind
|
||||
// the next one. See _runAdvanceAction.
|
||||
this._runAdvanceAction(this.steps[this.stepIndex]?.advanceAction);
|
||||
this.advance();
|
||||
break;
|
||||
case 'back': this.back(); break;
|
||||
case 'skip': this.skip(); break;
|
||||
case 'finish': this.finish(); break;
|
||||
|
|
@ -190,6 +303,15 @@ export class VegaTutorial {
|
|||
}
|
||||
}
|
||||
|
||||
_runAdvanceAction(action) {
|
||||
if (action === 'closeEmpireScreenReopenMenu' || action === 'closeEmpireScreenAndMenu') {
|
||||
this._empireScreenClose?.();
|
||||
this._empireScreenClose = null;
|
||||
if (action === 'closeEmpireScreenReopenMenu') this.scene.openEmpireMenu?.();
|
||||
else this.scene.closeEmpireMenu?.();
|
||||
}
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------- resolution
|
||||
|
||||
_humanEmpire() {
|
||||
|
|
@ -205,50 +327,226 @@ export class VegaTutorial {
|
|||
&& f.starIdx === emp.homeStar && f.toStar < 0) ?? null;
|
||||
}
|
||||
|
||||
/** Whichever human fleet is currently en route somewhere (toStar >= 0). */
|
||||
_travelingFleet() {
|
||||
const st = this.scene.state;
|
||||
if (!st) return null;
|
||||
return st.fleets.find((f) => f.empireIdx === st.humanIndex && f.toStar >= 0) ?? null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Zoom/pan so home plus every reachable star is inside the visible map
|
||||
* area, biased left of the docked command panel (visible throughout this
|
||||
* stretch of the tutorial) rather than centered on the raw screen — called
|
||||
* once, on fresh entry into the step right after the free-pan/zoom lesson
|
||||
* (step.fitReachableStars), regardless of wherever the player left the
|
||||
* camera while trying it out. Reuses VegaStarMap.fitToWorldBounds, the
|
||||
* same ladder-fit math VegaCombatCamera.js's "frame the whole fleet"
|
||||
* opening shot uses.
|
||||
*/
|
||||
_fitReachableStarsView() {
|
||||
const { map, state } = this.scene;
|
||||
const emp = this._humanEmpire();
|
||||
if (!map || !state || !emp) return;
|
||||
const reach = reachableStars(this.scene.rules, state, state.humanIndex);
|
||||
const idxs = new Set([emp.homeStar, ...Object.keys(reach).map(Number)]);
|
||||
let minX = Infinity;
|
||||
let minY = Infinity;
|
||||
let maxX = -Infinity;
|
||||
let maxY = -Infinity;
|
||||
for (const idx of idxs) {
|
||||
const star = state.galaxy.stars[idx];
|
||||
if (!star) continue;
|
||||
minX = Math.min(minX, star.x);
|
||||
minY = Math.min(minY, star.y);
|
||||
maxX = Math.max(maxX, star.x);
|
||||
maxY = Math.max(maxY, star.y);
|
||||
}
|
||||
if (!Number.isFinite(minX)) return;
|
||||
map.fitToWorldBounds(minX, minY, maxX, maxY, {
|
||||
padding: 180, viewW: SAFE_RIGHT, viewH: GAME_HEIGHT, focusX: SAFE_RIGHT / 2, focusY: GAME_HEIGHT / 2,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Screen rect of item `index` (0-based) in the Empire dropdown, or null
|
||||
* while it isn't open. Mirrors MasterOfVegaGame.openEmpireMenu()'s own
|
||||
* geometry exactly (BTN_W/BTN_H/GAP/PAD, and reading empireBtn's live
|
||||
* x/y/width the same way that method does) — ITEMS is hardcoded to 4
|
||||
* (Research/Diplomacy/Leaders/Colonies) because Council only ever joins
|
||||
* the menu once state.council.lastResult is set, which that method's own
|
||||
* comment notes can't happen this early in a fresh game.
|
||||
*/
|
||||
_empireMenuItemTarget(index) {
|
||||
const { empireBtn, empireMenuLayer } = this.scene;
|
||||
if (!empireBtn || !empireMenuLayer) return null;
|
||||
const BTN_W = 200;
|
||||
const BTN_H = 42;
|
||||
const GAP = 8;
|
||||
const PAD = 14;
|
||||
const ITEMS = 4;
|
||||
const panelCx = empireBtn.x - (empireBtn.options?.width ?? 190) / 2 + BTN_W / 2;
|
||||
const panelTopY = empireBtn.y + 21 + 12;
|
||||
const panelH = PAD * 2 + ITEMS * BTN_H + (ITEMS - 1) * GAP;
|
||||
const panelCy = panelTopY + panelH / 2;
|
||||
const firstY = panelCy - panelH / 2 + PAD + BTN_H / 2;
|
||||
return {
|
||||
cx: panelCx, cy: firstY + index * (BTN_H + GAP), rx: BTN_W / 2, ry: BTN_H / 2, shape: 'rect',
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Open one of the Empire dropdown's four screens DIRECTLY (same
|
||||
* openModal-bypass reasoning as _openSystemView — see the header note),
|
||||
* and normalise its return shape (modalShell's `{ destroy }` for Research/
|
||||
* Diplomacy/Leaders vs. openColoniesScreen's own `{ close }`) into a
|
||||
* single no-arg `this._empireScreenClose`, run by _runAdvanceAction on the
|
||||
* matching '-info' step's Next button. None of the four need a real
|
||||
* onChanged/onClose hook back into the tutorial — unlike System View, the
|
||||
* player is never asked to click anything inside them, only to read and
|
||||
* press Next, so a plain refresh callback (or none) is enough.
|
||||
*/
|
||||
_openEmpireScreen(kind) {
|
||||
const scene = this.scene;
|
||||
const {
|
||||
rules, state, art,
|
||||
} = scene;
|
||||
const human = state.humanIndex;
|
||||
if (kind === 'research') {
|
||||
const shell = openResearchScreen(scene, rules, state, human, art, () => {});
|
||||
this._empireScreenClose = () => shell.destroy();
|
||||
} else if (kind === 'diplomacy') {
|
||||
const shell = openDiplomacyScreen(scene, rules, state, human, art, () => {}, () => scene.refreshAll());
|
||||
this._empireScreenClose = () => shell.destroy();
|
||||
} else if (kind === 'leaders') {
|
||||
const shell = openLeaderScreen(scene, rules, state, human, art, () => {}, () => scene.refreshHud());
|
||||
this._empireScreenClose = () => shell.destroy();
|
||||
} else if (kind === 'colonies') {
|
||||
const screen = openColoniesScreen(scene, rules, state, human, art, { onChanged: () => scene.refreshAll() });
|
||||
this._empireScreenClose = () => screen.close();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A fleet's marker on the map, reduced to the same { cx, cy, rx, ry, shape }
|
||||
* shape every other target uses. Falls back to a fixed offset from the
|
||||
* fleet's anchor star (its current position if docked, its destination if
|
||||
* mid-flight — the only real star anchor available then) when the marker
|
||||
* itself hasn't been laid out yet this frame.
|
||||
*/
|
||||
_fleetMarkerTarget(fleet) {
|
||||
const { map, state } = this.scene;
|
||||
if (!map || !fleet) return null;
|
||||
const zoom = map.zoom ?? 1;
|
||||
const toScreen = (wx, wy) => ({ x: map.root.x + wx * zoom, y: map.root.y + wy * zoom });
|
||||
const marker = map.fleetMarkers?.find((m) => m.fleet === fleet);
|
||||
let wx;
|
||||
let wy;
|
||||
if (marker?.container) {
|
||||
wx = marker.container.x;
|
||||
wy = marker.container.y;
|
||||
} else {
|
||||
const star = state.galaxy.stars[fleet.starIdx >= 0 ? fleet.starIdx : fleet.toStar];
|
||||
if (!star) return null;
|
||||
wx = star.x + 26;
|
||||
wy = star.y - 22;
|
||||
}
|
||||
const p = toScreen(wx, wy);
|
||||
const r = 20 * zoom + 8;
|
||||
return { cx: p.x, cy: p.y, rx: r, ry: r, shape: 'circle' };
|
||||
}
|
||||
|
||||
/**
|
||||
* Target id -> { cx, cy, rx, ry, shape } in screen space, or null if it
|
||||
* can't be found. `shape` is 'circle' (star-map things, drawn as an accent
|
||||
* ring) or 'rect' (side-panel regions, drawn as a yellow box).
|
||||
* can't be found — EXCEPT 'nearbyStars', which resolves to an ARRAY of
|
||||
* such objects (one per reachable star), each also carrying `starIdx`.
|
||||
* `shape` is 'circle' (star-map things, drawn as an accent ring), 'rect'
|
||||
* (side-panel regions, drawn as a yellow box) or 'invisible' (carves a hole
|
||||
* with no ring — 'mapArea', which just needs to uncover the map).
|
||||
*/
|
||||
_resolveTarget(id) {
|
||||
const { map, state, panel } = this.scene;
|
||||
const emp = this._humanEmpire();
|
||||
if (!state || !emp) return null;
|
||||
|
||||
if (id === 'homeStar' || id === 'homeFleet') {
|
||||
if (id === 'homeStar') {
|
||||
if (!map) return null;
|
||||
const zoom = map.zoom ?? 1;
|
||||
const toScreen = (wx, wy) => ({ x: map.root.x + wx * zoom, y: map.root.y + wy * zoom });
|
||||
|
||||
if (id === 'homeStar') {
|
||||
const star = state.galaxy.stars[emp.homeStar];
|
||||
if (!star) return null;
|
||||
const p = toScreen(star.x, star.y);
|
||||
const clsR = map.starSprites?.[emp.homeStar]?.cls?.radius ?? 12;
|
||||
const r = (clsR * 2.2 + 14) * zoom + 6;
|
||||
return { cx: p.x, cy: p.y, rx: r, ry: r, shape: 'circle' };
|
||||
}
|
||||
|
||||
const fleet = this._homeFleet();
|
||||
if (!fleet) return null;
|
||||
const marker = map.fleetMarkers?.find((m) => m.fleet === fleet);
|
||||
const star = state.galaxy.stars[emp.homeStar];
|
||||
let wx;
|
||||
let wy;
|
||||
if (marker?.container) {
|
||||
wx = marker.container.x;
|
||||
wy = marker.container.y;
|
||||
} else if (star) {
|
||||
wx = star.x + 26;
|
||||
wy = star.y - 22;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
const p = toScreen(wx, wy);
|
||||
const r = 20 * zoom + 8;
|
||||
if (!star) return null;
|
||||
const p = { x: map.root.x + star.x * zoom, y: map.root.y + star.y * zoom };
|
||||
const clsR = map.starSprites?.[emp.homeStar]?.cls?.radius ?? 12;
|
||||
const r = (clsR * 2.2 + 14) * zoom + 6;
|
||||
return { cx: p.x, cy: p.y, rx: r, ry: r, shape: 'circle' };
|
||||
}
|
||||
|
||||
if (id === 'homeFleet') return this._fleetMarkerTarget(this._homeFleet());
|
||||
if (id === 'travelingFleet') return this._fleetMarkerTarget(this._travelingFleet());
|
||||
|
||||
if (id === 'nearbyStars') {
|
||||
if (!map) return null;
|
||||
const zoom = map.zoom ?? 1;
|
||||
const reach = reachableStars(this.scene.rules, state, state.humanIndex);
|
||||
const out = [];
|
||||
for (const key of Object.keys(reach)) {
|
||||
const idx = Number(key);
|
||||
if (idx === emp.homeStar) continue;
|
||||
const star = state.galaxy.stars[idx];
|
||||
if (!star) continue;
|
||||
const p = { x: map.root.x + star.x * zoom, y: map.root.y + star.y * zoom };
|
||||
// Off the current view entirely — not worth a hotspot or a hole that
|
||||
// would just balloon out past the screen edge.
|
||||
if (p.x < -40 || p.x > GAME_WIDTH + 40 || p.y < -40 || p.y > GAME_HEIGHT + 40) continue;
|
||||
const clsR = map.starSprites?.[idx]?.cls?.radius ?? 12;
|
||||
const r = (clsR * 2.2 + 14) * zoom + 6;
|
||||
out.push({
|
||||
cx: p.x, cy: p.y, rx: r, ry: r, shape: 'circle', starIdx: idx,
|
||||
});
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
if (id === 'mapArea') {
|
||||
// A big hole with no ring — just uncovers the map area (left of the
|
||||
// docked panel) so a pan/zoom the player tries is actually visible.
|
||||
return {
|
||||
cx: SAFE_RIGHT / 2, cy: GAME_HEIGHT / 2, rx: SAFE_RIGHT / 2, ry: GAME_HEIGHT / 2, shape: 'invisible',
|
||||
};
|
||||
}
|
||||
|
||||
if (id === 'panel') {
|
||||
const rect = panel?.tutorialRegion?.('panel');
|
||||
if (!rect) return null;
|
||||
return {
|
||||
cx: rect.x + rect.w / 2, cy: rect.y + rect.h / 2, rx: rect.w / 2, ry: rect.h / 2, shape: 'rect',
|
||||
};
|
||||
}
|
||||
|
||||
if (id === 'endTurnButton') {
|
||||
const btn = this.scene.endTurnBtn;
|
||||
if (!btn) return null;
|
||||
// Fixed footprint (MasterOfVegaGame.js: width 190, height 46) — the
|
||||
// Button's own container position is read live rather than hardcoded
|
||||
// too, so this stays correct if the HUD is ever rearranged.
|
||||
return {
|
||||
cx: btn.x, cy: btn.y, rx: 95, ry: 23, shape: 'rect',
|
||||
};
|
||||
}
|
||||
|
||||
if (id === 'empireButton') {
|
||||
const btn = this.scene.empireBtn;
|
||||
if (!btn) return null;
|
||||
// Fixed footprint (MasterOfVegaGame.js: width 190, height 42).
|
||||
return {
|
||||
cx: btn.x, cy: btn.y, rx: (btn.options?.width ?? 190) / 2, ry: 21, shape: 'rect',
|
||||
};
|
||||
}
|
||||
|
||||
if (id.startsWith('empireMenu')) {
|
||||
const item = EMPIRE_MENU_ITEMS.indexOf(id);
|
||||
return item < 0 ? null : this._empireMenuItemTarget(item);
|
||||
}
|
||||
|
||||
if (id === 'fleetShipProfiles' || id === 'fleetCountControls') {
|
||||
const region = id === 'fleetShipProfiles' ? 'shipProfiles' : 'countControls';
|
||||
const rect = panel?.tutorialRegion?.(region);
|
||||
|
|
@ -279,6 +577,7 @@ export class VegaTutorial {
|
|||
this._stepLayer?.destroy();
|
||||
this._stepLayer = null;
|
||||
this._hotspot = null;
|
||||
this._hotspots = null;
|
||||
}
|
||||
|
||||
_renderStep(i) {
|
||||
|
|
@ -291,16 +590,43 @@ export class VegaTutorial {
|
|||
const step = this.steps[i];
|
||||
if (!step) { this.finish(); return; }
|
||||
|
||||
// Pan/zoom are frozen with the rest of the map by default (modalOpen);
|
||||
// only the step that teaches them punches through, and only for those.
|
||||
this.scene.tutorialFreePan = !!step.freePan;
|
||||
|
||||
if (freshStep && step.fitReachableStars) this._fitReachableStarsView();
|
||||
// Re-arm the fleet selection a prior step's star-info click may have
|
||||
// cleared (that click mirrors onStarClick's read-only branch, which
|
||||
// always drops scene.selectedFleet) so this step's own star clicks quote
|
||||
// a move order instead of just showing star info again.
|
||||
if (freshStep && step.selectHomeFleet) {
|
||||
const fleet = this._homeFleet();
|
||||
if (fleet) {
|
||||
this.scene.selectedFleet = fleet;
|
||||
this.scene.map?.setSelectedFleet?.(fleet);
|
||||
this.scene.panel?.showFleet?.(fleet);
|
||||
}
|
||||
}
|
||||
|
||||
const sl = this.scene.add.container(0, 0);
|
||||
this._stepLayer = sl;
|
||||
this.layer.add(sl);
|
||||
|
||||
// --- darken, with a hole around the highlighted targets
|
||||
const targets = (step.highlights || [])
|
||||
.map((id) => this._resolveTarget(id))
|
||||
.filter(Boolean);
|
||||
this._drawDim(sl, targets);
|
||||
this._drawRings(sl, targets);
|
||||
// --- darken, with a hole around the highlighted targets. 'nearbyStars'
|
||||
// resolves to an array rather than a single target, so flatten. Skipped
|
||||
// entirely for a step with `noDim` — one where System View or Colony
|
||||
// View (opened directly, below the tutorial layer but not gated by it —
|
||||
// see the header note) is already showing and must stay fully visible
|
||||
// and undimmed; those steps have nothing on the star map worth spotlighting
|
||||
// anyway, since the map itself is hidden behind that screen right now.
|
||||
if (!step.noDim) {
|
||||
const targets = (step.highlights || []).flatMap((id) => {
|
||||
const t = this._resolveTarget(id);
|
||||
return Array.isArray(t) ? t : (t ? [t] : []);
|
||||
});
|
||||
this._drawDim(sl, targets);
|
||||
this._drawRings(sl, targets);
|
||||
}
|
||||
|
||||
// --- the step's window
|
||||
if (step.kind === 'callout') this._renderCallout(sl, step);
|
||||
|
|
@ -349,13 +675,15 @@ export class VegaTutorial {
|
|||
}
|
||||
|
||||
_drawRings(sl, targets) {
|
||||
if (!targets.length) return;
|
||||
if (!targets.some((t) => t.shape !== 'invisible')) return;
|
||||
const g = this.scene.add.graphics();
|
||||
sl.add(g);
|
||||
const paint = (alpha) => {
|
||||
g.clear();
|
||||
for (const t of targets) {
|
||||
if (t.shape === 'rect') {
|
||||
if (t.shape === 'invisible') {
|
||||
continue;
|
||||
} else if (t.shape === 'rect') {
|
||||
g.lineStyle(3, HILITE_YELLOW, alpha);
|
||||
g.strokeRect(t.cx - t.rx, t.cy - t.ry, t.rx * 2, t.ry * 2);
|
||||
} else {
|
||||
|
|
@ -406,16 +734,20 @@ export class VegaTutorial {
|
|||
}
|
||||
|
||||
_renderModal(sl, step) {
|
||||
const w = 980;
|
||||
// A step with `noDim` (System View / Colony View showing underneath —
|
||||
// see the header note) docks its window to WINDOW_POS instead of true
|
||||
// screen-center, which the live content behind it is using.
|
||||
const pos = step.noDim ? WINDOW_POS[step.windowPos] : null;
|
||||
const w = pos?.w ?? 980;
|
||||
const bodyText = this.scene.add.text(0, 0, step.body ?? '', {
|
||||
fontFamily: FONT, fontSize: '22px', color: '#e8f4ff',
|
||||
lineSpacing: 6, align: 'left', wordWrap: { width: w - 96 },
|
||||
});
|
||||
const hasTitle = !!(step.title && step.title.trim());
|
||||
const titleH = hasTitle ? 46 : 0;
|
||||
const h = Math.max(240, titleH + 64 + bodyText.height + 110);
|
||||
const cx = GAME_WIDTH / 2;
|
||||
const cy = GAME_HEIGHT / 2;
|
||||
const h = Math.max(pos?.minH ?? 240, titleH + 64 + bodyText.height + 110);
|
||||
const cx = pos?.cx ?? GAME_WIDTH / 2;
|
||||
const cy = pos?.top !== undefined ? pos.top + h / 2 : (pos?.cy ?? GAME_HEIGHT / 2);
|
||||
const win = this._window(sl, w, h, cx, cy);
|
||||
|
||||
let ty = win.y + 34;
|
||||
|
|
@ -432,7 +764,11 @@ export class VegaTutorial {
|
|||
}
|
||||
|
||||
_renderCallout(sl, step) {
|
||||
const target = this._resolveTarget(step.anchor);
|
||||
// 'nearbyStars' resolves to an array (see _resolveTarget) — the first
|
||||
// reachable star stands in as the single point the connector line aims
|
||||
// at; the per-star click targets below cover the rest of them.
|
||||
const rawTarget = this._resolveTarget(step.anchor);
|
||||
const target = Array.isArray(rawTarget) ? rawTarget[0] : rawTarget;
|
||||
const anchor = target ? VegaTutorial._anchorPoint(target) : null;
|
||||
const w = 460;
|
||||
|
||||
|
|
@ -462,15 +798,65 @@ export class VegaTutorial {
|
|||
|
||||
if (step.buttons.length) this._addButtons(win.c, step, cx, win.y + h - 40);
|
||||
|
||||
// click-the-thing hotspot
|
||||
if (step.advanceOn === 'hotspot' && anchor) {
|
||||
const size = Math.max(44, anchor.r * 2);
|
||||
const hs = this.scene.add.rectangle(anchor.x, anchor.y, size, size, 0xffffff, 0.001)
|
||||
// click-the-thing hotspot. A 'rect' target (e.g. 'panel') gets a hotspot
|
||||
// matching its actual w/h rather than a square built off anchor.r — that
|
||||
// radius is the LONGER of a rect's two half-extents, and squaring it off
|
||||
// a wide-but-short panel would overshoot past its edges into whatever's
|
||||
// beside it (the star map, for 'panel').
|
||||
if (step.advanceOn === 'hotspot' && anchor && target) {
|
||||
const hw = target.shape === 'rect' ? target.rx * 2 : Math.max(44, anchor.r * 2);
|
||||
const hh = target.shape === 'rect' ? target.ry * 2 : Math.max(44, anchor.r * 2);
|
||||
const hs = this.scene.add.rectangle(anchor.x, anchor.y, hw, hh, 0xffffff, 0.001)
|
||||
.setInteractive({ useHandCursor: true });
|
||||
hs.on('pointerup', () => this._onHotspot(step));
|
||||
sl.add(hs);
|
||||
this._hotspot = hs;
|
||||
}
|
||||
|
||||
// One click target per reachable star. Independent of advanceOn: 'info'
|
||||
// both performs the click and advances (see _onStarPick); 'order' only
|
||||
// quotes the move order — this step's advanceOn (should be
|
||||
// 'fleetInFlight') is what actually advances it, once the player presses
|
||||
// the panel's own real Accept button.
|
||||
if (step.starPick) {
|
||||
const stars = this._resolveTarget('nearbyStars') || [];
|
||||
this._hotspots = stars.map((t) => {
|
||||
const size = Math.max(44, Math.max(t.rx, t.ry) * 2);
|
||||
const hs = this.scene.add.rectangle(t.cx, t.cy, size, size, 0xffffff, 0.001)
|
||||
.setInteractive({ useHandCursor: true });
|
||||
hs.on('pointerup', () => this._onStarPick(step, t.starIdx));
|
||||
sl.add(hs);
|
||||
return hs;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A click on one of the 'nearbyStars' hotspots. Mirrors the two branches
|
||||
* MasterOfVegaGame.onStarClick itself takes — 'info' is the read-only
|
||||
* "look at the place" branch (clears the selected fleet, shows the star
|
||||
* panel, then advances the tutorial itself); 'order' is the "quote a
|
||||
* route" branch (sets the map's route preview and opens the panel's order
|
||||
* view) and deliberately does NOT advance — the player still has to press
|
||||
* that panel's real Accept button, which VegaTutorial has no hook into
|
||||
* except by polling (see update()'s 'fleetInFlight' check).
|
||||
*/
|
||||
_onStarPick(step, starIdx) {
|
||||
const scene = this.scene;
|
||||
if (step.starPick === 'order') {
|
||||
const fleet = this._homeFleet() ?? scene.selectedFleet;
|
||||
if (!fleet) return;
|
||||
const originIdx = fleet.starIdx >= 0 ? fleet.starIdx : fleet.toStar;
|
||||
scene.map?.setRoutePreview(originIdx, starIdx);
|
||||
scene.panel?.showOrder(starIdx);
|
||||
return;
|
||||
}
|
||||
scene.map?.setSelectedStar(starIdx);
|
||||
scene.selectedFleet = null;
|
||||
scene.panel?.showStar(starIdx);
|
||||
for (const hs of this._hotspots || []) hs.disableInteractive();
|
||||
this._hotspots = null;
|
||||
scene.time.delayedCall(200, () => { if (!this._dead) this.advance(); });
|
||||
}
|
||||
|
||||
_drawConnector(container, anchor, win) {
|
||||
|
|
@ -515,22 +901,110 @@ export class VegaTutorial {
|
|||
g.fillPath();
|
||||
}
|
||||
|
||||
_retireHotspot() {
|
||||
if (this._hotspot) { this._hotspot.disableInteractive(); this._hotspot = null; }
|
||||
}
|
||||
|
||||
/**
|
||||
* A click on the single `advanceOn: 'hotspot'` target. Which real action it
|
||||
* performs is the step's own `hotspotAction` (VegaTutorialData.js's
|
||||
* HOTSPOT_ACTIONS) rather than a match on `step.anchor`, so more than one
|
||||
* step can point at the same anchor (both 'home-star' and 'view-system'
|
||||
* point at the home star / panel) without the two colliding.
|
||||
*/
|
||||
_onHotspot(step) {
|
||||
if (step.anchor === 'homeFleet') {
|
||||
const fleet = this._homeFleet();
|
||||
const scene = this.scene;
|
||||
if (fleet) {
|
||||
scene.selectedFleet = fleet;
|
||||
scene.map?.setSelectedFleet?.(fleet);
|
||||
scene.panel?.showFleet?.(fleet);
|
||||
const scene = this.scene;
|
||||
switch (step.hotspotAction) {
|
||||
case 'selectHomeFleet': {
|
||||
const fleet = this._homeFleet();
|
||||
if (fleet) {
|
||||
scene.selectedFleet = fleet;
|
||||
scene.map?.setSelectedFleet?.(fleet);
|
||||
scene.panel?.showFleet?.(fleet);
|
||||
}
|
||||
// Let the panel finish sliding in before the next step lays its
|
||||
// spotlight over it.
|
||||
this._retireHotspot();
|
||||
scene.time.delayedCall(240, () => { if (!this._dead) this.advance(); });
|
||||
return;
|
||||
}
|
||||
// Let the panel finish sliding in before the next step lays its
|
||||
// spotlight over it.
|
||||
if (this._hotspot) { this._hotspot.disableInteractive(); this._hotspot = null; }
|
||||
this.scene.time.delayedCall(240, () => { if (!this._dead) this.advance(); });
|
||||
return;
|
||||
case 'showHomeStar': {
|
||||
const emp = this._humanEmpire();
|
||||
if (emp) {
|
||||
scene.map?.setSelectedStar(emp.homeStar);
|
||||
scene.selectedFleet = null;
|
||||
scene.panel?.showStar(emp.homeStar);
|
||||
}
|
||||
this._retireHotspot();
|
||||
scene.time.delayedCall(200, () => { if (!this._dead) this.advance(); });
|
||||
return;
|
||||
}
|
||||
case 'openSystemView': {
|
||||
const emp = this._humanEmpire();
|
||||
this._retireHotspot();
|
||||
if (emp) this._openSystemView(emp.homeStar);
|
||||
this.advance();
|
||||
return;
|
||||
}
|
||||
case 'endTurn': {
|
||||
this._retireHotspot();
|
||||
// The one place modalOpen genuinely has to move — see the header
|
||||
// note. onEndTurn()'s own gate (`if (this.busy || this.modalOpen)
|
||||
// return;`) is the only thing standing between this click and a
|
||||
// silent no-op; everything after that gate manages modalOpen (and
|
||||
// this.busy) itself exactly as it would for a normal, non-tutorial
|
||||
// End Turn click, so there is nothing further to bypass.
|
||||
scene.modalOpen = false;
|
||||
scene.onEndTurn();
|
||||
this._awaitingEndTurn = true;
|
||||
return;
|
||||
}
|
||||
case 'openEmpireMenu': {
|
||||
// toggleEmpireMenu() is what carries the modalOpen gate; the popover
|
||||
// builder itself has none, so calling it directly bypasses that gate
|
||||
// entirely without needing to touch modalOpen at all.
|
||||
this._retireHotspot();
|
||||
scene.openEmpireMenu?.();
|
||||
this.advance();
|
||||
return;
|
||||
}
|
||||
case 'openResearch': case 'openDiplomacy': case 'openLeaders': case 'openColonies': {
|
||||
// Real dropdown item buttons all route through the gated openModal()
|
||||
// (see the header note), so this hotspot intercepts the click and
|
||||
// opens the screen directly instead of letting the real one fire.
|
||||
const kind = step.hotspotAction.slice('open'.length).toLowerCase();
|
||||
this._retireHotspot();
|
||||
scene.closeEmpireMenu?.();
|
||||
this._openEmpireScreen(kind);
|
||||
this.advance();
|
||||
return;
|
||||
}
|
||||
default:
|
||||
this.advance();
|
||||
}
|
||||
this.advance();
|
||||
}
|
||||
|
||||
/**
|
||||
* Open System View directly for `starIdx` (bypasses MasterOfVegaGame's
|
||||
* gated openSystemViewFor/openModal — see the header note) with the
|
||||
* tutorial's own onClose/onColonyOpen wired straight to advance() (each
|
||||
* guarded by step id, so a close/open from a step other than the one that
|
||||
* expects it doesn't skip the player ahead).
|
||||
*/
|
||||
_openSystemView(starIdx) {
|
||||
const scene = this.scene;
|
||||
const stepAt = (id) => this.steps[this.stepIndex]?.id === id;
|
||||
this._systemView = openSystemView(scene, scene.rules, scene.state, starIdx, scene.art, {
|
||||
viewerIdx: scene.state.humanIndex,
|
||||
onChanged: () => scene.refreshAll(),
|
||||
onClose: () => {
|
||||
this._systemView = null;
|
||||
if (!this._dead && stepAt('colony-close')) this.advance();
|
||||
},
|
||||
onColonyOpen: () => {
|
||||
if (!this._dead && stepAt('system-view-colony')) this.advance();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------- skip prompt
|
||||
|
|
|
|||
|
|
@ -15,16 +15,69 @@
|
|||
// adding its id here and a resolver there. `homeStar`/`homeFleet` are on the
|
||||
// star map; `fleetShipProfiles`/`fleetCountControls` are regions of the side
|
||||
// panel's fleet view, resolved through VegaSidePanel.tutorialRegion().
|
||||
// `nearbyStars` resolves to an ARRAY of targets (every star in fuel range of
|
||||
// home, one per star) rather than a single one — VegaTutorial.js flattens it
|
||||
// when building the highlight/hole list. `mapArea` is a big invisible hole
|
||||
// (no ring drawn) used only to uncover the map for the pan/zoom lesson.
|
||||
// `panel` is the docked command panel's whole footprint, regardless of what
|
||||
// mode (star/fleet/order) it is currently showing. `travelingFleet` is
|
||||
// whichever of the human player's fleets is currently under way.
|
||||
// `endTurnButton` is the fixed HUD button (MasterOfVegaGame's scene.endTurnBtn).
|
||||
// `empireButton` is the fixed HUD "Empire" dropdown toggle (scene.empireBtn).
|
||||
// The four `empireMenu*` ids are that dropdown's own item rows (Research/
|
||||
// Diplomacy/Leaders/Colonies, in that fixed order) — each resolves to null
|
||||
// unless the dropdown (scene.empireMenuLayer) is actually open.
|
||||
export const TUTORIAL_TARGET_IDS = Object.freeze([
|
||||
'homeStar', 'homeFleet', 'fleetShipProfiles', 'fleetCountControls',
|
||||
'nearbyStars', 'mapArea', 'panel', 'travelingFleet', 'endTurnButton',
|
||||
'empireButton', 'empireMenuResearch', 'empireMenuDiplomacy', 'empireMenuLeaders', 'empireMenuColonies',
|
||||
]);
|
||||
|
||||
const STEP_KINDS = Object.freeze(['modal', 'callout']);
|
||||
const BUTTON_ACTIONS = Object.freeze(['next', 'back', 'skip', 'finish']);
|
||||
// Ways a step can progress WITHOUT a button. `hotspot` = a click on the lit
|
||||
// anchor; `shipDetailClosed` = the player opened and then closed a ship detail
|
||||
// window. A step with no buttons must declare one of these or it is a dead end.
|
||||
export const ADVANCE_MODES = Object.freeze(['hotspot', 'shipDetailClosed']);
|
||||
// anchor (what that click actually DOES is the step's own `hotspotAction`
|
||||
// field, not this one — see HOTSPOT_ACTIONS); `shipDetailClosed` = the player
|
||||
// opened and then closed a ship detail window; `starPick` = the player
|
||||
// clicked one of the `nearbyStars` hotspots (see STAR_PICK_MODES — the
|
||||
// step's own `starPick` field decides what that click does); `fleetInFlight`
|
||||
// = the player accepted a REAL fleet order through the side panel's own
|
||||
// Accept button (VegaTutorial polls state.fleets for one under way, since
|
||||
// that button is not part of the tutorial overlay); `external` = something
|
||||
// outside the polling/hotspot system calls advance() directly — a callback
|
||||
// VegaTutorial wired into a real screen it opened itself (System View /
|
||||
// Colony View), the same reason `starPick`/`hotspot` need no poll either. A
|
||||
// step with no buttons must declare one of these or it is a dead end.
|
||||
export const ADVANCE_MODES = Object.freeze([
|
||||
'hotspot', 'shipDetailClosed', 'starPick', 'fleetInFlight', 'external',
|
||||
]);
|
||||
// What clicking a `nearbyStars` hotspot does, independent of `advanceOn`:
|
||||
// `info` opens that star's read-only panel and immediately advances (paired
|
||||
// with advanceOn: 'starPick'); `order` quotes a move order for the already-
|
||||
// selected fleet to that star and does NOT advance — the player still has to
|
||||
// press the panel's real Accept button (paired with advanceOn: 'fleetInFlight').
|
||||
export const STAR_PICK_MODES = Object.freeze(['info', 'order']);
|
||||
// What clicking the single `advanceOn: 'hotspot'` target does — VegaTutorial's
|
||||
// _onHotspot() switches on this instead of pattern-matching the step's
|
||||
// `anchor` id, so more than one step can point at the same anchor (e.g. two
|
||||
// different steps both pointing at 'panel') without colliding.
|
||||
export const HOTSPOT_ACTIONS = Object.freeze([
|
||||
'selectHomeFleet', // ring+select the docked home fleet, open its panel
|
||||
'showHomeStar', // ring+select the home star, open its read-only panel
|
||||
'openSystemView', // open System View directly for the home star
|
||||
'endTurn', // unfreeze modalOpen just long enough to fire the real End Turn
|
||||
'openEmpireMenu', // open the Empire dropdown directly (bypasses its own modalOpen gate)
|
||||
'openResearch', 'openDiplomacy', 'openLeaders', 'openColonies', // close the dropdown, open that screen directly
|
||||
]);
|
||||
// What a `kind:'modal'` step's Next button does before advancing, in
|
||||
// addition to the button's own `action:'next'` — VegaTutorial's own state
|
||||
// (which real screen it opened directly, and whether the Empire dropdown
|
||||
// should reappear behind the next one), not anything the step's JSON needs
|
||||
// to know the mechanics of.
|
||||
export const ADVANCE_ACTIONS = Object.freeze([
|
||||
'closeEmpireScreenReopenMenu', // close whichever Empire-menu screen is open, reopen the dropdown
|
||||
'closeEmpireScreenAndMenu', // close it, and make sure the dropdown is closed too (the tour is over)
|
||||
]);
|
||||
|
||||
const PLACEHOLDER_RE = /\{([a-zA-Z0-9_]+)\}/g;
|
||||
|
||||
|
|
@ -128,6 +181,17 @@ export function validateTutorialData(json) {
|
|||
if (step.advanceOn === 'hotspot' && !TUTORIAL_TARGET_IDS.includes(step.anchor)) {
|
||||
fail(`${at}.advanceOn "hotspot" needs a valid anchor`);
|
||||
}
|
||||
if (step.advanceOn === 'hotspot' && !HOTSPOT_ACTIONS.includes(step.hotspotAction)) {
|
||||
fail(`${at}.advanceOn "hotspot" needs a valid hotspotAction (one of ${HOTSPOT_ACTIONS.join('/')}, got ${JSON.stringify(step.hotspotAction)})`);
|
||||
}
|
||||
|
||||
if (step.advanceAction !== undefined && !ADVANCE_ACTIONS.includes(step.advanceAction)) {
|
||||
fail(`${at}.advanceAction, when set, must be one of ${ADVANCE_ACTIONS.join('/')} (got ${JSON.stringify(step.advanceAction)})`);
|
||||
}
|
||||
|
||||
if (step.starPick !== undefined && !STAR_PICK_MODES.includes(step.starPick)) {
|
||||
fail(`${at}.starPick, when set, must be one of ${STAR_PICK_MODES.join('/')} (got ${JSON.stringify(step.starPick)})`);
|
||||
}
|
||||
|
||||
if (!Array.isArray(step.buttons)) {
|
||||
fail(`${at}.buttons must be an array`);
|
||||
|
|
|
|||
|
|
@ -47,10 +47,14 @@ export function buildZoomLadder(worldW, worldH, { steps = ZOOM_STEPS, maxZoom =
|
|||
* than the area needs — VegaCombatCamera.js's "frame the whole fleet"
|
||||
* feature is built on this.
|
||||
*/
|
||||
export function pickFitZoomIndex(zooms, boundsW, boundsH, padding = 0) {
|
||||
// `viewW`/`viewH` default to the full screen but can be narrowed to whatever
|
||||
// area is actually free of docked chrome (the guided tutorial's fit-the-
|
||||
// reachable-stars step passes the width left of the command panel, so the
|
||||
// picked rung doesn't pack stars in behind it).
|
||||
export function pickFitZoomIndex(zooms, boundsW, boundsH, padding = 0, { viewW = GAME_WIDTH, viewH = GAME_HEIGHT } = {}) {
|
||||
const w = Math.max(1, boundsW + padding * 2);
|
||||
const h = Math.max(1, boundsH + padding * 2);
|
||||
const ideal = Math.min(GAME_WIDTH / w, GAME_HEIGHT / h);
|
||||
const ideal = Math.min(viewW / w, viewH / h);
|
||||
let idx = 0;
|
||||
for (let i = 0; i < zooms.length; i += 1) {
|
||||
if (zooms[i] <= ideal) idx = i;
|
||||
|
|
|
|||
|
|
@ -5946,8 +5946,13 @@ section('12. Tutorial data');
|
|||
new Set(steps.map((s) => s.id)).size === steps.length && steps.every((s) => typeof s.id === 'string' && s.id.trim()));
|
||||
check('every tutorial step kind is modal or callout',
|
||||
steps.every((s) => s.kind === 'modal' || s.kind === 'callout'));
|
||||
check('every modal step has a body and at least one button',
|
||||
steps.filter((s) => s.kind === 'modal').every((s) => typeof s.body === 'string' && s.body.trim() && Array.isArray(s.buttons) && s.buttons.length));
|
||||
// A modal can advance without a button of its own — 'external' steps (a
|
||||
// System View / Colony View the tutorial opened directly wires its own
|
||||
// onClose/onColonyOpen straight to advance()) have none by design; the
|
||||
// general "every buttonless step can still be advanced" check below still
|
||||
// catches a modal that has neither.
|
||||
check('every modal step has a non-empty body',
|
||||
steps.filter((s) => s.kind === 'modal').every((s) => typeof s.body === 'string' && s.body.trim()));
|
||||
check('every callout step has calloutText and a valid anchor',
|
||||
steps.filter((s) => s.kind === 'callout').every((s) =>
|
||||
typeof s.calloutText === 'string' && s.calloutText.trim() && TUTORIAL_TARGET_IDS.includes(s.anchor)));
|
||||
|
|
|
|||
Loading…
Reference in New Issue