Landing page

This includes a github auth, showing the profile of the user,
and allow the creation of a game. Sadly no persistence yet.

.dockerignore

@@ -0,0 +1,5 @@
+.env
+.env.example
+.gitignore
+.git
+README.md

.gitignore

@@ -1 +1 @@
-myvenv
+.env

forms.py

@@ -0,0 +1,6 @@
+from flask_wtf import FlaskForm
+from wtforms import RadioField, TextField
+from wtforms.validators import InputRequired, Length
+
+class NewGame(FlaskForm):
+    gamename = TextField("Game name", [InputRequired(), Length(max=20,min=1)])    

public/pure.css

@@ -0,0 +1,110 @@
+/*
+https://github.com/pure-css/pure/blob/075862bf23684ab042d0dc27063eefcee4a5830c/site/static/layouts/pricing/styles.css
+*/
+
+/*
+ * -- BASE STYLES --
+ * Most of these are inherited from Base, but I want to change a few.
+ */
+ body {
+  color: #526066;
+}
+
+h2, h3 {
+  letter-spacing: 0.25em;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+p {
+  line-height: 1.6em;
+}
+
+/*
+* -- Layout Styles --
+*/
+.l-content {
+  margin: 0 auto;
+}
+
+.l-box {
+  padding: 0.5em 2em;
+}
+
+/*
+* -- MENU STYLES --
+* Make the menu have a very faint box-shadow.
+*/
+.pure-menu {
+  box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
+}
+
+.pure-menu-link {
+  padding: .5em .7em;
+}
+
+.pure-menu {
+  text-align: left;
+}
+
+.pure-menu-list {
+    float: right;
+}
+
+
+/*
+* -- BANNER --
+* The top banner with the headings. By using a combination
+* of `display: table;` and `display: table-cell;`, we can
+* vertically center the text.
+*/
+
+.banner {
+  /* background: transparent url('http://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg') 0 0 no-repeat fixed; */
+  text-align: center;
+  background-size: cover;
+  /* filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg', sizingMethod='scale'); */
+
+  height: 200px;
+  width: 100%;
+  margin-bottom: 3em;
+  display: table;
+}
+
+  .banner-head {
+      display: table-cell;
+      vertical-align: middle;
+      margin-bottom: 0;
+      font-size: 2em;
+      color: white;
+      font-weight: 500;
+      text-shadow: 0 1px 1px black;
+  }
+
+
+
+/*
+* -- TABLET MEDIA QUERIES --
+* On tablets, we want to slightly adjust the size of the banner
+* text and add some vertical space between the various pricing tables
+*/
+@media(min-width: 767px) {
+
+  .banner-head {
+      font-size: 4em;
+  }
+
+}
+
+/*
+* -- PHONE MEDIA QUERIES --
+* On phones, we want to reduce the height and font-size of the banner further
+*/
+@media (min-width: 480px) {
+  .banner {
+      height: 400px;
+  }
+  .banner-head {
+      font-size: 3em;
+  }
+}

requirements.txt

@@ -2,4 +2,4 @@ flask
 python-dotenv
 requests
 authlib>=0.14.1
-six
+Flask-WTF

server.py

@@ -9,12 +9,17 @@
 from flask import Flask
 from flask import jsonify
 from flask import redirect
+from flask import request
+from flask import flash
+# Global storage, remove when games are persistently stored elsewhere?
+from flask import g
 from flask import render_template
 from flask import session
 from flask import url_for
 from authlib.integrations.flask_client import OAuth
-from six.moves.urllib.parse import urlencode
+from urllib.parse import urlencode
 
+import forms
 import constants
 
 ENV_FILE = find_dotenv()
@@ -106,5 +111,31 @@ def dashboard():
                            userinfo_pretty=json.dumps(session[constants.JWT_PAYLOAD], indent=4))
 
 
