WORKSHOP

Multiplayer Whack a mole!

by Maurici Abad

at Fontys ICT

slides.com/maurici/wmole

INTRODUCTION

Who am I?

I'm Maurici Abad Gutierrez,

an exchange student

from Barcelona, Spain

Portfolio:

https://mauriciabad.com

LinkedIn:

https://linkedin.com/in/mauriciabad

HackUPC

I'm organizer of the largest hackathon in Barcelona.

We promote technology among students and create a great community.

Hackathon:

http://hackupc.com

Student organization:

http://hackersatupc.org

Multiplayer

Whack-A-Mole

Web App

Server:

npm
Node.js
Socket.io

Client:

JavaScript
CSS

Tools:

Heroku
GitHub

Result

https://wmole.herokuapp.com/

💬 Create GitHub repository
💬 Initialize npm
💬 Create initial files
💬 Example code of Socket.io
👨‍💻 Code the Client
👨‍💻 Code the Server
💬 Deploy to Heroku
👨‍💻 Extra: Add scoreboard

THE PLAN

💬: Follow guide

👨‍💻: At your own

PAIR PROGRAMMING

Find a partner

SET UP

Prepare environment

https://nodejs.org/en/

https://code.visualstudio.com/

or any code editor

Install this:

https://git-scm.com/

Create a repository in GitHub

https://github.com/new

Create a repository in GitHub

https://github.com/new

Clone your repo

https://github.com/{username}/{repo-name}

git clone https://github.com/{username}/{repo-name}.git

cd {repo-name}

code .

Initialize npm

npm init

npm install express

{
  "name": "wmole",
  "version": "1.0.0",
  "description": "",
  "main": "src/app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node src/app.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/mauriciabad/wmole.git"
  },
  "author": "Maurici Abad Gutierrez",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/mauriciabad/wmole/issues"
  },
  "homepage": "https://github.com/mauriciabad/wmole#readme",
  "dependencies": {
    "express": "^4.17.1"
  }
}

Change this values

Create a .gitignore file

https://www.gitignore.io/

Folder structure

📁 dist
  📁 css
    📘 main.css
  📁 img
    🖼️ mole.svg
    🖼️ bunny.svg
  📁 js
    📒 index.js
  📙 index.html
📁 src
  📒 app.js
📄 .gitignore
📄 package.json

https://www.flaticon.com/free-icon/mole_311532

https://www.flaticon.com/free-icon/easter-bunny_347479

mole.svg

bunny.svg

Create src/app.js

/* - - - - Initialize variables - - - - */
const express = require('express');
const app     = express();
const http    = require('http').createServer(app);

// Your code goes here

/* - - - - Server logic - - - - */
app.use(express.static('dist'));

const port = process.env.PORT || 3000;

http.listen(port, () => {
  console.log(`listening on port ${port}`);
});

Create dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Wack A Mole Multiplayer</title>

  <link rel="stylesheet" href="css/main.css">
  <link href="https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap" rel="stylesheet">
</head>
<body class="body--play">

  <div class="score"><span id="score">0</span><span class="score__small"> pts.</span></div>

  <div class="grid">
    <!-- Repeat this 9 times changing the data-holenumber: { -->
    <div class="hole" data-holenumber="0">
      <img class="hole__img" data-content="mole" src="img/mole.svg" alt="🦔">
      <img class="hole__img" data-content="bunny" src="img/bunny.svg" alt="🐇">
    </div>
    <!-- } -->
  </div>

  <script src="js/index.js"></script>
</body>
</html>

Create dist/css/main.css

/* - - - - - - Shared - - - - - - */
:root {
  --green: #73B46E;
  --brown: #957863;
  --brown-dark: #403532;
}
body {
  color: var(--brown-dark);
  line-height: 1;
  margin: 0 auto;

  font-family: 'Luckiest Guy', cursive;
  background-color: var(--green);
  box-sizing: border-box;
}



