ACTUALLY WORKING

.jsbeautifyrc

@@ -0,0 +1 @@
+{"beautify.language": { "html": ["htm","html","html-eex","eex"]}}

apps/bwc/lib/bwc.ex

@@ -3,26 +3,55 @@ defmodule Bwc do
   The core module for the Blank White Cards game.
   """
 
-  alias Bwc.{Repo, Card}
+  alias Bwc.{Repo, Card, Player}
 
   @repo Repo
 
-  @doc """
+  def new_player, do: Player.changeset(%Player{})
-  List all cards.
+
-  """
+  def create_player(attrs), do: Player.changeset(%Player{}, attrs) |> @repo.insert()
+
+  def delete_player(nil), do: {:error, "Player does not exist"}
+  def delete_player(%Player{} = player), do: player |> @repo.delete
+
+
+  def reset, do: Bwc.list_players |> Enum.each(fn(p) -> Bwc.delete_player(p) end)
+
+  def change_name({old_username, new_username}) do
+    {:ok, old_player} = old_username |> Bwc.get_or_create_player
+    old_player |> Player.changeset(%{username: new_username}) |> @repo.update()
+  end
+
+  def list_players, do: @repo.all(Player) |> Enum.filter(fn(p) -> p.username != "Nobody" end)
+
+  def get_player(id), do: @repo.get!(Player, id)
+
+  def get_player_by_username(username), do: get_player_by(%{username: username})
+
+  def get_player_by(params), do: @repo.get_by(Player, params)
+
+  def get_or_create_player(username) do
+    case get_player_by(%{username: username}) do
+      %Player{} = player ->
+        {:ok, player}
+      _ ->
+        create_player(%{username: username})
+    end
+  end
+
   def list_cards, do: @repo.all(Card)
 
   def get_card(id), do: @repo.get!(Card, id)
 
   def get_card_by(attrs), do: @repo.get_by(Card, attrs)
 
-  def create_card(attrs), do: Card.changeset(%Card{},attrs) |> @repo.insert()
+  def create_card(attrs), do: Card.changeset(%Card{}, attrs) |> @repo.insert()
 
   def new_card, do: Card.changeset(%Card{})
 
-  def size, do: Bwc.list_cards |> length
+  def size, do: Bwc.list_cards() |> length
 
-  def draw_card, do: Bwc.list_cards |> Enum.random
+  def draw_card, do: Bwc.list_cards() |> Enum.random()
   def draw, do: draw_card()
 
   def delete_card(%Bwc.Card{} = card), do: @repo.delete(card)
@@ -33,5 +62,4 @@ defmodule Bwc do
     |> Card.changeset(updates)
     |> @repo.update
   end
-
 end

apps/bwc/lib/bwc/application.ex

@@ -10,7 +10,8 @@ defmodule Bwc.Application do
     children = [
       # Starts a worker by calling: Bwc.Worker.start_link(arg)
       # {Bwc.Worker, arg}
-      {Bwc.Repo, []}
+      {Bwc.Repo, []},
+      {Phoenix.PubSub, [name: Bwc.PubSub, adapter: Phoenix.PubSub.PG2]}
     ]
 
     # See https://hexdocs.pm/elixir/Supervisor.html

apps/bwc/lib/bwc/player.ex

@@ -0,0 +1,18 @@
+defmodule Bwc.Player do
+  use Ecto.Schema
+  import Ecto.Changeset
+
+  schema "players" do
+    field :username, :string
+    field :picture, :string
+  end
+
+  def changeset(player, attrs \\ %{}) do
+    player
+    |> cast(attrs, [:username, :picture])
+    |> validate_required(:username)
+    |> unique_constraint(:username)
+    |> validate_length(:username, min: 3, max: 20)
+  end
+
+end

apps/bwc/priv/repo/migrations/20201229053338_create_players.exs

@@ -0,0 +1,10 @@
+defmodule Bwc.Repo.Migrations.CreatePlayers do
+  use Ecto.Migration
+
+  def change do
+    create table "players" do
+      add :username, :string
+      add :picture, :string
+    end
+  end
+end

apps/bwc/priv/repo/migrations/20201229062629_add_unique_usernames.exs

@@ -0,0 +1,7 @@
+defmodule Bwc.Repo.Migrations.AddUniqueUsernames do
+  use Ecto.Migration
+
+  def change do
+    create unique_index(:players, [:username])
+  end
+end

apps/bwc_web/assets/css/app.scss

@@ -1,5 +1,7 @@
 /* This file is for your main application css. */
 @import "./phoenix.css";
+@import "./bwc.css";
+@import "./uikit.min.css";
 
 /* Alerts and form errors */
 .alert  {

apps/bwc_web/assets/css/bwc.css

@@ -1,8 +1,19 @@
 html{
+    font-family:ProximaNova,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif
+}
+.bwc-logo{
+    width:550px;
+}
+#top-bar{
+border-bottom: 2px solid gainsboro;
+
 }
 
-#play_mode{
+#top-bar-login-box{display:none; width: 100px;margin:0px;border:1px solid gray !important; background-image:"" !important}
-    display:none;
+#top-bar-username{width:200px;font-size:15px}
+
+.uk-subnav-pill > * > :first-child{
+    padding: 0px 50px !important;
 }
 
 li.message{
@@ -97,6 +108,13 @@ div#chat{
     font-weight:default;
 }
 
+.delete-tool{
+    float:right;
+    position:relative;
+    right:40px;
+    top:20px;
+}
+
 .card-template{
     flex-direction: column;
     width: min-content;
@@ -104,6 +122,13 @@ div#chat{
     box-shadow:    0 5px 15px rgba(0,0,0,0.08);
 }
 
+.card-preview{
+    flex-direction: column;
+    width: 250px;
+    min-height:300px;
+    margin:1rem;
+    box-shadow:    0 5px 15px rgba(0,0,0,0.08);
+}
 .card-title{
     margin-top:0px;
 }
@@ -135,7 +160,11 @@ div.card-content{
 .card-content{
     font-size: 24px;
     text-align:left;
-    margin: 2em;
+    margin: 1.5em;
+}
+
+.card-preview > .card-content {
+    font-size: 16px;
 }
 
 .card-content-box{
@@ -149,22 +178,29 @@ div.card-content{
 }
 
 #submitCard{
-    background: #393;
+    padding: 0px 10px !important;
-    display:none;
+    color:white;
+    background: #06D6A0;
+    width: 100px;
     top:3px;position:relative;
+    margin-bottom:0px;
 }
 #submitCard:hover{
-    background: #3c3;
+    background: #05B384;
 }
 
 #newCard{
-    background: #e5e5e5;
+    padding: 0px 10px !important;
-    color:#5e5e5e;
+    width: 100px;
+    color:rgb(107, 58, 2);
+    background: #fff9eb;
+    top:3px;position:relative;
+    margin-bottom:0px;
+}
+#newCard:hover{
+    background: #ffedc2;
 }
 
-#newCard:hover{
-    background:#f9f9f9;
-}
 
 
 .image-tools{
@@ -190,6 +226,7 @@ input#giphySearch{
 
 .search-result{
     margin: 10px;
+    max-width: 200px;
 }
 
 .uploader:hover{
@@ -215,9 +252,6 @@ input#giphySearch{
     text-decoration: underline;
 }
 
-span#current-player-turn{
-    
-}
 .meta-turn{
     color: #1e87f0 !important;
     font-weight:bold;
@@ -325,10 +359,6 @@ b.currentPlayer{
     display:none;
 }
 
-#card-view{
-    display:none;
-}
-
 img.player{
     width:100px;height:100px;
     object-fit: cover;
@@ -347,9 +377,6 @@ img.player{
     content:"";
 }
 
-.change-profile{
-
-}
 
 .change-profile:hover{
     color: #0f6ecd;

apps/bwc_web/assets/js/app.js

@@ -12,4 +12,17 @@ import "../css/app.scss"
 //     import {Socket} from "phoenix"
 //     import socket from "./socket"
 //
-import "phoenix_html"
+import "phoenix_html";
+import "jquery";
+import $ from 'jquery';
+window.jQuery = $;
+window.$ = $;
+
+import UIkit from 'uikit';
+import Icons from 'uikit/dist/js/uikit-icons';
+
+// loads the Icon plugin
+UIkit.use(Icons);
+
+
+import "./bwc.js";

apps/bwc_web/assets/js/bwc.js

@@ -0,0 +1,120 @@
+import $ from 'jquery';
+import UIkit from 'uikit';
+window.jQuery = $;
+window.$ = $;
+window.UIkit = UIkit;
+
+window.show_login_box = () => {
+
+    $("#top-bar-username a").hide();
+    $("#top-bar-login-box").val($("#top-bar-username a").text().trim()).show().focus();
+
+}
+
+window.hide_login_box = () => {
+
+    $("#top-bar-username a").show();
+    $("#top-bar-login-box").hide()
+
+}
+
+
+
+$('#top-bar-login-box').on('keyup keypress', function(e) {
+	var keyCode = e.keyCode || e.which;
+	if (keyCode === 13) {
+	    e.preventDefault();
+	    return false;
+	}
+    });
+
+
+$("#top-bar-login-box").keyup(function(e) {
+    if (e.keyCode == "13") {
+        login();
+    }
+});
+
+window.login = () => {
+    var CSRF_TOKEN = $("input[name=_csrf_token]").val();
+    var username = $("#top-bar-login-box").val().trim();
+    $.ajax({
+        url: "/api/join",
+        method: 'POST',
+        beforeSend: function(xhr) {
+            xhr.setRequestHeader("X-CSRF-Token", CSRF_TOKEN);
+        },
+        data: {
+            username: username,
+            old_username: $("#top-bar-username a").text().trim()
+        }
+    }).done(function(response) {
+        console.log(response);
+        UIkit.notification(response['data']);
+        hide_login_box();        
+        $("#top-bar-username a").text(response['username']);        
+    });
+}
+
+window.deleteCard = (id) => {
+    var CSRF_TOKEN = $("input[name=_csrf_token]").val();
+    $.ajax({
+        url: "/api/cards/" + id,
+        method: 'DELETE',
+        beforeSend: function(xhr) {
+            xhr.setRequestHeader("X-CSRF-Token", CSRF_TOKEN);
+        }
+    }).done(function(response) {
+        UIkit.notification(response['data']);
+        $("div#card-" + response['card']).remove();
+    });
+}
+
+window.chooseGiphy = (url) => {
+	$("img.card-picture").attr("src", url);
+	$("input#card_picture").val(url);
+    $(".uk-close").click();
+}
+window.giphySearch = () => {
+    var query = $("#giphySearch").val().trim().replace(/ /g, "+");
+    const api_url = "https://api.giphy.com/v1/gifs/search?api_key=GUHvLYHRcNgPAIKt4PNZcjYw5FBeBX0F&q=" + query + "&limit=25&offset=0&rating=R&lang=en";
+    $.ajax({
+        url: api_url,
+        method: 'GET'
+    }).done(function(response) {
+
+        // This is the API response data. It's a JSON object of 25 gifs
+        console.log(response.data);
+        $("#giphySearchResults").html("");
+        response.data.forEach(function(i) {
+            var giphyURL = i.images.fixed_height.url;
+            $("#giphySearchResults").append(
+                "<a href='javascript:chooseGiphy(" +
+                '"' +
+                giphyURL +
+                '"' +
+                ");'><img class='search-result' src='" + giphyURL + "'/></a>"
+            );
+        });
+
+    });
+};
+
+$("#giphySearch").keyup(function(e) {
+    if (e.keyCode == "13") {
+        giphySearch();
+    }
+});
+
+$("#giphySearchButton").click(function(e) {
+    giphySearch();
+});
+
+
+$('#imageModalContent').on('keyup keypress', function(e) {
+	var keyCode = e.keyCode || e.which;
+	if (keyCode === 13) {
+	    e.preventDefault();
+	    return false;
+	}
+    });

apps/bwc_web/assets/package-lock.json

@@ -1001,12 +1001,28 @@
       "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
       "dev": true
     },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
+      "dev": true
+    },
     "@types/q": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
       "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==",
       "dev": true
     },
+    "@types/react": {
+      "version": "16.14.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.2.tgz",
+      "integrity": "sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.8.5",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@@ -2681,6 +2697,12 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
+      "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==",
+      "dev": true
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -4379,6 +4401,12 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
+      "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==",
+      "dev": true
+    },
     "js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -4559,6 +4587,15 @@
       "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
       "dev": true
     },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
     "loud-rejection": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
@@ -6077,6 +6114,17 @@
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
       "dev": true
     },
+    "prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -6209,6 +6257,23 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "react": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -7444,6 +7509,22 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "uikit": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/uikit/-/uikit-3.6.5.tgz",
+      "integrity": "sha512-ChsoZBuCC4y0CXqJ51tiIPS4zcKgj8yvXDl8njRyMBLCjNRFlHgSjem2T6pQsEEItoN+Vh7NE3iueD70A4LW4A==",
+      "dev": true
+    },
+    "uikit-icons": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/uikit-icons/-/uikit-icons-0.5.0.tgz",
+      "integrity": "sha512-KOXrEp6pKp6i9GvVdsi0P0dVOxd0QddCsvWcMTezyiHe44X6V2Uwj1mU5WX5bs6balVbxSKULkXlRRngYh0DrA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "^16.9.11",
+        "react": "^16.11.0"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",

apps/bwc_web/assets/package.json

@@ -16,12 +16,15 @@
     "babel-loader": "^8.0.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.4.2",
-    "sass-loader": "^8.0.2",
-    "node-sass": "^4.13.1",
     "hard-source-webpack-plugin": "^0.13.1",
+    "jquery": "^3.5.1",
     "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.1",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "sass-loader": "^8.0.2",
     "terser-webpack-plugin": "^2.3.2",
+    "uikit": "^3.6.5",
+    "uikit-icons": "^0.5.0",
     "webpack": "4.41.5",
     "webpack-cli": "^3.3.2"
   }

apps/bwc_web/lib/bwc_web/controllers/card_controller.ex

@@ -13,8 +13,22 @@ defmodule BwcWeb.CardController do
   end
 
   def create(conn,card_params) do
-      {:ok, card} = Bwc.create_card(Map.get(card_params,"card"))
+      case Bwc.create_card(Map.get(card_params,"card")) do
-      redirect(conn, to: Routes.card_path(conn, :show, card))
+        {:ok, card} -> redirect(conn, to: Routes.card_path(conn, :show, card))
+        {:error, card} -> render(conn, "new.html", card: card)
+      end
+
+  end
+
+  def delete(conn, params) do
+    id = Map.get(params, "id")
+    {:ok, card} = Bwc.delete_card(Bwc.get_card(id))
+    render(conn, "delete.json", card: card)
+  end
+
+  def index(conn, _params) do
+    cards = Bwc.list_cards()
+    render(conn, "index.html", cards: cards)
   end
 
 end

apps/bwc_web/lib/bwc_web/controllers/page_controller.ex

@@ -3,7 +3,8 @@ defmodule BwcWeb.PageController do
 
   def index(conn, _params) do
     cards = Bwc.list_cards()
+    players = Bwc.list_players()
     status = "The game has not yet started."
-    render(conn, "game.html", cards: cards, status: status)
+    render(conn, "game.html", cards: cards, status: status, players: players)
   end
 end

apps/bwc_web/lib/bwc_web/controllers/session_controller.ex

@@ -0,0 +1,58 @@
+defmodule BwcWeb.SessionController do
+  use BwcWeb, :controller
+
+  def update(conn, params) do
+    cards = Bwc.list_cards()
+    player = Map.get(params, "player")
+    new_username = Map.get(player, "username")
+    old_username = Map.get(player, "old_username")
+    case {old_username, new_username} |> Bwc.change_name() do
+      {:ok, player} ->
+        conn
+        |> put_session(:username, player.username)
+        |> put_flash(:info, "You are now known as '#{player.username}'.")
+        |>  redirect(to: Routes.card_path(conn, :index, cards))
+      {:error, player} ->
+        conn |> render("new.html", player: player, method: :update)
+    end
+  end
+
+  def new(conn, _params) do
+    player = Bwc.new_player()
+    method = cond do
+      conn |> get_session(:username) == "Nobody" ->
+        :create
+      true ->
+        :update
+    end
+    render(conn, "new.html", player: player, method: method)
+  end
+
+  def set_name(conn, params) do
+    import Logger
+    new_username = Map.get(params, "username")
+    old_username = Map.get(params, "old_username")
+    case {old_username, new_username} |> Bwc.change_name() do
+      {:ok, player} ->
+        conn |> put_session(:username, player.username) |> render("set_name.json", username: player.username)
+
+      {:error, username} ->
+        conn |> render("error.json", username: username)
+    end
+  end
+
+  def create(conn, %{"player" => %{"username" => username, "picture" => picture}}) do
+    cards = Bwc.list_cards()
+
+    case Bwc.get_or_create_player(username) do
+      {:ok, player} ->
+        conn
+        |> put_session(:username, username)
+        |> put_flash(:info, "Welcome to the game, #{player.username}.")
+        |> redirect(to: Routes.card_path(conn, :index, cards))
+
+      {:error, player} ->
+        conn |> put_flash(:error, "Something's wrong.") |> render("new.html", player: player)
+    end
+  end
+end

apps/bwc_web/lib/bwc_web/roster.ex

@@ -0,0 +1,19 @@
+defmodule BwcWeb.Roster do
+  import Plug.Conn
+
+  def init(opts), do: opts
+
+  def call(conn, _opts) do
+    import Logger
+
+    {:ok, player} =
+      conn
+      |> get_session(:username)
+      |> case do
+        nil -> {:ok, "Nobody"}
+        username -> Bwc.get_or_create_player(username)
+      end
+    Logger.debug(player)
+    assign(conn, :current_player, player)
+  end
+end

apps/bwc_web/lib/bwc_web/router.ex

@@ -7,26 +7,39 @@ defmodule BwcWeb.Router do
     plug :fetch_flash
     plug :protect_from_forgery
     plug :put_secure_browser_headers
+    plug BwcWeb.Roster
   end
 
   pipeline :api do
     plug :accepts, ["json"]
+    plug :fetch_session
   end
 
   scope "/", BwcWeb do
     pipe_through :browser
 
     get "/", PageController, :index
+
+    get "/join", SessionController, :new
+    post "/join", SessionController, :create
+    post "/rename", SessionController, :update
+    put "/rename", SessionController, :update
+    get "/leave", SessionController, :delete
+
     get "/create", CardController, :new
 
-    resources "/cards", CardController, only: [:show, :new, :create]
+    resources "/cards", CardController, only: [:show, :new, :create, :index]
 
   end
 
-  # Other scopes may use custom stacks.
+  scope "/api", BwcWeb do
-  # scope "/api", BwcWeb do
+    pipe_through :api
-  #   pipe_through :api
+
-  # end
+    resources "/cards", CardController, only: [:delete]
+
+    post "/join", SessionController, :set_name
+
+  end
 
   # Enables LiveDashboard only for development
   #

apps/bwc_web/lib/bwc_web/templates/card/index.html.eex

@@ -0,0 +1,45 @@
+<div class="uk-text-center uk-container uk-flex uk-flex-center uk-margin-top uk-flex-column">
+<h1>All Cards</h1>
+<hr/>
+
+<div class="uk-flex  uk-flex-wrap uk-flex-center">
+    <input type="hidden" value="<%= Phoenix.Controller.get_csrf_token() %>" name="_csrf_token"/>
+
+<%= if Enum.empty? @cards do %>
+<div class="create">
+            There are no cards.<br/>
+            What are you waiting for?
+            <a href="/create">
+                Create a card!
+            </a>
+        </div>
+<% end %>
+
+<%= for card <- @cards do %>
+
+<div class="uk-flex uk-text-center" id="card-<%=card.id%>">
+  <div class="card-preview uk-panel uk-panel-box uk-panel-box-secondary uk-padding uk-flex">
+    <h3 class="card-title uk-text-xlarge uk-margin-large-bottom"><%= card.title %> </h3>
+    <div class="card-picture uk-flex uk-flex-center">
+      <img class="card-picture" src="<%=card.picture%>" />
+    </div>
+    <div class="card-content uk-flex uk-flex-center">
+      <%=card.description          %>
+    </div>
+  </div>
+<a class="delete-tool" uk-icon="icon: trash; ratio:1" uk-tooltip="title: Delete" href="javascript:deleteCard(<%=card.id %>)"></a>
+</div>
+
+
+<% end %>
+
+
+</div>
+     <div class="create uk-margin-top">
+
+   <hr />
+               What are you waiting for?
+            <a href="/create">
+                Create more cards!
+            </a>
+        </div>

apps/bwc_web/lib/bwc_web/templates/card/new.html.eex

@@ -1,12 +1,46 @@
-<h1>New Card</h1>
+<div class="new-card card-template uk-panel uk-panel-box uk-panel-box-secondary uk-padding uk-flex">
-<%= form_for @card, Routes.card_path(@conn, :create), fn f -> %>
+    <%= form_for @card, Routes.card_path(@conn, :create), fn f -> %>
-<%= label f, :title %>
+    <%= text_input f, :title, class: "card-title uk-text-xlarge uk-margin-large-bottom" %>
-<%= text_input f, :title %>
+    <%= error_tag f, :title %>
-<%= label f, :picture %>
+    <div class="card-picture uk-flex uk-flex-center uk-inline">
-<%= text_input f, :picture %>
+        <%= text_input f, :picture, class: "uk-hidden" %>
-<%= label f, :description %>
+        <img class="card-picture" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjAwcHgiIGhlaWdodD0iNDAwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2MDAgNDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IGZpbGw9IiNGNUY1RjUiIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIi8+DQo8ZyBvcGFjaXR5PSIwLjciPg0KCTxwYXRoIGZpbGw9IiNEOEQ4RDgiIGQ9Ik0yMjguMTg0LDE0My41djExM2gxNDMuNjMydi0xMTNIMjI4LjE4NHogTTM2MC4yNDQsMjQ0LjI0N0gyNDAuNDM3di04OC40OTRoMTE5LjgwOEwzNjAuMjQ0LDI0NC4yNDcNCgkJTDM2MC4yNDQsMjQ0LjI0N3oiLz4NCgk8cG9seWdvbiBmaWxsPSIjRDhEOEQ4IiBwb2ludHM9IjI0Ni44ODEsMjM0LjcxNyAyNzEuNTcyLDIwOC43NjQgMjgwLjgyNCwyMTIuNzY4IDMxMC4wMTYsMTgxLjY4OCAzMjEuNTA1LDE5NS40MzQgDQoJCTMyNi42ODksMTkyLjMwMyAzNTQuNzQ2LDIzNC43MTcgCSIvPg0KCTxjaXJjbGUgZmlsbD0iI0Q4RDhEOCIgY3g9IjI3NS40MDUiIGN5PSIxNzguMjU3IiByPSIxMC43ODciLz4NCjwvZz4NCjwvc3ZnPg0K" />
-<%= textarea f, :description %>
+        <div class="image-tools uk-flex uk-overlay-default uk-position-center">
-<div>
+            <a class="image-tool" id="imageSearch" uk-icon="icon: search; ratio:2" uk-tooltip="title: Search" uk-toggle="target: #imageModal"></a>
-<%= submit "Submit" %>
+            <!--a class="image-tool" id="imageInsta" uk-icon="icon: instagram; ratio: 2" uk-tooltip="Instagram"></a>
+		<div class="uploader" uk-form-custom style="margin:1em;"  uk-tooltip="Upload">
+		  <input type="file">
+		  <a style="margin:0px;" class="image-tool" id="imageUpload" uk-icon="icon: upload; ratio: 2"></a></div>
+		  <a class="image-tool" id="imageDraw" uk-icon="icon: pencil; ratio: 2" uk-tooltip="Draw"></a-->
+        </div>
+
+    </div>
+    <div class="card-content uk-flex uk-flex-center">
+        <%= textarea f, :description, class: "card-content-box"%>
+        <%= error_tag f, :description %>
+    </div>
+<div class="controls uk-margin-top">
+    <div class="uk-flex uk-flex-center">
+        <ul class="uk-subnav uk-subnav-pill" style="margin-bottom:0px;">
+            <li><button id="newCard" class="uk-subnav-pill" href="#">New</a></li>
+            <li>
+                <%= submit "Submit", class: "uk-active uk-subnav-pill", id: "submitCard" %>
+            </li>
+        </ul>
+    </div>
 </div>
-<% end %>
+<%end %>
+</div>
+
+<div id="imageModal" uk-modal>
+      <div class="uk-modal-dialog uk-modal-body">
+	<form class='uk-search uk-search-large' id="imageModalContent">
+	  <a href="#" id="giphySearchButton" class="uk-search-icon-flip" uk-search-icon></a>
+	  <input id="giphySearch" class="uk-search-input" placeholder="Search GIPHY..." />
+	</form>
+	<div id="giphySearchResults" class="uk-flex uk-flex-center uk-flex-wrap">
+
+	</div>
+	<button class="uk-modal-close-default" type="button" uk-close></button>
+      </div>
+    </div>

apps/bwc_web/lib/bwc_web/templates/card/show.html.eex

@@ -1,10 +1,22 @@
-<div>
+<div id="play_mode" class="game-mode uk-flex uk-text-center">
-  <h1><%= @card.title %> </h1>
+  <div id='card-view' class="active-card card-template uk-panel uk-panel-box uk-panel-box-secondary uk-padding uk-flex">
+    <span class="uk-label your-card-" style="display:none;">your card</span>
+    <h1 class="card-title uk-text-xlarge uk-margin-large-bottom"><%= @card.title %> </h1>
+    <div class="card-picture uk-flex uk-flex-center">
+      <img class="card-picture" src="<%=@card.picture%>" />
+    </div>
+    <div class="card-content uk-flex uk-flex-center">
+      <%=@card.description          %>
+    </div>
+  </div> <!-- active-card -->
 
-  <div class="picture">
+  <div class="active-card-controls uk-margin-top">
-  <img src="<%= Routes.static_path(@conn, @card.picture) %>"/>
+    <div class="uk-flex uk-flex-center">
+      <ul class="uk-subnav uk-subnav-pill">
+        <li class="card-control reveal-card"><a onClick="revealCard()" id="revealCard" href="#">Reveal Card</a></li>
+        <li class="card-control done-with-card"> <a onClick="doneWithCard()" id="doneWithCard" class="uk-subnav-pill"
+            href="#">Done</a></li>
+      </ul>
     </div>
-  <div class="description">
-  <%= @card.description %>
   </div>
 </div>

apps/bwc_web/lib/bwc_web/templates/layout/app.html.eex

@@ -1,33 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
-    <meta charset="utf-8"/>
+<head>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Blank White Cards!</title>
-    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
+    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>" />
     <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
-  </head>
+</head>
-  <body>
+
-    <header>
+<body>
-      <section class="container">
+    <div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom uk-height-1-1">
-        <nav role="navigation">
+        <div class="uk-text-center uk-container uk-flex uk-flex-around" id="top-bar">
-          <ul>
+            <h1 class="uk-heading-line-">
-            <li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
+                <a href="/">
-            <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
+                    <img class="bwc-logo" src="<%= Routes.static_path(@conn, "/images/bwc.png") %>" alt="BWC Logo" />
-              <li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home) %></li>
-            <% end %>
-          </ul>
-        </nav>
-        <a href="/" class="phx-logo">
-          <img src="<%= Routes.static_path(@conn, "/images/bwc.png") %>" alt="BWC Logo"/>
                 </a>
-      </section>
+            </h1>
-    </header>
+            <div class='auth uk-flex uk-flex-column uk-flex-center'>
-    <main role="main" class="container">
+            <div>
+            <span class='uk-icon' uk-icon="icon:user" style="width:150px;"></span>
+            </div>
+            <div id="top-bar-username" class='uk-flex uk-flex-row uk-flex-center uk-margin-small-top'>
+            <b>You are:&nbsp;</b>
+            <a style='width:100px;' href="javascript:show_login_box()">
+            <%= if @current_player do %>
+            <%=show_username(@current_player)%>
+            <% else %>
+            Nobody
+            <% end %>
+            </a>
+            <input id="top-bar-login-box"/>
+            </div>
+            </div>
+        </div>
+
         <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
         <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
+        <div class="uk-text-center uk-container uk-flex uk-flex-center uk-margin-top">
             <%= @inner_content %>
-    </main>
+        </div>
-  </body>
+    </div>
+</body>
+
 </html>

apps/bwc_web/lib/bwc_web/templates/page/game.html.eex

@@ -1,18 +1,27 @@
-<div  style="margin:0 auto; width: 800px; text-align:center;">
+<div class='uk-container uk-container-center uk-flex uk-text-center uk-flex-column'>
-  <h1></h1>
+    <div class="logo uk-flex uk-flex-center uk-margin-large-bottom">
-
+        <img width=400px src="<%= Routes.static_path(@conn, "/images/logo.png") %>" />
-  <div class="picture">
-  <img height=200px src="<%= Routes.static_path(@conn, "/images/logo.png") %>"/>
     </div>
-  <div class="description">
+    <div>
         <h2><%= @status %></h2>
+        <div>
         <i>Cards in the pot: <%= length(@cards) %></i>
+        <emph>
+            <%= link("(View all)", to: Routes.card_path(@conn, :index)) %>
+        </emph>
         </div>
-  <hr/>
+        <div>
+        <i>Players: <%= @players |> length %></i>
+        <emph>
+            <%= link("(Join)", to: Routes.session_path(@conn, :new)) %>
+        </emph>
+        </div>
+        <hr />
         <div class="create">
             What are you waiting for?
             <a href="/create">
                 Create a card!
             </a>
         </div>
+    </div>
 </div>

apps/bwc_web/lib/bwc_web/templates/session/new.html.eex

@@ -0,0 +1,31 @@
+<%= form_for @player, Routes.session_path(@conn, @method), fn(f) -> %>
+
+<div class="new-session uk-panel uk-panel-box uk-panel-box-secondary uk-padding uk-flex uk-flex-column">
+    <div class="uk-flex-item">
+		            <%= if @current_player do %>
+					<%= text_input f, :username, "placeholder": @current_player.username, "value": @current_player.username %>
+                    <%= text_input f, :old_username, "value": @current_player.username, "class": "uk-hidden"  %>
+                    <% else %>
+                    <%= text_input f, :username, "placeholder": "Join the game as..." %>
+                    <% end %>
+		<%= error_tag f, :username %>
+    </div>
+    <div>
+    <%= text_input f, :picture, class: "uk-hidden" %>
+    </div>
+    <div class="controls uk-margin-top">
+        <div class="uk-flex uk-flex-center">
+            <ul class="uk-subnav uk-subnav-pill" style="margin-bottom:0px;">
+                <li>
+                    <%= if @current_player do %>
+					<%= submit "Change Name", class: "uk-active uk-subnav-pill", id: "joinGame" %>
+                    <% else %>
+                    <%= submit "Join", class: "uk-active uk-subnav-pill", id: "joinGame" %>
+                    <% end %>
+				</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<% end %>

apps/bwc_web/lib/bwc_web/views/card_view.ex

@@ -1,3 +1,14 @@
 defmodule BwcWeb.CardView do
+  require Logger
   use BwcWeb, :view
+
+  def render("delete.json", params) do
+    card = Map.get(params,:card)
+    Logger.debug(card.title)
+    %{
+      data: "Deleted '#{card.title}'.",
+      card: card.id
+    }
+  end
+
 end

apps/bwc_web/lib/bwc_web/views/layout_view.ex

@@ -1,3 +1,25 @@
 defmodule BwcWeb.LayoutView do
   use BwcWeb, :view
+
+  def show_username(%Ecto.Changeset{} = player) do
+    cond do
+      player.valid? ->
+        player.username
+      true ->
+        Nobody
+      end
+  end
+
+  def show_username(%Bwc.Player{} = player) do
+    player.username
+  end
+
+  def show_username("Nobody" = player) do
+    "Nobody"
+  end
+
+  def show_username(nil = player) do
+    "Nobody"
+  end
+
 end

apps/bwc_web/lib/bwc_web/views/session_view.ex

@@ -0,0 +1,13 @@
+defmodule BwcWeb.SessionView do
+  use BwcWeb, :view
+
+
+  def render("set_name.json", params) do
+    username = Map.get(params,:username)
+    %{
+      data: "You are now known as '#{username}'.",
+      username: username
+    }
+  end
+
+end

apps/bwc_web/package-lock.json

@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}

config/config.exs

@@ -27,7 +27,8 @@ config :bwc_web, BwcWeb.Endpoint,
   url: [host: "localhost"],
   secret_key_base: "jJqmdDJIM8vfETjEax9POp8CbgJbaID++sXZCrxsjFdIywS9qi6D1jBWSDTElzcd",
   render_errors: [view: BwcWeb.ErrorView, accepts: ~w(html json), layout: false],
-  live_view: [signing_salt: "IRwB6447"]
+  live_view: [signing_salt: "IRwB6447"],
+  pubsub_server: Bwc.PubSub
 
 # Sample configuration:
 #

package-lock.json

@@ -0,0 +1,11 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "uikit": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/uikit/-/uikit-3.6.5.tgz",
+      "integrity": "sha512-ChsoZBuCC4y0CXqJ51tiIPS4zcKgj8yvXDl8njRyMBLCjNRFlHgSjem2T6pQsEEItoN+Vh7NE3iueD70A4LW4A=="
+    }
+  }
+}