First version of frontend express server and static web page extracte…

…d from fight-club.git.
GovTechSG · Apr 23, 2018 · c5560af · c5560af
1 parent 422cee4
commit c5560af
Show file tree

Hide file tree

Showing 13 changed files with 747 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.idea
+node_modules
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,18 @@
+FROM node:8
+
+WORKDIR /usr/src/app
+
+COPY . ${WORKDIR}
+
+# Express server packages
+RUN npm install --no-optional --production
+
+WORKDIR /usr/src/app/public
+
+# Frontend packages
+RUN npm install --no-optional --production
+
+WORKDIR /usr/src/app
+
+CMD node bin/www.js
+
diff --git a/README.md b/README.md
@@ -0,0 +1,24 @@
+#README
+This is the frontend web server (express) project for Fight Club.
+
+To run it:
+```
+npm install
+npm start
+```
+
+#Environment Variables
+This frontend is a User Interface for the Fight Club application. Environment variables are used to direct this UI to communicate with a specified Fight Club application server using the following env vars:
+- GAME_SERVER_HOST
+- GAME_SERVER_PROTOCOL
+- GAME_SERVER_PORT
+- GAME_SERVER_CONNECTION_METHOD
+Example
+```
+GAME_SERVER_HOST: url.to.my.host
+GAME_SERVER_PROTOCOL: http
+GAME_SERVER_PORT: 3000
+GAME_SERVER_CONNECTION_METHOD: poll
+```
+
+Tip: If you are running a container to host this express server, you can use the -e option to inject these environment variables.
diff --git a/public/css/main.css b/public/css/main.css
@@ -0,0 +1,3 @@
+body > .container {
+    padding-top: 60px;
+}
diff --git a/public/img/Blue_Bar.svg b/public/img/Blue_Bar.svg
diff --git a/public/img/Health_Bar_BG.svg b/public/img/Health_Bar_BG.svg
diff --git a/public/img/Red_Bar.svg b/public/img/Red_Bar.svg
diff --git a/public/js/polling.js b/public/js/polling.js
@@ -0,0 +1,95 @@
+(function() {
+
+    var connectionMethod = _.isNil(APP_PARAMS.GAME_SERVER_CONNECTION_METHOD) ? 'poll' : APP_PARAMS.GAME_SERVER_CONNECTION_METHOD;
+    if (connectionMethod !== 'poll') {
+        // Not socket method, return immediately
+        return;
+    }
+    console.log('Using polling method');
+
+    var update = function (data) {
+        $('#red_team').find('.progress-bar')
+            .css('width', +String(data.red_team.hp) + '%')
+            .attr('aria-valuenow', String(data.red_team.hp))
+            .attr('aria-valuemin', '0')
+            .attr('aria-valuemax', String(data.red_team.starting_hp))
+            .html(data.red_team.hp);
+        $('#blue_team').find('.progress-bar')
+            .css('width', +String(data.blue_team.hp) + '%')
+            .attr('aria-valuenow', String(data.blue_team.hp))
+            .attr('aria-valuemin', '0')
+            .attr('aria-valuemax', String(data.blue_team.starting_hp))
+            .html(data.blue_team.hp);
+
+        if (data.winner) {
+            $('#winner-title').html('Winner: ' + (data.winner === 'red_team' ? 'Red Team' : 'Blue Team'));
+            $('#winner').toggleClass('hidden', false);
+        } else {
+            $('#winner').toggleClass('hidden', true);
+            $('#winner-title').html('');
+        }
+    };
+
+    var serverProtocol = APP_PARAMS.GAME_SERVER_PROTOCOL;
+    var serverHost = APP_PARAMS.GAME_SERVER_HOST;
+    var serverPort = APP_PARAMS.GAME_SERVER_PORT;
+    var serverUrl = serverProtocol + '://' + serverHost + ":" + serverPort;
+
+    $(function () {
+
+        var poll = 0;
+
+        var loop = function () {
+            $.ajax(serverUrl + '/game', {
+                data: {poll: poll},
+                success: function (data) {
+                    update(data);
+                    poll = 1;
+                    setTimeout(loop, 1000);
+                },
+                error: function () {
+                    poll = 0;
+                    setTimeout(loop, 1000);
+                }
+            });
+        };
+
+
+        $('#reset_game').on('click', function () {
+            var $this = $(this);
+            var team = $this.data('team');
+
+            var data = new FormData();
+
+            $.ajax(serverUrl + '/game', {
+                method: 'POST',
+                data: data,
+                contentType: false,
+                processData: false,
+                success: update
+            })
+        });
+
+        loop();
+
+
+        $('#blue_team_hit, #red_team_hit').on('click', function () {
+            var $this = $(this);
+            var team = $this.data('team');
+
+            var data = new FormData();
+            data.append('team', team);
+
+            $.ajax(serverUrl + '/game/hit', {
+                method: 'POST',
+                data: data,
+                contentType: false,
+                processData: false,
+                success: update
+            })
+        });
+
+
+    });
+
+})();
diff --git a/public/js/sockets.js b/public/js/sockets.js
@@ -0,0 +1,110 @@
+(function() {
+console.log(APP_PARAMS);
+    var connectionMethod = _.isNil(APP_PARAMS.GAME_SERVER_CONNECTION_METHOD) ? 'poll' : APP_PARAMS.GAME_SERVER_CONNECTION_METHOD;
+    if (connectionMethod !== 'socket') {
+        // Not socket method, return immediately
+        return;
+    }
+    console.log('Using socket method');
+
+    let serverProtocol = APP_PARAMS.GAME_SERVER_PROTOCOL;
+    let serverHost = APP_PARAMS.GAME_SERVER_HOST;
+    let serverPort = APP_PARAMS.GAME_SERVER_PORT;
+    let serverUrl = serverProtocol + '://' + serverHost + ":" + serverPort;
+
+    let update = function (data) {
+
+        let blue_team_hp = _.get(data, ['blue_team', 'hp']);
+        let red_team_hp = _.get(data, ['red_team', 'hp']);
+        let blue_team_starting_hp = _.get(data, ['blue_team', 'starting_hp']);
+        let red_team_starting_hp = _.get(data, ['red_team', 'starting_hp']);
+
+
+        $('#blue_team_hp')
+            .css('width', _.toString(_.toInteger(blue_team_hp / blue_team_starting_hp * 100)) + '%')
+            .attr('aria-valuenow', _.toString(blue_team_hp))
+            .attr('aria-valuemin', _.toString(0))
+            .attr('aria-valuemax', _.toString(blue_team_starting_hp))
+            .html(_.toString(blue_team_hp) + ' / ' + _.toString(blue_team_starting_hp));
+
+        $('#blue_team_hp_fill')
+            .css('width', _.toString(_.toInteger((blue_team_starting_hp - blue_team_hp) / blue_team_starting_hp * 100)) + '%')
+            .attr('aria-valuenow', _.toString(blue_team_starting_hp - blue_team_hp))
+            .attr('aria-valuemin', _.toString(0))
+            .attr('aria-valuemax', _.toString(blue_team_starting_hp))
+            .html(_.toString(blue_team_starting_hp - blue_team_hp) + ' / ' + _.toString(blue_team_starting_hp));
+
+        $('#red_team_hp')
+            .css('width', _.toString(_.toInteger(red_team_hp / red_team_starting_hp * 100)) + '%')
+            .attr('aria-valuenow', _.toString(red_team_hp))
+            .attr('aria-valuemin', _.toString(0))
+            .attr('aria-valuemax', _.toString(red_team_starting_hp))
+            .html(_.toString(red_team_hp) + ' / ' + _.toString(red_team_starting_hp));
+
+        $('#red_team_hp_fill')
+            .css('width', _.toString(_.toInteger((red_team_starting_hp - red_team_hp) / red_team_starting_hp * 100)) + '%')
+            .attr('aria-valuenow', _.toString(red_team_starting_hp - red_team_hp))
+            .attr('aria-valuemin', _.toString(0))
+            .attr('aria-valuemax', _.toString(red_team_starting_hp))
+            .html(_.toString(red_team_starting_hp - red_team_hp) + ' / ' + _.toString(red_team_starting_hp));
+
+
+        $('#blue_team_hp_bar').css('width', _.toString(_.toInteger(blue_team_hp / blue_team_starting_hp * 32)) + '%');
+
+        $('#red_team_hp_bar').css('width', _.toString(_.toInteger(red_team_hp / red_team_starting_hp * 32)) + '%');
+
+
+        let $winner = $('#winner');
+        let $winnerTitle = $winner.find('h2');
+
+        if (data.winner) {
+            $winnerTitle.html('Winner: ' + (data.winner === 'red_team' ? 'Red Team' : 'Blue Team'));
+            $winner.toggleClass('hidden', false);
+        } else {
+            $winner.toggleClass('hidden', true);
+            $winnerTitle.html('');
+        }
+    };
+
+
+    $(function () {
+
+        var poll = 0;
+
+        var socket = io.connect({path: serverUrl + '/sockets'});
+
+
+        socket.on('update', update);
+
+        socket.emit('refresh');
+
+        socket.on('error', function (err) {
+            console.error(err);
+
+            let $error = $('#error');
+            let $errorText = $error.find('div.card');
+
+            $errorText.html(err.message);
+            $error.toggleClass('hidden', false);
+            setTimeout(function () {
+                $error.toggleClass('hidden', true);
+                $errorText.html('');
+            }, 5000);
+
+
+        });
+
+        $('#reset_game').on('click', function () {
+            socket.emit('newGame');
+        });
+
+        $('#blue_team_hit, #red_team_hit').on('click', function () {
+            let $this = $(this);
+            let team = $this.data('team');
+
+            socket.emit('hit', {team: team});
+        });
+
+
+    });
+})();