Skip to content

Commit

Permalink
Remove a pagina travel
Browse files Browse the repository at this point in the history
  • Loading branch information
@andredarcie
andredarcie committed Oct 12, 2024
1 parent 4919297 commit 5a378d8
Show file tree
Hide file tree
Showing 15 changed files with 378 additions and 473 deletions.
35 changes: 26 additions & 9 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 */
}
97 changes: 43 additions & 54 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,65 +22,54 @@
<div id="container">
<div id="core">
<p id="current-time-field"></p>
<div id="travel-page">
<h1 id="your-family">Those You Love</h1>
<div class="travel-content">
<div class="stats-content">
<ul>
<li class="character-content">
<img style="display: inline-block; margin: 2px" src="img/characters/man.jpg" height="60" width="60"></img>
<div class="character-atributes-box">
<div id="first-character-name-field" class="character-name-field"></div>
<div id="first-character-atributes-field"></div>
<div class="character-afflictions-field" id="first-character-afflictions-field"></div>
</div>
</li>
<li class="character-content">
<img style="display: inline-block; margin: 2px" src="img/characters/woman.jpg" height="60" width="60"></img>
<div class="character-atributes-box">
<div id="second-character-name-field" class="character-name-field"></div>
<div id="second-character-atributes-field"></div>
<div class="character-afflictions-field" id="second-character-afflictions-field"></div>
</div>
</li>
<li class="character-content">
<img style="display: inline-block; margin: 2px" src="img/characters/kid.jpg" height="60" width="60"></img>
<div class="character-atributes-box">
<div id="third-character-name-field" class="character-name-field"></div>
<div id="third-character-atributes-field"></div>
<div class="character-afflictions-field" id="third-character-afflictions-field"></div>
</div>
</li>
<li class="character-content">
<img style="display: inline-block; margin: 2px" src="img/characters/girl.jpg" height="60" width="60"></img>
<div class="character-atributes-box">
<div id="fourth-character-name-field" class="character-name-field"></div>
<div id="fourth-character-atributes-field"></div>
<div class="character-afflictions-field" id="fourth-character-afflictions-field"></div>
</div>
</li>
</ul>
</div>
<p id="travelled-distance"></p>
<canvas id="progress-bar" width="300" height="30"></canvas>
</div>
<div class="page-actions">
<button id="walk-btn">Walk (+1 hour)</button>
<button id="camp-btn">Camp (+6 hour)</button>
<button id="bag-btn">Open bag</button>
</div>
</div>
<div id="log-page">
<h1>Log</h1>
<h1>Overview</h1>
<div class="log-content">
<h2>Result</h2>
<ul id="log-list-result"></ul>
<h2>Status Change</h2>
<ul id="log-list-status-change"></ul>
</div>
<div class="page-actions">
<button id="log-back-character-btn">Back to travel</button>
<div class="stats-content">
<div>
<div class="character-content">
<img class="character-image" src="img/characters/man.jpg" height="60" width="60"></img>
<div class="character-atributes-box">
<div id="first-character-name-field" class="character-name-field"></div>
<div id="first-character-atributes-field"></div>
<div class="character-afflictions-field" id="first-character-afflictions-field"></div>
</div>
</div>
<div class="character-content">
<img class="character-image" src="img/characters/woman.jpg" height="60" width="60"></img>
<div class="character-atributes-box">
<div id="second-character-name-field" class="character-name-field"></div>
<div id="second-character-atributes-field"></div>
<div class="character-afflictions-field" id="second-character-afflictions-field"></div>
</div>
</div>
<div class="character-content">
<img class="character-image" src="img/characters/kid.jpg" height="60" width="60"></img>
<div class="character-atributes-box">
<div id="third-character-name-field" class="character-name-field"></div>
<div id="third-character-atributes-field"></div>
<div class="character-afflictions-field" id="third-character-afflictions-field"></div>
</div>
</div>
<div class="character-content">
<img class="character-image" src="img/characters/girl.jpg" height="60" width="60"></img>
<div class="character-atributes-box">
<div id="fourth-character-name-field" class="character-name-field"></div>
<div id="fourth-character-atributes-field"></div>
<div class="character-afflictions-field" id="fourth-character-afflictions-field"></div>
</div>
</div>
</ul>
</div>
<p id="travelled-distance"></p>
<canvas id="progress-bar" width="300" height="30"></canvas>
<div class="page-actions">
<button id="camp-btn">Camp (+6 hour)</button>
<button id="bag-btn">Open bag</button>
<button id="walk-btn">Continue to walk (+1 hour)</button>
</div></div>
</div>
<div id="skill-check-page">
<div class="header">
Expand Down
54 changes: 24 additions & 30 deletions src/Game.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand All @@ -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();
}

Expand All @@ -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();
Expand All @@ -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() {
Expand Down Expand Up @@ -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);
Expand Down
44 changes: 10 additions & 34 deletions src/entities/Character.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions src/entities/Event.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
1 change: 0 additions & 1 deletion src/enums/GameStates.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
export enum GameStates {
TRAVEL,
EVENT,
SKILLCHECK,
GAME_OVER,
Expand Down
4 changes: 2 additions & 2 deletions src/managers/BagManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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';
}

Expand Down
Loading

0 comments on commit 5a378d8

Please sign in to comment.