Working with Bulma CSS now

9 files changed, 80 insertions, 80 deletions

diff --git a/app.py b/app.py
index 9f4caed..fac8a29 100644
--- a/app.py
+++ b/app.py
@@ -1,17 +1,16 @@
 from os import getenv
-from model import CourtList, PlayerList, GameList
-from flask import Flask, abort, render_template, request
 from dotenv import load_dotenv
+from flask import Flask, abort, render_template
+from model import CourtList, PlayerList, GameList
 
 load_dotenv()
 
 
-print("Importing player list...\n")
-PLAYER_LIST = PlayerList(location="test_data.csv")
+PLAYER_LIST = PlayerList(location="test_data_large.csv")
 COURT_LIST = CourtList(12)
-GAME_GENERATOR = GameList(COURT_LIST)
-print("List of player:\n")
-print(PLAYER_LIST)
+GAME_GENERATOR = GameList()
+GAME_GENERATOR.clear(COURT_LIST)
+
 
 app = Flask("Match Up! Backend")
 env_config = getenv("PROD_APP_SETTINGS", "config.DevelopmentConfig")
@@ -25,6 +24,7 @@ def home():
 
 @app.route("/new-games", methods=["POST"])
 def get_new_games():
+    print("Creating new games...")
     GAME_GENERATOR.create_games(COURT_LIST, PLAYER_LIST)
     return render_template(
         "games.j2",
@@ -32,6 +32,16 @@ def get_new_games():
     )
 
 
