Skip to content

Commit

Permalink
Ordenador [WIP] y cambios en los dialogos
Browse files Browse the repository at this point in the history
- Se han hecho cambios en los diálogos para que pueda haber más personajes sin retratos aparte del jugador
- Se ha añadido a la listview dos métodos: setVisible y añadir elementos al principio
- Avances en el ordenador: transiciones entre todas las pantallas y pantalla de solicitudes de amistad terminada
  • Loading branch information
pedrolemi committed Jul 19, 2024
1 parent 63452f8 commit 33dc50b
Show file tree
Hide file tree
Showing 30 changed files with 966 additions and 539 deletions.
Binary file added assets/Computer.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions localization/computer.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"root1": {
"type": "text",
"character": "computer",
"next": "decision"
},
"decision": {
"type": "choice",
"choices":[
{ "next": "accessComputer" },
{}
]
},
"accessComputer": {
"type": "event",
"events": [
{ "switchToComputer": { } }
]
},
"root2": {
"type": "text",
"character": "player"
}
}
16 changes: 16 additions & 0 deletions localization/en/computer.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"root1": {
"text": "Do you want to turn the computer on?"
},
"decision": [
{
"text": "Yes"
},
{
"text": "No"
}
],
"root2": {
"text": "I don't have any new photo to upload"
}
}
7 changes: 6 additions & 1 deletion localization/en/names.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
{
"mom": "Mom",
"dad": "Dad",
"player": "You"
"player": "You",
"computer": "Computer",
"Maria": "Mary",
"Alex": "Alex",
"Alison": "Alison",
"Guille": "William"
}
16 changes: 16 additions & 0 deletions localization/es/computer.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"root1": {
"text": "¿Quieres encender el ordenador?"
},
"decision": [
{
"text": "Si"
},
{
"text": "No"
}
],
"root2": {
"text": "No tengo ninguna nueva foto que subir"
}
}
7 changes: 6 additions & 1 deletion localization/es/names.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
{
"mom": "Mamá",
"dad": "Papá",
"player": ""
"player": "",
"computer": "Ordenador",
"Maria": "María",
"Alex": "Alex",
"Alison": "Alison",
"Guille": "Guille"
}
117 changes: 55 additions & 62 deletions src/UI/button.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ export default class Button extends Phaser.GameObjects.Container {
* @param {Number} scale - escala del objeto
* @param {Function} fn - funcion que se ejecuta cuando se clica en el boton
* @param {String} fill - sprite que se usa para el relleno
* @param {Color} normalCol - color RGB del boton cuando no se esta interactuando con el (opcional)
* @param {Color} highlightedCol - color RGB cuando se pasa el puntero por encima (opcional)
* @param {Color} pressedCol - color RGB del boton cuando se clica en el (opcional)
* @param {Color} normalCol - color RGB del boton cuando no se esta interactuando con el
* @param {Color} highlightedCol - color RGB cuando se pasa el puntero por encima
* @param {Color} pressedCol - color RGB del boton cuando se clica en el
* @param {Text} text - texto que se escribe en el boton (opcional)
* @param {Object} fontParams - distintos parametros (tipografia, tam, estilo, color) para personalizar el texto anterior (opcional)
* @param {String} edge - sprite que se usa para el borde (opcional)
Expand All @@ -25,16 +25,14 @@ export default class Button extends Phaser.GameObjects.Container {

this.fillImg = this.scene.add.image(0, 0, fill);

let nCol = Phaser.Display.Color.GetColor(normalCol.R, normalCol.G, normalCol.B);
nCol = Phaser.Display.Color.IntegerToRGB(nCol);
this.nCol = Phaser.Display.Color.GetColor(normalCol.R, normalCol.G, normalCol.B);
this.nCol = Phaser.Display.Color.IntegerToRGB(this.nCol);
let hCol = Phaser.Display.Color.GetColor(highlightedCol.R, highlightedCol.G, highlightedCol.B);
hCol = Phaser.Display.Color.IntegerToRGB(hCol);
let pCol = Phaser.Display.Color.GetColor(pressedCol.R, pressedCol.G, pressedCol.B);
pCol = Phaser.Display.Color.IntegerToRGB(pCol);

if (normalCol) {
this.fillImg.setTint(Phaser.Display.Color.GetColor(nCol.r, nCol.g, nCol.b));
}
this.fillImg.setTint(Phaser.Display.Color.GetColor(this.nCol.r, this.nCol.g, this.nCol.b));

this.hitArea = null;
if (hitArea) {
Expand All @@ -49,67 +47,58 @@ export default class Button extends Phaser.GameObjects.Container {

let tintFadeTime = 25;

if (highlightedCol) {
this.fillImg.on('pointerover', () => {
scene.tweens.addCounter({
targets: [this.fillImg],
from: 0,
to: 100,
onUpdate: (tween) => {
const value = tween.getValue();
let col = Phaser.Display.Color.Interpolate.ColorWithColor(nCol, hCol, 100, value);
let colInt = Phaser.Display.Color.GetColor(col.r, col.g, col.b);
this.fillImg.setTint(colInt);
},
duration: tintFadeTime,
repeat: 0,
});
this.fillImg.on('pointerover', () => {
scene.tweens.addCounter({
targets: [this.fillImg],
from: 0,
to: 100,
onUpdate: (tween) => {
const value = tween.getValue();
let col = Phaser.Display.Color.Interpolate.ColorWithColor(this.nCol, hCol, 100, value);
let colInt = Phaser.Display.Color.GetColor(col.r, col.g, col.b);
this.fillImg.setTint(colInt);
},
duration: tintFadeTime,
repeat: 0,
});
}
});

if (normalCol) {
this.fillImg.on('pointerout', () => {
scene.tweens.addCounter({
targets: [this.fillImg],
from: 0,
to: 100,
onUpdate: (tween) => {
const value = tween.getValue();
let col = Phaser.Display.Color.Interpolate.ColorWithColor(hCol, nCol, 100, value);
let colInt = Phaser.Display.Color.GetColor(col.r, col.g, col.b);
this.fillImg.setTint(colInt);
},
duration: tintFadeTime,
repeat: 0,
});
this.fillImg.on('pointerout', () => {
scene.tweens.addCounter({
targets: [this.fillImg],
from: 0,
to: 100,
onUpdate: (tween) => {
const value = tween.getValue();
let col = Phaser.Display.Color.Interpolate.ColorWithColor(hCol, this.nCol, 100, value);
let colInt = Phaser.Display.Color.GetColor(col.r, col.g, col.b);
this.fillImg.setTint(colInt);
},
duration: tintFadeTime,
repeat: 0,
});
}
});

this.fillImg.on('pointerdown', (pointer) => {
this.fillImg.disableInteractive();
if (pressedCol) {
let down = scene.tweens.addCounter({
targets: [this.fillImg],
from: 0,
to: 100,
onUpdate: (tween) => {
const value = tween.getValue();
let col = Phaser.Display.Color.Interpolate.ColorWithColor(hCol, pCol, 100, value);
let colInt = Phaser.Display.Color.GetColor(col.r, col.g, col.b);
this.fillImg.setTint(colInt);
},
duration: tintFadeTime,
repeat: 0,
yoyo: true,
});
down.on('complete', () => {
this.fillImg.setInteractive();
fn();
});
}
else {
let down = scene.tweens.addCounter({
targets: [this.fillImg],
from: 0,
to: 100,
onUpdate: (tween) => {
const value = tween.getValue();
let col = Phaser.Display.Color.Interpolate.ColorWithColor(hCol, pCol, 100, value);
let colInt = Phaser.Display.Color.GetColor(col.r, col.g, col.b);
this.fillImg.setTint(colInt);
},
duration: tintFadeTime,
repeat: 0,
yoyo: true,
});
down.on('complete', () => {
this.fillImg.setInteractive();
fn();
}
});
});

this.add(this.fillImg);
Expand Down Expand Up @@ -140,4 +129,8 @@ export default class Button extends Phaser.GameObjects.Container {
this.fillImg.setInteractive(hitArea.area, hitArea.callback);
//this.scene.input.enableDebug(this.fillImg, '0xffff00');
}

reset() {
this.fillImg.setTint(Phaser.Display.Color.GetColor(this.nCol.r, this.nCol.g, this.nCol.b));
}
}
129 changes: 129 additions & 0 deletions src/UI/computer/computerScene.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
import Button from '../button.js';
import GameManager from '../../managers/gameManager.js';
import LoginScreen from './loginScreen.js'
import SocialNetworkScreen from './socialNetworkScreen.js'

export default class ComputerScene extends Phaser.Scene {
/**
* Ordenador que se usa dentro del juego para consultar la red social
* Nota: esta escena existe durante todo el juego, aunque se va durmiendo y despertando
* en funcion de si se necesita usar o no
* @extends Phaser.Scene
*/
constructor() {
super({ key: 'ComputerScene' });
}

create() {
this.CANVAS_WIDTH = this.sys.game.canvas.width;
this.CANVAS_HEIGHT = this.sys.game.canvas.height;

this.gameManager = GameManager.getInstance();

// Mesa
let bg = this.add.image(this.CANVAS_WIDTH / 2, this.CANVAS_HEIGHT / 2, 'basePC');
let scale = this.CANVAS_WIDTH / bg.width;
bg.setScale(scale);

// Color base del fondo de pantalla del ordenador
this.add.rectangle(this.CANVAS_WIDTH / 2, 0, this.CANVAS_WIDTH, this.CANVAS_HEIGHT / 1.2, 0x000000).setOrigin(0.5, 0);

// Se crean en este punto para que las pantallas esten por encima del fondo del ordenador,
// pero por debajo del marco
this.socialNetScreen = new SocialNetworkScreen(this);
this.socialNetScreen.setVisible(false);
this.loginScreen = new LoginScreen(this);

// Boton de apagar de la esquina inferior izquierda
this.powerOffButton = new Button(this, 103.5, this.CANVAS_HEIGHT - 197, 0.31,
() => {
this.gameManager.leaveComputer();
},
'powerOff', { R: 255, G: 255, B: 255 }, { R: 200, G: 200, B: 200 }, { R: 150, G: 150, B: 150 }
);

// Boton de cerrar el ordenador de la esquina superior derecha
this.closeButton = new Button(this, this.CANVAS_WIDTH - 99, 54, 0.82,
() => {
this.gameManager.leaveComputer();
},
'closerBrowser', { R: 255, G: 255, B: 255 }, { R: 200, G: 200, B: 200 }, { R: 150, G: 150, B: 150 },
);
// El boton de cerrar esta formado por tres botones
// Se calcula el tam de uno (cruz) para que el area de colision sea el adecuado
let oneButtonWidth = this.closeButton.fillImg.displayWidth / 3;
this.closeButton.setHitArea({
area: new Phaser.Geom.Rectangle(2 * oneButtonWidth, 0, oneButtonWidth, this.closeButton.fillImg.displayHeight),
callback: Phaser.Geom.Rectangle.Contains
})

// Pantalla del ordenador con el tam del canvas
let screen = this.add.image(this.CANVAS_WIDTH / 2, this.CANVAS_HEIGHT / 2, 'PCscreen');
screen.setDisplaySize(this.CANVAS_WIDTH, this.CANVAS_HEIGHT);

// Posit con el usuario y contrasena del jugador
let postitCont = this.add.container(1.3 * this.CANVAS_WIDTH / 4, this.CANVAS_HEIGHT - 100);
let postitBg = this.add.image(0, 0, 'postit');
postitCont.add(postitBg);

let userInfo = this.gameManager.getUserInfo();

let postitTextInfoStyle = { ...this.gameManager.textConfig };
postitTextInfoStyle.fontFamily = 'dadha';
postitTextInfoStyle.fontSize = '60px';
postitTextInfoStyle.color = '#323232';

let postitTextStyle = postitTextInfoStyle;
postitTextStyle.fontSize = '52px';

let postitTextsPos = {
x: 180,
offsetX: 15,
firstTextY: -65,
secondTextY: 95,
offsetY: 75
}
let yourUserText = this.add.text(-postitTextsPos.x, postitTextsPos.firstTextY, "Tu usuario", postitTextInfoStyle);
yourUserText.setOrigin(0, 0.5);
postitCont.add(yourUserText);

let userText = this.add.text(postitTextsPos.x + postitTextsPos.offsetX,
postitTextsPos.firstTextY + postitTextsPos.offsetY, userInfo.username, postitTextStyle);
userText.setOrigin(1, 0.5);
postitCont.add(userText);

let yourPasswordText = this.add.text(-postitTextsPos.x,
postitTextsPos.secondTextY, "Tu contraseña", postitTextInfoStyle);
yourPasswordText.setOrigin(0, 0.5);
postitCont.add(yourPasswordText);

let passwordText = this.add.text(postitTextsPos.x + postitTextsPos.offsetX,
postitTextsPos.secondTextY + postitTextsPos.offsetY, userInfo.password, postitTextStyle);
passwordText.setOrigin(1, 0.5);
postitCont.add(passwordText);

postitCont.setScale(0.37);
}

/**
* Iniciar el ordenador
* Nota: se llama justo antes de realizar el cambio a esta escena
*/
start() {
// Se resetean los colores de los botones al por defecto porque si se sale del ordenador
// y luego se vuelve entrar, como los tweens de cambio de color al pasar el raton por encima
// estaban activados, se sigue manteniendo ese color
this.powerOffButton.reset();
this.closeButton.reset();
// Se inicia la pantalla de login
this.socialNetScreen.setVisible(false);
this.loginScreen.start();
//this.loginScreen.setVisible(false);
//this.socialNetScreen.start();
}

logIntoSocialNet() {
this.loginScreen.setVisible(false);
this.socialNetScreen.start();
}
}
22 changes: 0 additions & 22 deletions src/UI/computer/feedScreen.js

This file was deleted.

Loading

0 comments on commit 33dc50b

Please sign in to comment.