+
+ );
+}
+
+export default ArenaPoints;
diff --git a/staff/joel-suarez/project/app/src/components/Confirm.jsx b/staff/joel-suarez/project/app/src/components/Confirm.jsx
new file mode 100644
index 000000000..b5a75273e
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/components/Confirm.jsx
@@ -0,0 +1,13 @@
+function Confirm({ message, onAcceptClick, onCancelClick}) {
+ return
+
+
+
+ 💎 Buy Arena Points 💎
+ +
+ {error &&
+
+
+
+ {error}
}
+ {success && {success}
}
+ | * | +Quantity | +Price | +Action | +
|---|---|---|---|
| 💎 | +{option.quantity} | +{option.price}€ | ++ + | +
+
+}
+
+export default Confirm
\ No newline at end of file
diff --git a/staff/joel-suarez/project/app/src/components/ConfirmDialog.jsx b/staff/joel-suarez/project/app/src/components/ConfirmDialog.jsx
new file mode 100644
index 000000000..452dfcf4f
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/components/ConfirmDialog.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+function ConfirmDialog({ show, character, onConfirm, onCancel }) {
+ if (!show) {
+ return null;
+ }
+
+ return (
+
+
+ {message}
+
+ Cancel
+ Accept
+
+
+
+ );
+}
+
+export default ConfirmDialog;
diff --git a/staff/joel-suarez/project/app/src/components/CreateCharacterForm.jsx b/staff/joel-suarez/project/app/src/components/CreateCharacterForm.jsx
new file mode 100644
index 000000000..eb513ab20
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/components/CreateCharacterForm.jsx
@@ -0,0 +1,73 @@
+import React, { useContext } from "react";
+import { logger } from '../utils';
+import logic from '../logic';
+import { useContext as useUserContext } from '../context';
+
+
+function CreateCharacterForm({ onClose, showModal, onCharacterCreated }) {
+ const { showFeedback } = useUserContext();
+
+ function parseJwt(token) {
+ const base64Url = token.split('.')[1];
+ const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+ const jsonPayload = decodeURIComponent(atob(base64).split('').map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''));
+
+ return JSON.parse(jsonPayload);
+ }
+
+ const handleSubmit = (event) => {
+ event.preventDefault();
+
+ const form = event.target;
+ const name = form.name.value;
+ const clase = form.sel1.value;
+ const win_streak = 0;
+ const max_win_streak = 0;
+ const userId = parseJwt(sessionStorage.token).sub;
+
+ try {
+ logic.createCharacter(name, clase, win_streak, max_win_streak, userId)
+ .then(() => {
+ form.reset();
+ onCharacterCreated();
+ })
+ .catch(error => showFeedback(error, 'error'));
+ } catch (error) {
+ showFeedback(error);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ Confirm Deletion
+ +
+
+ Are you sure you want to delete {character.name}?
+
+
+
+
+
+
+ );
+}
+
+export default CreateCharacterForm;
diff --git a/staff/joel-suarez/project/app/src/components/Feedback.jsx b/staff/joel-suarez/project/app/src/components/Feedback.jsx
new file mode 100644
index 000000000..4a4f475bf
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/components/Feedback.jsx
@@ -0,0 +1,12 @@
+import { logger } from '../utils'
+
+function Feedback({ message, level, onAcceptClick}) {
+ logger[level](message)
+
+ return
+
+
+
+
+
+ 🧑 Create Character
+ +
+
+
+
+
+}
+
+export default Feedback
\ No newline at end of file
diff --git a/staff/joel-suarez/project/app/src/components/Footer.jsx b/staff/joel-suarez/project/app/src/components/Footer.jsx
new file mode 100644
index 000000000..725b38454
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/components/Footer.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+function Footer() {
+ return (
+
+ );
+}
+
+export default Footer;
diff --git a/staff/joel-suarez/project/app/src/components/Game/Box.js b/staff/joel-suarez/project/app/src/components/Game/Box.js
new file mode 100644
index 000000000..562d881ec
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/components/Game/Box.js
@@ -0,0 +1,39 @@
+import Sprite from './Sprite.js';
+
+class Box extends Sprite {
+ constructor({ position, color, name, width, height, health, context }) {
+ super({ position, imageSrc: undefined, context });
+ this.name = name;
+ this.color = color;
+ this.width = width;
+ this.height = height;
+ this.health = health;
+ this.velocity = {
+ x: 0,
+ y: 0
+ };
+ this.keys = {
+ a: { pressed: false },
+ d: { pressed: false }
+ };
+ this.speed = 5;
+ this.context = context;
+ }
+
+ draw() {
+ this.context.fillStyle = this.color;
+ this.context.fillRect(this.position.x, this.position.y, this.width, this.height);
+ }
+
+ move() {
+ if (this.keys.a.pressed) this.position.x -= this.speed;
+ if (this.keys.d.pressed) this.position.x += this.speed;
+ }
+
+ update() {
+ this.move();
+ this.draw();
+ }
+}
+
+export default Box;
\ No newline at end of file
diff --git a/staff/joel-suarez/project/app/src/components/Game/Fighter.js b/staff/joel-suarez/project/app/src/components/Game/Fighter.js
new file mode 100644
index 000000000..9743fb5dd
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/components/Game/Fighter.js
@@ -0,0 +1,181 @@
+import Sprite from './Sprite.js';
+
+const gravity = 1;
+
+class Fighter extends Sprite {
+ constructor({ name, position, offset, imageSrc, scale, maxFrames, holdFrames, offsetFrame = { x: 0, y: 0 }, sprites, keys, attackTime }) {
+ super({ position, imageSrc, scale, maxFrames, holdFrames, offsetFrame });
+ this.name = name;
+ this.height = 150;
+ this.width = 50;
+ this.velocity = { x: 0, y: 0 };
+ this.moveFactor = 6;
+ this.lastKey;
+ this.inTheAir = false;
+ this.isAttacking = false;
+ this.health = 100;
+ this.attackBox = {
+ position: {
+ x: this.position.x,
+ y: this.position.y
+ },
+ offSet: offset,
+ width: 150,
+ height: 150
+ };
+ this.sprites = sprites;
+ for (const sprite in this.sprites) {
+ this.sprites[sprite].image = new Image();
+ this.sprites[sprite].image.src = this.sprites[sprite].imageSrc;
+ }
+ this.keys = keys;
+ this.attackTime = attackTime;
+ this.attackCooldown = true;
+ this.isTakingHit = false;
+ this.state = 'idle';
+ this.isDead = false;
+ }
+
+ update(context) {
+ super.update(context);
+ this.attackBox.position.x = this.position.x + this.attackBox.offSet.x;
+ this.attackBox.position.y = this.position.y;
+
+ if (this.inTheAir) {
+ this.velocity.x = 0;
+ }
+
+ this.position.y += this.velocity.y;
+ this.position.x += this.velocity.x;
+
+ if (this.position.y + this.height + this.velocity.y >= window.innerHeight - 50) {
+ this.velocity.y = 0;
+ this.inTheAir = false;
+ this.position.y = window.innerHeight - this.height - 50;
+ if (!this.isAttacking && !this.isTakingHit) {
+ this.switchSprite('idle');
+ }
+ } else {
+ this.velocity.y += gravity;
+ if (this.velocity.y > 0) {
+ this.switchSprite('fall');
+ } else {
+ this.inTheAir = true;
+ this.switchSprite('jump');
+ }
+ }
+ }
+
+ switchSprite(sprite) {
+ if (this.image === this.sprites[sprite].image) return;
+ this.image = this.sprites[sprite].image;
+ this.maxFrames = this.sprites[sprite].maxFrames;
+ this.currentFrame = 0;
+ this.elapsedFrames = 0;
+ //console.log(`Switching to ${sprite} sprite`);
+ }
+
+ handleAction(action) {
+ if (this.isAttacking && action !== 'attack') return;
+ if (this.isDead && action !== 'die') return;
+
+ switch (action) {
+ case 'move':
+ if (!this.inTheAir) {
+ this.switchSprite('run');
+ }
+ break;
+ case 'jump':
+ if (!this.inTheAir) {
+ this.velocity.y = -20;
+ this.inTheAir = true;
+ this.switchSprite('jump');
+ }
+ break;
+ case 'attack':
+ if (this.attackCooldown) {
+ this.switchSprite('attack1');
+ this.isAttacking = true;
+ this.attackCooldown = false;
+ setTimeout(() => {
+ this.isAttacking = false;
+ this.attackCooldown = true;
+ if (!this.isDead) {
+ if (this.inTheAir) {
+ this.switchSprite('jump');
+ } else {
+ this.switchSprite('idle');
+ }
+ }
+ }, this.attackTime);
+ }
+ break;
+ case 'hit':
+ if (!this.isDead) {
+ this.switchSprite('takeHit');
+ this.isTakingHit = true;
+ setTimeout(() => {
+ this.isTakingHit = false;
+ if (!this.isDead) {
+ if (this.inTheAir) {
+ this.switchSprite('jump');
+ } else {
+ this.switchSprite('idle');
+ }
+ }
+ }, 300);
+ }
+ break;
+ case 'die':
+ this.isDead = true;
+ this.switchSprite('death');
+ break;
+ case 'idle':
+ if (!this.isDead && !this.inTheAir) {
+ this.switchSprite('idle');
+ }
+ break;
+ }
+ }
+
+ update(context) {
+ super.update(context);
+ this.attackBox.position.x = this.position.x + this.attackBox.offSet.x;
+ this.attackBox.position.y = this.position.y;
+
+ this.position.y += this.velocity.y;
+ this.position.x += this.velocity.x;
+
+ if (this.position.y + this.height + this.velocity.y >= window.innerHeight - 50) {
+ this.velocity.y = 0;
+ this.inTheAir = false;
+ this.position.y = window.innerHeight - this.height - 50;
+ if (!this.isAttacking && !this.isTakingHit) {
+ this.switchSprite('idle');
+ }
+ } else {
+ this.velocity.y += gravity;
+ if (this.velocity.y > 0) {
+ if (!this.isAttacking && !this.isTakingHit) {
+ this.switchSprite('fall');
+ }
+ } else {
+ this.inTheAir = true;
+ if (!this.isAttacking && !this.isTakingHit) {
+ this.switchSprite('jump');
+ }
+ }
+ }
+ }
+
+ isHitting(enemyFighter) {
+ return (
+ this.attackBox.position.x + this.attackBox.width >= enemyFighter.position.x &&
+ this.attackBox.position.x <= enemyFighter.position.x + enemyFighter.width &&
+ this.attackBox.position.y + this.attackBox.height >= enemyFighter.position.y &&
+ this.attackBox.position.y <= enemyFighter.position.y + enemyFighter.height
+ );
+ }
+}
+
+export default Fighter;
\ No newline at end of file
diff --git a/staff/joel-suarez/project/app/src/components/Game/Game.jsx b/staff/joel-suarez/project/app/src/components/Game/Game.jsx
new file mode 100644
index 000000000..ab9203806
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/components/Game/Game.jsx
@@ -0,0 +1,455 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useLayout } from '../../LayoutContext';
+import styles from './Game.module.css';
+import { useNavigate } from 'react-router-dom';
+import Fighter from './Fighter';
+import logic from '../../logic';
+
+function Game({ socket, roomId, characterIds, characters, players, playerNames, skins }) {
+ const characterName = characters.map(char => char.name).join(', ');
+ const currentPlayerId = characterIds.values().next().value;
+
+ const skinHost = skins.host;
+ const skinGuest = skins.guest;
+ const nameHost = playerNames.host;
+ const nameGuest = playerNames.guest;
+
+ const idHost = players[0].toString();
+ const idGuest = players[1].toString();
+ const [posXHost, setPosXHost] = useState(80);
+ const [posXGuest, setPosXGuest] = useState(800);
+ const [timer, setTimer] = useState(60);
+ const [hostHealth, setHostHealth] = useState(100);
+ const [guestHealth, setGuestHealth] = useState(100);
+
+ const [currentHostHealth, setCurrentHostHealth] = useState(100);
+ const [currentGuestHealth, setCurrentGuestHealth] = useState(100);
+
+ const { setShowLayout } = useLayout();
+ const navigate = useNavigate();
+
+ const posXHostRef = useRef(posXHost);
+ const posXGuestRef = useRef(posXGuest);
+
+ const hostRef = useRef(null);
+ const guestRef = useRef(null);
+
+ const keysPressed = useRef({});
+
+ useEffect(() => {
+ setShowLayout(false);
+ socket.emit('startGame', { roomId });
+
+ const handleKeyDown = (event) => {
+ keysPressed.current[event.key] = true;
+ let newPosition;
+ const isHost = currentPlayerId === idHost;
+ const playerRef = isHost ? hostRef : guestRef;
+ const setPosX = isHost ? setPosXHost : setPosXGuest;
+ const posXRef = isHost ? posXHostRef : posXGuestRef;
+ const targetId = isHost ? idGuest : idHost;
+ const targetRef = isHost ? guestRef : hostRef;
+
+ if (event.key === 'a') {
+ newPosition = Math.max(0, posXRef.current - 10);
+ setPosX(newPosition);
+ if (playerRef.current) {
+ playerRef.current.handleAction('move');
+ }
+ socket.emit('moveBox', { playerId: currentPlayerId, direction: 'left', positionX: newPosition });
+ } else if (event.key === 'd') {
+ newPosition = posXRef.current + 10;
+ setPosX(newPosition);
+ if (playerRef.current) {
+ playerRef.current.handleAction('move');
+ }
+ socket.emit('moveBox', { playerId: currentPlayerId, direction: 'right', positionX: newPosition });
+ } else if (event.key === 'w') {
+ if (playerRef.current) {
+ playerRef.current.handleAction('jump');
+ socket.emit('sendJump', { targetId });
+ }
+ } else if (event.key === ' ' || event.key === 'SPACE') {
+ if (playerRef.current) {
+ playerRef.current.handleAction('attack');
+ }
+ socket.emit('sendAttack', { playerId: currentPlayerId });
+ if (playerRef.current && targetRef.current && playerRef.current.isHitting(targetRef.current)) {
+ socket.emit('attack', { playerId: currentPlayerId, roomId, targetId });
+ socket.emit('sendHit', { playerId: currentPlayerId });
+ if (targetRef.current) {
+ targetRef.current.handleAction('hit');
+ }
+ }
+ }
+ };
+
+ const handleKeyUp = (event) => {
+ keysPressed.current[event.key] = false;
+ const playerRef = currentPlayerId === idHost ? hostRef : guestRef;
+ if (event.key === 'a' || event.key === 'd') {
+ if (playerRef.current) {
+ playerRef.current.stopMoving();
+ }
+ }
+ if (playerRef.current && !keysPressed.current['a'] && !keysPressed.current['d']) {
+ playerRef.current.handleAction('idle');
+ }
+ };
+
+ window.addEventListener('keydown', handleKeyDown);
+ window.addEventListener('keyup', handleKeyUp);
+
+ socket.on('boxMoved', data => {
+ const { playerId, positionX } = data;
+ if (playerId === idHost) {
+ setPosXHost(positionX);
+ if (hostRef.current) {
+ hostRef.current.handleAction('move');
+ }
+ } else if (playerId === idGuest) {
+ setPosXGuest(positionX);
+ if (guestRef.current) {
+ guestRef.current.handleAction('move');
+ }
+ }
+ });
+
+ socket.on('timer', data => {
+ const { timeLeft } = data;
+ setTimer(timeLeft);
+ });
+
+ socket.on('timeUp', data => {
+ const { message } = data;
+ alert(message);
+ window.location.href = 'http://localhost:5173/';
+ setTimer(0);
+ });
+
+ socket.on('playerAttacked', data => {
+ const { playerId, health } = data;
+ if (playerId === idHost) {
+ setCurrentHostHealth(health);
+ setHostHealth(health * 4);
+ if (hostRef.current) {
+ hostRef.current.handleAction('hit');
+ }
+ setTimeout(() => {
+ if (hostRef.current) {
+ hostRef.current.handleAction('idle');
+ }
+ }, hostRef.current?.sprites?.takeHit?.maxFrames * hostRef.current?.holdFrames * 1000 / 60);
+ } else if (playerId === idGuest) {
+ setCurrentGuestHealth(health);
+ setGuestHealth(health * 4);
+ if (guestRef.current) {
+ guestRef.current.handleAction('hit');
+ }
+ setTimeout(() => {
+ if (guestRef.current) {
+ guestRef.current.handleAction('idle');
+ }
+ }, guestRef.current?.sprites?.takeHit?.maxFrames * guestRef.current?.holdFrames * 1000 / 60);
+ }
+ });
+
+ socket.on('lifeBar', data => {
+ const { playerId, idHost, hostHealth, idGuest, guestHealth } = data;
+ if (currentPlayerId === idHost) {
+ setCurrentGuestHealth(guestHealth);
+ setGuestHealth(guestHealth * 4);
+ } else if (currentPlayerId === idGuest) {
+ setCurrentHostHealth(hostHealth);
+ setHostHealth(hostHealth * 4);
+ }
+ });
+
+ socket.on('jump', data => {
+ const { targetId } = data;
+ if (targetId === idHost) {
+ guestRef.current.handleAction('jump');
+ }
+ if (targetId === idGuest) {
+ hostRef.current.handleAction('jump');
+ }
+ });
+
+ socket.on('playerAttack', data => {
+ const { playerId } = data;
+ if (playerId === idHost) {
+ if (hostRef.current) {
+ hostRef.current.handleAction('attack');
+ }
+ } else if (playerId === idGuest) {
+ if (guestRef.current) {
+ guestRef.current.handleAction('attack');
+ }
+ }
+ });
+
+ socket.on('playerHit', data => {
+ const { playerId } = data;
+ if (playerId === idHost) {
+ if (guestRef.current) {
+ guestRef.current.handleAction('hit');
+ }
+ } else if (playerId === idGuest) {
+ if (hostRef.current) {
+ hostRef.current.handleAction('hit');
+ }
+ }
+ });
+
+ socket.on('playerDied', data => {
+ const { playerId, targetId } = data;
+ if (playerId === idHost && targetId === idGuest) { // gana el host
+ guestRef.current.handleAction('die');
+ guestRef.current = null;
+ socket.emit('winner', { playerId: idHost, targetId: idGuest });
+ setTimeout(() => {
+ window.location.href = 'http://localhost:5173/';
+ }, 5000);
+ } else if (playerId === idGuest && targetId === idHost) { // gana el guest
+ hostRef.current.handleAction('die');
+ hostRef.current = null;
+ socket.emit('winner', { playerId: idGuest, targetId: idHost });
+ setTimeout(() => {
+ window.location.href = 'http://localhost:5173/';
+ }, 5000);
+ }
+ });
+
+ socket.on('congratsWinner', async data => {
+ const { targetId } = data;
+ try {
+ if (currentPlayerId === idHost && targetId === idGuest) {
+ alert('Enhorabuena has ganado, sumas 1 victoria y 10 puntos de honor');
+ await logic.updateWins(idHost, idGuest);
+ } else if (currentPlayerId === idGuest && targetId === idHost) {
+ alert('Enhorabuena has ganado, sumas 1 victoria y 10 puntos de honor');
+ await logic.updateWins(idGuest, idHost);
+ }
+ } catch (error) {
+ console.error('Error updating win streak:', error);
+ }
+ });
+
+ socket.on('opponentDisconnected', data => {
+ const { playerId } = data;
+ if (currentPlayerId === idHost && playerId === idGuest) {
+ alert('Tu oponente se ha desconectado, sumas 1 victoria y 10 puntos de honor');
+ guestRef.current = null;
+ setTimeout(() => {
+ logic.updateWins(idHost, idGuest);
+ window.location.href = 'http://localhost:5173/';
+ }, 5000);
+ } else if (currentPlayerId === idGuest && playerId === idHost) {
+ alert('Tu oponente se ha desconectado, sumas 1 victoria y 10 puntos de honor');
+ hostRef.current = null;
+ setTimeout(() => {
+ logic.updateWins(idGuest, idHost);
+ window.location.href = 'http://localhost:5173/';
+ }, 5000);
+ }
+ });
+
+ return () => {
+ setShowLayout(true);
+ window.removeEventListener('keydown', handleKeyDown);
+ window.removeEventListener('keyup', handleKeyUp);
+ socket.off('boxMoved');
+ socket.off('timer');
+ socket.off('timeUp');
+ socket.off('playerAttacked');
+ socket.off('lifeBar');
+ socket.off('playerDied');
+ socket.off('playerAttack');
+ socket.off('playerHit');
+ socket.off('congratsWinner');
+ socket.off('opponentDisconnected');
+ };
+ }, [socket, roomId, idHost, idGuest, setShowLayout, characterIds, navigate, currentPlayerId]);
+
+ useEffect(() => {
+ posXHostRef.current = posXHost;
+ }, [posXHost]);
+
+ useEffect(() => {
+ posXGuestRef.current = posXGuest;
+ }, [posXGuest]);
+
+ useEffect(() => {
+ const canvas = document.getElementById('gameCanvas');
+ const c = canvas.getContext('2d');
+
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+
+ const background = new Image();
+ background.src = new URL('/assets/img/background.jpeg', import.meta.url).href;
+
+ const host = new Fighter({
+ name: "host",
+ position: {
+ x: 0,
+ y: window.innerHeight - 200
+ },
+ offset: {
+ x: 75,
+ y: 0
+ },
+ imageSrc: `/assets/img/host/${skinHost}/Idle.png`,
+ scale: 2.5,
+ maxFrames: 8,
+ holdFrames: 4,
+ offsetFrame: { x: 215, y: 154 },
+ sprites: {
+ idle: {
+ imageSrc: `/assets/img/host/${skinHost}/Idle.png`,
+ maxFrames: 8,
+ },
+ run: {
+ imageSrc: `/assets/img/host/${skinHost}/Run.png`,
+ maxFrames: 8,
+ },
+ jump: {
+ imageSrc: `/assets/img/host/${skinHost}/Jump.png`,
+ maxFrames: 2,
+ },
+ fall: {
+ imageSrc: `/assets/img/host/${skinHost}/Fall.png`,
+ maxFrames: 2,
+ },
+ death: {
+ imageSrc: `/assets/img/host/${skinHost}/Death.png`,
+ maxFrames: 6,
+ },
+ attack1: {
+ imageSrc: `/assets/img/host/${skinHost}/Attack1.png`,
+ maxFrames: 6,
+ },
+ takeHit: {
+ imageSrc: `/assets/img/host/${skinHost}/Takehit.png`,
+ maxFrames: 4,
+ }
+ },
+ keys: {
+ 'a': {
+ pressed: false
+ },
+ 'd': {
+ pressed: false
+ },
+ 'w': {
+ pressed: false
+ },
+ ' ': {
+ pressed: false
+ }
+ },
+ attackTime: 400
+ });
+
+ const guest = new Fighter({
+ name: "guest",
+ position: {
+ x: 950,
+ y: window.innerHeight - 200
+ },
+ offset: {
+ x: -160,
+ y: 0
+ },
+ imageSrc: `/assets/img/guest/${skinGuest}/Idle.png`,
+ scale: 2.5,
+ maxFrames: 4,
+ holdFrames: 6,
+ offsetFrame: { x: 215, y: 172 },
+ sprites: {
+ idle: {
+ imageSrc: `/assets/img/guest/${skinGuest}/Idle.png`,
+ maxFrames: 4,
+ },
+ run: {
+ imageSrc: `/assets/img/guest/${skinGuest}/Run.png`,
+ maxFrames: 8,
+ },
+ jump: {
+ imageSrc: `/assets/img/guest/${skinGuest}/Jump.png`,
+ maxFrames: 2,
+ },
+ fall: {
+ imageSrc: `/assets/img/guest/${skinGuest}/Fall.png`,
+ maxFrames: 2,
+ },
+ death: {
+ imageSrc: `/assets/img/guest/${skinGuest}/Death.png`,
+ maxFrames: 7,
+ },
+ attack1: {
+ imageSrc: `/assets/img/guest/${skinGuest}/Attack1.png`,
+ maxFrames: 4,
+ },
+ takeHit: {
+ imageSrc: `/assets/img/guest/${skinGuest}/Takehit.png`,
+ maxFrames: 3,
+ }
+ },
+ keys: {
+ 'ArrowLeft': {
+ pressed: false
+ },
+ 'ArrowRight': {
+ pressed: false
+ },
+ 'ArrowUp': {
+ pressed: false
+ },
+ 'Control': {
+ pressed: false
+ }
+ },
+ attackTime: 350
+ });
+
+ hostRef.current = host;
+ guestRef.current = guest;
+
+ function animate() {
+ c.clearRect(0, 0, canvas.width, canvas.height);
+ if (background.complete) {
+ c.drawImage(background, 0, 0, canvas.width, canvas.height);
+ }
+ if (hostRef.current) host.position.x = posXHost;
+ if (guestRef.current) guest.position.x = posXGuest;
+ if (hostRef.current) host.update(c);
+ if (guestRef.current) guest.update(c);
+ requestAnimationFrame(animate); // TODO: changes this to make sure you can play ok with every frame rate
+ }
+ background.onload = () => {
+ animate();
+ };
+ }, [posXHost, posXGuest]);
+
+ document.title = `${roomId} -- ${timer}`;
+
+ return (
+ {message}
+ +
+
+ );
+}
+
+export default Game;
diff --git a/staff/joel-suarez/project/app/src/components/Game/Game.module.css b/staff/joel-suarez/project/app/src/components/Game/Game.module.css
new file mode 100644
index 000000000..22d585dd0
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/components/Game/Game.module.css
@@ -0,0 +1,116 @@
+html, body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+.container {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ width: 100%;
+}
+
+.hud {
+ position: absolute;
+ color: white;
+ width: 100%;
+ top: 10px; /* Ajusta la distancia desde la parte superior */
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+ padding: 0 20px;
+ box-sizing: border-box;
+}
+
+.healthSection {
+ width: 45%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.playerInfo {
+ margin-top: 5px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.healthLayout {
+ position: relative;
+ height: 30px;
+ width: 100%;
+}
+
+.remainingHealthbar {
+ background-color: #EF4444;
+ height: 30px;
+ width: 100%;
+}
+
+.totalHealthBar {
+ position: absolute;
+ background-color: #009e00;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+}
+
+.timer {
+ background-color: wheat;
+ font-family: 'silver';
+ font-size: 2vw; /* Cambiado a unidades relativas */
+ height: 50px;
+ width: 75px;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+
+.result {
+ position: absolute;
+ font-family: 'silver';
+ font-size: 100px;
+ display: none;
+ align-items: center;
+ justify-content: center;
+ color: wheat;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
+}
+
+.game {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ justify-content: center;
+}
+
+#gameWindow {
+ border: 2px solid black;
+}
+
+.animate-charcter {
+ text-transform: uppercase;
+ background-image: linear-gradient(-225deg,
+ #231557 0%,
+ #44107a 29%,
+ #A8EEE3 67%,
+ #9eade9 100%);
+ background-size: auto auto;
+ background-clip: border-box;
+ background-size: 200% auto;
+ color: #fff;
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ animation: textclip 2s linear infinite;
+ display: inline-block;
+ font-size: 190px;
+}
diff --git a/staff/joel-suarez/project/app/src/components/Game/Keys.js b/staff/joel-suarez/project/app/src/components/Game/Keys.js
new file mode 100644
index 000000000..83fe372e7
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/components/Game/Keys.js
@@ -0,0 +1,21 @@
+export const keys = {
+ a: { pressed: false },
+ d: { pressed: false },
+ ' ': { pressed: false }
+};
+
+export function setupKeyboardControls(player) {
+ window.addEventListener('keydown', (event) => {
+ if (event.key in keys) {
+ keys[event.key].pressed = true;
+ }
+ });
+
+ window.addEventListener('keyup', (event) => {
+ if (event.key in keys) {
+ keys[event.key].pressed = false;
+ }
+ });
+}
+
+export default keys;
diff --git a/staff/joel-suarez/project/app/src/components/Game/Sprite.js b/staff/joel-suarez/project/app/src/components/Game/Sprite.js
new file mode 100644
index 000000000..e4751e573
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/components/Game/Sprite.js
@@ -0,0 +1,48 @@
+import Fighter from './Fighter.js'
+
+class Sprite {
+ constructor({ position, imageSrc, scale = 1, maxFrames = 1, holdFrames = 30, offsetFrame = { x: 0, y: 0 } }) {
+ this.position = position;
+ this.height = 150;
+ this.width = 50;
+ this.image = new Image();
+ this.image.src = imageSrc;
+ this.scale = scale;
+ this.maxFrames = maxFrames;
+ this.currentFrame = 0;
+ this.elapsedFrames = 0;
+ this.holdFrames = holdFrames;
+ this.offsetFrame = offsetFrame;
+ }
+ draw() {
+ const canvas = document.querySelector('canvas');
+ const c = canvas.getContext('2d');
+ c.drawImage(this.image, this.currentFrame * (this.image.width / this.maxFrames), 0, this.image.width / this.maxFrames,
+ this.image.height, this.position.x - this.offsetFrame.x, this.position.y - this.offsetFrame.y,
+ (this.image.width / this.maxFrames) * this.scale, this.image.height * this.scale);
+ }
+
+ animateFrames() {
+ this.elapsedFrames++;
+ if (this.elapsedFrames % this.holdFrames === 0) {
+ if (this.currentFrame < this.maxFrames - 1) {
+ this.currentFrame++;
+ } else {
+ if (this instanceof Fighter) {
+ if (this.health > 0) {
+ this.currentFrame = 0;
+ }
+ } else {
+ this.currentFrame = 0;
+ }
+ }
+ }
+ }
+
+ update() {
+ this.draw();
+ this.animateFrames();
+ }
+}
+
+export default Sprite;
\ No newline at end of file
diff --git a/staff/joel-suarez/project/app/src/components/Information.jsx b/staff/joel-suarez/project/app/src/components/Information.jsx
new file mode 100644
index 000000000..fbc454508
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/components/Information.jsx
@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import logic from '../logic';
+
+function Information({ show, onClose }) {
+ if (!show) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+
+ {nameHost}
+ {timer}
+
+
+
+ {nameGuest}
+
+
+ );
+}
+
+export default Information;
diff --git a/staff/joel-suarez/project/app/src/components/InventoryModal.jsx b/staff/joel-suarez/project/app/src/components/InventoryModal.jsx
new file mode 100644
index 000000000..028cceb66
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/components/InventoryModal.jsx
@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react';
+import logic from '../logic';
+
+function InventoryModal({ show, onClose }) {
+ const [inventoryItems, setInventoryItems] = useState([]);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ if (show) {
+ const token = sessionStorage.getItem('token');
+ if (token) {
+ const userId = logic.decryptToken(token).sub;
+ logic.retrieveUser(userId)
+ .then((user) => {
+ setInventoryItems(user.inventory);
+ setError(null);
+ })
+ .catch((error) => {
+ console.error('Error retrieving inventory items:', error);
+ setError('Failed to retrieve inventory items');
+ });
+ }
+ }
+ }, [show]);
+
+ if (!show) {
+ return null;
+ }
+
+ return (
+
+
+
+
+ ❓ Ranks Info
+ +
+
+
+
+
+ -
+
- If you win you will add 30 points to your character +
- If you lose 18 points will be removed from your character + ❗ Can't have less than 0 elo points +
| Rank | +Requirements | +
|---|---|
 |
+ 0 | +
 |
+ 1 - 500 | +
 |
+ 501 - 799 | +
 |
+ 800 - 999 | +
 |
+ 1000 - 1499 | +
 |
+ 1500 - 1999 | +
 |
+ 2000 - 2499 | +
 |
+ 2500 - 2999 | +
 |
+ 3000 - 3499 | +
 |
+ +3500 | +
+
+ );
+}
+
+export default InventoryModal;
diff --git a/staff/joel-suarez/project/app/src/components/Navbar.css b/staff/joel-suarez/project/app/src/components/Navbar.css
new file mode 100644
index 000000000..4624a4a6d
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/components/Navbar.css
@@ -0,0 +1,18 @@
+.navbar-nav.ms-auto.user-buttons {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.navbar-nav .btn {
+ margin-left: 10px;
+}
+
+.user-points .btn {
+ margin-right: 10px; /* Añadir margen a la derecha */
+}
+
+.navbar-nav .title-aoh {
+ margin-right: auto;
+ margin-left: auto;
+}
diff --git a/staff/joel-suarez/project/app/src/components/Navbar.jsx b/staff/joel-suarez/project/app/src/components/Navbar.jsx
new file mode 100644
index 000000000..5f1a6bfde
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/components/Navbar.jsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import logic from '../logic';
+import { logger } from '../utils';
+import Ranking from '../components/Ranking';
+import ShopModal from '../components/ShopModal';
+import InventoryModal from '../components/InventoryModal';
+import './Navbar.css';
+import ArenaPoints from '../components/ArenaPoints';
+import Information from '../components/Information';
+
+function Navbar({ onUserLoggedOut }) {
+ const [user, setUser] = useState(null);
+ const [showRanking, setShowRanking] = useState(false);
+ const [showShop, setShowShop] = useState(false);
+ const [showInventory, setShowInventory] = useState(false);
+ const [showArenaPointsShop ,setShowArenaPointsShop] = useState(false);
+ const [showInfo, setShowInfo] = useState(false);
+
+ let token = sessionStorage.getItem('token');
+
+ const handleLogoutClick = () => {
+ try {
+ logic.logoutUser();
+ } catch (error) {
+ logic.cleanUpLoggedInUserId();
+ } finally {
+ onUserLoggedOut();
+ }
+ };
+
+ const handleBuyArenaPoints = () => {
+ setShowArenaPointsShop(true);
+ }
+
+ const handleCloseBuyArenaPoints = () => {
+ setShowArenaPointsShop(false);
+ }
+
+ const handleOpenRanking = () => {
+ setShowRanking(true);
+ };
+
+ const handleCloseRanking = () => {
+ setShowRanking(false);
+ };
+
+ const handleOpenShop = () => {
+ setShowShop(true);
+ };
+
+ const handleCloseShop = () => {
+ setShowShop(false);
+ };
+
+ const handleOpenInventory = () => {
+ setShowInventory(true);
+ };
+
+ const handleCloseInventory = () => {
+ setShowInventory(false);
+ };
+
+ const handleOpenInfo = () => {
+ setShowInfo(true);
+ }
+
+ const handleCloseInfo = () => {
+ setShowInfo(false);
+ }
+
+ const updateUser = () => {
+ if (token) {
+ logic.retrieveUser(token)
+ .then(usuario => {
+ setUser(usuario);
+ })
+ .catch(error => {
+ logger.error('Error al recuperar usuario:', error);
+ });
+ }
+ };
+
+ useEffect(() => {
+ updateUser();
+ }, [token]);
+
+ return (
+ <>
+
+
+
+
+
+ 🎒 Inventory
+ +
+ {error &&
+
+
+
+ {error}
}
+ | Name | +Quantity | +
|---|---|
| {item.name} | +{item.quantity} | +
hello {name}
+} + +export default Profile \ No newline at end of file diff --git a/staff/joel-suarez/project/app/src/components/Ranking.css b/staff/joel-suarez/project/app/src/components/Ranking.css new file mode 100644 index 000000000..269c32a26 --- /dev/null +++ b/staff/joel-suarez/project/app/src/components/Ranking.css @@ -0,0 +1,81 @@ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; +} + +.modal-content { + background: #fff; + padding: 20px; + border-radius: 5px; + max-width: 80%; + width: 100%; + max-height: 80%; + overflow-y: auto; +} + +.modal-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.close-button { + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; +} + +.modal-body { + margin-top: 20px; +} + +.table { + width: 100%; + border-collapse: collapse; +} + +.table th, .table td { + border: 1px solid #ddd; + padding: 8px; +} + +.table th { + background-color: #f2f2f2; + text-align: left; +} + +.pagination-buttons { + display: flex; + justify-content: space-between; + margin-top: 20px; +} + +.btn-primary { + background-color: #007bff; + border: none; + color: white; + padding: 10px 20px; + cursor: pointer; + border-radius: 5px; + text-align: center; +} + +.btn-primary:disabled { + background-color: #6c757d; + cursor: not-allowed; +} + +.character-icon { + display: block; + margin: 0 auto; + width: 30px; + height: 30px; +} diff --git a/staff/joel-suarez/project/app/src/components/Ranking.jsx b/staff/joel-suarez/project/app/src/components/Ranking.jsx new file mode 100644 index 000000000..21e7440fe --- /dev/null +++ b/staff/joel-suarez/project/app/src/components/Ranking.jsx @@ -0,0 +1,129 @@ +import React, { useEffect, useState } from 'react'; +import retrieveRanking from '../logic/retrieveRanking'; +import './Ranking.css'; + +function Ranking({ show, onClose }) { + const [characters, setCharacters] = useState([]); + const [error, setError] = useState(null); + const [currentPage, setCurrentPage] = useState(1); + const itemsPerPage = 10; + + useEffect(() => { + if (show) { + retrieveRanking() + .then(chars => { + const sortedCharacters = chars + .filter(char => char.win_streak > 0) + .sort((a, b) => b.win_streak - a.win_streak); + setCharacters(sortedCharacters); + }) + .catch(err => { + console.error('Error retrieving characters:', err); + setError('Failed to retrieve characters'); + }); + } + }, [show]); + + if (!show) { + return null; + } + + const handleClickNext = () => { + if (currentPage * itemsPerPage < characters.length) { + setCurrentPage(currentPage + 1); + } + }; + + const handleClickPrev = () => { + if (currentPage > 1) { + setCurrentPage(currentPage - 1); + } + }; + + const startIndex = (currentPage - 1) * itemsPerPage; + const currentCharacters = characters.slice(startIndex, startIndex + itemsPerPage); + + const getPosition = (index) => { + switch(index) { + case 0: + return '🥇'; + case 1: + return '🥈'; + case 2: + return '🥉'; + default: + return index + 1; + } + }; + + const getEloImageAndClass = (elo) => { + switch(elo) { + case 'iron': + return { img: '/assets/img/elo/iron.png', class: 'elo-iron' }; + case 'bronze': + return { img: '/assets/img/elo/bronze.png', class: 'elo-bronze' }; + case 'silver': + return { img: '/assets/img/elo/silver.png', class: 'elo-silver' }; + case 'gold': + return '/assets/img/elo/gold.png'; + case 'platinum': + return { img: '/assets/img/elo/platinum.png', class: 'elo-platinum' }; + case 'emerald': + return { img: '/assets/img/elo/emerald.png', class: 'elo-emerald' }; + case 'diamond': + return { img: '/assets/img/elo/diamond.png', class: 'elo-diamond' }; + case 'master': + return { img: '/assets/img/elo/master.png', class: 'elo-master' }; + case 'grandmaster': + return { img: '/assets/img/elo/grandmaster.png', class: 'elo-grandmaster' }; + case 'challenger': + return { img: '/assets/img/elo/challenger.png', class: 'elo-challenger' }; + default: + return { img: '/assets/img/elo/default.png', class: 'elo-default' }; + } +} + + return ( +
+
+ );
+}
+
+export default Ranking;
diff --git a/staff/joel-suarez/project/app/src/components/ShopModal.css b/staff/joel-suarez/project/app/src/components/ShopModal.css
new file mode 100644
index 000000000..8007a434f
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/components/ShopModal.css
@@ -0,0 +1,38 @@
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1;
+}
+
+.modal-content {
+ background: white;
+ padding: 20px;
+ border-radius: 8px;
+ width: 500px;
+ max-width: 100%;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.modal-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.close-button {
+ background: none;
+ border: none;
+ font-size: 1.5rem;
+ cursor: pointer;
+}
+
+.modal-body {
+ margin-top: 10px;
+}
diff --git a/staff/joel-suarez/project/app/src/components/ShopModal.jsx b/staff/joel-suarez/project/app/src/components/ShopModal.jsx
new file mode 100644
index 000000000..c0cc2541e
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/components/ShopModal.jsx
@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from 'react';
+import logic from '../logic';
+import './ShopModal.css';
+
+function ShopModal({ show, onClose, onBuyItem }) {
+ const [shopItems, setShopItems] = useState([]);
+ const [error, setError] = useState(null);
+ const [success, setSuccess] = useState(null);
+
+ const handleBuyItem = (itemId) => {
+ const token = sessionStorage.getItem('token');
+ if(token) {
+ const userId = logic.decryptToken(token).sub;
+ logic.buyItem(userId, itemId)
+ .then((data) => {
+ setSuccess(data.message)
+ setError(null);
+ onBuyItem();
+ })
+ .catch(error => {
+ console.error(error.message);
+ setError(error.message);
+ });
+ }
+ };
+
+ useEffect(() => {
+ if (!show) {
+ setError(null);
+ setSuccess(null);
+ }
+ }, [show]);
+
+ useEffect(() => {
+ if (show) {
+ logic.retrieveShop()
+ .then((data) => {
+ setShopItems(data);
+ })
+ .catch((error) => {
+ console.error('Error retrieving shop items:', error);
+ setError('Failed to retrieve shop items');
+ });
+ }
+ }, [show]);
+
+ if (!show) {
+ return null;
+ }
+
+ return (
+
+
+
+
+ 🏆 Ranking
+ +
+ {error &&
+
+
+
+ {error}
}
+ | Position | +Name | +Class | +Wins | +
|---|---|---|---|
| {getPosition(startIndex + index)} | +{char.name} | +{char.clase} | +{char.win_streak} | +
+
+
+
+
+
+ );
+}
+
+export default ShopModal;
diff --git a/staff/joel-suarez/project/app/src/context.js b/staff/joel-suarez/project/app/src/context.js
new file mode 100644
index 000000000..0e042fcfb
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/context.js
@@ -0,0 +1,5 @@
+import { createContext, useContext as useReactContext } from 'react'
+
+export const Context = createContext()
+
+export const useContext = () => useReactContext(Context)
\ No newline at end of file
diff --git a/staff/joel-suarez/project/app/src/context/AuthContext.jsx b/staff/joel-suarez/project/app/src/context/AuthContext.jsx
new file mode 100644
index 000000000..952edc4b7
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/context/AuthContext.jsx
@@ -0,0 +1,32 @@
+// import React, { createContext, useContext, useState, useEffect } from 'react';
+// import logic from '../logic';
+// import { logger } from '../utils';
+
+// const AuthContext = createContext(null);
+
+// export const AuthProvider = ({ children }) => {
+// const [user, setUser] = useState(null);
+
+// useEffect(()=> {
+// const token = sessionStorage.getItem('token');
+// if (token) {
+// logic.retrieveUser(token)
+// .then(usuario => {
+// console.log(usuario);
+// setUser(usuario);
+// })
+// .catch(error => {
+// logger.error('Error al recuperar usuario:', error);
+// sessionStorage.removeItem('token');
+// });
+// }
+// }, [user]);
+
+// return (
+//
+
+
+
+ 🛒 Shop
+ +
+ {error &&
+
+
+
+ {error}
}
+ {success && {success}
}
+ | Name | +Price | +Points | +Action | +
|---|---|---|---|
| {item.name} | +{item.price} | +{item.type} | ++ + | +
+ char._id === selectedCharacterId)}
+ onConfirm={handleConfirmDelete}
+ onCancel={handleCancelDelete}
+ />
+
+ );
+}
+
+export default Home;
diff --git a/staff/joel-suarez/project/app/src/pages/Login.jsx b/staff/joel-suarez/project/app/src/pages/Login.jsx
new file mode 100644
index 000000000..1e38eaef2
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/pages/Login.jsx
@@ -0,0 +1,57 @@
+import { logger } from '../utils'
+
+import logic from '../logic'
+
+import { useContext } from '../context'
+
+function Login ({ onUserLoggedIn, onRegisterClick}) {
+
+ const { showFeedback } = useContext()
+ const handleSubmit = event => {
+ event.preventDefault()
+
+ const form = event.target
+
+ const email = form.email.value
+ const password = form.password.value
+
+ try {
+ logic.loginUser(email, password)
+ .then(() => {
+ form.reset()
+
+ onUserLoggedIn()
+ })
+ .catch(error => showFeedback(error, 'error'))
+ } catch (error) {
+ showFeedback(error)
+ }
+ }
+
+ const handleRegisterClick = event => {
+ event.preventDefault()
+
+ onRegisterClick()
+ }
+
+ return
+ {characters.map(char => (
+
+
+
+ ))}
+ {characters.length < 4 && (
+
+
+
+ })
+
+ handleSelectChar(char._id)}
+ >
+ })
+ 
+
+ {char.clase}
+ {char.name}
+
+ {inventoryItems.some(item => item.name.toLowerCase().includes('skin') && item.name.toLowerCase().includes(char.clase.toLowerCase())) && (
+
+ )}
+
+ 👑 {char.win_streak}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+}
+
+export default Login
\ No newline at end of file
diff --git a/staff/joel-suarez/project/app/src/pages/Register.jsx b/staff/joel-suarez/project/app/src/pages/Register.jsx
new file mode 100644
index 000000000..53148d20f
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/pages/Register.jsx
@@ -0,0 +1,72 @@
+import { logger } from '../utils'
+import logic from '../logic'
+import { useContext } from '../context'
+
+function Register ({onUserRegistered, onLoginClick}) {
+ const { showFeedback } = useContext()
+ const handleSubmit = event => {
+ event.preventDefault()
+
+ const form = event.target
+
+ const name = form.name.value
+ const surname = form.surname.value
+ const email = form.email.value
+ const password = form.password.value
+ const honor_points = 0
+ const arena_points = 0
+
+ try {
+ logic.registerUser(name, surname, email, password, honor_points, arena_points)
+ .then(() => {
+ form.reset()
+
+ onUserRegistered()
+ })
+ .catch(error => showFeedback(error, 'error'))
+ } catch (error) {
+ showFeedback(error)
+ }
+ }
+
+ const handleLoginClick = event => {
+ event.preventDefault()
+
+ onLoginClick()
+ }
+
+ return (
+
+
+
+
+
+ );
+ }
+
+export default Register
\ No newline at end of file
diff --git a/staff/joel-suarez/project/app/src/styles/css/game.css b/staff/joel-suarez/project/app/src/styles/css/game.css
new file mode 100644
index 000000000..b55ea38a4
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/styles/css/game.css
@@ -0,0 +1,114 @@
+html, body {
+ height: 70%;
+ margin: 0;
+ padding: 0;
+}
+
+.container {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ padding-top: 50px;
+}
+
+.hud {
+ position: absolute;
+ color: white;
+ width: 50%;
+ align-items: center;
+ padding: 20px;
+ display: flex;
+ justify-content: space-between;
+}
+
+.healthSection {
+ width: 48%;
+}
+
+.playerInfo {
+ margin-top: 5px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.healthLayout {
+ position: relative;
+ height: 30px;
+ width: 100%;
+}
+
+.remainingHealthbar {
+ background-color: #EF4444;
+ height: 30px;
+ width: 100%;
+}
+
+.totalHealthBar {
+ position: absolute;
+ background-color: #009e00;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: flex;
+}
+
+.timer {
+ background-color: wheat;
+ font-family: 'silver';
+ font-size: 35px;
+ height: 50px;
+ width: 75px;
+ flex-shrink: 0;
+ display: flex;
+ align-items: flex-end;
+ justify-content: center;
+ flex-grow: 1;
+ text-align: center;
+}
+
+.result {
+ position: absolute;
+ font-family: 'silver';
+ font-size: 100px;
+ display: none;
+ align-items: center;
+ justify-content: center;
+ color: wheat;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ text-shadow: 1px 0 0 black, -1px 0 0 black, 0 1px 0 black, 0 -1px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
+}
+
+.game {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ justify-content: center;
+}
+
+#gameWindow {
+ border: 2px solid black;
+}
+
+.animate-charcter {
+ text-transform: uppercase;
+ background-image: linear-gradient(-225deg,
+ #231557 0%,
+ #44107a 29%,
+ #A8EEE3 67%,
+ #9eade9 100%);
+ background-size: auto auto;
+ background-clip: border-box;
+ background-size: 200% auto;
+ color: #fff;
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ animation: textclip 2s linear infinite;
+ display: inline-block;
+ font-size: 190px;
+}
\ No newline at end of file
diff --git a/staff/joel-suarez/project/app/src/styles/css/style.css b/staff/joel-suarez/project/app/src/styles/css/style.css
new file mode 100644
index 000000000..94311d901
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/styles/css/style.css
@@ -0,0 +1,195 @@
+html, body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background-image: url('https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/01073865290819.5d61d475f0072.jpg');
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+}
+
+ .modal {
+ display: none;
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgba(0,0,0,0.4);
+ }
+
+ .modal-content {
+ width: 100%;
+ height: 100%;
+ pointer-events: auto;
+ background-color: #4e6e6a;
+ background-clip: padding-box;
+ border: 1px solid rgba(0, 0, 0, .2);
+ border-radius: .3rem;
+ outline: 0;
+
+ }
+
+ .modal-content2 {
+ bottom: 245px;
+ width: 580px;
+ height: 308px;
+ pointer-events: auto;
+ background-color: #4e6e6a;
+ background-clip: padding-box;
+ border: 1px solid rgba(0, 0, 0, .2);
+ border-radius: .3rem;
+ outline: 0;
+ }
+
+ .btn-danger:hover {
+ color: #fff;
+ border-color: red;
+ box-shadow: 0 0 30px rgba(255, 0, 0, 1);
+ }
+
+ .btn-success {
+ color: #fff;
+ background-color: green;
+ border-color: green;
+}
+
+ .btn-success:hover {
+ color: #fff;
+ border-color: #28a745;
+ box-shadow: 0 0 30px rgb(0, 255, 2);
+ }
+
+ .close {
+ color: #aaa;
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+ }
+
+ .close:hover,
+ .close:focus {
+ color: black;
+ text-decoration: none;
+ cursor: pointer;
+ }
+
+.user-token{
+ color: white;
+}
+
+.dropdown-menu.show {
+ color: white;
+ background-color: #2d8aa3;
+ border-color: #6ac8db;
+ display: block;
+}
+
+.bg-dark {
+ background-color: #1e3c72 !important;
+}
+
+.dropdown-item {
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ font-weight: 400;
+ color: white;
+ text-align: inherit;
+ white-space: nowrap;
+ background-color: transparent;
+ border: 0;
+}
+
+.form-login {
+ background-color: #1e3c72;
+ padding: 35px 35px;
+ border-radius: 10px;
+ box-shadow: 0 0 60px rgba(101,149,143,255);
+ margin-top: 50%;
+ position: relative;
+}
+
+.form-home {
+ margin-top: 25%;
+ position: relative;
+}
+
+ .border {
+ border: 2px solid #65958f !important;
+ }
+
+ .form-login:focus-within {
+ box-shadow: 0 0 60px rgba(101,149,143,255);
+ }
+
+ .form-control {
+ display: block;
+ width: 100%;
+ height: calc(1.5em + .75rem + 2px);
+ padding: .375rem .75rem;
+ font-size: 1rem;
+ font-weight: 400;
+ line-height: 1.5;
+ color: #65958f;
+ background-clip: padding-box;
+ border: 1px solid #65958f;
+ border-radius: 1em;
+ transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+ }
+
+ .btn-primary {
+ background-color: #4b8496;
+ border: none;
+ color: white;
+ padding: 10px 20px;
+ cursor: pointer;
+ border-radius: 5px;
+ text-align: center;
+}
+
+.btn-secondary {
+ color: #fff;
+ background-color: #2d8aa3;
+ border-color: #6ac8db;
+}
+
+.btn-secondary:hover {
+ color: #fff;
+ background-color: #0a667f;
+ border-color: #6ac8db;
+}
+
+.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
+ color: #fff;
+ background-color: #2d8aa3;
+ border-color: #6ac8db;
+}
+
+ .btn-primary:hover {
+ color: #fff;
+ background-color: rgb(46 107 127);
+ border-color: #57d25e;
+ }
+
+ #text-modal {
+ color: #65958f;
+ }
+
+ #hr-modal {
+ background-color: #65958f
+ }
+
+ #account-modal{
+ color: #a69529
+ }
+
+ .title-aoh{
+ color: white;
+ }
\ No newline at end of file
diff --git a/staff/joel-suarez/project/app/src/styles/img/background.jpg b/staff/joel-suarez/project/app/src/styles/img/background.jpg
new file mode 100644
index 000000000..e10fccdf8
Binary files /dev/null and b/staff/joel-suarez/project/app/src/styles/img/background.jpg differ
diff --git a/staff/joel-suarez/project/app/src/utils/Logger.js b/staff/joel-suarez/project/app/src/utils/Logger.js
new file mode 100644
index 000000000..42e25179f
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/utils/Logger.js
@@ -0,0 +1,35 @@
+class Logger {
+ static DEBUG = 0
+ static INFO = 1
+ static WARN = 2
+ static ERROR = 3
+ static FATAL = 4
+
+ level = Logger.DEBUG
+
+ #buildMessage(messages) {
+ return `${new Date().toISOString()} - ${messages.join(' ')}`
+ }
+
+ debug(...messages) {
+ this.level < Logger.INFO && console.debug(`%c${this.#buildMessage(messages)}`, 'color: greenyellow')
+ }
+
+ info(...messages) {
+ this.level < Logger.WARN && console.info(`%c${this.#buildMessage(messages)}`, 'color: dodgerblue')
+ }
+
+ warn(...messages) {
+ this.level < Logger.ERROR && console.warn(`%c${this.#buildMessage(messages)}`, 'color: orange')
+ }
+
+ error(...messages) {
+ this.level < Logger.FATAL && console.error(`%c${this.#buildMessage(messages)}`, 'color: tomato')
+ }
+
+ fatal(...messages) {
+ console.error(`%c${this.#buildMessage(messages)}`, 'background-color: red; color: white; padding: 0 .5rem')
+ }
+}
+
+export default Logger
\ No newline at end of file
diff --git a/staff/joel-suarez/project/app/src/utils/index.js b/staff/joel-suarez/project/app/src/utils/index.js
new file mode 100644
index 000000000..fe1792ce6
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/utils/index.js
@@ -0,0 +1,8 @@
+import Logger from './Logger'
+
+const logger = new Logger
+
+export {
+ logger,
+ Logger
+}
\ No newline at end of file
diff --git a/staff/joel-suarez/project/app/src/vite-env.d.ts b/staff/joel-suarez/project/app/src/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/staff/joel-suarez/project/app/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
+
+
+ 
+
+
+A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. + +--- + +### [Installation](https://sweetalert2.github.io/#download) | [Usage](https://sweetalert2.github.io/#usage) | [Examples](https://sweetalert2.github.io/#examples) | [Recipe gallery](https://sweetalert2.github.io/recipe-gallery/) | [Themes](https://github.com/sweetalert2/sweetalert2-themes) | [React](https://github.com/sweetalert2/sweetalert2-react-content) | [Angular](https://github.com/sweetalert2/ngx-sweetalert2) + +--- + +:moneybag: [Get $200 in free credits with DigitalOcean!](https://m.do.co/c/12907f2ba0bf) + +--- + +> [!IMPORTANT] +> As a consequence of the illegal war in Ukraine, the behavior of this repository and related npm package [sweetalert2](https://www.npmjs.com/package/sweetalert2) is different for `.ru`, `.su`, `.by`, and `.рф` domain zones. +> +> Including this software in any domain in `.ru`, `.su`, `.by`, and `.рф` domain zones will block the website navigation and play the national anthem of Ukraine. +> +> This behavior is classified as [protestware](https://snyk.io/blog/protestware-open-source-types-impact/) and this project is listed in [GitHub Advisory Database](https://github.com/advisories/GHSA-mrr8-v49w-3333) and [Snyk Vulnerability DB](https://security.snyk.io/package/npm/sweetalert2/11.5.2). + +Sponsors +-------- + +For all questions related to sponsorship please get in touch with me via email sweetalert2@gmail.com + +
 Become a sponsor |
