Add basic server response modules

.eslintrc.yml

@@ -263,7 +263,7 @@ rules:
   no-trailing-spaces: error
   no-undef: error
   no-undef-init: error
-  no-undefined: error
+  no-undefined: off
   no-underscore-dangle: error
   no-unexpected-multiline: error
   no-unmodified-loop-condition: error

README.md

@@ -12,6 +12,8 @@
 
 ## Overview
 
+**Status: currently in development.**
+
 This is the server-side and client-side applications for playing Junkyard Brawl in your favorite device's browser.
 The backend server is written in nodejs and the frontend is written with [Vue.js](https://vuejs.org/) and bundled with [webpack](https://webpack.js.org/).
 

client/.pug-lintrc.js

@@ -38,7 +38,10 @@ module.exports = {
   ],
   requireStrictEqualityOperators: true,
   validateAttributeQuoteMarks: '"',
-  validateAttributeSeparator: ', ',
+  validateAttributeSeparator: {
+    separator: ', ',
+    multiLineSeparator: ',\n  '
+  },
   validateDivTags: true,
   validateExtensions: true,
   validateIndentation: 2,

client/.stylelintrc.yml

@@ -22,7 +22,7 @@ rules:
   block-opening-brace-space-after: always-single-line
   block-opening-brace-space-before: always
   color-hex-case: lower
-  #color-hex-length: long
+  color-hex-length: null
   color-no-invalid-hex: true
   comment-empty-line-before: null
   comment-no-empty: true
@@ -135,11 +135,7 @@ rules:
   selector-pseudo-element-colon-notation: single
   selector-pseudo-element-no-unknown: true
   selector-type-case: lower
-  selector-type-no-unknown:
-    - true
-    - ignoreTypes:
-      - /^w(d|m|t)-/
-      - chart-trade-dropdown
+  selector-type-no-unknown: null
   shorthand-property-no-redundant-values: true
   string-no-newline: true
   unit-case: lower

client/package.json

@@ -47,6 +47,7 @@
     "webpack-dev-server": "^2.9.3"
   },
   "dependencies": {
+    "uikit": "^3.0.0-beta.40",
     "vue": "^2.4.2",
     "vue-router": "^2.7.0"
   }

client/src/components/game-info.js

@@ -0,0 +1,8 @@
+require('./game-info.scss')
+
+module.exports = require('vue').component('game-info', {
+  props: {
+    score: Number
+  },
+  template: require('./game-info.pug')()
+})

client/src/components/game-info.pug

@@ -0,0 +1,10 @@
+.game-info
+  div
+    span.label Time:
+    span.value 4:57
+  div
+    span.label Turns:
+    span.value 23
+  div
+    span.label Score:
+    span.value {{ score }}

client/src/components/game-info.scss

@@ -0,0 +1,19 @@
+.game-info {
+  border-bottom: 1px solid #555;
+  padding-bottom: 1em;
+  text-align: center;
+
+  > div {
+    display: inline-block;
+    width: 200px;
+
+    .label {
+      margin-right: 5px;
+    }
+
+    .value {
+      font-weight: bold;
+    }
+  }
+}
+

client/src/components/game-modal.js

@@ -0,0 +1,8 @@
+require('./game-modal.scss')
+
+module.exports = require('vue').component('game-modal', {
+  props: {
+    score: Number
+  },
+  template: require('./game-modal.pug')()
+})

client/src/components/game-modal.pug

@@ -0,0 +1,6 @@
+.game-modal
+  .overlay
+  .content
+    .title You won!
+    .score Score: {{ score }}
+    button.uk-button.uk-button-default(@click="newGame()", type="button") New game

client/src/components/game-modal.scss

@@ -0,0 +1,48 @@
+@import 'compass/css3/border-radius';
+@import 'compass/css3/box-shadow';
+@import 'variables';
+
+.game-modal {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  .overlay {
+    background-color: rgba(darken($color-background, 10%), 0.9);
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1;
+  }
+
+  .content {
+    background-color: rgba($color-background, 0.9);
+    bottom: 0;
+    height: 200px;
+    left: 0;
+    margin: auto;
+    padding: 1em;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: 0;
+    width: 400px;
+    z-index: 2;
+
+    @include border-radius(10px);
+    @include box-shadow(5px 5px 20px rgba(black, 0.8));
+
+    .title {
+      font-size: 1.8em;
+      padding: 0.5em;
+    }
+
+    .score {
+      padding: 0.5em;
+    }
+  }
+}

client/src/components/game.js

