Decouple client and server

Remove .env from server build

Remove whitespace

Change bg color of walls

Add a few null checks

Fix key warning

Dockerfile

@@ -1,12 +1,3 @@
-# Build and minify React client
-FROM node:carbon AS client
-WORKDIR /
-WORKDIR /client
-ADD client/package.json .
-RUN npm install
-ADD client .
-RUN npm run build
-
 # Build server
 FROM golang:alpine AS server
 WORKDIR /app
@@ -21,11 +12,7 @@ RUN go build -o server; cp server /app
 # Copy build to final stage
 FROM alpine
 RUN apk add --update --no-cache ca-certificates
-WORKDIR /app/build
-COPY --from=client /client/public/ .
 WORKDIR /app
-# ENV dependencies
-ADD .env .
 COPY server/service-account.json .
 COPY --from=server /app/server .
 

Makefile

@@ -5,12 +5,31 @@ deps:
 	(cd server ; go get -u github.com/golang/dep/cmd/dep ; dep ensure)
 	(cd client ; npm install )
 
-# Starts the client
+# Build and minify client
+.PHONY: bundle
+bundle:
+	(cd ./client ; npm run build)
+
+# Build and run Bumper in daemon mode
+.PHONY: bumper
+DATABASE_URL=https://bumperdevdb.firebaseio.com
+SERVER_PORT=9090
+bumper:
+	docker stop bumper 2>&1 || true
+	docker build -t bumper .
+	docker run -d --rm \
+		--name bumper \
+		-e DATABASE_URL=$(DATABASE_URL) \
+		-e PORT=$(SERVER_PORT) \
+		-p 9090:$(SERVER_PORT) \
+		bumper
+
+# Starts the client (dev server on port 8080)
 .PHONY: client
 client:
 	(cd ./client ; npm start)
 
 # Starts the server (exposed on port 9090)
 .PHONY: server
 server:
-	(cd ./server ; PORT=8081 ; gin -p 9090 -a 8081 -i run main.go)
+	(cd ./server ; DATABASE_URL=$(DATABASE_URL) PORT=8081 gin -p $(SERVER_PORT) -a 8081 -i run main.go)

client/App.js

@@ -11,7 +11,6 @@ import {
   registerTesterUpdateEvent,
 } from './database/database';
 
-
 const address = process.env.NODE_ENV === 'production'
   ? 'bumper.ubclaunchpad.com'
   : 'localhost:9090';

client/components/GameObjects.js

@@ -45,6 +45,13 @@ export function drawGame(data, canvas) {
 
     // Create a new object arrays with the positions translated.
     const junk = data.junk.map((j) => {
+      if (!j.position) {
+        return {
+          position: { x: 0, y: 0 },
+          color: 'black',
+        };
+      }
+
       const newPosition = {
         x: j.position.x + objectXTranslation,
         y: j.position.y + objectYTranslation,
@@ -56,6 +63,14 @@ export function drawGame(data, canvas) {
     });
 
     const holes = data.holes.map((h) => {
+      if (!h.position) {
+        return {
+          position: { x: 0, y: 0 },
+          radius: 0,
+          isAlive: false,
+        };
+      }
+
       const newPosition = {
         x: h.position.x + objectXTranslation,
         y: h.position.y + objectYTranslation,
@@ -68,6 +83,14 @@ export function drawGame(data, canvas) {
     });
 
     const players = data.players.map((p) => {
+      if (!p.position) {
+        return {
+          position: { x: 0, y: 0 },
+          color: 'black',
+          angle: 0,
+        };
+      }
+
       if (p.name !== '' && p.id !== data.player.id) {
         const newPosition = {
           x: p.position.x + objectXTranslation,
@@ -255,28 +278,28 @@ export function drawWalls(player, arena, canvas) {
     if (player.position.x < (canvas.width / 2)) {
       ctx.beginPath();
       ctx.rect(0, 0, 10, arena.height);
-      ctx.fillStyle = 'yellow';
+      ctx.fillStyle = 'grey';
       ctx.fill();
       ctx.closePath();
     }
     if (player.position.x > arena.width - (canvas.width / 2)) {
       ctx.beginPath();
       ctx.rect(canvas.width - 10, 0, 10, arena.height);
-      ctx.fillStyle = 'yellow';
+      ctx.fillStyle = 'grey';
       ctx.fill();
       ctx.closePath();
     }
     if (player.position.y < (canvas.height / 2)) {
       ctx.beginPath();
       ctx.rect(0, 0, arena.width, 10);
-      ctx.fillStyle = 'yellow';
+      ctx.fillStyle = 'grey';
       ctx.fill();
       ctx.closePath();
     }
     if (player.position.y > arena.height - (canvas.height / 2)) {
       ctx.beginPath();
       ctx.rect(0, canvas.height - 10, arena.width, 10);
-      ctx.fillStyle = 'yellow';
+      ctx.fillStyle = 'grey';
       ctx.fill();
       ctx.closePath();
     }

client/components/Leaderboard.js

@@ -22,7 +22,7 @@ export default class Leaderboard extends React.Component {
             {
               this.props.players.map(p => (
                 p.name &&
-                <tr>
+                <tr key={p.name}>
                   <td><Flag code={p.country} height={20} /></td>
                   <td>{p.name}</td>
                   <td>{p.points}</td>

client/index.js

@@ -5,5 +5,4 @@ import ReactDOM from 'react-dom';
 
 import App from './App';
 
-console.log(process.env.NODE_ENV);
 ReactDOM.render(<App />, document.getElementById('app'));

server/main.go

@@ -7,26 +7,15 @@ import (
 	"os"
 	"time"
 
-	"github.com/joho/godotenv"
 	"github.com/ubclaunchpad/bumper/server/arena"
 	"github.com/ubclaunchpad/bumper/server/database"
 	"github.com/ubclaunchpad/bumper/server/game"
 	"github.com/ubclaunchpad/bumper/server/models"
 )
 
 func main() {
-	if err := godotenv.Load("../.env"); err != nil {
-		log.Println("Error loading environment variables from parent directory")
-		log.Print("Try current directory... ")
-
-		if err := godotenv.Load(); err != nil {
-			log.Println("Cannot load environment variables")
-		} else {
-			log.Println("Success")
-		}
-	}
-
 	rand.Seed(time.Now().UTC().UnixNano())
+
 	arena.MessageChannel = make(chan models.Message)
 	game := game.CreateGame()
 
@@ -35,11 +24,9 @@ func main() {
 		log.Println("DBClient not initialized correctly")
 	}
 
-	http.Handle("/", http.FileServer(http.Dir("./build")))
 	http.Handle("/connect", game)
 	game.StartGame()
 
-	log.Println("Server URL: " + os.Getenv("SERVER_URL"))
 	log.Println("Starting server on localhost:" + os.Getenv("PORT"))
 	log.Println(http.ListenAndServe(":"+os.Getenv("PORT"), nil))
 }