From 87a04172b6d179d7cd6ee1ed10bb218f6ad5ea53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20N=2E=20Darcie?= Date: Wed, 16 Oct 2024 00:14:28 -0300 Subject: [PATCH] Muda para funcionar com apenas um dado --- css/style.css | 9 +++- index.html | 18 +------ src/managers/DiceManager.ts | 49 ++++++++--------- src/managers/EventManager.ts | 2 +- src/managers/SkillCheckManager.ts | 90 ++++++------------------------- src/seeds/DmytroEventSeeds.ts | 27 +++++----- 6 files changed, 65 insertions(+), 130 deletions(-) diff --git a/css/style.css b/css/style.css index a5fc035..6331d87 100644 --- a/css/style.css +++ b/css/style.css @@ -265,7 +265,14 @@ ul { } .character-image { - border-right: ; transform: scale(1); /* 20% do tamanho original */ transform-origin: center; /* Define o ponto de origem da transformação */ +} + +#dice-canvas { + display: block; + margin: auto; + top: 50%; + left: 50%; + text-align: center; } \ No newline at end of file diff --git a/index.html b/index.html index 6b067fe..e306ac7 100644 --- a/index.html +++ b/index.html @@ -71,25 +71,11 @@

Overview

-

Skill Check

-

Strength - Medium

+

Julgamento do Destino

-
- Dices -
-
-
-
6
-
/ 6
-
-
+
-
-
6
-
/ 6
-
-
-
+ Character Strength: 3
+
Expected: 10
-
Result:
0

SUCCESS