@@ -1,12 +1,23 @@
-// View model's "this
+// View model's "this"
 let vm = null
 // Websocket instance
 let ws = null
 
 module.exports = require('vue').component('game', {
   data,
   methods: {
-
+    addBot: function addBot() {
+      console.log('(local) adding bot!')
+      ws.send(JSON.stringify(['player:bot']))
+    },
+    start: function start() {
+      console.log('(local) starting game!')
+      ws.send(JSON.stringify(['game:start']))
+    },
+    stop: function stop() {
+      console.log('(local) stopping game!')
+      ws.send(JSON.stringify(['game:stop']))
+    }
   },
   mounted,
   template: require('./game.pug')()
@@ -15,6 +26,28 @@ module.exports = require('vue').component('game', {
 function data() {
   return {
     activityLog: [],
+    opponents: [
+      {
+        name: 'Kevin',
+        maxHp: 10,
+        hp: 10,
+        discard: [
+          {
+            id: 'grab',
+            type: 'counter'
+          },
+          {
+            type: 'unknown'
+          }
+        ]
+      },
+      {
+        name: 'Jimbo',
+        maxHp: 10,
+        hp: 12,
+        discard: []
+      }
+    ],
     player: {
       hand: [
         {
@@ -32,50 +65,48 @@ function data() {
           id: 'a-gun',
           name: 'A Gun',
           type: 'unstoppable'
-        },
-        {
-          type: 'unknown'
         }
       ],
       hp: 8,
       maxHp: 10
-    }
+    },
+    score: 12,
+    started: null,
+    stopped: null
   }
 }
 
 function mounted() {
   vm = this
-  ws = new WebSocket('ws://localhost:4000')
+  ws = new WebSocket(`ws://localhost:4000/${vm.$route.params.gameId}`)
   ws.onopen = onOpen
   ws.onmessage = onMessage
 }
 
 function onOpen() {
-  ws.send(JSON.stringify([
-    'player:join',
-    {
-      gameId: vm.$route.params.gameId,
-      player: {
-        name: 'Bob' + Math.floor(Math.random() * 1e3)
-      }
+  ws.send(JSON.stringify(['player:join', {
+    player: {
+      name: 'Bob' + Math.floor(Math.random() * 1e3)
     }
-  ]))
+  }]))
 }
 
 function onMessage({ data: msg }) {
-  const [code, message, payload] = JSON.parse(msg)
+  const [code, payload] = JSON.parse(msg)
   const codes = {
-    'player:joined': () => {
-      ws.send(JSON.stringify(['game:start']))
-    },
-    'player:status': () => {
-      console.log(vm)
-      vm.player.hand = payload.player.hand
-    }
+    'game:no-survivors': () => (vm.stopped = payload.stopped),
+    'game:started': () => (vm.started = payload.started),
+    'game:stopped': () => (vm.stopped = payload.stopped),
+    'game:winner': () => (vm.stopped = payload.stopped)
+  }
+
+  if (payload.player) {
+    vm.player.hand = payload.player.hand
   }
+
   if (codes[code]) {
     codes[code]()
   }
 
-  console.log(code, message, payload)
+  console.log(code, payload)
 }

client/src/components/game.pug

@@ -1,3 +1,10 @@
 div
-  p game page/component
+  game-modal(:score="score", v-if="stopped")
+  game-info(:score="score")
+  div(v-for="opponent in opponents")
+    p {{ opponent.name }}
+    opponent-discard(:discard="opponent.discard")
   player-hand(:hand="player.hand")
+  button(@click="start", type="button", v-if="!started") Start
+  button(@click="stop", type="button", v-if="started && !stopped") Stop
+  button(@click="addBot", type="button") Add bot

client/src/components/home.js

@@ -1,3 +1,11 @@
 module.exports = require('vue').component('home', {
+  methods: {
+    randomGameName
+  },
   template: require('./home.pug')()
 })
+
+// Guaranteed random
+function randomGameName() {
+  return '511fax'
+}

client/src/components/home.pug

@@ -1,3 +1,4 @@
 div
   p This is the main page (written in pug)
-  p Create a new game
+  router-link(:to="{ name: 'game', params: { gameId: randomGameName() }}")
+    button.uk-button.uk-button-default(type="button") Create a new game

client/src/components/opponent-card.js

@@ -0,0 +1,8 @@
+require('./opponent-card.scss')
+
+module.exports = require('vue').component('opponent-card', {
+  props: {
+    card: Object
+  },
+  template: require('./opponent-card.pug')()
+})

client/src/components/opponent-card.pug

@@ -0,0 +1,5 @@
+.opponent-card(:class="{ flipped: card.name }")
+  .back
+  .front
+    p {{ card.name }}
+    p {{ card.type.toUpperCase() }}

client/src/components/opponent-card.scss

@@ -0,0 +1,57 @@
+@import 'compass/css3/transform';
+@import 'compass/css3/transition';
+@import 'variables';
+
+.opponent-card {
+  display: inline-block;
+  height: 150px;
+  margin: 1em 2em;
+  position: relative;
+  width: 100px;
+
+  @include transition(opacity 0.5s);
+
+  .front, .back {
+    background-color: $color-card-background;
+    border-radius: 5px;
+    bottom: 0;
+    color: $color-text-dark;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+
+    @include backface-visibility(hidden);
+    @include transform(translateZ(0));
+    @include transition(transform 0.6s);
+    @include transform-style(preserve-3d);
+  }
+
+
+  .back {
+    background-image: url('../img/card_backside.jpg');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    font-size: 12px;
+  }
+
+  .front {
+    @include transform(rotateY(-180deg));
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 90%;
+  }
+
+  &.flipped {
+    .back {
+      @include transform(rotateY(180deg));
+    }
+
+    .front {
+      @include transform(rotateY(0deg));
+    }
+  }
+}