+ Vancouver Coir |
+ DLX Plugins |
+ Tiago de Oliveira Stutz |
+ Refermate + |
 Roboflow + |  ZezeLife + |  SERP Empire + |  Real Spy Apps + |
 Phone Tracking Apps |
+ Metal Raised Garden Bed |
+
Become a NSFW sponsor |
+ DreamLoveDoll |
+ The Pink Rabbits |
+ SexDollPartner |
+ ChatGPT for Sex |
+
 XspaceCup |
+ Vlixa |
+ Sexsi Toys |
+ CheapestSexDolls |
+ Best Blowjob Machines |
+
 NakeDoll |
+ hentai sex toys |
+ Inflatable sex doll |
+ Sex Doll Torso |
+ porn sexdoll |
+
 cheap sex doll |
+ BULULU |
+ VSDoll |
+ XNDOLL |
+ sexdoll torso |
+ anime sexdoll |
+
 cheap sexdoll |
+ huge dildo |
+ sexdoll |
+ Cute Sex Doll |
+ best pocket pussy |
+
 female torso sex doll |
+ male masturbator |
+ penis pump |
+ BestRealDoll |
+
 SexDollTech |
+ SexDollsOff |
+ RealSexDoll |
+ Your Doll |
+ Annie's Dollhouse |
+
 STC |
