andros/example-websocket-3-in-line
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First commit

Browse Source
This commit is contained in:
Andros Fenollosa
2021-03-04 11:09:18 +01:00
commit be32760a48
6 changed files with 210 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
index.html Normal file
View 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>