Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-26 15:57:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

simple game creation and logging, join a game

Browse Source
This commit is contained in:
Alec Maier
2019-08-30 02:00:50 -04:00
parent b141e33919
commit 47d6e9b568
10 changed files with 166 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/vanilla_js.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 218 B

7
create_game.html
View File

@@ -5,6 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" type = "text/css" href = "static/styles.css" />
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<div class="app-content">
@@ -13,7 +14,11 @@
<form>
<label>
Name
<input type="text"/>
<input id="name" type="text"/>
</label>
<label>
Time (Minutes, Optional)
<input id="time" type="number"/>
</label>
</form>
<h3>Add cards to the deck.</h3>

18
game.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Werewolf</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" type = "text/css" href = "static/styles.css" />
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<div class="app-content">
<div id="lobby-container">
<h2>this is a game</h2>
</div>
</div>
<script type="module" src="/static/game.js"></script>
</body>
</html>

7
index.html
View File

@@ -16,9 +16,14 @@
<a href="/create">
<button class="app-btn">Create Game</button>
</a>
<button class="app-btn">Join Game</button>
<a href="/join">
<button class="app-btn">Join</button>
</a>
<button class="app-btn">Learn the Game</button>
</div>
<footer id="footer">
<img src="assets/images/vanilla_js.png">
</footer>
<script src="/static/game.js"></script>
</body>
</html>

32
join_game.html Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Werewolf</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" type = "text/css" href = "static/styles.css" />
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<div class="app-content">
<div id="join-game-container">
<h2 class="app-header">Join a Game</h2>
<form>
<label>
Name
<input id="name" type="text"/>
</label>
<label>
Access Code
<input id="code" type="text"/>
</label>
</form>
<a href="/">
<button class="app-btn-secondary">Cancel</button>
</a>
<button id="join-btn" class="app-btn">Join</button>
</div>
</div>
<script type="module" src="/static/join.js"></script>
</body>
</html>

23
server.js
View File

@@ -6,15 +6,26 @@ const app = express();
const server = http.Server(app);
const io = socketIO(server);
var activeGames = [];
app.set('port', 5000);
app.use('/static', express.static(__dirname + '/static')); // Routing
app.use('/assets', express.static(__dirname + '/assets')); // Routing
app.get('/', function(request, response) {
response.sendFile(__dirname + '/index.html');
});
app.get('/create', function(request, response) {
response.sendFile(__dirname + '/create_game.html');
})
});
app.get('/join', function(request, response) {
response.sendFile(__dirname + '/join_game.html');
});
app.get('/:code', function(request, response) {
response.sendFile(__dirname + '/game.html');
});
// Starts the server.
server.listen(5000, function() {
@@ -24,5 +35,13 @@ server.listen(5000, function() {
// Add the WebSocket handlers
io.on('connection', function(socket) {
console.log('Client connected.');
socket.emit('message', 'hi!');
socket.on('newGame', function(game) {
activeGames.push(game);
});
socket.on('joinGame', function(playerInfo) {
activeGames[activeGames.findIndex((game) => game.accessCode === playerInfo.code)].players.push(playerInfo.name);
console.log("Player " + playerInfo.name + " has joined the game");
});
console.log('games: ', activeGames);
});

1
static/game.js
View File

@@ -1,4 +1,5 @@
const socket = io();
var games = [];
socket.on('message', function(data) {
console.log(data);
});

7
static/join.js Normal file
View File

@@ -0,0 +1,7 @@
const socket = io();
document.getElementById("join-btn").addEventListener("click", function() {
const playerInfo = {name: document.getElementById("name").value, code: document.getElementById("code").value};
socket.emit('joinGame', playerInfo);
window.location.replace('/' + document.getElementById("code").value);
})

40
static/setup.js
View File

@@ -1,5 +1,8 @@
import {cards} from './cards.js'
const socket = io();
var games = [];
// important declarations
class Card {
constructor(role, team, description, powerRole) {
@@ -11,12 +14,25 @@ class Card {
}
}
class Game {
constructor(accessCode, size, deck, time, players) {
this.accessCode = accessCode;
this.size = size;
this.deck = deck;
this.time = time;
this.players = players;
this.state = "lobby";
}
}
var deck = [];
var gameSize = 0;
var time = null;
// register event listeners on buttons
document.getElementById("reset-btn").addEventListener("click", resetCardQuantities);
document.getElementById("create-btn").addEventListener("click", generateAccessCode);
document.getElementById("create-btn").addEventListener("click", createGame);
// render all of the available cards to the user
window.onload = function() {
@@ -43,11 +59,11 @@ window.onload = function() {
};
function updateGameSize() {
let totalQuantity = 0;
gameSize = 0;
for (let card of deck) {
totalQuantity += card.quantity;
gameSize += card.quantity;
}
document.getElementById("game-size").innerText = totalQuantity + " Players";
document.getElementById("game-size").innerText = gameSize + " Players";
}
function resetCardQuantities() {
@@ -60,14 +76,24 @@ function resetCardQuantities() {
});
}
function generateAccessCode() {
function createGame() {
let code = "";
let charPool = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
for (let i = 0; i < 6; i++) {
code += charPool[getRandomInt(61)]
}
console.log("Access Code: " + code);
return code;
console.log(code);
const game = new Game(
code,
gameSize,
deck,
document.getElementById("time").value,
[document.getElementById("name").value]
);
socket.emit('newGame', game);
sessionStorage.setItem('accessCode', code);
window.location.replace('/' + code);
}
function getRandomInt(max) {

50
static/styles.css
View File

@@ -3,9 +3,18 @@
font-size: 35px;
}
.card {
height: 7.5em;
width: 4em;
}
h3 {
font-size: 20px;
}
.app-content {
width: 95%;
}
}
@media(min-width: 750.01px) {
@@ -13,23 +22,40 @@
font-size: 50px;
}
.card {
height: 8.5em;
width: 5em;
}
h3 {
font-size: 30px;
}
.app-content {
width: 80%;
}
}
body {
html, body {
margin: 0 auto;
width: 100vw;
width: 100%;
margin-bottom: 2em;
font-family: sans-serif;
}
.app-content {
text-align: center;
width: 80%;
margin: 0 auto;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 5rem;
text-align: center;
}
.app-header {
color: #7d0b0b;
letter-spacing: 0.1em;
@@ -49,9 +75,7 @@ h3 {
.card {
text-align: center;
height: 8em;
cursor: pointer;
width: 4.5em;
color: gray;
border: 1px solid #7d0b0b;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
@@ -74,7 +98,6 @@ h3 {
.card-role {
color: gray;
font-size: 1.1em;
margin: 0;
}
@@ -131,7 +154,7 @@ h3 {
margin: 0 1em 0 0;
}
#create-game-container {
#create-game-container, #join-game-container {
display: inline-block;
text-align: left;
}
@@ -152,13 +175,24 @@ input[type=text] {
font-size: 1.1em;
}
input[type=number] {
background-color: transparent;
border: 2px solid #7d0b0b;
caret-color: gray;
margin: 0.5em 0 1em 0;
color: gray;
padding: 0.5rem;
width: 3em;
font-size: 1.1em;
}
input[type=text]:hover {
background-color: lightgray;
}
label {
margin-bottom: 1em;
font-size: 1.4em;
font-size: 1em;
display: flex;
flex-direction: column;
}