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