+ DoctorClimax |
+ BSDoll |
+
\n \n ![]()
\n \n \n \n \n
\n").replace(/(^|\n)\s*/g, '');
+
+ /**
+ * @returns {boolean}
+ */
+ var resetOldContainer = function resetOldContainer() {
+ var oldContainer = getContainer();
+ if (!oldContainer) {
+ return false;
+ }
+ oldContainer.remove();
+ removeClass([document.documentElement, document.body], [swalClasses['no-backdrop'], swalClasses['toast-shown'], swalClasses['has-column']]);
+ return true;
+ };
+ var resetValidationMessage$1 = function resetValidationMessage() {
+ globalState.currentInstance.resetValidationMessage();
+ };
+ var addInputChangeListeners = function addInputChangeListeners() {
+ var popup = getPopup();
+ var input = getDirectChildByClass(popup, swalClasses.input);
+ var file = getDirectChildByClass(popup, swalClasses.file);
+ /** @type {HTMLInputElement} */
+ var range = popup.querySelector(".".concat(swalClasses.range, " input"));
+ /** @type {HTMLOutputElement} */
+ var rangeOutput = popup.querySelector(".".concat(swalClasses.range, " output"));
+ var select = getDirectChildByClass(popup, swalClasses.select);
+ /** @type {HTMLInputElement} */
+ var checkbox = popup.querySelector(".".concat(swalClasses.checkbox, " input"));
+ var textarea = getDirectChildByClass(popup, swalClasses.textarea);
+ input.oninput = resetValidationMessage$1;
+ file.onchange = resetValidationMessage$1;
+ select.onchange = resetValidationMessage$1;
+ checkbox.onchange = resetValidationMessage$1;
+ textarea.oninput = resetValidationMessage$1;
+ range.oninput = function () {
+ resetValidationMessage$1();
+ rangeOutput.value = range.value;
+ };
+ range.onchange = function () {
+ resetValidationMessage$1();
+ rangeOutput.value = range.value;
+ };
+ };
+
+ /**
+ * @param {string | HTMLElement} target
+ * @returns {HTMLElement}
+ */
+ var getTarget = function getTarget(target) {
+ return typeof target === 'string' ? document.querySelector(target) : target;
+ };
+
+ /**
+ * @param {SweetAlertOptions} params
+ */
+ var setupAccessibility = function setupAccessibility(params) {
+ var popup = getPopup();
+ popup.setAttribute('role', params.toast ? 'alert' : 'dialog');
+ popup.setAttribute('aria-live', params.toast ? 'polite' : 'assertive');
+ if (!params.toast) {
+ popup.setAttribute('aria-modal', 'true');
+ }
+ };
+
+ /**
+ * @param {HTMLElement} targetElement
+ */
+ var setupRTL = function setupRTL(targetElement) {
+ if (window.getComputedStyle(targetElement).direction === 'rtl') {
+ addClass(getContainer(), swalClasses.rtl);
+ }
+ };
+
+ /**
+ * Add modal + backdrop + no-war message for Russians to DOM
+ *
+ * @param {SweetAlertOptions} params
+ */
+ var init = function init(params) {
+ // Clean up the old popup container if it exists
+ var oldContainerExisted = resetOldContainer();
+ if (isNodeEnv()) {
+ error('SweetAlert2 requires document to initialize');
+ return;
+ }
+ var container = document.createElement('div');
+ container.className = swalClasses.container;
+ if (oldContainerExisted) {
+ addClass(container, swalClasses['no-transition']);
+ }
+ setInnerHtml(container, sweetHTML);
+ var targetElement = getTarget(params.target);
+ targetElement.appendChild(container);
+ setupAccessibility(params);
+ setupRTL(targetElement);
+ addInputChangeListeners();
+ };
+
+ /**
+ * @param {HTMLElement | object | string} param
+ * @param {HTMLElement} target
+ */
+ var parseHtmlToContainer = function parseHtmlToContainer(param, target) {
+ // DOM element
+ if (param instanceof HTMLElement) {
+ target.appendChild(param);
+ }
+
+ // Object
+ else if (_typeof(param) === 'object') {
+ handleObject(param, target);
+ }
+
+ // Plain string
+ else if (param) {
+ setInnerHtml(target, param);
+ }
+ };
+
+ /**
+ * @param {any} param
+ * @param {HTMLElement} target
+ */
+ var handleObject = function handleObject(param, target) {
+ // JQuery element(s)
+ if (param.jquery) {
+ handleJqueryElem(target, param);
+ }
+
+ // For other objects use their string representation
+ else {
+ setInnerHtml(target, param.toString());
+ }
+ };
+
+ /**
+ * @param {HTMLElement} target
+ * @param {any} elem
+ */
+ var handleJqueryElem = function handleJqueryElem(target, elem) {
+ target.textContent = '';
+ if (0 in elem) {
+ for (var i = 0; (i in elem); i++) {
+ target.appendChild(elem[i].cloneNode(true));
+ }
+ } else {
+ target.appendChild(elem.cloneNode(true));
+ }
+ };
+
+ /**
+ * @returns {'webkitAnimationEnd' | 'animationend' | false}
+ */
+ var animationEndEvent = function () {
+ // Prevent run in Node env
+ if (isNodeEnv()) {
+ return false;
+ }
+ var testEl = document.createElement('div');
+
+ // Chrome, Safari and Opera
+ if (typeof testEl.style.webkitAnimation !== 'undefined') {
+ return 'webkitAnimationEnd';
+ }
+
+ // Standard syntax
+ if (typeof testEl.style.animation !== 'undefined') {
+ return 'animationend';
+ }
+ return false;
+ }();
+
+ /**
+ * @param {SweetAlert} instance
+ * @param {SweetAlertOptions} params
+ */
+ var renderActions = function renderActions(instance, params) {
+ var actions = getActions();
+ var loader = getLoader();
+ if (!actions || !loader) {
+ return;
+ }
+
+ // Actions (buttons) wrapper
+ if (!params.showConfirmButton && !params.showDenyButton && !params.showCancelButton) {
+ hide(actions);
+ } else {
+ show(actions);
+ }
+
+ // Custom class
+ applyCustomClass(actions, params, 'actions');
+
+ // Render all the buttons
+ renderButtons(actions, loader, params);
+
+ // Loader
+ setInnerHtml(loader, params.loaderHtml || '');
+ applyCustomClass(loader, params, 'loader');
+ };
+
+ /**
+ * @param {HTMLElement} actions
+ * @param {HTMLElement} loader
+ * @param {SweetAlertOptions} params
+ */
+ function renderButtons(actions, loader, params) {
+ var confirmButton = getConfirmButton();
+ var denyButton = getDenyButton();
+ var cancelButton = getCancelButton();
+ if (!confirmButton || !denyButton || !cancelButton) {
+ return;
+ }
+
+ // Render buttons
+ renderButton(confirmButton, 'confirm', params);
+ renderButton(denyButton, 'deny', params);
+ renderButton(cancelButton, 'cancel', params);
+ handleButtonsStyling(confirmButton, denyButton, cancelButton, params);
+ if (params.reverseButtons) {
+ if (params.toast) {
+ actions.insertBefore(cancelButton, confirmButton);
+ actions.insertBefore(denyButton, confirmButton);
+ } else {
+ actions.insertBefore(cancelButton, loader);
+ actions.insertBefore(denyButton, loader);
+ actions.insertBefore(confirmButton, loader);
+ }
+ }
+ }
+
+ /**
+ * @param {HTMLElement} confirmButton
+ * @param {HTMLElement} denyButton
+ * @param {HTMLElement} cancelButton
+ * @param {SweetAlertOptions} params
+ */
+ function handleButtonsStyling(confirmButton, denyButton, cancelButton, params) {
+ if (!params.buttonsStyling) {
+ removeClass([confirmButton, denyButton, cancelButton], swalClasses.styled);
+ return;
+ }
+ addClass([confirmButton, denyButton, cancelButton], swalClasses.styled);
+
+ // Buttons background colors
+ if (params.confirmButtonColor) {
+ confirmButton.style.backgroundColor = params.confirmButtonColor;
+ addClass(confirmButton, swalClasses['default-outline']);
+ }
+ if (params.denyButtonColor) {
+ denyButton.style.backgroundColor = params.denyButtonColor;
+ addClass(denyButton, swalClasses['default-outline']);
+ }
+ if (params.cancelButtonColor) {
+ cancelButton.style.backgroundColor = params.cancelButtonColor;
+ addClass(cancelButton, swalClasses['default-outline']);
+ }
+ }
+
+ /**
+ * @param {HTMLElement} button
+ * @param {'confirm' | 'deny' | 'cancel'} buttonType
+ * @param {SweetAlertOptions} params
+ */
+ function renderButton(button, buttonType, params) {
+ var buttonName = /** @type {'Confirm' | 'Deny' | 'Cancel'} */capitalizeFirstLetter(buttonType);
+ toggle(button, params["show".concat(buttonName, "Button")], 'inline-block');
+ setInnerHtml(button, params["".concat(buttonType, "ButtonText")] || ''); // Set caption text
+ button.setAttribute('aria-label', params["".concat(buttonType, "ButtonAriaLabel")] || ''); // ARIA label
+
+ // Add buttons custom classes
+ button.className = swalClasses[buttonType];
+ applyCustomClass(button, params, "".concat(buttonType, "Button"));
+ }
+
+ /**
+ * @param {SweetAlert} instance
+ * @param {SweetAlertOptions} params
+ */
+ var renderCloseButton = function renderCloseButton(instance, params) {
+ var closeButton = getCloseButton();
+ if (!closeButton) {
+ return;
+ }
+ setInnerHtml(closeButton, params.closeButtonHtml || '');
+
+ // Custom class
+ applyCustomClass(closeButton, params, 'closeButton');
+ toggle(closeButton, params.showCloseButton);
+ closeButton.setAttribute('aria-label', params.closeButtonAriaLabel || '');
+ };
+
+ /**
+ * @param {SweetAlert} instance
+ * @param {SweetAlertOptions} params
+ */
+ var renderContainer = function renderContainer(instance, params) {
+ var container = getContainer();
+ if (!container) {
+ return;
+ }
+ handleBackdropParam(container, params.backdrop);
+ handlePositionParam(container, params.position);
+ handleGrowParam(container, params.grow);
+
+ // Custom class
+ applyCustomClass(container, params, 'container');
+ };
+
+ /**
+ * @param {HTMLElement} container
+ * @param {SweetAlertOptions['backdrop']} backdrop
+ */
+ function handleBackdropParam(container, backdrop) {
+ if (typeof backdrop === 'string') {
+ container.style.background = backdrop;
+ } else if (!backdrop) {
+ addClass([document.documentElement, document.body], swalClasses['no-backdrop']);
+ }
+ }
+
+ /**
+ * @param {HTMLElement} container
+ * @param {SweetAlertOptions['position']} position
+ */
+ function handlePositionParam(container, position) {
+ if (!position) {
+ return;
+ }
+ if (position in swalClasses) {
+ addClass(container, swalClasses[position]);
+ } else {
+ warn('The "position" parameter is not valid, defaulting to "center"');
+ addClass(container, swalClasses.center);
+ }
+ }
+
+ /**
+ * @param {HTMLElement} container
+ * @param {SweetAlertOptions['grow']} grow
+ */
+ function handleGrowParam(container, grow) {
+ if (!grow) {
+ return;
+ }
+ addClass(container, swalClasses["grow-".concat(grow)]);
+ }
+
+ /**
+ * This module contains `WeakMap`s for each effectively-"private property" that a `Swal` has.
+ * For example, to set the private property "foo" of `this` to "bar", you can `privateProps.foo.set(this, 'bar')`
+ * This is the approach that Babel will probably take to implement private methods/fields
+ * https://github.com/tc39/proposal-private-methods
+ * https://github.com/babel/babel/pull/7555
+ * Once we have the changes from that PR in Babel, and our core class fits reasonable in *one module*
+ * then we can use that language feature.
+ */
+
+ var privateProps = {
+ innerParams: new WeakMap(),
+ domCache: new WeakMap()
+ };
+
+ /** @type {InputClass[]} */
+ var inputClasses = ['input', 'file', 'range', 'select', 'radio', 'checkbox', 'textarea'];
+
+ /**
+ * @param {SweetAlert} instance
+ * @param {SweetAlertOptions} params
+ */
+ var renderInput = function renderInput(instance, params) {
+ var popup = getPopup();
+ if (!popup) {
+ return;
+ }
+ var innerParams = privateProps.innerParams.get(instance);
+ var rerender = !innerParams || params.input !== innerParams.input;
+ inputClasses.forEach(function (inputClass) {
+ var inputContainer = getDirectChildByClass(popup, swalClasses[inputClass]);
+ if (!inputContainer) {
+ return;
+ }
+
+ // set attributes
+ setAttributes(inputClass, params.inputAttributes);
+
+ // set class
+ inputContainer.className = swalClasses[inputClass];
+ if (rerender) {
+ hide(inputContainer);
+ }
+ });
+ if (params.input) {
+ if (rerender) {
+ showInput(params);
+ }
+ // set custom class
+ setCustomClass(params);
+ }
+ };
+
+ /**
+ * @param {SweetAlertOptions} params
+ */
+ var showInput = function showInput(params) {
+ if (!params.input) {
+ return;
+ }
+ if (!renderInputType[params.input]) {
+ error("Unexpected type of input! Expected ".concat(Object.keys(renderInputType).join(' | '), ", got \"").concat(params.input, "\""));
+ return;
+ }
+ var inputContainer = getInputContainer(params.input);
+ var input = renderInputType[params.input](inputContainer, params);
+ show(inputContainer);
+
+ // input autofocus
+ if (params.inputAutoFocus) {
+ setTimeout(function () {
+ focusInput(input);
+ });
+ }
+ };
+
+ /**
+ * @param {HTMLInputElement} input
+ */
+ var removeAttributes = function removeAttributes(input) {
+ for (var i = 0; i < input.attributes.length; i++) {
+ var attrName = input.attributes[i].name;
+ if (!['id', 'type', 'value', 'style'].includes(attrName)) {
+ input.removeAttribute(attrName);
+ }
+ }
+ };
+
+ /**
+ * @param {InputClass} inputClass
+ * @param {SweetAlertOptions['inputAttributes']} inputAttributes
+ */
+ var setAttributes = function setAttributes(inputClass, inputAttributes) {
+ var input = getInput$1(getPopup(), inputClass);
+ if (!input) {
+ return;
+ }
+ removeAttributes(input);
+ for (var attr in inputAttributes) {
+ input.setAttribute(attr, inputAttributes[attr]);
+ }
+ };
+
+ /**
+ * @param {SweetAlertOptions} params
+ */
+ var setCustomClass = function setCustomClass(params) {
+ var inputContainer = getInputContainer(params.input);
+ if (_typeof(params.customClass) === 'object') {
+ addClass(inputContainer, params.customClass.input);
+ }
+ };
+
+ /**
+ * @param {HTMLInputElement | HTMLTextAreaElement} input
+ * @param {SweetAlertOptions} params
+ */
+ var setInputPlaceholder = function setInputPlaceholder(input, params) {
+ if (!input.placeholder || params.inputPlaceholder) {
+ input.placeholder = params.inputPlaceholder;
+ }
+ };
+
+ /**
+ * @param {Input} input
+ * @param {Input} prependTo
+ * @param {SweetAlertOptions} params
+ */
+ var setInputLabel = function setInputLabel(input, prependTo, params) {
+ if (params.inputLabel) {
+ var label = document.createElement('label');
+ var labelClass = swalClasses['input-label'];
+ label.setAttribute('for', input.id);
+ label.className = labelClass;
+ if (_typeof(params.customClass) === 'object') {
+ addClass(label, params.customClass.inputLabel);
+ }
+ label.innerText = params.inputLabel;
+ prependTo.insertAdjacentElement('beforebegin', label);
+ }
+ };
+
+ /**
+ * @param {SweetAlertOptions['input']} inputType
+ * @returns {HTMLElement}
+ */
+ var getInputContainer = function getInputContainer(inputType) {
+ return getDirectChildByClass(getPopup(), swalClasses[inputType] || swalClasses.input);
+ };
+
+ /**
+ * @param {HTMLInputElement | HTMLOutputElement | HTMLTextAreaElement} input
+ * @param {SweetAlertOptions['inputValue']} inputValue
+ */
+ var checkAndSetInputValue = function checkAndSetInputValue(input, inputValue) {
+ if (['string', 'number'].includes(_typeof(inputValue))) {
+ input.value = "".concat(inputValue);
+ } else if (!isPromise(inputValue)) {
+ warn("Unexpected type of inputValue! Expected \"string\", \"number\" or \"Promise\", got \"".concat(_typeof(inputValue), "\""));
+ }
+ };
+
+ /** @type {Record\n \n \n
\n \n \n \n \n \n \n \n \n \n \n
\n \n \n ").concat(content, "
");
+ };
+
+ /**
+ * @param {SweetAlert} instance
+ * @param {SweetAlertOptions} params
+ */
+ var renderImage = function renderImage(instance, params) {
+ var image = getImage();
+ if (!image) {
+ return;
+ }
+ if (!params.imageUrl) {
+ hide(image);
+ return;
+ }
+ show(image, '');
+
+ // Src, alt
+ image.setAttribute('src', params.imageUrl);
+ image.setAttribute('alt', params.imageAlt || '');
+
+ // Width, height
+ applyNumericalStyle(image, 'width', params.imageWidth);
+ applyNumericalStyle(image, 'height', params.imageHeight);
+
+ // Class
+ image.className = swalClasses.image;
+ applyCustomClass(image, params, 'image');
+ };
+
+ /**
+ * @param {SweetAlert} instance
+ * @param {SweetAlertOptions} params
+ */
+ var renderPopup = function renderPopup(instance, params) {
+ var container = getContainer();
+ var popup = getPopup();
+ if (!container || !popup) {
+ return;
+ }
+
+ // Width
+ // https://github.com/sweetalert2/sweetalert2/issues/2170
+ if (params.toast) {
+ applyNumericalStyle(container, 'width', params.width);
+ popup.style.width = '100%';
+ var loader = getLoader();
+ loader && popup.insertBefore(loader, getIcon());
+ } else {
+ applyNumericalStyle(popup, 'width', params.width);
+ }
+
+ // Padding
+ applyNumericalStyle(popup, 'padding', params.padding);
+
+ // Color
+ if (params.color) {
+ popup.style.color = params.color;
+ }
+
+ // Background
+ if (params.background) {
+ popup.style.background = params.background;
+ }
+ hide(getValidationMessage());
+
+ // Classes
+ addClasses$1(popup, params);
+ };
+
+ /**
+ * @param {HTMLElement} popup
+ * @param {SweetAlertOptions} params
+ */
+ var addClasses$1 = function addClasses(popup, params) {
+ var showClass = params.showClass || {};
+ // Default Class + showClass when updating Swal.update({})
+ popup.className = "".concat(swalClasses.popup, " ").concat(isVisible$1(popup) ? showClass.popup : '');
+ if (params.toast) {
+ addClass([document.documentElement, document.body], swalClasses['toast-shown']);
+ addClass(popup, swalClasses.toast);
+ } else {
+ addClass(popup, swalClasses.modal);
+ }
+
+ // Custom class
+ applyCustomClass(popup, params, 'popup');
+ if (typeof params.customClass === 'string') {
+ addClass(popup, params.customClass);
+ }
+
+ // Icon class (#1842)
+ if (params.icon) {
+ addClass(popup, swalClasses["icon-".concat(params.icon)]);
+ }
+ };
+
+ /**
+ * @param {SweetAlert} instance
+ * @param {SweetAlertOptions} params
+ */
+ var renderProgressSteps = function renderProgressSteps(instance, params) {
+ var progressStepsContainer = getProgressSteps();
+ if (!progressStepsContainer) {
+ return;
+ }
+ var progressSteps = params.progressSteps,
+ currentProgressStep = params.currentProgressStep;
+ if (!progressSteps || progressSteps.length === 0 || currentProgressStep === undefined) {
+ hide(progressStepsContainer);
+ return;
+ }
+ show(progressStepsContainer);
+ progressStepsContainer.textContent = '';
+ if (currentProgressStep >= progressSteps.length) {
+ warn('Invalid currentProgressStep parameter, it should be less than progressSteps.length ' + '(currentProgressStep like JS arrays starts from 0)');
+ }
+ progressSteps.forEach(function (step, index) {
+ var stepEl = createStepElement(step);
+ progressStepsContainer.appendChild(stepEl);
+ if (index === currentProgressStep) {
+ addClass(stepEl, swalClasses['active-progress-step']);
+ }
+ if (index !== progressSteps.length - 1) {
+ var lineEl = createLineElement(params);
+ progressStepsContainer.appendChild(lineEl);
+ }
+ });
+ };
+
+ /**
+ * @param {string} step
+ * @returns {HTMLLIElement}
+ */
+ var createStepElement = function createStepElement(step) {
+ var stepEl = document.createElement('li');
+ addClass(stepEl, swalClasses['progress-step']);
+ setInnerHtml(stepEl, step);
+ return stepEl;
+ };
+
+ /**
+ * @param {SweetAlertOptions} params
+ * @returns {HTMLLIElement}
+ */
+ var createLineElement = function createLineElement(params) {
+ var lineEl = document.createElement('li');
+ addClass(lineEl, swalClasses['progress-step-line']);
+ if (params.progressStepsDistance) {
+ applyNumericalStyle(lineEl, 'width', params.progressStepsDistance);
+ }
+ return lineEl;
+ };
+
+ /**
+ * @param {SweetAlert} instance
+ * @param {SweetAlertOptions} params
+ */
+ var renderTitle = function renderTitle(instance, params) {
+ var title = getTitle();
+ if (!title) {
+ return;
+ }
+ showWhenInnerHtmlPresent(title);
+ toggle(title, params.title || params.titleText, 'block');
+ if (params.title) {
+ parseHtmlToContainer(params.title, title);
+ }
+ if (params.titleText) {
+ title.innerText = params.titleText;
+ }
+
+ // Custom class
+ applyCustomClass(title, params, 'title');
+ };
+
+ /**
+ * @param {SweetAlert} instance
+ * @param {SweetAlertOptions} params
+ */
+ var render = function render(instance, params) {
+ renderPopup(instance, params);
+ renderContainer(instance, params);
+ renderProgressSteps(instance, params);
+ renderIcon(instance, params);
+ renderImage(instance, params);
+ renderTitle(instance, params);
+ renderCloseButton(instance, params);
+ renderContent(instance, params);
+ renderActions(instance, params);
+ renderFooter(instance, params);
+ var popup = getPopup();
+ if (typeof params.didRender === 'function' && popup) {
+ params.didRender(popup);
+ }
+ };
+
+ /*
+ * Global function to determine if SweetAlert2 popup is shown
+ */
+ var isVisible = function isVisible() {
+ return isVisible$1(getPopup());
+ };
+
+ /*
+ * Global function to click 'Confirm' button
+ */
+ var clickConfirm = function clickConfirm() {
+ var _dom$getConfirmButton;
+ return (_dom$getConfirmButton = getConfirmButton()) === null || _dom$getConfirmButton === void 0 ? void 0 : _dom$getConfirmButton.click();
+ };
+
+ /*
+ * Global function to click 'Deny' button
+ */
+ var clickDeny = function clickDeny() {
+ var _dom$getDenyButton;
+ return (_dom$getDenyButton = getDenyButton()) === null || _dom$getDenyButton === void 0 ? void 0 : _dom$getDenyButton.click();
+ };
+
+ /*
+ * Global function to click 'Cancel' button
+ */
+ var clickCancel = function clickCancel() {
+ var _dom$getCancelButton;
+ return (_dom$getCancelButton = getCancelButton()) === null || _dom$getCancelButton === void 0 ? void 0 : _dom$getCancelButton.click();
+ };
+
+ /** @typedef {'cancel' | 'backdrop' | 'close' | 'esc' | 'timer'} DismissReason */
+
+ /** @type {Record