/* - - - - - - Play - - - - - - */
.body--play{
  height: 100vh;
  overflow: hidden;
  
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  
  user-select: none;
}
/* --- Grid & Holes --- */
.grid {
  --wide-size: calc(100vh - 8rem);
  --narrow-size: 100vw;

  width:  var(--wide-size);
  height: var(--wide-size);
  max-width:  var(--narrow-size);
  max-height: var(--narrow-size);

  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  gap: 1rem;

  padding: 1rem;
}
.hole {
  position: relative;

  background-color: #251F1D;
  border: solid 0.5rem var(--brown);
  border-radius: 100%;
  transition: filter 300ms ease-out;
  box-shadow: 
    inset 0 0vh 0 0 rgba(149, 120, 99, 0.1), 
    inset 0 2vh 0 0 rgba(149, 120, 99, 0.1), 
    inset 0 4vh 0 0 rgba(149, 120, 99, 0.1), 
    inset 0 6vh 0 0 rgba(149, 120, 99, 0.1), 
    inset 0 8vh 0 0 rgba(149, 120, 99, 0.1), 
    inset 0 10vh 0 0 rgba(149, 120, 99, 0.1);
}
.hole__img {
  opacity: 0;
  transform: scale(0.5) translateY(15%);
  transition: transform 100ms ease-out, opacity 100ms ease-out;

  will-change: transform, opacity;
  z-index: 1;

  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  padding: 0.75rem;
  object-fit: contain;
}
.hole__img--active {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.hole__img--smashed {
  transform: scale(0.5) translateY(15%) rotate(720deg) !important;
}

/* --- Scores --- */
.score {
  font-size: 6rem;
  color: var(--brown-dark);
  line-height: 1;
}
.score__small { font-size: 0.6667em; }



/* - - - - - - Scoreboard - - - - - - */
.body--scoreboard { padding: 2rem; }
table { font-size: 7vw; margin: auto; border-collapse: collapse; }
thead { border-bottom: solid 0.125em var(--brown-dark); }
td,th { padding: 0.5rem; }
td:nth-child(1), th:nth-child(1) { text-align: left; padding-right: 2rem; }
td:nth-child(2), th:nth-child(2) { text-align: right; padding-left: 2rem; }
.fade{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 10rem;
  background: linear-gradient(to bottom, transparent, var(--green));
  z-index: 1;
}



/* - - - - - - Index - - - - - - */
.body--index {
  height: 100vh;
  max-width: 40rem;
  padding: 1rem;
  overflow: hidden;

  display: grid;
  grid-template: 1fr 2fr / 1fr;
  gap: 1rem;

  user-select: none;
}

a {
  background: var(--brown);
  box-shadow: 0 1rem 0 var(--brown-dark);
  margin-bottom: 1rem;
  border-radius: 1rem;
  
  font-size: 3rem;
  color: #fff;
  text-decoration: none;

  display: flex;
  align-items: center;
  justify-content: center;
}

Run your code

npm run start

http://localhost:3000/

Go to:

Socket.io

Official Socket.io documentation

https://socket.io/

Install Socket.io dependency

npm install socket.io

Load Socket.io library in the client

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Wack A Mole Multiplayer</title>

  <link rel="stylesheet" href="css/index.css">
  <link href="https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap" rel="stylesheet">
</head>
<body>

  <div class="score"><span id="score">0</span><span class="score__small"> pts.</span></div>

  <div class="grid">
    <!-- Repeat this 9 times changing the data-holenumber: { -->
    <div class="hole" data-holenumber="0">
      <img class="hole__img" data-content="mole" src="img/mole.svg" alt="🦔">
      <img class="hole__img" data-content="bunny" src="img/bunny.svg" alt="🐇">
    </div>
    <!-- } -->
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script src="js/index.js"></script>
</body>
</html>

Example data exchange

/* - - - - Initialize variables - - - - */
const express = require('express');
const app     = express();
const http    = require('http').createServer(app);
const io      = require('socket.io')(http);

/* - - - - Socket.io logic - - - - */
io.on('connection', (socket) => {
  console.log(`${socket.id} is connected`);

  socket.on('name', (name) => {
    console.log(`${socket.id} name is ${name}`);
    socket.emit('log', `Welcome ${name}! :D`);
  });
  
  socket.on('disconnect', () => {
    console.log(`${socket.id} disconected`);
  });
});

/* - - - - Server logic - - - - */
app.use(express.static('dist'));

const port = process.env.PORT || 3000;

http.listen(port, () => {
  console.log(`listening on port ${port}`);
});

const socket = io();

socket.emit('name', 'Lucas');

socket.on('log', (data) => {
  console.log(data);
});

src/app.js

dist/js/index.js

log

name

LET'S CODE!

Client Requirements [ALL]

Add Socket.io even listeners.
- When a "spawn" event is received:
  - Runs displaySpawn function.
- When a "score" event is received:
  - Runs displayScore function.
Add event listeners.
(mousedown and touchstart)
- When the player clicks or touches a hole:
  - Emits a "smash" event to the server.
  - Runs displaySmash function.

/* - - - Display UI changes - - - */
function displaySmash(holeNumber) {
  let holeActiveContentElement = document.querySelector(`[data-holeNumber='${holeNumber}'] > .hole__img--active`);
  if (holeActiveContentElement) {
    holeActiveContentElement.classList.remove('hole__img--active');
    holeActiveContentElement.classList.add('hole__img--smashed');
    setTimeout(() => {
      holeActiveContentElement.classList.remove('hole__img--smashed');
    }, 100);
  }
}

function displaySpawn({holeNumber, content, duration}) {
  let holeContentElement = document.querySelector(`[data-holeNumber='${holeNumber}'] > [data-content='${content}']`);
  
  holeContentElement.classList.add('hole__img--active');
  
  setTimeout(() => {
    holeContentElement.classList.remove('hole__img--active');
  }, duration - 100);
}

function displayScore(score) {
  document.querySelector('#score').textContent = score;
}

Help code to change UI

Server Requirements 1

Create an object that represents the status of the game (gameStatus).
- Contains info about the holes, for example it's content.
- Contains info about the players, for example their score.

Server Requirements 2

When a player joins or leaves the game the gameStatus is updated.
- Also, logs a message.

Server Requirements 3

When a player smashes a hole, gets points.
- mole = +1 point bunny = -3 points nothing = 0 point
- Points are earned only one time.
- Minimum player score is 0.

Server Requirements 4

Create a function that places moles/bunnies in holes,
in other words: updates the holes in the gameStatus.
- Fill a random and empty hole.
- Odds of placing a mole are greater than a bunny.
- Each mole/bunny takes a different time to disappear.
- Time between spawns is random.

Server Requirements [ALL]

Create an object that represents the status of the game (gameStatus).
- Contains info about the holes, for example it's content.
- Contains info about the players, for example their score.
When a player joins or leaves the game the gameStatus is updated.
- Also, logs a message.
When a player smashes a hole, gets points.
- mole = +1 point bunny = -3 points nothing = 0 points
- Points are earned only one time.
- Minimum player score is 0.
Create a function that places moles/bunnies in holes,
in other words: updates the holes in the gameStatus.
- Fill a random and empty hole.
- Odds of placing a mole are greater than a bunny.
- Each mole/bunny takes a different time to disappear.
- Time between spawns is random.

DEPLOY

Official Heroku documentation

https://devcenter.heroku.com/

Create an Account

https://signup.heroku.com/

Create new app

https://dashboard.heroku.com/apps

Chose a unique app name