+@app.route('/party/new', methods=['GET', 'POST'])
+@requires_auth
+def newParty():
+    form = forms.NewGame(request.form)
+    if request.method == 'POST' and form.validate():
+        flash("A new game (named %s) has been created. Please join manually." % form.gamename.data)
+        games = { "name": form.gamename.data, "active_players": [ session[constants.JWT_PAYLOAD]['nickname'] ]}
+        return redirect('/party/join')
+    return render_template('new-party.html', userinfo_pretty=session[constants.JWT_PAYLOAD], form=form)    
+
+
+@app.route('/party/join', methods=['GET', 'POST'])
+@requires_auth
+def joinParty():
+    return render_template('list-party.html', games="games")    
+
+
+@app.route('/games')
+@requires_auth
+def newGame():
+    return render_template('new-game.html', userinfo_pretty=json.dumps(session[constants.JWT_PAYLOAD]))
+
+
+
+
+
 if __name__ == "__main__":
     app.run(host='0.0.0.0', port=env.get('PORT', 3000))

templates/base.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<title>{% block title %}{% endblock %} - Stunning happiness</title>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
+    <link rel="stylesheet" href="/public/pure.css">
+</head>
+<div class="header">
+    <div class="home-menu pure-menu pure-menu-horizontal">
+        <a class="pure-menu-heading pure-menu-disabled" href="/">Stunning happiness boardgames</a>
+        <ul class="pure-menu-list">
+            {% if session['profile'] and session['profile']['user_id'] %}
+            <li class="pure-menu-item">
+                <img class="pure-img-responsive" style="max-height:18px" src="{{ session['profile']['picture']}}"/>
+            </li>
+            <li class="pure-menu-item">
+                <span>{{ session['profile']['name'] }}</span>
+            </li>
+            <li class="pure-menu-item">
+                <a class="pure-button pure-button-primary" id="qsLogoutBtn" href="/logout">Log Out</a>
+            </li>
+            {% else %}
+            <li class="pure-menu-item">
+                <a class="pure-button pure-button-primary" href="{{ url_for('login') }}">Log In</a>
+            </li>
+            {% endif %}
+        </ul>
+    </div>
+</div>
+
+<div class="content-wrapper">
+    <div class="content">
+        <header>
+            {% block header %}{% endblock %}
+        </header>
+        {% for message in get_flashed_messages() %}
+            <div class="flash">{{ message }}</div>
+        {% endfor %}
+        {% block content %}
+        {% endblock %}
+    </div>
+</div>

templates/dashboard.html

@@ -1,23 +1,18 @@
-<html>
-    <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <!-- font awesome from BootstrapCDN -->
-        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
-        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
-        <link href="/public/app.css" rel="stylesheet">
-    </head>
-    <body class="home">
-        <div class="container">
-            <div class="login-page clearfix">
-                <div class="logged-in-box auth0-box logged-in">
-                    <h1 id="logo"><img src="//cdn.auth0.com/samples/auth0_logo_final_blue_RGB.png" /></h1>
-                    <img class="avatar" src="{{userinfo['picture']}}"/>
-                    <h2>Welcome {{userinfo['name']}}</h2>
-                    <pre>{{userinfo_pretty}}</pre>
-                    <a id="qsLogoutBtn" class="btn btn-primary btn-lg btn-logout btn-block" href="/logout">Logout</a>
-                </div>
-            </div>
+{% extends 'base.html' %}
+
+{% block header %}
+    <h1>{% block title %}Welcome {{userinfo['name']}}{% endblock %}</h1>
+{% endblock %}
+
+{% block content %}
+<div class="container">
+        <div>            
+            For full transparency, here is the information I got from github:
+            <pre>{{userinfo_pretty}}</pre>
+            <pre>{{userinfo}}</pre>
+            <a class="pure-button pure-button-primary" href="/party/new">Create game</a>
+            <a class="pure-button pure-button-primary" href="/party/join">Join game</a>
         </div>
-    </body>
-</html>
+</div>
+{% endblock %}