Initial application

.gitignore

+# Node build artifacts
+node_modules
+npm-debug.log
+
+# Local development
+*.env
+*.dev
+.DS_Store
+
+# Docker
+Dockerfile
+docker-compose.yml
+
+
+

Procfile

+web: npm start

app.js

+'use strict';
+
+//Set up express
+const express = require('express');
+const app = express();
+
+//Setup socket.io
+const server = require('http').Server(app);
+const io = require('socket.io')(server);
+
+//Setup static page handling
+app.set('view engine', 'ejs');
+app.use('/static', express.static('public'));
+
+//Handle client interface on /
+app.get('/', (req, res) => {
+  res.render('client', {version: process.version});
+});
+//Handle display interface on /display
+app.get('/display', (req, res) => {
+  res.render('display', {version: process.version});
+});
+
+//Start the server
+function startServer() {
+    const PORT = process.env.PORT || 8080;
+    server.listen(PORT, () => {
+        console.log(`Server listening on port ${PORT}`);
+    });
+}
+
+//Chat message
+function handleChat(message) {
+    console.log('Handling chat: ' + message); 
+    io.emit('chat',message);
+}
+
+//Handle new connection
+io.on('connection', socket => { 
+  console.log('New connection');
+
+  //Handle on chat message received
+  socket.on('chat', message => {
+    handleChat(message);
+  });
+
+  //Handle disconnection
+  socket.on('disconnect', () => {
+    console.log('Dropped connection');
+  });
+});
+
+//Start server
+if (module === require.main) {
+  startServer();
+}
+
+module.exports = server;

app.yaml

+# Use NodeJS on flexible app engine
+runtime: nodejs
+env: flex
+
+# Only use one instance
+manual_scaling:
+  instances: 1
+
+# Use low resources during development and testing
+resources:
+  cpu: 1
+  memory_gb: 0.5
+  disk_size_gb: 10
+

package.json

+{
+  "name": "ecsexample",
+  "version": "1.0.0",
+  "description": "ECS Example Game",
+  "main": "app.js",
+  "engines": {
+    "node": "16.x"
+  },
+  "scripts": {
+    "start": "node app.js",
+    "gdeploy": "gcloud app deploy --version test",
+    "hdeploy": "git push heroku master"
+  },
+  "author": "Oli Bills",
+  "license": "ECS",
+  "dependencies": {
+    "ejs": "^3.1.6",
+    "express": "^4.17.1",
+    "socket.io": "^4.3.1"
+  }
+}

public/game.js

+var socket = null;
+
+//Prepare game
+var app = new Vue({
+    el: '#game',
+    data: {
+        connected: false,
+        messages: [],
+        chatmessage: '',
+    },
+    mounted: function() {
+        connect(); 
+    },
+    methods: {
+        handleChat(message) {
+            if(this.messages.length + 1 > 10) {
+                this.messages.pop();
+            }
+            this.messages.unshift(message);
+        },
+        chat() {
+            socket.emit('chat',this.chatmessage);
+            this.chatmessage = '';
+        },
+    }
+});
+
+function connect() {
+    //Prepare web socket
+    socket = io();
+
+    //Connect
+    socket.on('connect', function() {
+        //Set connected state to true
+        app.connected = true;
+    });
+
+    //Handle connection error
+    socket.on('connect_error', function(message) {
+        alert('Unable to connect: ' + message);
+    });
+
+    //Handle disconnection
+    socket.on('disconnect', function() {
+        alert('Disconnected');
+        app.connected = false;
+    });
+
+    //Handle incoming chat message
+    socket.on('chat', function(message) {
+        app.handleChat(message);
+    });
+
+
+}

public/main.css

+body {
+    background-image: url('/static/background.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: #acc5d0;
+}
+.title {
+    font-weight: bold;
+    font-size: 32px;
+    text-align: center;
+}
+.container {
+    background-color: rgba(255,255,255,0.8);
+    padding-bottom: 10px;
+    padding-top: 10px;
+    height: 100vh;
+}
+#chat { 
+    list-style-type: none; 
+    margin: 0; 
+    padding: 0; 
+    overflow: auto;
+    max-height: 80vh;
+}
+#chat li { 
+    padding: 5px 10px; 
+}
+#chat li:nth-child(odd) { 
+    background-color: rgba(0,0,0,0.2); 
+}

views/chat.ejs

+<div>
+    <input type="text" @keyup.enter="chat()" v-model="chatmessage" class="form-control" placeholder="Chat">
+    <ul id="chat">
+        <li v-for="message in messages">{{message}}</li>
+    </ul>
+</div>

views/client.ejs

+<!doctype html>
+<html lang="en">
+
+    <%- include('header'); -%>
+
+    <h2 class="title">ECS Example Game</h2>
+
+    <div id="game">
+        <div v-if="connected">
+            <%- include('chat'); -%>
+        </div>
+        <div v-else>
+            <p>Connecting...</p>
+        </div>
+    </div>
+
+    <%- include('footer'); -%>
+
+</html>

views/display.ejs

+<!doctype html>
+<html lang="en">
+
+    <%- include('header'); -%>
+
+    <h2 class="title">ECS Example Game</h2>
+
+    <div id="game">
+        <div v-if="connected">
+            <ul id="chat">
+                <li v-for="message in messages">{{message}}</li>
+            </ul>
+        </div>
+        <div v-else>
+            <p>Connecting...</p>
+        </div>
+    </div>
+
+    <%- include('footer'); -%>
+
+</html>

views/footer.ejs

+</div>
+</main>
+
+<!-- Bootstrap Javascript -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+
+<!-- SocketIO -->
+<script src="https://cdn.socket.io/4.3.2/socket.io.min.js" integrity="sha384-KAZ4DtjNhLChOB/hxXuKqhMLYvx3b5MlT55xPEiNmREKRzeEm+RVPlTnAn0ajQNs" crossorigin="anonymous"></script>
+
+<!-- VueJS -->
+<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+
+<!-- Application Javascript -->
+<script src="/static/game.js"></script>
+</body>
+

views/header.ejs

+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+
+    <!-- Local CSS -->
+    <link href="/static/main.css" rel="stylesheet">
+
+    <title>ECS Example Game</title>
+</head>
+<body>
+
+    <main>
+        <div class="container">