diff --git a/assets/images/vanilla_js.png b/assets/images/vanilla_js.png new file mode 100644 index 0000000..0b030a3 Binary files /dev/null and b/assets/images/vanilla_js.png differ diff --git a/create_game.html b/create_game.html index 805af0e..f29c834 100644 --- a/create_game.html +++ b/create_game.html @@ -5,6 +5,7 @@ +
@@ -13,7 +14,11 @@
+

Add cards to the deck.

diff --git a/game.html b/game.html new file mode 100644 index 0000000..b60db2f --- /dev/null +++ b/game.html @@ -0,0 +1,18 @@ + + + + Werewolf + + + + + + +
+
+

this is a game

+
+
+ + + diff --git a/index.html b/index.html index 6d3ef05..f646f4b 100644 --- a/index.html +++ b/index.html @@ -16,9 +16,14 @@ - + + +
+ diff --git a/join_game.html b/join_game.html new file mode 100644 index 0000000..03cd52e --- /dev/null +++ b/join_game.html @@ -0,0 +1,32 @@ + + + + Werewolf + + + + + + +
+
+

Join a Game

+
+ + +
+ + + + +
+
+ + + diff --git a/server.js b/server.js index 2126336..040724f 100644 --- a/server.js +++ b/server.js @@ -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); }); + diff --git a/static/game.js b/static/game.js index 5c77d8e..f3a5dfa 100644 --- a/static/game.js +++ b/static/game.js @@ -1,4 +1,5 @@ const socket = io(); +var games = []; socket.on('message', function(data) { console.log(data); }); diff --git a/static/join.js b/static/join.js new file mode 100644 index 0000000..ee0f509 --- /dev/null +++ b/static/join.js @@ -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); +}) diff --git a/static/setup.js b/static/setup.js index 767e9cc..a8fa566 100644 --- a/static/setup.js +++ b/static/setup.js @@ -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) { diff --git a/static/styles.css b/static/styles.css index f866b31..b8355cc 100644 --- a/static/styles.css +++ b/static/styles.css @@ -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; }