First commit
This commit is contained in:
Andros Fenollosa
commit
be32760a48
94
index.html
Normal file
94
index.html
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Title</title>
|
||||||
|
<script src="js/vendors/vue.min.js"></script>
|
||||||
|
<script src="js/main.js" defer></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body{
|
||||||
|
background-color: #14bdac;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Arial;
|
||||||
|
|
||||||
|
}
|
||||||
|
.grid{
|
||||||
|
display: grid;
|
||||||
|
grid-template: 1fr 1fr 1fr/1fr;
|
||||||
|
background-color: #0da192;
|
||||||
|
grid-gap: 1rem;
|
||||||
|
height: 20rem;
|
||||||
|
width: 20rem;
|
||||||
|
}
|
||||||
|
.grid__casilla{
|
||||||
|
display: grid;
|
||||||
|
grid-template: 1fr /1fr 1fr 1fr;
|
||||||
|
grid-gap: 1rem;
|
||||||
|
}
|
||||||
|
.equis{
|
||||||
|
background-image: url("https://cdn.pixabay.com/photo/2016/10/10/01/49/x-1727490_960_720.png");
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-size: 3rem;
|
||||||
|
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.circulo{
|
||||||
|
background-image: url("https://cdn.pixabay.com/photo/2015/08/27/10/30/ban-909970_960_720.png");
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-size: 3rem;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
button{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #14bdac;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main id="app">
|
||||||
|
<h1 style="color: white; ">Tres en Raya</h1>
|
||||||
|
<hr style="margin-bottom: 3rem">
|
||||||
|
<!--Jugadores-->
|
||||||
|
<select v-model="jugador">
|
||||||
|
<option value="1">Jugador1</option>
|
||||||
|
<option value="2">Jugador2</option>
|
||||||
|
</select>
|
||||||
|
<!--Tablero-->
|
||||||
|
<div class="grid">
|
||||||
|
<div v-for="(x,indiceX) in casillas" class="grid__casilla">
|
||||||
|
<button @click="marcar(indiceX,indiceY)" v-for="(y,indiceY) in x">
|
||||||
|
<span v-if=" y === 0"></span>
|
||||||
|
<span v-if=" y === 1" class="equis"></span>
|
||||||
|
<span v-if="y === 2" class="circulo"> </span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
69
js/main.js
Normal file
69
js/main.js
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
const miWebSocket = new WebSocket('ws://localhost:8080');
|
||||||
|
//0 - Bacio
|
||||||
|
//1 - Jugador 1
|
||||||
|
//2 - Jugador 2
|
||||||
|
//3 - Desactivada
|
||||||
|
|
||||||
|
const casillasInicio = [
|
||||||
|
[0,0,0],
|
||||||
|
[0,0,0],
|
||||||
|
[0,0,0]
|
||||||
|
]
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
el: '#app',
|
||||||
|
data: {
|
||||||
|
jugador: '1',
|
||||||
|
casillas: casillasInicio,
|
||||||
|
},
|
||||||
|
mounted: function (){
|
||||||
|
this.iniciarWebSocket();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
marcar: function (x,y){
|
||||||
|
this.casillas[x][y] = parseInt(this.jugador);
|
||||||
|
this.$forceUpdate();
|
||||||
|
this.enviarDatos(x,y);
|
||||||
|
},
|
||||||
|
iniciarWebSocket: function (){
|
||||||
|
function open () {
|
||||||
|
// Abre conexión
|
||||||
|
console.log("WebSocket abierto.");
|
||||||
|
}
|
||||||
|
|
||||||
|
const message = (evento) => {
|
||||||
|
// Se recibe un mensaje
|
||||||
|
console.log("WebSocket ha recibido un mensaje");
|
||||||
|
// Mostrar mensaje en HTML
|
||||||
|
const datosRecibidos = JSON.parse(evento.data);
|
||||||
|
this.casillas[datosRecibidos.x][datosRecibidos.y] = datosRecibidos.jugador;
|
||||||
|
this.$forceUpdate();
|
||||||
|
}
|
||||||
|
|
||||||
|
function error (evento) {
|
||||||
|
// Ha ocurrido un error
|
||||||
|
console.error("WebSocket ha observado un error: ", evento);
|
||||||
|
}
|
||||||
|
|
||||||
|
function close () {
|
||||||
|
// Cierra la conexión
|
||||||
|
console.log("WebSocket cerrado.");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Eventos de WebSocket
|
||||||
|
miWebSocket.addEventListener('open', open);
|
||||||
|
miWebSocket.addEventListener('message', message);
|
||||||
|
miWebSocket.addEventListener('error', error);
|
||||||
|
miWebSocket.addEventListener('close', close);
|
||||||
|
},
|
||||||
|
enviarDatos: function (x,y){
|
||||||
|
miWebSocket.send(JSON.stringify({
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
jugador: parseInt(this.jugador),
|
||||||
|
}));
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
});
|
||||||
6
js/vendors/vue.min.js
vendored
Normal file
6
js/vendors/vue.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
16
package.json
Normal file
16
package.json
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"name": "tres-enraya",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "server.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
"start": "node server.js"
|
||||||
|
},
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"description": "",
|
||||||
|
"dependencies": {
|
||||||
|
"ngrok": "^3.4.0",
|
||||||
|
"ws": "^7.4.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
25
server.js
Normal file
25
server.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
// Importaciones
|
||||||
|
const WebSocket = require('ws');
|
||||||
|
const http = require('http');
|
||||||
|
|
||||||
|
// Creamos una instacia del servidor HTTP (Web)
|
||||||
|
const server = http.createServer();
|
||||||
|
// Creamos y levantamos un servidor de WebSockets a partir del servidor HTTP
|
||||||
|
const wss = new WebSocket.Server({ server });
|
||||||
|
|
||||||
|
// Escuchamos los eventos de conexión
|
||||||
|
wss.on('connection', function connection(ws) {
|
||||||
|
// Escuchamos los mensajes entrarntes
|
||||||
|
ws.on('message', function incoming(data) {
|
||||||
|
// Iteramos todos los clientes que se encuentren conectados
|
||||||
|
wss.clients.forEach(function each(client) {
|
||||||
|
if (client.readyState === WebSocket.OPEN) {
|
||||||
|
// Enviamos la información recibida
|
||||||
|
client.send(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Levantamos servidor HTTP
|
||||||
|
server.listen(8080);
|
||||||
Loading…
Reference in New Issue
Block a user