Merge pull request #3 from donat-konan33/http-server

Small web app wrapper around the Game
donat-konan33 · Oct 9, 2024 · 4d45ab6 · 4d45ab6
2 parents ae0db55 + 72db6a6
commit 4d45ab6
Show file tree

Hide file tree

Showing 6 changed files with 306 additions and 1 deletion.
diff --git a/poetry.lock b/poetry.lock
diff --git a/pyproject.toml b/pyproject.toml
@@ -10,6 +10,7 @@ python = "^3.8"
 pytest = "^8.3.3"
 pylint = "*"
 requests = "^2.32.3"
+flask = "^3.0.3"
 
 
 [build-system]

diff --git a/static/style.css b/static/style.css
@@ -0,0 +1,26 @@
+/* static/style.css */
+body {
+  font-family: sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.letter {
+  border: 1px solid #999;
+  padding: 8px 6px;
+  width: 24px;
+  display: inline-block;
+  text-align: center;
+  background-color: #333;
+  color: #eee;
+}
+#form, #results {
+  margin: 1em 0;
+}
+.valid {
+  color: green;
+}
+.invalid {
+  color: red;
+}
diff --git a/templates/check.html b/templates/check.html
@@ -0,0 +1,29 @@
+<!-- templates/check.html -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf8" />
+    <title>Longest Word</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+  </head>
+  <body>
+    <h1>Longest Word</h1>
+    <h2>Result</h2>
+    <div>
+      {% for letter in grid %}
+        <span class="letter">{{ letter }}</span>
+      {% endfor %}
+    </div>
+    <div id="results">
+      Your word: <strong>{{ word }}</strong>.
+      {% if is_valid %}
+        <span class="valid">Congrats, it's valid!</span>
+      {% else %}
+        <span class="invalid">Sorry, it's invalid...</span>
+      {% endif %}
+    </div>
+    <div>
+      <a href="/">New game</a>
+    </div>
+  </body>
+</html>
diff --git a/templates/home.html b/templates/home.html
@@ -0,0 +1,25 @@
+<!-- templates/home.html -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf8" />
+    <title>Longest Word</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+  </head>
+  <body>
+    <h1>Longest Word</h1>
+    <div>
+      {% for letter in grid %}
+        <span class="letter">{{ letter }}</span>
+      {% endfor %}
+    </div>
+    <!-- Let's build an input "form" so user can type letters -->
+    <form action="/check" id="form" method="post">
+      <!--hidden input form that contains the game.grid to be sent alongside the word letters-->
+      <input type="hidden" name="grid" value="{{ ''.join(grid) }}">
+      <!--explicit input form which forces content to uppercase since our `Game` logic only take care of uppercase letters-->
+      <input type="text" name="word" onkeyup="this.value = this.value.toUpperCase();">
+      <button>Check!</button>
+    </form>
+  </body>
+</html>
diff --git a/wsgi.py b/wsgi.py
@@ -0,0 +1,20 @@
+# pylint: disable=missing-docstring
+
+from flask import Flask, render_template, request
+from longest_word.game import Game
+
+app = Flask(__name__)
+
+@app.route('/')
+def home():
+    game = Game()
+    return render_template('home.html', grid=game.grid)
+
+
+@app.route('/check', methods=["POST"])
+def check():
+    game = Game()
+    game.grid = list(request.form['grid'])
+    word = request.form['word']
+    is_valid = game.is_valid(word)
+    return render_template('check.html', is_valid=is_valid, grid=game.grid, word=word)