First version

.formatter.exs

@@ -0,0 +1,5 @@
+[
+  import_deps: [:ecto, :phoenix],
+  inputs: ["*.{ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{ex,exs}"],
+  subdirectories: ["priv/*/migrations"]
+]

.gitignore

@@ -0,0 +1,42 @@
+# The directory Mix will write compiled artifacts to.
+/_build/
+
+# If you run "mix test --cover", coverage assets end up here.
+/cover/
+
+# The directory Mix downloads your dependencies sources to.
+/deps/
+
+# Where 3rd-party dependencies like ExDoc output generated docs.
+/doc/
+
+# Ignore .fetch files in case you like to edit your project deps locally.
+/.fetch
+
+# If the VM crashes, it generates a dump, let's ignore it too.
+erl_crash.dump
+
+# Also ignore archive artifacts (built via "mix archive.build").
+*.ez
+
+# Ignore package tarball (built via "mix hex.build").
+pong-*.tar
+
+# If NPM crashes, it generates a log, let's ignore it too.
+npm-debug.log
+
+# The directory NPM downloads your dependencies sources to.
+/assets/node_modules/
+
+# Since we are building assets from assets/,
+# we ignore priv/static. You may want to comment
+# this depending on your deployment strategy.
+/priv/static/
+
+# Files matching config/*.secret.exs pattern contain sensitive
+# data and you should not commit them into version control.
+#
+# Alternatively, you may comment the line below and commit the
+# secrets files as long as you replace their contents by environment
+# variables.
+/config/*.secret.exs

README.md

@@ -0,0 +1,20 @@
+# Pong
+
+To start your Phoenix server:
+
+  * Install dependencies with `mix deps.get`
+  * Create and migrate your database with `mix ecto.setup`
+  * Install Node.js dependencies with `cd assets && npm install`
+  * Start Phoenix endpoint with `mix phx.server`
+
+Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
+
+Ready to run in production? Please [check our deployment guides](https://hexdocs.pm/phoenix/deployment.html).
+
+## Learn more
+
+  * Official website: http://www.phoenixframework.org/
+  * Guides: https://hexdocs.pm/phoenix/overview.html
+  * Docs: https://hexdocs.pm/phoenix
+  * Mailing list: http://groups.google.com/group/phoenix-talk
+  * Source: https://github.com/phoenixframework/phoenix

assets/.babelrc

@@ -0,0 +1,5 @@
+{
+    "presets": [
+        "@babel/preset-env"
+    ]
+}

assets/css/app.css

@@ -0,0 +1,114 @@
+/* This file is for your main application css. */
+
+@import "./reset.css";
+
+html {
+  background: #111;
+  text-align: center;
+  overflow: hidden;
+  color: white;
+  padding: 10px;
+}
+
+body {
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Roboto;
+}
+
+.info-row {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.button {
+  height: 60px;
+  width: 60px;
+  background: none;
+  color: white;
+  border-radius: 30px;
+  border: 1px white solid;
+  cursor: pointer;
+}
+
+.button:focus {
+  outline: none;
+}
+
+.button:hover {
+  background-color: white;
+  color: black;
+}
+
+.board-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: stretch;
+}
+
+.bar {
+  display: flex;
+  width: 20px;
+  margin: 2px -2px;
+  background-color: transparent;
+}
+
+.bar.left {
+  border-radius: 10px 0 0 10px;
+}
+
+.bar.right {
+  border-radius: 0 10px 10px 0;
+}
+
+.fadebar {
+  animation: barfadein .4s;
+}
+
+.map {
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  display: flex;
+}
+
+.cell {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  margin: 2px;
+}
+
+.filled {
+  border: 2px solid white;
+}
+
+.empty {
+  animation: fadein .4s;
+}
+
+.label {
+  margin-bottom: 10px;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+@-webkit-keyframes fadein {
+  from { border-color: white; }
+  to { border-color: rgba(255, 255, 255, 0.5); }
+}
+
+@-webkit-keyframes barfadein {
+  from { background-color: white; }
+  to { background-color: transparent; }
+}

assets/css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

assets/js/Game.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="game">
+    <div class='board-container'>
+      <div class='bar left' v-bind:class="{ fadebar: !ball_hits_left }"></div>
+      <div class='map'>
+        <div class='row' v-for="y in store.state.game.size_y">
+          <span class='cell' v-for="x in store.state.game.size_x" v-bind:class="something_at(x, y) ? 'filled' : 'empty'"></span>
+        </div>
+      </div>
+      <div class='bar right' v-bind:class="{ fadebar: !ball_hits_right }"></div>
+    </div>
+
+    <div class="info-row">
+      <div v-if="store.state.game.player_1">
+        <div class='label bold'>PLAYER 1</div>
+        <div class='label'>{{store.state.game.player_1.score}}</div>
+      </div>
+
+      <button class='button' v-on:click="channel.push('reset')">
+        NEW GAME
+      </button>
+
+      <div v-if="store.state.game.player_2">
+        <div class='label bold'>PLAYER 2</div>
+        <div class='label'>{{store.state.game.player_2.score}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['store', 'channel'],
+
+    computed: {
+      ball_hits_left: function () {
+        const ball = this.$props.store.state.game.ball
+        if (!ball) return false
+        return ball.center.x <= 1
+      },
+
+      ball_hits_right: function () {
+        const ball = this.$props.store.state.game.ball
+        if (!ball) return false
+        return ball.center.x >= this.$props.store.state.game.size_x
+      }
+    },
+
+    methods: {
+      something_at: function (x, y) {
+        const filledPositions = this.$props.store.getters.filledPositions
+
+        if (filledPositions[x] && filledPositions[x][y]) {
+          return true
+        }
+        return false
+      }
+    }
+  };
+</script>