mirror of
https://github.com/GoodStartLabs/AI_Diplomacy.git
synced 2026-04-19 12:58:09 +00:00
Typefixes
Updating some typing errors, removing ports in docker-compose that weren't used but were stopping others from using them.
This commit is contained in:
Tyler Marques
parent
5411f0bae7
commit
2733e4acd1
4 changed files with 68 additions and 88 deletions
|
|
@ -1,9 +1,37 @@
|
|||
import { gameState } from "./gameState";
|
||||
import { logger } from "./logger";
|
||||
|
||||
/**
|
||||
* Helper function to get a DOM element by ID and throw an error if not found
|
||||
* @param id The element ID to search for
|
||||
* @returns The HTMLElement
|
||||
* @throws Error if element is not found
|
||||
*/
|
||||
function getRequiredElement(id: string): HTMLElement {
|
||||
const element = document.getElementById(id);
|
||||
if (!element) {
|
||||
throw new Error(`Element with ID '${id}' not found`);
|
||||
}
|
||||
return element;
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper function to get a typed DOM element by ID and throw an error if not found
|
||||
* @param id The element ID to search for
|
||||
* @returns The typed HTMLElement
|
||||
* @throws Error if element is not found
|
||||
*/
|
||||
function getRequiredTypedElement<T extends HTMLElement>(id: string): T {
|
||||
const element = document.getElementById(id) as T;
|
||||
if (!element) {
|
||||
throw new Error(`Element with ID '${id}' not found`);
|
||||
}
|
||||
return element;
|
||||
}
|
||||
|
||||
export function updatePhaseDisplay() {
|
||||
const currentPhase = gameState.gameData.phases[gameState.phaseIndex];
|
||||
|
||||
// Add fade-out effect
|
||||
phaseDisplay.style.transition = 'opacity 0.3s ease-out';
|
||||
phaseDisplay.style.opacity = '0';
|
||||
|
|
@ -17,8 +45,6 @@ export function updatePhaseDisplay() {
|
|||
}
|
||||
|
||||
export function updateGameIdDisplay() {
|
||||
if (!gameIdDisplay) return;
|
||||
|
||||
// Add fade-out effect
|
||||
gameIdDisplay.style.transition = 'opacity 0.3s ease-out';
|
||||
gameIdDisplay.style.opacity = '0';
|
||||
|
|
@ -30,88 +56,46 @@ export function updateGameIdDisplay() {
|
|||
gameIdDisplay.style.opacity = '1';
|
||||
}, 300);
|
||||
}
|
||||
// --- LOADING & DISPLAYING GAME PHASES ---
|
||||
export function loadGameBtnFunction(file) {
|
||||
|
||||
export function loadGameBtnFunction(file: File) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
gameState.loadGameData(e.target?.result)
|
||||
if (e.target === null || e.target.result === null) {
|
||||
throw new Error("Failed to load file")
|
||||
}
|
||||
if (e.target.result instanceof ArrayBuffer) {
|
||||
const decoder = new TextDecoder("utf-8");
|
||||
gameState.loadGameData(decoder.decode(e.target.result))
|
||||
} else {
|
||||
gameState.loadGameData(e.target.result)
|
||||
}
|
||||
};
|
||||
reader.onerror = () => {
|
||||
logger.log("Error reading file.")
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
export const loadBtn = document.getElementById('load-btn');
|
||||
if (null === loadBtn) throw new Error("Element with ID 'load-btn' not found");
|
||||
|
||||
export const fileInput = document.getElementById('file-input');
|
||||
if (null === fileInput) throw new Error("Element with ID 'file-input' not found");
|
||||
// DOM Elements
|
||||
export const loadBtn = getRequiredElement('load-btn');
|
||||
export const fileInput = getRequiredTypedElement<HTMLButtonElement>('file-input');
|
||||
export const prevBtn = getRequiredTypedElement<HTMLButtonElement>('prev-btn');
|
||||
export const nextBtn = getRequiredTypedElement<HTMLButtonElement>('next-btn');
|
||||
export const playBtn = getRequiredTypedElement<HTMLButtonElement>('play-btn');
|
||||
export const speedSelector = getRequiredTypedElement<HTMLSelectElement>('speed-selector');
|
||||
export const phaseDisplay = getRequiredElement('phase-display');
|
||||
export const gameIdDisplay = getRequiredElement('game-id-display');
|
||||
export const mapView = getRequiredElement('map-view');
|
||||
export const leaderboard = getRequiredElement('leaderboard');
|
||||
export const rotatingDisplay = getRequiredElement('rotating-display');
|
||||
|
||||
export const prevBtn = document.getElementById('prev-btn');
|
||||
if (null === prevBtn) throw new Error("Element with ID 'prev-btn' not found");
|
||||
|
||||
export const nextBtn = document.getElementById('next-btn');
|
||||
if (null === nextBtn) throw new Error("Element with ID 'next-btn' not found");
|
||||
|
||||
export const playBtn = document.getElementById('play-btn');
|
||||
if (null === playBtn) throw new Error("Element with ID 'play-btn' not found");
|
||||
|
||||
export const speedSelector = document.getElementById('speed-selector');
|
||||
if (null === speedSelector) throw new Error("Element with ID 'speed-selector' not found");
|
||||
|
||||
export const phaseDisplay = document.getElementById('phase-display');
|
||||
if (null === phaseDisplay) throw new Error("Element with ID 'phase-display' not found");
|
||||
|
||||
export const gameIdDisplay = document.getElementById('game-id-display');
|
||||
if (null === gameIdDisplay) throw new Error("Element with ID 'game-id-display' not found");
|
||||
|
||||
export const mapView = document.getElementById('map-view');
|
||||
if (null === mapView) throw new Error("Element with ID 'map-view' not found");
|
||||
|
||||
export const leaderboard = document.getElementById('leaderboard');
|
||||
if (null === leaderboard) throw new Error("Element with ID 'leaderboard' not found");
|
||||
|
||||
export const rotatingDisplay = document.getElementById('rotating-display');
|
||||
if (null === rotatingDisplay) throw new Error("Element with ID 'rotating-display' not found");
|
||||
// Debug menu elements
|
||||
export const debugMenu = document.getElementById('debug-menu');
|
||||
if (null === debugMenu) throw new Error("Element with ID 'debug-menu' not found");
|
||||
|
||||
export const debugToggleBtn = document.getElementById('debug-toggle-btn') as HTMLButtonElement;
|
||||
if (null === debugToggleBtn) throw new Error("Element with ID 'debug-toggle-btn' not found");
|
||||
|
||||
export const debugPanel = document.getElementById('debug-panel');
|
||||
if (null === debugPanel) throw new Error("Element with ID 'debug-panel' not found");
|
||||
|
||||
export const debugCloseBtn = document.getElementById('debug-close-btn') as HTMLButtonElement;
|
||||
if (null === debugCloseBtn) throw new Error("Element with ID 'debug-close-btn' not found");
|
||||
|
||||
export const provinceInput = document.getElementById('province-input') as HTMLInputElement;
|
||||
if (null === provinceInput) throw new Error("Element with ID 'province-input' not found");
|
||||
|
||||
export const highlightProvinceBtn = document.getElementById('highlight-province-btn');
|
||||
if (null === highlightProvinceBtn) throw new Error("Element with ID 'highlight-province-btn' not found");
|
||||
export const debugMenu = getRequiredElement('debug-menu');
|
||||
export const debugToggleBtn = getRequiredTypedElement<HTMLButtonElement>('debug-toggle-btn');
|
||||
export const debugPanel = getRequiredElement('debug-panel');
|
||||
export const debugCloseBtn = getRequiredTypedElement<HTMLButtonElement>('debug-close-btn');
|
||||
export const provinceInput = getRequiredTypedElement<HTMLInputElement>('province-input');
|
||||
export const highlightProvinceBtn = getRequiredElement('highlight-province-btn');
|
||||
|
||||
|
||||
|
||||
// Add roundRect polyfill for browsers that don't support it
|
||||
if (!CanvasRenderingContext2D.prototype.roundRect) {
|
||||
CanvasRenderingContext2D.prototype.roundRect = function (x, y, width, height, radius) {
|
||||
if (typeof radius === 'undefined') {
|
||||
radius = 5;
|
||||
}
|
||||
this.beginPath();
|
||||
this.moveTo(x + radius, y);
|
||||
this.lineTo(x + width - radius, y);
|
||||
this.arcTo(x + width, y, x + width, y + radius, radius);
|
||||
this.lineTo(x + width, y + height - radius);
|
||||
this.arcTo(x + width, y + height, x + width - radius, y + height, radius);
|
||||
this.lineTo(x + radius, y + height);
|
||||
this.arcTo(x, y + height, x, y + height - radius, radius);
|
||||
this.lineTo(x, y + radius);
|
||||
this.arcTo(x, y, x + radius, y, radius);
|
||||
this.closePath();
|
||||
return this;
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -82,13 +82,13 @@ function loadFileFromServer(filePath: string): Promise<string> {
|
|||
|
||||
|
||||
class GameState {
|
||||
boardState: CoordinateData
|
||||
boardState!: CoordinateData
|
||||
gameId: number
|
||||
gameData: GameSchemaType
|
||||
momentsData: NormalizedMomentsData | null
|
||||
gameData!: GameSchemaType
|
||||
momentsData!: NormalizedMomentsData
|
||||
phaseIndex: number
|
||||
boardName: string
|
||||
currentPower: PowerENUM
|
||||
currentPower!: PowerENUM
|
||||
|
||||
// state locks
|
||||
messagesPlaying: boolean
|
||||
|
|
@ -102,9 +102,9 @@ class GameState {
|
|||
scene: THREE.Scene
|
||||
|
||||
// camera and controls
|
||||
camControls: OrbitControls
|
||||
camera: THREE.PerspectiveCamera
|
||||
renderer: THREE.WebGLRenderer
|
||||
camControls!: OrbitControls
|
||||
camera!: THREE.PerspectiveCamera
|
||||
renderer!: THREE.WebGLRenderer
|
||||
|
||||
unitMeshes: THREE.Group[]
|
||||
|
||||
|
|
@ -112,10 +112,10 @@ class GameState {
|
|||
unitAnimations: Tween[]
|
||||
|
||||
//
|
||||
playbackTimer: number
|
||||
playbackTimer!: number
|
||||
|
||||
// Camera Animation during playing
|
||||
cameraPanAnim: TweenGroup | undefined
|
||||
cameraPanAnim!: TweenGroup
|
||||
|
||||
// Global timing for animations
|
||||
globalTime: number
|
||||
|
|
@ -124,10 +124,8 @@ class GameState {
|
|||
constructor(boardName: AvailableMaps) {
|
||||
this.phaseIndex = 0
|
||||
this.boardName = boardName
|
||||
this.currentPower = null;
|
||||
this.gameId = 16
|
||||
|
||||
this.momentsData = null; // Initialize as null, will be loaded later
|
||||
// State locks
|
||||
this.isSpeaking = false
|
||||
this.isPlaying = false
|
||||
|
|
@ -169,7 +167,6 @@ class GameState {
|
|||
this.gameData.phases[0].orders.length :
|
||||
Object.keys(this.gameData.phases[0].orders).length) : 0,
|
||||
ordersType: this.gameData.phases[0].orders ? typeof this.gameData.phases[0].orders : 'none',
|
||||
unitsCount: this.gameData.phases[0].units ? this.gameData.phases[0].units.length : 0
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { initRotatingDisplay, } from "./components/rotatingDisplay";
|
|||
import { debugMenuInstance } from "./debug/debugMenu";
|
||||
import { initializeBackgroundAudio, startBackgroundAudio } from "./backgroundAudio";
|
||||
import { updateLeaderboard } from "./components/leaderboard";
|
||||
import { _setPhase, advanceToNextPhase, nextPhase } from "./phase";
|
||||
import { _setPhase, advanceToNextPhase, nextPhase, previousPhase } from "./phase";
|
||||
import { togglePlayback } from "./phase";
|
||||
|
||||
//TODO: Create a function that finds a suitable unit location within a given polygon, for placing units better
|
||||
|
|
@ -118,6 +118,7 @@ function createCameraPan(): Group {
|
|||
*/
|
||||
function animate() {
|
||||
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
if (gameState.isPlaying) {
|
||||
// Update the camera angle
|
||||
|
|
|
|||
|
|
@ -23,13 +23,11 @@ services:
|
|||
env_file: "./ai_animation/.env"
|
||||
ports:
|
||||
- "4173:4173"
|
||||
- "5173:5173"
|
||||
volumes:
|
||||
- ./ai_animation/public/games/:/app/dist/games
|
||||
diplomacy-dev:
|
||||
build: ai_animation
|
||||
ports:
|
||||
- "4173:4173"
|
||||
- "5173:5173"
|
||||
command: ["npm", "run", "dev-all"]
|
||||
volumes:
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue