Der Spielstart

In diesem Kapitel erstellen wir die Spielstartseite setup.html. Hier melden sich die beiden Spieler an. Entweder als Spieler 1, der den Spielcode generiert (dazu kommen wir im nächsten Kapitel), oder als Spieler 2, der dem generierten Spiel beitritt.

Erstellen wir zuerst wieder die neue version_03 unseres Projekts. Die Struktur ändert sich nicht großartig, nur die Datei setup.html kommt hinzu:

Dann können wir gleich den Code für setup.html betrachten:

{% extends "base.html" %}
{% block content %}
<form id="setup-form" method="post">
  <h3>Vorbereitung des Spiels</h3>
  <p>Entscheide Dich:</p>
  <p>Entweder Du bist <b>Spieler 1</b> und startest das Spiel</p>

  <!-- Spieler 1 -->
  <div>
    <label for="p1">Name Spieler 1:</label>
    <input id="p1" type="text" name="p_1_name" placeholder="Name" value="{{ p_1_name }}" class="fancy-input" />
  </div>
  <div>
    <button type="submit" name="p1_pressed" id="p1-btn" value="True" class="button-setup">Spieler 1</button>
  </div>

  <p>Oder Du bist <b>Spieler 2</b> und hast einen Code bekommen</p>

  <!-- Spieler 2 -->
  <div>
    <label for="p2">Name Spieler 2:</label>
    <input id="p2" type="text" name="p_2_name" placeholder="Name" value="{{ p_2_name }}" class="fancy-input" />
    <label for="code">Spielcode:</label>
    <input id="code" type="text" name="game_code" placeholder="Code" value="{{ game_code }}" class="fancy-input" />
  </div>
  <div>
    <button type="submit" name="p2_pressed" id="p2-btn" value="True" class="button-setup">Spieler 2</button>
  </div>

</form>

<!-- JavaScript: Pflichtangaben prüfen -->
<script>
document.addEventListener("DOMContentLoaded", () => {
  const form = document.getElementById("setup-form");
  const p1Btn = document.getElementById("p1-btn");
  const p2Btn = document.getElementById("p2-btn");

  const p1Name = form.querySelector('[name="p_1_name"]');
  const p2Name = form.querySelector('[name="p_2_name"]');
  const gameCode = form.querySelector('[name="game_code"]');

  p1Btn.addEventListener("click", () => {
    p1Name.required = true;
    p2Name.required = false;
    gameCode.required = false;
  });

  p2Btn.addEventListener("click", () => {
    p1Name.required = false;
    p2Name.required = true;
    gameCode.required = true;
  });
});
</script>
{% endblock %}
  

Wir wissen, HTML geht immer zusammen mit CSS, daher hier mein Vorschlag für eine neue Version der CSS-Datei setup.css:

/* Grundlayout */
body {
  font-family: 'Montserrat', Verdana, Geneva, Tahoma, sans-serif; /* Schriftart */
  background-color: #f8f9fa;
  margin: 0;
  padding: 20px;
  color: #333;
}

/* Button */
.button-index,
.button-setup {
  padding: 10px 20px;
  margin: 5px;
  background-color: #007bff;
  border: none;
  color: white;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
}

/* Input-Felder */
.fancy-input {
  width: 250px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px 14px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  color: #333;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.fancy-input:focus {
  border-color: #6cc06c;              /* grüner Fokusrahmen */
  box-shadow: 0 0 6px #a2e2a2;
  background-color: #ffffff;
}
.error {
    background-color: #ffebee;
    border-left: 5px solid #f44336;
    color: #d32f2f;
    padding: 10px 15px;
    margin: 15px 0;
    border-radius: 4px;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    list-style-type: none;
    animation: fadeIn 0.3s ease-in-out;
    position: relative;
}

.error::before {
    content: '⚠️';
    margin-right: 10px;
    font-size: 1.2em;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
  

Der Aufruf von setup.html erfolgt aus der index.html. Da wir jetzt bei Klick auf den Button auf die setup.html verlinken wollen, brauchen wir eine Erweiterung der index.html:

{% extends 'base.html' %}
{% block content %}
<form action="{{ url_for('main.setup') }}">
    <h3>Kann losgehen?</h3>
    <div class="button-text-container">
        <button type="submit" class="button-index">Go</button>
    </div>
</form>
{% endblock %}

Auch in der Datei routes.py müssen wir die neue Seite setup.html als neue route bekannt machen. Daher hier die entsprechende Erweiterung der routes.py:

from flask import Blueprint, render_template

# Erstelle ein Blueprint für die Routen
main = Blueprint('main', __name__)

@main.route('/')
def index():
    return render_template('index.html')

@main.route("/setup", methods=["GET", "POST"])
def setup():
    return render_template("setup.html")
    

Lassen wir es laufen.

Hinweis

Sollte bei Euch der Server noch laufen, braucht es einen Neustart des Servers. Das geht entweder über Anhalten des Servers mit "STRG+C" im Terminalfenster, dann wieder "flask run" oder das Terminalfenster schließen und über den Run-Button neu starten.

Die Seite index.html wird uns angezeigt:

Mit Klick auf den Go-Button wird uns die Seite setup.html angezeigt:

Die Eingabefelder sind aktiv und wir können überall etwas eingeben.

Bei Klick auf die beiden Button passiert noch nichts, das gehen wir im nächsten Kapitel an, da kümmern wir uns aber zunächst um das Generieren des Spielcodes.

---

• Zurück
• Source Kapitel
• Weiter