From 5a378d8089ae671bcc18c3037bfbdc00754d7df3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20N=2E=20Darcie?= Date: Sat, 12 Oct 2024 01:20:51 -0300 Subject: [PATCH] Remove a pagina travel --- css/style.css | 35 +++- index.html | 97 +++++----- src/Game.ts | 54 +++--- src/entities/Character.ts | 44 ++--- src/entities/Event.ts | 4 +- src/enums/GameStates.ts | 1 - src/managers/BagManager.ts | 4 +- src/managers/CharacterManager.ts | 2 +- src/managers/EventManager.ts | 24 +-- src/managers/GameOverManager.ts | 4 +- src/managers/LogManager.ts | 263 +++++++++++++++++++++++++-- src/managers/RipManager.ts | 12 +- src/managers/SkillCheckManager.ts | 16 +- src/managers/StateManager.ts | 6 +- src/managers/TravelManager.ts | 285 ------------------------------ 15 files changed, 378 insertions(+), 473 deletions(-) delete mode 100644 src/managers/TravelManager.ts diff --git a/css/style.css b/css/style.css index 1c10b18..5e87bcd 100644 --- a/css/style.css +++ b/css/style.css @@ -18,8 +18,7 @@ h2 { #container { color: #CCCCCC; - padding: 0.7em; - max-width: 300px; + max-width: 340px; max-height: 750px; margin: auto; background-color: #000000; @@ -28,7 +27,6 @@ h2 { justify-content: center; align-items: center; position: relative; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Adiciona uma sombra para destaque */ } #event-page-title { @@ -82,9 +80,10 @@ h2 { #core > div > .stats-content, #core > div > .bag-content, #core > div > .log-content { - padding: 20px; + padding: 10px; max-height: 400px; overflow-y: auto; + font-size: 12px; } button { @@ -181,12 +180,25 @@ button:disabled { } .character-atributes-box { - display: inline-block; margin-top: 8px; position: absolute; padding-left: 10px; + display: inline-block; + margin-top: 8px; + margin-left: 10px; + position: absolute; + font-size: 11px; } .character-content { - position: relative; - height: 7.5em; + align-content: top; + display: inline-block; + margin: 2px; + height: 60px; + width: 150px; +} + +#progress-bar { + width: 300; + margin-left: 13px; + margin-bottom: 10px; } .character-afflictions-field { @@ -248,6 +260,11 @@ ul { } .character-name-field { - padding: 0.3em; - font-size: larger; + padding: 0.1em; +} + +.character-image { + border-right: ; + transform: scale(1); /* 20% do tamanho original */ + transform-origin: center; /* Define o ponto de origem da transformação */ } \ No newline at end of file diff --git a/index.html b/index.html index 2cbc3cb..ec53e71 100644 --- a/index.html +++ b/index.html @@ -22,65 +22,54 @@

-
-

Those You Love

-
-
-
    -
  • - -
    -
    -
    -
    -
    -
    • -
  • - -
    -
    -
    -
    -
    -
    • -
  • - -
    -
    -
    -
    -
    -
    • -
  • - -
    -
    -
    -
    -
    -
    • -
-
-

- -
-
- - - -
-
-

Log

+

Overview

-

Result

    -

    Status Change

    -
      -
      - +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      +

      + +
      + + + +
      diff --git a/src/Game.ts b/src/Game.ts index 505d6f2..f387701 100644 --- a/src/Game.ts +++ b/src/Game.ts @@ -1,7 +1,6 @@ import { EventManager } from './managers/EventManager'; import { GameOverManager } from './managers/GameOverManager'; import { RipManager } from './managers/RipManager'; -import { TravelManager } from './managers/TravelManager'; import { LogManager } from './managers/LogManager'; import { BagManager } from './managers/BagManager'; import { StateManager } from './managers/StateManager'; @@ -26,23 +25,21 @@ export class Game { private _clock: Clock; private _distanceToTheBorder = 300; - public travelPage: HTMLElement | null; - public logPage: HTMLElement | null; - public eventPage: HTMLElement | null; - public skillCheckPage: HTMLElement | null; - public gameOverPage: HTMLElement | null; - public ripPage: HTMLElement | null; - public bagPage: HTMLElement | null; - public itemPickerPage: HTMLElement | null; - public dialogPage: HTMLElement | null; - public mapPage: HTMLElement | null; - public skillUpPage: HTMLElement | null; + public logPage: HTMLElement; + public eventPage: HTMLElement; + public skillCheckPage: HTMLElement; + public gameOverPage: HTMLElement; + public ripPage: HTMLElement; + public bagPage: HTMLElement; + public itemPickerPage: HTMLElement; + public dialogPage: HTMLElement; + public mapPage: HTMLElement; + public skillUpPage: HTMLElement; public eventManager: EventManager; public skillCheckManager: SkillCheckManager; public gameOverManager: GameOverManager; public ripManager: RipManager; - public travelManager: TravelManager; public logManager: LogManager; public bagManager: BagManager; public characterManager: CharacterManager; @@ -54,25 +51,24 @@ export class Game { public skillUpManager: SkillUpManager; public audioManager: AudioManager; - private _currentTimeField: Element | null; + private _currentTimeField: Element; private playerGuid: string; public skillCheckResult: SkillCheckResults; private constructor() { - this.travelPage = document.getElementById("travel-page"); - this.logPage = document.getElementById("log-page"); - this.eventPage = document.getElementById("event-page"); - this.skillCheckPage = document.getElementById("skill-check-page"); - this.gameOverPage = document.getElementById("game-over-page"); - this.ripPage = document.getElementById("rip-page"); - this.bagPage = document.getElementById("bag-page"); - this.itemPickerPage = document.getElementById("item-picker-page"); - this.dialogPage = document.querySelector("#dialog-page"); - this.mapPage = document.querySelector("#map-page"); - this.skillUpPage = document.querySelector("#skill-up-page"); - - this._currentTimeField = document.querySelector("#current-time-field"); + this.logPage = document.getElementById("log-page")!; + this.eventPage = document.getElementById("event-page")!; + this.skillCheckPage = document.getElementById("skill-check-page")!; + this.gameOverPage = document.getElementById("game-over-page")!; + this.ripPage = document.getElementById("rip-page")!; + this.bagPage = document.getElementById("bag-page")!; + this.itemPickerPage = document.getElementById("item-picker-page")!; + this.dialogPage = document.querySelector("#dialog-page")!; + this.mapPage = document.querySelector("#map-page")!; + this.skillUpPage = document.querySelector("#skill-up-page")!; + + this._currentTimeField = document.querySelector("#current-time-field")!; this.playerGuid = this.generateGuid(); } @@ -97,7 +93,6 @@ export class Game { this.gameOverManager = new GameOverManager(); this.skillCheckManager = new SkillCheckManager(); this.ripManager = new RipManager(); - this.travelManager = new TravelManager(); this._clock = new Clock(8, true); this.logManager = new LogManager(); this.stateManager = new StateManager(); @@ -108,7 +103,7 @@ export class Game { this.audioManager = new AudioManager(); this.showDataTime(); - this.stateManager.goToState(GameStates.TRAVEL); + this.stateManager.goToState(GameStates.LOG); } get events() { @@ -166,7 +161,6 @@ export class Game { } public hideAllPages(): void { - this.hidePage(this.travelPage); this.hidePage(this.logPage); this.hidePage(this.eventPage); this.hidePage(this.skillCheckPage); diff --git a/src/entities/Character.ts b/src/entities/Character.ts index 7362647..6ac65d6 100644 --- a/src/entities/Character.ts +++ b/src/entities/Character.ts @@ -9,7 +9,7 @@ export class Character { private _dateOfBirth: string; private _imageURL: string; private _sanity: number = 100; - private _status: Status[] = []; + private _status: Status | null; private _isDead: boolean = false; private _buried: boolean = false; @@ -59,50 +59,26 @@ export class Character { } public walkOneHour(): void { - for (let affliction of this._status) { - this.looseSanity(affliction.healthPerHour); - this._game.logManager.addTempLog(this._name + ' has ' + affliction.name, LogType.Result); + if (this._status != null) { + this.looseSanity(this._status?.healthPerHour ?? 0); } } - public showHealthLostPerHourDueToAllStatus(): number { - let totalHealth: number = 0; - for (let status of this._status) { - totalHealth += status.healthPerHour; - } - - return totalHealth; - } - private checksIfAnStatusExists(statusName: string): boolean { - let existingStatusIndex = this._status.findIndex(status => status.name == statusName); - return existingStatusIndex != -1 ? true : false; + return this._status?.name == statusName; } - public addStatus(affliction: Status) { - if (!this.checksIfAnStatusExists(affliction.name)) { - this._game.logManager.addTempLog(this._name + ' got: ' + affliction.name, LogType.Result); - this._status.push(affliction); - } + public setStatus(status: Status) { + this._game.logManager.addTempLog(this._name + ' pegou: ' + status.name, LogType.Result); + this._status = status; } - public removeStatus(statusToRemove: Status) { - this._status = this._status.filter(status => status !== statusToRemove); + public removeStatus() { + this._status = null; } public showAfflictions(): string { - if (this._status.length == 0) { - return ''; - } - - let afflictions: string = ''; - for (let affliction of this._status) { - if (affliction) { - afflictions += ' -' + affliction.name; - } - } - - return afflictions; + return this._status?.name ?? ''; } getSanity(): string { diff --git a/src/entities/Event.ts b/src/entities/Event.ts index ae751aa..41efd47 100644 --- a/src/entities/Event.ts +++ b/src/entities/Event.ts @@ -13,8 +13,8 @@ export enum EventType { export interface Choice { buttonText: string; skillCheck: boolean; - skillCheckFields: SkillCheckFields | null; - normalResultPath: any | null; + skillCheckFields: SkillCheckFields; + normalResultPath: any; } export interface SkillCheckFields { diff --git a/src/enums/GameStates.ts b/src/enums/GameStates.ts index 17f2eae..21bce95 100644 --- a/src/enums/GameStates.ts +++ b/src/enums/GameStates.ts @@ -1,5 +1,4 @@ export enum GameStates { - TRAVEL, EVENT, SKILLCHECK, GAME_OVER, diff --git a/src/managers/BagManager.ts b/src/managers/BagManager.ts index 1924ebf..a15fc58 100644 --- a/src/managers/BagManager.ts +++ b/src/managers/BagManager.ts @@ -35,7 +35,7 @@ export class BagManager { private onClickBagClose() { this._game.audioManager.playButtonSound(); - this._game.stateManager.goToState(GameStates.TRAVEL); + this._game.stateManager.goToState(GameStates.LOG); } private onClickThrowAway() { @@ -137,7 +137,7 @@ export class BagManager { this.removeOrDecreaseItem(); this.hideSelectedItem(); this.showItems(); - character.removeStatus(this._selectedItem.status); + character.removeStatus(); this._bagThrowAwayBtn.style.display = 'none'; } diff --git a/src/managers/CharacterManager.ts b/src/managers/CharacterManager.ts index b8d48d0..84d1f93 100644 --- a/src/managers/CharacterManager.ts +++ b/src/managers/CharacterManager.ts @@ -73,7 +73,7 @@ export class CharacterManager { makeSomeoneInTheGroupGetStatus(status: string): Character { let character: Character = this.picksACharacterAtRandom(); - character.addStatus(StatusSeeds.getStatusByName(status)); + character.setStatus(StatusSeeds.getStatusByName(status)); return character; } diff --git a/src/managers/EventManager.ts b/src/managers/EventManager.ts index e980bc1..51545fa 100644 --- a/src/managers/EventManager.ts +++ b/src/managers/EventManager.ts @@ -16,10 +16,10 @@ export class EventManager { private readonly _game: Game; constructor() { - this._titleElement = document.getElementById("event-page-title"); - this._descriptionElement = document.getElementById("event-page-description"); - this._photographyBorder = document.querySelector(".photography-border"); - this._eventPageChoicesBtnListElement = document.getElementById("event-page-choices-btn-list"); + this._titleElement = document.getElementById("event-page-title")!; + this._descriptionElement = document.getElementById("event-page-description")!; + this._photographyBorder = document.querySelector(".photography-border")!; + this._eventPageChoicesBtnListElement = document.getElementById("event-page-choices-btn-list")!; this._imageElement = document.getElementById("event-page-image") as HTMLImageElement; this._images = new Map([ @@ -33,6 +33,7 @@ export class EventManager { } start(): void { + console.log("event page") this._eventPageChoicesBtnListElement.innerHTML = ''; const eventSeeds = new EventSeeds(); eventSeeds.start(); @@ -48,12 +49,12 @@ export class EventManager { this._currentEvent = eventSeeds.getCombatEvent(); } - this.showWaitingMessage(); + this.showEvent(); } private showChoices() { this._eventPageChoicesBtnListElement.innerHTML = ''; - let diceManager = new DiceManager(); + let diceManager = new DiceManager(""); for (let choice of this.currentEvent.choices) { const button = document.createElement("button"); @@ -92,7 +93,7 @@ export class EventManager { } this.currentChoice.normalResultPath(); - this.checkLogs(); + this._game.stateManager.goToState(GameStates.LOG); } get currentEvent(): Event { @@ -126,6 +127,7 @@ export class EventManager { } showEvent(): void { + console.log("show event"); this._titleElement.style.display = 'block'; this._photographyBorder.style.display = 'block'; this._titleElement.innerHTML = this._currentEvent.title; @@ -139,12 +141,4 @@ export class EventManager { this._imageElement.style.display = 'block'; this.showChoices(); } - - checkLogs(): void { - if (this._game.log.isThereAnyTemporaryLog()) { - this._game.stateManager.goToState(GameStates.LOG); - } else { - this._game.stateManager.goToState(GameStates.TRAVEL); - } - } } \ No newline at end of file diff --git a/src/managers/GameOverManager.ts b/src/managers/GameOverManager.ts index 361cf86..d320f82 100644 --- a/src/managers/GameOverManager.ts +++ b/src/managers/GameOverManager.ts @@ -7,8 +7,8 @@ export class GameOverManager { constructor() { this._game = Game.getInstance(); - this._gameOverMessage = document.querySelector("#game-over-message"); - this._tryAgainBtn = document.querySelector('#try-again-btn'); + this._gameOverMessage = document.querySelector("#game-over-message")!; + this._tryAgainBtn = document.querySelector('#try-again-btn')!; } start(): void { diff --git a/src/managers/LogManager.ts b/src/managers/LogManager.ts index 0f2b57a..21f23b3 100644 --- a/src/managers/LogManager.ts +++ b/src/managers/LogManager.ts @@ -9,33 +9,69 @@ export enum LogType { export class LogManager { private _logListResult: Element; - private _logListStatusChange: Element; - private _travelBtn: HTMLButtonElement; private _tempResultLogs: string[] = []; private _tempoStatusChangeLogs: string[] = []; private _logs: string[] = []; + private _bagBtn: HTMLButtonElement; + private _campBtn: HTMLButtonElement; + private _yourFamily: HTMLButtonElement; + private _charactersList: any; + private _walkBtn: HTMLButtonElement; + private _hoursSleeping: number; + private _sleepIntervalId: any; + private _travelledDistanceField: Element; + private _progressBarCanvasElement: HTMLCanvasElement; + private _progressBarCanvasContext: CanvasRenderingContext2D; + private readonly _game: Game; constructor() { this._game = Game.getInstance(); this._logListResult = document.querySelector("#log-list-result")!; - this._logListStatusChange = document.querySelector("#log-list-status-change")!; - this._travelBtn = document.querySelector("#log-back-character-btn")!; - this._travelBtn.addEventListener('click', () => { this.onClickTravel() }); + this._bagBtn = document.querySelector('#bag-btn')!; + this._bagBtn.addEventListener('click', () => { this.onClickBag() }); + + this._campBtn = document.querySelector("#camp-btn")!; + + this._campBtn.addEventListener('click', () => { this.onClickCampBtn() }); + + this._charactersList = []; + + this._walkBtn = document.querySelector("#walk-btn")!; + this._walkBtn.addEventListener('click', () => { this.onClickWalkBtn() }); + + this._travelledDistanceField = document.querySelector("#travelled-distance")!; + this._progressBarCanvasElement = document.getElementById("progress-bar") as HTMLCanvasElement; + + this.showTravelledDistance(); + + this.getAtributesPageElements(); } start(): void { - this._travelBtn.disabled = true; this.showLogs(); + + if (this._game.bagManager.isEmpty()) { + this._bagBtn.innerHTML = this._game.loc.l('bag-is-empty'); + this._bagBtn.disabled = true; + } else { + this._bagBtn.disabled = false; + this._bagBtn.innerHTML = 'Open bag (' + this._game.bagManager.showQuantityOfItems() + ') '; + } + + this._walkBtn.innerHTML = this._game.loc.l('walk-one-hour'); + + this.showCharacters(); + this.checkCampBtn(); + this.showProgressBarCanvas(); } showLogs(): void { this._logs = this._tempoStatusChangeLogs; this._tempoStatusChangeLogs = []; this._logListResult.innerHTML = ''; - this._logListStatusChange.innerHTML = ''; this.showResultLogs(); } @@ -54,9 +90,7 @@ export class LogManager { clearInterval(stop); this._logs = this._tempResultLogs; this._tempResultLogs = []; - this._logListStatusChange.innerHTML = this.createLogsForStatusChange(); this._game.characterManager.savePreviousCharacters(); - this._travelBtn.disabled = false; } }, 300); } @@ -95,11 +129,69 @@ export class LogManager { clearLogs(): void { this._logListResult.innerHTML = ''; - this._logListStatusChange.innerHTML = ''; } - onClickTravel() { + isThereAnyTemporaryLog(): boolean { + return this._tempResultLogs.length > 0 || this._tempoStatusChangeLogs.length > 0; + } + + addTempLog(log: string, logType: LogType) { + if (logType == LogType.Result) { + this._tempResultLogs.push(log); + } else if (logType == LogType.StatusChange) { + this._tempoStatusChangeLogs.push(log); + } + } + + onClickBag() { this._game.audioManager.playButtonSound(); + this._game.stateManager.goToState(GameStates.BAG); + } + + onClickCampBtn(): void { + this._bagBtn.disabled = true; + this._campBtn.disabled = true; + this._walkBtn.disabled = true; + this._yourFamily.innerHTML = 'Camping...'; + this._hoursSleeping = 0; + this._sleepIntervalId = window.setInterval(() => this.sleeping(), 500); + } + + sleeping(): void { + if (this._hoursSleeping <= 6) { + let characters = this._game.characters; + + for (let i = 0; i < characters.length; i++){ + let character = characters[i]; + + if (!character.isDead) { + const randomNumber = this._game.getRandomArbitrary(3); + this._charactersList[i].atributesField.innerHTML = randomNumber == 0 ? "Zzz" : randomNumber == 1 ? "zZz" : "zzZ"; + } + } + + this._game.passOneHour(); + this._hoursSleeping++; + } else { + // this._game.characterManager.increaseStaminaOfAllCharactersToMax(); + this.showCharacters(); + this._bagBtn.disabled = false; + this._campBtn.disabled = false; + this._walkBtn.disabled = false; + this._yourFamily.innerHTML = this._game.loc.l('your-family'); + clearInterval(this._sleepIntervalId); + } + } + + onClickWalkBtn(): void { + if (this._game.distanceToTheBorder == 300) { + this._game.audioManager.playRainSound(); + } + + this._game.audioManager.playButtonSound(); + this._game.passOneHour(); + this.walkOneHour(); + let characters: Character[] = this._game.characterManager.getCharactersDead(); for (let character of characters) { @@ -109,18 +201,151 @@ export class LogManager { } } - this._game.stateManager.goToState(GameStates.TRAVEL); + this._game.stateManager.goToState(GameStates.EVENT); } - isThereAnyTemporaryLog(): boolean { - return this._tempResultLogs.length > 0 || this._tempoStatusChangeLogs.length > 0; + getRandomArbitrary(min: number, max: number): number { + return Math.random() * (max - min) + min; } - addTempLog(log: string, logType: LogType) { - if (logType == LogType.Result) { - this._tempResultLogs.push(log); - } else if (logType == LogType.StatusChange) { - this._tempoStatusChangeLogs.push(log); + checkCampBtn(): void { + if (this._game.isDayLight()) { + this._campBtn.disabled = true; + this._campBtn.innerHTML = "It's not safe to camp"; + } else { + this._campBtn.disabled = false; + this._campBtn.innerHTML = 'Camp (+6 hour)'; } } + + getAtributesPageElements(): void { + this._charactersList[0] = {}; + this._charactersList[0].nameField = document.querySelector("#first-character-name-field"); + this._charactersList[0].atributesField = document.querySelector("#first-character-atributes-field"); + this._charactersList[0].afflictionsField = document.querySelector("#first-character-afflictions-field"); + + this._charactersList[1] = {}; + this._charactersList[1].nameField = document.querySelector("#second-character-name-field"); + this._charactersList[1].atributesField = document.querySelector("#second-character-atributes-field"); + this._charactersList[1].afflictionsField = document.querySelector("#second-character-afflictions-field"); + + this._charactersList[2] = {}; + this._charactersList[2].nameField = document.querySelector("#third-character-name-field"); + this._charactersList[2].atributesField = document.querySelector("#third-character-atributes-field"); + this._charactersList[2].afflictionsField = document.querySelector("#third-character-afflictions-field"); + + this._charactersList[3] = {}; + this._charactersList[3].nameField = document.querySelector("#fourth-character-name-field"); + this._charactersList[3].atributesField = document.querySelector("#fourth-character-atributes-field"); + this._charactersList[3].afflictionsField = document.querySelector("#fourth-character-afflictions-field"); + } + + showCharacters(): void { + let characters = this._game.characters; + + for (let i = 0; i < characters.length; i++){ + let character = characters[i]; + + if (character.isDead) { + this._charactersList[i].nameField.innerHTML = character.name + ' - ' + character.kinship + ' 💀'; + this._charactersList[i].atributesField.innerHTML = character.getDateOfBirth() + ' - 2020'; + this._charactersList[i].afflictionsField.innerHTML = ''; + } else { + this._charactersList[i].nameField.innerHTML = character.name + ' - ' + character.kinship; + this._charactersList[i].nameField.innerHTML += character.getSickness() == 'Sick' ? ' [ Sick ]' : ''; + this._charactersList[i].atributesField.innerHTML = character.getSanity(); + this._charactersList[i].afflictionsField.innerHTML = character.showAfflictions(); + } + } + } + + private showProgressBarCanvas(): void { + this._progressBarCanvasElement.width = 300; + this._progressBarCanvasElement.height = 8; + this._progressBarCanvasContext = this._progressBarCanvasElement.getContext("2d")!; + this.drawBackground(); + console.log(this._game.distanceToTheBorder); + this.drawPlayerPositionOnProgressBarCanvas(300 - this._game.distanceToTheBorder); + } + + private drawBackground(): void { + this._progressBarCanvasContext.clearRect(0, 0, this._progressBarCanvasElement.width, this._progressBarCanvasElement.height); + this._progressBarCanvasContext.beginPath(); + + this._progressBarCanvasContext.fillStyle = 'black'; + this._progressBarCanvasContext.fillRect(0,0, this._progressBarCanvasElement.width, this._progressBarCanvasElement.height); + + this._progressBarCanvasContext.strokeStyle = "#2c3e50"; + this._progressBarCanvasContext.lineWidth = 1; + + this._progressBarCanvasContext.moveTo(10, this._progressBarCanvasElement.height / 2); + this._progressBarCanvasContext.lineTo(300 - 10, this._progressBarCanvasElement.height / 2); + this._progressBarCanvasContext.stroke(); + + this._progressBarCanvasContext.moveTo(10, (this._progressBarCanvasElement.height / 2) - 5); + this._progressBarCanvasContext.lineTo(10, (this._progressBarCanvasElement.height / 2) + 5); + this._progressBarCanvasContext.stroke(); + + this._progressBarCanvasContext.moveTo(this._progressBarCanvasElement.width / 2, (this._progressBarCanvasElement.height / 2) - 5); + this._progressBarCanvasContext.lineTo(this._progressBarCanvasElement.width / 2, (this._progressBarCanvasElement.height / 2) + 5); + this._progressBarCanvasContext.stroke(); + + this._progressBarCanvasContext.moveTo(this._progressBarCanvasElement.width / 4, (this._progressBarCanvasElement.height / 2) - 5); + this._progressBarCanvasContext.lineTo(this._progressBarCanvasElement.width / 4, (this._progressBarCanvasElement.height / 2) + 5); + this._progressBarCanvasContext.stroke(); + + this._progressBarCanvasContext.moveTo((this._progressBarCanvasElement.width / 4) * 3, (this._progressBarCanvasElement.height / 2) - 5); + this._progressBarCanvasContext.lineTo((this._progressBarCanvasElement.width / 4) * 3, (this._progressBarCanvasElement.height / 2) + 5); + this._progressBarCanvasContext.stroke(); + + this._progressBarCanvasContext.moveTo(this._progressBarCanvasElement.width - 10, (this._progressBarCanvasElement.height / 2) - 5); + this._progressBarCanvasContext.lineTo(this._progressBarCanvasElement.width - 10, (this._progressBarCanvasElement.height / 2) + 5); + this._progressBarCanvasContext.stroke(); + + this._progressBarCanvasContext.beginPath(); + this._progressBarCanvasContext.moveTo(this._progressBarCanvasElement.width - 10, (this._progressBarCanvasElement.height / 2) - 5); + this._progressBarCanvasContext.lineTo(this._progressBarCanvasElement.width - 10, (this._progressBarCanvasElement.height / 2) + 5); + this._progressBarCanvasContext.stroke(); + this._progressBarCanvasContext.closePath(); + } + + private drawPlayerPositionOnProgressBarCanvas(mile: number): void { + const lineSize = this._progressBarCanvasElement.width - 20; + const unit = lineSize / 300; + const unitsToWalk = mile * unit; + + this._progressBarCanvasContext.beginPath(); + this._progressBarCanvasContext.arc(unitsToWalk + 10, this._progressBarCanvasElement.height / 2, 3.5, 0, 2 * Math.PI); + this._progressBarCanvasContext.lineWidth = 0; + this._progressBarCanvasContext.fillStyle = "#27ae60"; + this._progressBarCanvasContext.fill(); + } + + walkOneHour() { + const characters: Character[] = this._game.characterManager.getCharactersAlive(); + + for (let character of characters) { + character.walkOneHour(); + } + + this._game.decreaseTheDistanceToTheBorder(2); + + this.showTravelledDistance(); + + if(this._game.distanceToTheBorder <= 0) { + this.arrivedAtTheBorder(); + } + } + + getRandomCharacter() { + return Math.floor(Math.random() * (this._game.characters.length)); + } + + showTravelledDistance() { + this._travelledDistanceField.innerHTML = this._game.distanceToTheBorder + ' ' + this._game.loc.l('miles-to-the-border'); + } + + arrivedAtTheBorder() { + this._game.stateManager.goToState(GameStates.GAME_OVER); + } } \ No newline at end of file diff --git a/src/managers/RipManager.ts b/src/managers/RipManager.ts index 0cabb3a..f886e4c 100644 --- a/src/managers/RipManager.ts +++ b/src/managers/RipManager.ts @@ -17,12 +17,12 @@ export class RipManager { this._game = Game.getInstance(); this._ripPageImageElement = document.querySelector("#rip-page-image") as HTMLImageElement; - this._ripPageNameElement = document.querySelector("#rip-page-name"); - this._ripPageDatesElement = document.querySelector("#rip-page-dates"); - this._ripPageQuoteElement = document.querySelector("#rip-page-quote"); - this._ripPageStatusElement = document.querySelector("#rip-page-status"); + this._ripPageNameElement = document.querySelector("#rip-page-name")!; + this._ripPageDatesElement = document.querySelector("#rip-page-dates")!; + this._ripPageQuoteElement = document.querySelector("#rip-page-quote")!; + this._ripPageStatusElement = document.querySelector("#rip-page-status")!; - this._travelBtn = document.querySelector('#rip-page-back-btn'); + this._travelBtn = document.querySelector('#rip-page-back-btn')!; this._travelBtn.addEventListener('click', () => { this.onClickTravel() }); } @@ -47,7 +47,7 @@ export class RipManager { this.showCharater(character); character.buried = true; } else { - this._game.stateManager.goToState(GameStates.TRAVEL); + this._game.stateManager.goToState(GameStates.LOG); } } } diff --git a/src/managers/SkillCheckManager.ts b/src/managers/SkillCheckManager.ts index 71b48c8..11412ae 100644 --- a/src/managers/SkillCheckManager.ts +++ b/src/managers/SkillCheckManager.ts @@ -25,14 +25,14 @@ export class SkillCheckManager { constructor() { this._game = Game.getInstance(); - this._resultLabel = document.querySelector("#skill-check-result-label"); - this._skillCheckResultValue = document.querySelector("#skill-check-result-value"); - this._skillCheckResultValueLabel = document.querySelector("#skill-check-result-value-label"); - - this._travelBtn = document.querySelector("#skill-check-back-btn"); - this._firstDice = document.querySelector("#first-dice"); - this._secondDice = document.querySelector("#second-dice"); - this._skillCheckExpected = document.querySelector("#skill-check-expected"); + this._resultLabel = document.querySelector("#skill-check-result-label")!; + this._skillCheckResultValue = document.querySelector("#skill-check-result-value")!; + this._skillCheckResultValueLabel = document.querySelector("#skill-check-result-value-label")!; + + this._travelBtn = document.querySelector("#skill-check-back-btn")!; + this._firstDice = document.querySelector("#first-dice")!; + this._secondDice = document.querySelector("#second-dice")!; + this._skillCheckExpected = document.querySelector("#skill-check-expected")!; this._travelBtn.addEventListener('click', () => { this.onClickTravel() }); this._diceManager = new DiceManager("teste"); diff --git a/src/managers/StateManager.ts b/src/managers/StateManager.ts index 4a43903..468935d 100644 --- a/src/managers/StateManager.ts +++ b/src/managers/StateManager.ts @@ -3,7 +3,7 @@ import { GameStates } from '../enums/GameStates'; export class StateManager { private readonly _game: Game; - public currentState: GameStates = GameStates.TRAVEL; + public currentState: GameStates = GameStates.LOG; constructor() { this._game = Game.getInstance(); @@ -16,10 +16,6 @@ export class StateManager { this._game.hideAllPages(); switch(this.currentState) { - case GameStates.TRAVEL: - this._game.showPage(this._game.travelPage); - this._game.travelManager.start(); - break; case GameStates.EVENT: this._game.showPage(this._game.eventPage); this._game.eventManager.start(); diff --git a/src/managers/TravelManager.ts b/src/managers/TravelManager.ts deleted file mode 100644 index 2c3cb4c..0000000 --- a/src/managers/TravelManager.ts +++ /dev/null @@ -1,285 +0,0 @@ -import { Game } from '../Game'; -import { GameStates } from '../enums/GameStates'; -import { Character } from '../entities/Character'; -import { LogType } from '../managers/LogManager'; - -export class TravelManager { - private _travelledDistanceField: Element; - private _progressBarCanvasElement: HTMLCanvasElement; - private _progressBarCanvasContext: CanvasRenderingContext2D; - private _walkBtn: HTMLButtonElement; - private _campBtn: HTMLButtonElement; - private _yourFamily: HTMLButtonElement; - private _game: Game; - private _charactersList: any; - private _bagBtn: HTMLButtonElement; - private _hoursSleeping: number; - private _sleepIntervalId: any; - - constructor() { - this._game = Game.getInstance(); - - this._travelledDistanceField = document.querySelector("#travelled-distance"); - this._progressBarCanvasElement = document.getElementById("progress-bar") as HTMLCanvasElement; - this._walkBtn = document.querySelector("#walk-btn"); - this._campBtn = document.querySelector("#camp-btn"); - this._yourFamily = document.querySelector('#your-family'); - - this._walkBtn.addEventListener('click', () => { this.onClickWalkBtn() }); - this._campBtn.addEventListener('click', () => { this.onClickCampBtn() }); - - this.showTravelledDistance(); - - this._charactersList = []; - - this._bagBtn = document.querySelector('#bag-btn'); - this._bagBtn.addEventListener('click', () => { this.onClickBag() }); - this.getAtributesPageElements(); - } - - start(): void { - this.showProgressBarCanvas(); - this._walkBtn.innerHTML = this._game.loc.l('walk-one-hour'); - this._yourFamily.innerHTML = this._game.loc.l('your-family'); - /* - if (this._game.characterManager.isInDanger()) { - this._statsBtn.innerHTML = '⚠️Your Family'; - } else { - this._statsBtn.innerHTML = 'Your Family'; - }*/ - - if (this._game.bagManager.isEmpty()) { - this._bagBtn.innerHTML = this._game.loc.l('bag-is-empty'); - this._bagBtn.disabled = true; - } else { - this._bagBtn.disabled = false; - this._bagBtn.innerHTML = 'Open bag (' + this._game.bagManager.showQuantityOfItems() + ') '; - } - - this.showCharacters(); - this.checkCampBtn(); - } - - private showProgressBarCanvas(): void { - this._progressBarCanvasElement.width = 300; - this._progressBarCanvasElement.height = 8; - this._progressBarCanvasContext = this._progressBarCanvasElement.getContext("2d"); - this.drawBackground(); - console.log(this._game.distanceToTheBorder); - this.drawPlayerPositionOnProgressBarCanvas(300 - this._game.distanceToTheBorder); - } - - private drawBackground(): void { - this._progressBarCanvasContext.clearRect(0, 0, this._progressBarCanvasElement.width, this._progressBarCanvasElement.height); - this._progressBarCanvasContext.beginPath(); - - this._progressBarCanvasContext.fillStyle = 'black'; - this._progressBarCanvasContext.fillRect(0,0, this._progressBarCanvasElement.width, this._progressBarCanvasElement.height); - - this._progressBarCanvasContext.strokeStyle = "#2c3e50"; - this._progressBarCanvasContext.lineWidth = 1; - - this._progressBarCanvasContext.moveTo(10, this._progressBarCanvasElement.height / 2); - this._progressBarCanvasContext.lineTo(300 - 10, this._progressBarCanvasElement.height / 2); - this._progressBarCanvasContext.stroke(); - - this._progressBarCanvasContext.moveTo(10, (this._progressBarCanvasElement.height / 2) - 5); - this._progressBarCanvasContext.lineTo(10, (this._progressBarCanvasElement.height / 2) + 5); - this._progressBarCanvasContext.stroke(); - - this._progressBarCanvasContext.moveTo(this._progressBarCanvasElement.width / 2, (this._progressBarCanvasElement.height / 2) - 5); - this._progressBarCanvasContext.lineTo(this._progressBarCanvasElement.width / 2, (this._progressBarCanvasElement.height / 2) + 5); - this._progressBarCanvasContext.stroke(); - - this._progressBarCanvasContext.moveTo(this._progressBarCanvasElement.width / 4, (this._progressBarCanvasElement.height / 2) - 5); - this._progressBarCanvasContext.lineTo(this._progressBarCanvasElement.width / 4, (this._progressBarCanvasElement.height / 2) + 5); - this._progressBarCanvasContext.stroke(); - - this._progressBarCanvasContext.moveTo((this._progressBarCanvasElement.width / 4) * 3, (this._progressBarCanvasElement.height / 2) - 5); - this._progressBarCanvasContext.lineTo((this._progressBarCanvasElement.width / 4) * 3, (this._progressBarCanvasElement.height / 2) + 5); - this._progressBarCanvasContext.stroke(); - - this._progressBarCanvasContext.moveTo(this._progressBarCanvasElement.width - 10, (this._progressBarCanvasElement.height / 2) - 5); - this._progressBarCanvasContext.lineTo(this._progressBarCanvasElement.width - 10, (this._progressBarCanvasElement.height / 2) + 5); - this._progressBarCanvasContext.stroke(); - - this._progressBarCanvasContext.beginPath(); - this._progressBarCanvasContext.moveTo(this._progressBarCanvasElement.width - 10, (this._progressBarCanvasElement.height / 2) - 5); - this._progressBarCanvasContext.lineTo(this._progressBarCanvasElement.width - 10, (this._progressBarCanvasElement.height / 2) + 5); - this._progressBarCanvasContext.stroke(); - this._progressBarCanvasContext.closePath(); - } - - private drawPlayerPositionOnProgressBarCanvas(mile: number): void { - const lineSize = this._progressBarCanvasElement.width - 20; - const unit = lineSize / 300; - const unitsToWalk = mile * unit; - - this._progressBarCanvasContext.beginPath(); - this._progressBarCanvasContext.arc(unitsToWalk + 10, this._progressBarCanvasElement.height / 2, 3.5, 0, 2 * Math.PI); - this._progressBarCanvasContext.lineWidth = 0; - this._progressBarCanvasContext.fillStyle = "#27ae60"; - this._progressBarCanvasContext.fill(); - } - - onClickCampBtn(): void { - this._bagBtn.disabled = true; - this._campBtn.disabled = true; - this._walkBtn.disabled = true; - this._yourFamily.innerHTML = 'Camping...'; - this._hoursSleeping = 0; - this._sleepIntervalId = window.setInterval(() => this.sleeping(), 500); - } - - sleeping(): void { - if (this._hoursSleeping <= 6) { - let characters = this._game.characters; - - for (let i = 0; i < characters.length; i++){ - let character = characters[i]; - - if (!character.isDead) { - const randomNumber = this._game.getRandomArbitrary(3); - this._charactersList[i].atributesField.innerHTML = randomNumber == 0 ? "Zzz" : randomNumber == 1 ? "zZz" : "zzZ"; - } - } - - this._game.passOneHour(); - this._hoursSleeping++; - } else { - this._game.characterManager.increaseStaminaOfAllCharactersToMax(); - this.showCharacters(); - this._bagBtn.disabled = false; - this._campBtn.disabled = false; - this._walkBtn.disabled = false; - this._yourFamily.innerHTML = this._game.loc.l('your-family'); - clearInterval(this._sleepIntervalId); - } - } - - onClickWalkBtn(): void { - if (this._game.distanceToTheBorder == 300) { - this._game.audioManager.playRainSound(); - } - - this._game.audioManager.playButtonSound(); - this._game.passOneHour(); - this.walkOneHour(); - - let foundEvent = this.checkEvent(); - if (foundEvent) { - this._game.stateManager.goToState(GameStates.EVENT); - } else if (this._game.log.isThereAnyTemporaryLog()) { - - let randomCharacter = this._game.characterManager.picksACharacterAtRandom(); - let walkMessages = [ - randomCharacter.name + ' is feeling anxious...', - randomCharacter.name + ' is thoughtful...', - randomCharacter.name + ' feels a tightness in the heart...', - 'The family continued walking...', - 'The walk was smooth...', - 'Nothing different...' - ]; - - const message: string = walkMessages[this._game.getRandomArbitrary(walkMessages.length - 1)]; - - this._game.log.addTempLog(message, LogType.Result); - this._game.stateManager.goToState(GameStates.LOG); - } - - this.checkCampBtn(); - } - - checkCampBtn(): void { - if (this._game.isDayLight()) { - this._campBtn.disabled = true; - this._campBtn.innerHTML = "It's not safe to camp"; - } else { - this._campBtn.disabled = false; - this._campBtn.innerHTML = 'Camp (+6 hour)'; - } - } - - onClickBag() { - this._game.audioManager.playButtonSound(); - this._game.stateManager.goToState(GameStates.BAG); - } - - getAtributesPageElements(): void { - this._charactersList[0] = {}; - this._charactersList[0].nameField = document.querySelector("#first-character-name-field"); - this._charactersList[0].atributesField = document.querySelector("#first-character-atributes-field"); - this._charactersList[0].afflictionsField = document.querySelector("#first-character-afflictions-field"); - - this._charactersList[1] = {}; - this._charactersList[1].nameField = document.querySelector("#second-character-name-field"); - this._charactersList[1].atributesField = document.querySelector("#second-character-atributes-field"); - this._charactersList[1].afflictionsField = document.querySelector("#second-character-afflictions-field"); - - this._charactersList[2] = {}; - this._charactersList[2].nameField = document.querySelector("#third-character-name-field"); - this._charactersList[2].atributesField = document.querySelector("#third-character-atributes-field"); - this._charactersList[2].afflictionsField = document.querySelector("#third-character-afflictions-field"); - - this._charactersList[3] = {}; - this._charactersList[3].nameField = document.querySelector("#fourth-character-name-field"); - this._charactersList[3].atributesField = document.querySelector("#fourth-character-atributes-field"); - this._charactersList[3].afflictionsField = document.querySelector("#fourth-character-afflictions-field"); - } - - showCharacters(): void { - let characters = this._game.characters; - - for (let i = 0; i < characters.length; i++){ - let character = characters[i]; - - if (character.isDead) { - this._charactersList[i].nameField.innerHTML = character.name + ' - ' + character.kinship + ' 💀'; - this._charactersList[i].atributesField.innerHTML = character.getDateOfBirth() + ' - 2020'; - this._charactersList[i].afflictionsField.innerHTML = ''; - } else { - let healthPerHour: number = character.showHealthLostPerHourDueToAllStatus(); - this._charactersList[i].nameField.innerHTML = character.name + ' - ' + character.kinship; - this._charactersList[i].nameField.innerHTML += character.getSickness() == 'Sick' ? ' [ Sick ]' : ''; - this._charactersList[i].atributesField.innerHTML = character.getSanity(); - this._charactersList[i].afflictionsField.innerHTML = character.showAfflictions(); - } - } - } - - checkEvent() { - return this.getRandomArbitrary(1, 100) <= 50; - } - - getRandomArbitrary(min: number, max: number): number { - return Math.random() * (max - min) + min; - } - - walkOneHour() { - const characters: Character[] = this._game.characterManager.getCharactersAlive(); - - for (let character of characters) { - character.walkOneHour(); - } - - this._game.decreaseTheDistanceToTheBorder(2); - - this.showTravelledDistance(); - - if(this._game.distanceToTheBorder <= 0) { - this.arrivedAtTheBorder(); - } - } - - getRandomCharacter() { - return Math.floor(Math.random() * (this._game.characters.length)); - } - - showTravelledDistance() { - this._travelledDistanceField.innerHTML = this._game.distanceToTheBorder + ' ' + this._game.loc.l('miles-to-the-border'); - } - - arrivedAtTheBorder() { - this._game.stateManager.goToState(GameStates.GAME_OVER); - } -} \ No newline at end of file