diff --git a/src/managers/DiceManager.ts b/src/managers/DiceManager.ts index 2fcdbed..ec9b0d5 100644 --- a/src/managers/DiceManager.ts +++ b/src/managers/DiceManager.ts @@ -16,24 +16,20 @@ export class DiceManager { private cornerRadius: number; private dotRadius: number; private positions: [number, number][][]; + private _diceTimer: any; constructor(canvasId: string) { this.percentageTable = { - '2': 97, - '3': 97, - '4': 92, - '5': 83, - '6': 73, - '7': 59, - '8': 42, - '9': 28, - '10': 17, - '11': 9, - '12': 3 - }; - - //this.canvas = document.getElementById(canvasId) as HTMLCanvasElement; - //this.ctx = this.canvas.getContext("2d") as CanvasRenderingContext2D; + '1': 16.67, + '2': 16.67, + '3': 16.67, + '4': 16.67, + '5': 16.67, + '6': 16.67 + }; + + this.canvas = document.getElementById(canvasId) as HTMLCanvasElement; + this.ctx = this.canvas.getContext("2d") as CanvasRenderingContext2D; this.diceSize = 150; this.cornerRadius = 20; @@ -55,19 +51,19 @@ export class DiceManager { } public getDifficult(difficulty: Difficulties): Difficult { - switch(difficulty) { + switch (difficulty) { case Difficulties.TRIVIAL: - return { value: this.getRandomNumber(3, 5), text: 'Trivial', class: 'green-color-border' }; + return { value: 1, text: 'Trivial', class: 'green-color-border' }; case Difficulties.EASY: - return { value: this.getRandomNumber(6, 8), text: 'Easy', class: 'green-color-border' }; + return { value: 2, text: 'Easy', class: 'green-color-border' }; case Difficulties.MEDIUM: - return { value: this.getRandomNumber(9, 11), text: 'Medium', class: 'green-color-border' }; + return { value: 3, text: 'Medium', class: 'green-color-border' }; case Difficulties.CHALLENGING: - return { value: this.getRandomNumber(12, 14), text: 'Challenging', class: 'yellow-color-border' }; + return { value: 4, text: 'Challenging', class: 'yellow-color-border' }; case Difficulties.VERY_HARD: - return { value: this.getRandomNumber(15, 17), text: 'Very Hard', class: 'red-color-border' }; + return { value: 5, text: 'Very Hard', class: 'red-color-border' }; case Difficulties.IMPOSSIBILE: - return { value: this.getRandomNumber(18, 20), text: 'Impossibile', class: 'red-color-border' }; + return { value: 6, text: 'Impossibile', class: 'red-color-border' }; } } @@ -129,10 +125,15 @@ export class DiceManager { return Math.floor(Math.random() * 6) + 1; } + public stopDice(value: number) { + clearInterval(this._diceTimer); + this.drawDice(value); + } + public animateDice(): void { - setInterval(() => { + this._diceTimer = setInterval(() => { const diceValue = this.getRandomDiceValue(); this.drawDice(diceValue); - }, 1000); + }, 50); } } \ No newline at end of file diff --git a/src/managers/EventManager.ts b/src/managers/EventManager.ts index a5367bd..c5cf878 100644 --- a/src/managers/EventManager.ts +++ b/src/managers/EventManager.ts @@ -52,7 +52,7 @@ export class EventManager { private showChoices() { this._eventPageChoicesBtnListElement.innerHTML = ''; - let diceManager = new DiceManager(""); + let diceManager = new DiceManager("dice-canvas"); this.showChoice(this.currentEvent.firstChoice, diceManager); this.showChoice(this.currentEvent.secondChoice, diceManager); } diff --git a/src/managers/SkillCheckManager.ts b/src/managers/SkillCheckManager.ts index 11412ae..0a971b0 100644 --- a/src/managers/SkillCheckManager.ts +++ b/src/managers/SkillCheckManager.ts @@ -12,11 +12,7 @@ export enum SkillCheckResults { export class SkillCheckManager { private readonly _game: Game; private _travelBtn: HTMLButtonElement; - private _firstDice: HTMLElement; - private _secondDice: HTMLElement; private _skillCheckExpected: HTMLElement; - private _skillCheckResultValue: HTMLElement; - private _skillCheckResultValueLabel: HTMLElement; public _resultLabel: HTMLElement; private _diceTimer: any; private _diceManager: DiceManager; @@ -26,19 +22,20 @@ export class SkillCheckManager { 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._travelBtn.addEventListener('click', () => { this.onClickTravel() }); - this._diceManager = new DiceManager("teste"); + this._diceManager = new DiceManager("dice-canvas"); } start(): void { + this._currentChoice = this._game.eventManager.currentChoice; + let expectedValue = this._currentChoice.skillCheckFields.difficult.value; + this._skillCheckExpected.innerHTML = 'Mínimo Necessário: ' + expectedValue.toString(); + + this._diceManager.animateDice(); this._travelBtn.disabled = true; this._resultLabel.style.visibility = 'hidden'; setTimeout(() => { this.startDiceRoll() }, 100); @@ -47,9 +44,7 @@ export class SkillCheckManager { startDiceRoll() { let dice = new Dice(); this._game.audioManager.playDiceSound(); - this._diceTimer = setInterval(() => { this.shakeDice(dice) }, 50); setTimeout(() => { this.stopShakeDice(dice) }, 500); - this._currentChoice = this._game.eventManager.currentChoice; } onClickTravel() { @@ -69,51 +64,41 @@ export class SkillCheckManager { this._game.stateManager.goToState(GameStates.LOG); } - private shakeDice(dice: Dice): void { - let firstDiceValue = dice.roll(); - let secondDiceValue = dice.roll(); - this.showDiceValues(firstDiceValue, secondDiceValue); - } - private stopShakeDice(dice: Dice): void { + clearInterval(this._diceTimer); this._resultLabel.style.visibility = 'visible'; - let firstDiceValue = dice.roll(); - let secondDiceValue = dice.roll(); - let characterStrength = 3; + let diceValue = dice.roll(); + this._diceManager.stopDice(diceValue); let expectedValue = this._currentChoice.skillCheckFields.difficult.value; - let finalValue = firstDiceValue + secondDiceValue + characterStrength; - this.showDiceValues(firstDiceValue, secondDiceValue); - this._skillCheckResultValue.style.textAlign = 'center'; - this._skillCheckResultValue.innerHTML = finalValue.toString(); - this._skillCheckExpected.innerHTML = 'Expected: ' + expectedValue.toString(); + this._skillCheckExpected.innerHTML = 'Mínimo Necessário: ' + expectedValue.toString(); this._travelBtn.disabled = false; - if (firstDiceValue + secondDiceValue == 12) { + if (diceValue == 6) { this._game.audioManager.playSuccessSound(); this.setCriticalSuccess(); this._game.skillCheckResult = SkillCheckResults.Success; return; } - if (firstDiceValue + secondDiceValue == 2) { + if (diceValue == 1) { this._game.audioManager.playFailSound(); this.setCriticalFailure(); this._game.skillCheckResult = SkillCheckResults.Failure; return; } - if (finalValue >= expectedValue) { + if (diceValue >= expectedValue) { this._game.audioManager.playSuccessSound(); this.setSuccess(); this._game.skillCheckResult = SkillCheckResults.Success; return; } - if (finalValue < expectedValue) { + if (diceValue < expectedValue) { this._game.audioManager.playFailSound(); this.setFailure(); this._game.skillCheckResult = SkillCheckResults.Failure; @@ -121,39 +106,14 @@ export class SkillCheckManager { } } - private showDiceValues(firstDiceValue: number, secondDiceValue: number): void { - this._firstDice.innerHTML = firstDiceValue.toString(); - this._secondDice.innerHTML = secondDiceValue.toString(); - } - public setCriticalSuccess(): void { - this._skillCheckResultValue.style.visibility = 'hidden'; - this._skillCheckResultValueLabel.style.visibility = 'hidden'; - this._skillCheckResultValue.classList.remove('red-color'); - this._skillCheckResultValue.classList.add('green-color'); - - this._firstDice.classList.add('green-color'); - this._secondDice.classList.add('green-color'); - this._firstDice.classList.remove('red-color'); - this._secondDice.classList.remove('red-color'); - this._resultLabel.innerHTML = ' CRITICIAL SUCCESS '; this._resultLabel.style.fontSize = '1.3em'; this._resultLabel.classList.remove('red-color'); this._resultLabel.classList.add('green-color'); } - public setSuccess(): void { - this._skillCheckResultValue.style.visibility = 'visible'; - this._skillCheckResultValueLabel.style.visibility = 'visible'; - this._skillCheckResultValue.classList.remove('red-color'); - this._skillCheckResultValue.classList.add('green-color'); - - this._firstDice.classList.remove('green-color'); - this._secondDice.classList.remove('green-color'); - this._firstDice.classList.remove('red-color'); - this._secondDice.classList.remove('red-color'); - + public setSuccess(): void { this._resultLabel.innerHTML = ' SUCCESS '; this._resultLabel.style.fontSize = '2.5em'; this._resultLabel.classList.remove('red-color'); @@ -161,16 +121,6 @@ export class SkillCheckManager { } public setCriticalFailure(): void { - this._skillCheckResultValue.style.visibility = 'hidden'; - this._skillCheckResultValueLabel.style.visibility = 'hidden'; - this._skillCheckResultValue.classList.add('red-color'); - this._skillCheckResultValue.classList.remove('green-color'); - - this._firstDice.classList.remove('green-color'); - this._secondDice.classList.remove('green-color'); - this._firstDice.classList.add('red-color'); - this._secondDice.classList.add('red-color'); - this._resultLabel.innerHTML = ' CRITICIAL FAILURE '; this._resultLabel.style.fontSize = '1.3em'; this._resultLabel.classList.add('red-color'); @@ -178,16 +128,6 @@ export class SkillCheckManager { } public setFailure(): void { - this._skillCheckResultValue.style.visibility = 'visible'; - this._skillCheckResultValueLabel.style.visibility = 'visible'; - this._skillCheckResultValue.classList.add('red-color'); - this._skillCheckResultValue.classList.remove('green-color'); - - this._firstDice.classList.remove('green-color'); - this._secondDice.classList.remove('green-color'); - this._firstDice.classList.remove('red-color'); - this._secondDice.classList.remove('red-color'); - this._resultLabel.innerHTML = ' FAILURE '; this._resultLabel.style.fontSize = '2.5em'; this._resultLabel.classList.add('red-color'); diff --git a/src/seeds/DmytroEventSeeds.ts b/src/seeds/DmytroEventSeeds.ts index b042acb..03c182a 100644 --- a/src/seeds/DmytroEventSeeds.ts +++ b/src/seeds/DmytroEventSeeds.ts @@ -12,7 +12,7 @@ export class DmytroEventSeeds { events.push(new Event( 'Rostos nos Escombros', - 'Dmytro depara-se com os corpos de uma família, soterrados nos escombros de uma casa destruída. A visão faz com que o medo de um destino similar para sua própria família o assombre.', + 'Dmytro depara-se com os corpos de uma família, soterrados nos escombros de uma casa destruída. A visão traz um eco de dor e desolação, como se as paredes dilaceradas daquele lar sussurrassem segredos de vidas interrompidas. A imagem crava-se em sua mente, e o medo do mesmo destino para sua própria família transforma-se em um peso opressor, como se o céu desabasse sobre seus ombros.', '', { buttonText: 'Enfrentar', @@ -23,12 +23,12 @@ export class DmytroEventSeeds { resultPath: { success: () => { this._game.characterManager.characterDmytro.increaseSanity(5); - this._game.log.addTempLog('Dmytro reúne forças para enfrentar a visão aterradora, recuperando um fragmento de sua sanidade.', LogType.Result); + this._game.log.addTempLog('Dmytro encontra força em sua alma exausta, encarando o terror com uma chama trêmula de coragem, e por um instante, a escuridão recua, devolvendo-lhe um fragmento de paz.', LogType.Result); }, failure: () => { this._game.characterManager.characterDmytro.looseSanity(10); this._game.characterManager.makeSomeoneInTheGroupGetStatus('Dmytro', 'Ansiedade'); - this._game.log.addTempLog('A visão é demasiado penosa para Dmytro, instilando uma profunda ansiedade em seu coração.', LogType.Result); + this._game.log.addTempLog('A visão é um golpe demasiado cruel para sua mente já ferida, e a imagem dos corpos assombra cada recanto de seus pensamentos, lançando-o em um abismo de ansiedade.', LogType.Result); } } }, @@ -40,7 +40,8 @@ export class DmytroEventSeeds { skillCheckFields: null, normalResultPath: () => { this._game.characterManager.characterDmytro.looseSanity(5); - this._game.log.addTempLog('Dmytro desvia o olhar, mas a imagem permanece vívida em sua mente, corroendo lentamente sua sanidade.', LogType.Result); + this._game.log.addTempLog('Dmytro desvia o olhar, mas a sombra daqueles rostos segue-o, como uma cicatriz na memória, corroendo sua sanidade com a persistência de um veneno invisível.', LogType.Result); + this._game.log.addTempLog('Dmytro se ajoelha no solo frio, e lágrimas amargas escorrem de seus olhos enquanto ele é consumido por um lamento silencioso.', LogType.Result); } }, EventType.Psychological, @@ -49,7 +50,7 @@ export class DmytroEventSeeds { events.push(new Event( 'O Velho Espelho', - 'Dmytro encontra um espelho rachado, e nele vislumbra os rostos daqueles que não conseguiu salvar.', + 'Dmytro encontra um espelho rachado, um fragmento do passado que reflete não apenas seu rosto cansado, mas os fantasmas daqueles que ele não conseguiu salvar. As fissuras no vidro parecem traçar as linhas de sua própria culpa, um labirinto sem saída que o aprisiona em suas falhas.', '', { buttonText: 'Pressão', @@ -57,7 +58,7 @@ export class DmytroEventSeeds { skillCheckFields: null, normalResultPath: () => { this._game.characterManager.characterDmytro.looseSanity(5); - this._game.log.addTempLog('Dmytro sente o peso esmagador da culpa ao encarar o espelho, perdendo parte de sua sanidade.', LogType.Result); + this._game.log.addTempLog('Ao encarar o espelho, Dmytro sente-se afundar sob o peso de cada reflexo, cada rosto perdido que retorna para assombrá-lo, roubando-lhe mais um pouco de sua sanidade.', LogType.Result); } }, { @@ -69,12 +70,12 @@ export class DmytroEventSeeds { resultPath: { success: () => { this._game.characterManager.characterDmytro.increaseSanity(5); - this._game.log.addTempLog('Dmytro desvia o olhar do espelho, afastando os pensamentos sombrios que o assolavam.', LogType.Result); + this._game.log.addTempLog('Dmytro desvia o olhar a tempo, fechando a porta para os espectros que o espelho convocava, recuperando uma pequena parte de si mesmo no processo.', LogType.Result); }, failure: () => { this._game.characterManager.characterDmytro.looseSanity(10); this._game.characterManager.makeSomeoneInTheGroupGetStatus('Dmytro', 'Culpa'); - this._game.log.addTempLog('Dmytro falha em afastar os pensamentos negativos e é consumido pela culpa.', LogType.Result); + this._game.log.addTempLog('O reflexo fragmentado invade sua mente, e Dmytro é incapaz de evitar a torrente de culpa que o consome, como um rio subterrâneo que devora a terra por dentro.', LogType.Result); } } }, @@ -86,7 +87,7 @@ export class DmytroEventSeeds { events.push(new Event( 'Gritos Fantasmas', - 'Dmytro escuta gritos ao longe, ecos dolorosos das memórias de um massacre que testemunhou.', + 'Dmytro ouve gritos ao longe, ecos de um massacre há muito ocorrido, mas que ainda ressoam como espectros em sua mente. Cada som é uma lâmina cortante, um chamado que rasga a calma da noite e o arrasta de volta às memórias que ele tenta enterrar.', '', { buttonText: 'Confrontar', @@ -97,12 +98,12 @@ export class DmytroEventSeeds { resultPath: { success: () => { this._game.characterManager.characterDmytro.increaseSanity(10); - this._game.log.addTempLog('Dmytro confronta as memórias dolorosas e consegue transcendê-las, recuperando parte de sua sanidade.', LogType.Result); + this._game.log.addTempLog('Dmytro enfrenta os gritos com uma força que ele não sabia possuir, transpondo as barreiras do medo e emergindo um pouco mais forte, como um sobrevivente que encontra luz em meio à devastação.', LogType.Result); }, failure: () => { this._game.characterManager.characterDmytro.looseSanity(15); this._game.characterManager.makeSomeoneInTheGroupGetStatus('Dmytro', 'Trauma'); - this._game.log.addTempLog('As lembranças são intensas demais, mergulhando Dmytro em um estado de profundo trauma.', LogType.Result); + this._game.log.addTempLog('Os gritos são como garras invisíveis, cravando-se em sua mente, arrastando Dmytro para um vórtice de lembranças e pesadelos, até que tudo que resta é um trauma irreparável.', LogType.Result); } } }, @@ -114,7 +115,7 @@ export class DmytroEventSeeds { skillCheckFields: null, normalResultPath: () => { this._game.characterManager.characterDmytro.looseSanity(7); - this._game.log.addTempLog('Dmytro tenta fugir dos gritos, mas eles continuam a ecoar em sua mente, deteriorando sua sanidade.', LogType.Result); + this._game.log.addTempLog('Dmytro tenta fugir dos gritos, mas eles se entrelaçam ao vento, assombrando seus passos e corroendo sua mente com uma persistência maligna.', LogType.Result); } }, EventType.Psychological, @@ -123,4 +124,4 @@ export class DmytroEventSeeds { return events; } -} \ No newline at end of file +}