+@app.route("/clear-games", methods=["POST"])
+def clear_games():
+    print("Clearing games...")
+    GAME_GENERATOR.clear(COURT_LIST)
+    return render_template(
+        "games.j2",
+        games=GAME_GENERATOR.games,
+    )
+
+
 @app.route("/game-list", methods=["GET"])
 def get_list_of_games():
     return render_template(
@@ -65,13 +75,9 @@ def get_list_of_players():
 def toggle_court(court_number):
     court_number = int(court_number)
     selection = COURT_LIST.get_court(court_number)
-    print(len(selection))
-    print(selection)
     if len(selection) != 1:
         abort(404, f"Multiple courts requested: {len(selection)}")
-    print(COURT_LIST.courts)
     COURT_LIST.toggle_court(court_number)
-    print(COURT_LIST.courts)
     selection = COURT_LIST.get_court(court_number)
     return render_template(
         "court.j2",
diff --git a/dummy_data_generation.py b/dummy_data_generation.py
index 3ee6e42..3d6d116 100644
--- a/dummy_data_generation.py
+++ b/dummy_data_generation.py
@@ -4,7 +4,7 @@ from names import get_full_name
 from random import randint, getrandbits
 
 
-def get_test_players(total_player: int = 20, min_skill: int = 1, max_skill: int = 10):
+def get_test_players(total_player: int = 80, min_skill: int = 1, max_skill: int = 10):
     return [
         Player(
             name=get_full_name(),
@@ -17,7 +17,7 @@ def get_test_players(total_player: int = 20, min_skill: int = 1, max_skill: int
 
 def main():
     dummy_list = get_test_players()
-    with open("test_data.csv", "w", newline="") as file:
+    with open("test_data_large.csv", "w", newline="") as file:
         data_writer = writer(file)
         data_writer.writerow(["name", "skill", "status"])
         for player in dummy_list:
diff --git a/model.py b/model.py
index 1d6217b..9af7198 100644
--- a/model.py
+++ b/model.py
@@ -48,25 +48,25 @@ class Player:
 class PlayerList:
 
     def __init__(self, location: Path = "players.csv"):
+        players = []
         with open(location, newline="") as file:
             data_reader = reader(file)
             next(data_reader, None)
-            self.players = [
-                (
-                    Player(
-                        name=row[0],
-                        skill=row[1],
-                        status=(row[2] == "True"),
-                    )
-                )
-                for row in data_reader
-            ]
+            for row in data_reader:
+                player = Player(name=row[0], skill=row[1], status=(row[2] == "True"))
+                players.append(player)
+        players.sort(key=attrgetter("name"))
+        self.players = players
 
     def get_player(self, player_request: str):
-        return [player for player in self.players if player.name == player_request]
+        players = [player for player in self.players if player.name == player_request]
+        players.sort(key=attrgetter("name"))
+        return players
 
     def get_active_players(self):
-        return [player for player in self.players if player.status]
+        players = [player for player in self.players if player.status]
+        players.sort(key=attrgetter("name"))
+        return players
 
     def toggle_player(self, player_request: Player):
         self.players = [
@@ -142,10 +142,9 @@ def create_possible_games(court_list: list[Court], players: list[Player]):
 
 @dataclass
 class GameList:
-    court_list: CourtList
 
-    def __post_init__(self):
-        courts = self.court_list.courts
+    def clear(self, court_list: CourtList):
+        courts = court_list.courts
         active_courts = [court for court in courts if court.status]
         inactive_courts = [court for court in courts if not court.status]
         dummy_games = create_dummy_games(active_courts)
diff --git a/templates/court.j2 b/templates/court.j2
index 6ae4d91..425e7d5 100644
--- a/templates/court.j2
+++ b/templates/court.j2
@@ -1 +1 @@
-<button class={% if court.status %} "active" {% else %} "dormant" {% endif %} hx-post="{{ "/court-toggle/" ~ court.number}}" hx-trigger="click" hx-swap="outerHTML">{{ court.number }}</button>
\ No newline at end of file
+<button class={% if court.status %} "button is-success" {% else %} "button is-danger" {% endif %} hx-post="{{ "/court-toggle/" ~ court.number}}" hx-trigger="click" hx-swap="outerHTML">{{ court.number }}</button>
\ No newline at end of file
diff --git a/templates/courts.j2 b/templates/courts.j2
index 3134aca..64fd44a 100644
--- a/templates/courts.j2
+++ b/templates/courts.j2
@@ -1,7 +1,9 @@
-<div class="grid-container">
+<div class="fixed-grid has-12-cols">
+<div class="grid">
 {% for court in courts %}
-    <div class="grid-item">
-        <button class={% if court.status %} "active" {% else %} "dormant" {% endif %} hx-post="{{ "/court-toggle/" ~ court.number}}" hx-trigger="click" hx-swap="outerHTML">{{ court.number }}</button>
+    <div class="cell">
+        <button class={% if court.status %} "button is-success" {% else %} "button is-danger" {% endif %} hx-post="{{ "/court-toggle/" ~ court.number}}" hx-trigger="click" hx-swap="outerHTML">{{ court.number }}</button>
     </div>
 {% endfor %}
+</div>
 </div>
\ No newline at end of file
diff --git a/templates/games.j2 b/templates/games.j2
index 83fff7f..b070b16 100644
--- a/templates/games.j2
+++ b/templates/games.j2
@@ -1,10 +1,10 @@
-<div class="games">
-<table>
-<tr>
+<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth" id="games">
+<thead>
     <th> Court </th>
     <th colspan="2"> Team 1 </th>
     <th colspan="2"> Team 2 </th>
-</tr>
+</thead>
+<tbody>
 {% for game in games %}
     <tr>
         <th>{{ game.court.number }}</th>
@@ -14,5 +14,5 @@
         <td>{{ game.team2.player2.name }}</th>
     </tr>
 {% endfor %}
-</table>
-</div>
\ No newline at end of file
+</tbody>
+</table>
\ No newline at end of file
diff --git a/templates/index.j2 b/templates/index.j2
index a9c451f..ac6ddf3 100644
--- a/templates/index.j2
+++ b/templates/index.j2
@@ -2,54 +2,46 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>🏸Match Up!</title>
-        <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">
+        <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
         <script src="https://unpkg.com/htmx.org@2.0.0/dist/htmx.min.js"></script>
         <style>
             button {
-                height: 50px;
-                width: 200px;
-            }
-            .active {
-                background-color:  #27ae60;
-            }
-            .dormant {
-                background-color:  #a93226;
-            }
-            .grid-container {
-                display: grid;
-                grid-template-columns: auto auto auto;
-                row-gap: 20px;
-                column-gap: 20px;
-            }
-            hr {
-                margin-top: 1cm;
+                width: 100%;
             }
         </style>
     </head>
     <body>
-        <header>
-        <h4>🏸The Smashing Fellows </h4>
-        </header>
-        <hr>
-        <div>
-            <h2>Games</h2>
-            <div class="games" hx-get="/game-list" hx-swap="outerHTML" hx-trigger="revealed"></div>
-        </div>
-        <button hx-post="/new-games" hx-trigger="click" hx-target=".games" hx-swap="outerHTML"> New Games </button>
-        <div class="players">
-            <h2>Courts</h2>
+        <section class="hero">
+            <div class="hero-body">
+                <p class="title">🏸The Smashing Fellows </p>
+            </div>
+        </section>
+        <section class="section">
+            <p class="title">Games</p>
+            <div class="columns">
+                <div class="column"></div>
+                <div class="column"><button class="button is-success" hx-post="/new-games" hx-trigger="click" hx-target="#games">New Games</button></div>
+                <div class="column"></div>
+                <div class="column"><button class="button is-danger" hx-post="/clear-games" hx-trigger="click" hx-target="#games">Clear</button></div>
+                <div class="column"></div>
+            </div>
+            <div hx-get="/game-list" hx-swap="outerHTML" hx-trigger="revealed"></div>
+        </section>
+        <section class="section">
+            <h2 class="title">Courts</h2>
             <div hx-get="/court-list" hx-swap="outerHTML" hx-trigger="revealed"></div>
-        </div>
-        <hr>
-        <div class="players">
-            <h2>Players</h2>
+        </section>
+        <section class="section">
+            <h2 class="title">Players</h2>
             <div hx-get="/player-list" hx-swap="outerHTML" hx-trigger="revealed"></div>
-        </div>
-        <hr>
-        <footer>
-            Made by <a href="https://karanjayachandra.com/">K. Jayachandra</a> using <a href="https://htmx.org/">HTMX</a> and <a href="https://flask.palletsprojects.com">Flask</a>
+        </section>
+        <footer class="footer">
+            <div class="content has-text-centered">
+                Made by <a href="https://karanjayachandra.com/">K. Jayachandra</a> using <a href="https://flask.palletsprojects.com">Flask</a>, <a href="https://htmx.org/">HTMX</a> and <a href="https://bulma.io">Bulma</a>
+            </div>
         </footer>
     </body>
 </html>
\ No newline at end of file
diff --git a/templates/player.j2 b/templates/player.j2
index 1176d65..5b70df6 100644
--- a/templates/player.j2
+++ b/templates/player.j2
@@ -1 +1 @@
-<button class={% if player.status %} "active" {% else %} "dormant" {% endif %} hx-post="{{ "/player-toggle/" ~ player.name}}" hx-trigger="click" hx-swap="outerHTML">{{ player.name }}</button>
\ No newline at end of file
+<button class={% if player.status %} "button is-success" {% else %} "button is-danger" {% endif %} hx-post="{{ "/player-toggle/" ~ player.name}}" hx-trigger="click" hx-swap="outerHTML">{{ player.name }}</button>
\ No newline at end of file
diff --git a/templates/players.j2 b/templates/players.j2
index 3005fa4..6179dbb 100644
--- a/templates/players.j2
+++ b/templates/players.j2
@@ -1,7 +1,8 @@
-<div class="grid-container">
+<div class="fixed-grid has-5-cols">
+<div class="grid">
 {% for player in players %}
-    <div class="grid-item">
-        <button class={% if player.status %} "active" {% else %} "dormant" {% endif %} hx-post="{{ "/player-toggle/" ~ player.name}}" hx-trigger="click" hx-swap="outerHTML">{{ player.name }}</button>
+    <div class="cell">
+        <button class={% if player.status %} "button is-success" {% else %} "button is-danger" {% endif %} hx-post="{{ "/player-toggle/" ~ player.name}}" hx-trigger="click" hx-swap="outerHTML">{{ player.name }}</button>
     </div>
 {% endfor %}
 </div>
\ No newline at end of file