Skip to content

Commit

Permalink
Muda para funcionar com apenas um dado
Browse files Browse the repository at this point in the history
  • Loading branch information
@andredarcie
andredarcie committed Oct 16, 2024
1 parent 5403c41 commit 87a0417
Show file tree
Hide file tree
Showing 6 changed files with 65 additions and 130 deletions.
9 changes: 8 additions & 1 deletion css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
18 changes: 2 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,25 +71,11 @@ <h1>Overview</h1>
</div>
<div id="skill-check-page">
<div class="header">
<h1>Skill Check</h1>
<p>Strength - Medium</p>
<h1>Julgamento do Destino</h1>
</div>
<div class="skill-check-content">
<div style="text-align: center;">- Dices -</div>
<div style="margin: 0 auto; margin: 0 auto; text-align: center;">
<div style="padding: 2em; display: inline-block; margin: 0 auto;">
<div id="first-dice" style="font-size: 4em; margin: 0 auto; display: inline-block;">6</div>
<div style="display: inline-block">/ 6</div>
</div>
<div style="display: inline-block; font-size: 4em;"> + </div>
<div style="padding: 2em; display: inline-block; margin: 0 auto;">
<div id="second-dice" style="font-size: 350%; margin: 0 auto; display: inline-block;">6</div>
<div style="display: inline-block">/ 6</div>
</div>
</div>
<div style="font-size: 1.2em; text-align: center;">+ Character Strength: 3</div>
<canvas id="dice-canvas" width="200" height="200"></canvas>
<div id="skill-check-expected" style="font-size: 1.5em; text-align: center;">Expected: 10</div>
<div id="skill-check-result-value-label" style="font-size: 1.5em; text-align: center;">Result: <div style="display: inline-block; font-weight: bold;" id="skill-check-result-value">0</div></div>
<h2 style="text-align: center; width: 15em; height: 5em; margin: 0 auto;">
<span id="skill-check-result-label" style="font-size: 2.5em;">SUCCESS</span>
</h2>
Expand Down
49 changes: 25 additions & 24 deletions src/managers/DiceManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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' };
}
}

Expand Down Expand Up @@ -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);
}
}
2 changes: 1 addition & 1 deletion src/managers/EventManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
90 changes: 15 additions & 75 deletions src/managers/SkillCheckManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand All @@ -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() {
Expand All @@ -69,125 +64,70 @@ 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;
return;
}
}

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');
this._resultLabel.classList.add('green-color');
}

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');
this._resultLabel.classList.remove('green-color');
}

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');
Expand Down
Loading

0 comments on commit 87a0417

Please sign in to comment.