diff --git a/gui/gui_style.py b/gui/gui_style.py index caccc84..efffbea 100644 --- a/gui/gui_style.py +++ b/gui/gui_style.py @@ -4,22 +4,20 @@ from nicegui import ui # muss man es nur hier ändern! def apply_design(): - ui.add_css('body { background-color: #18181b; }') - + ui.add_css('body { background-color: #171721; }') # 1. Dark Mode aktivieren ui.dark_mode(True) - - # 2. Hier definierst du deine Farben fest im Code! - # Du kannst normale englische Farbnamen (wie 'red') oder HEX-Codes (wie '#ff0000') nutzen. ui.colors( - primary='#b91c1c', # Hauptfarbe (z.B. für Standard-Buttons) - Hier ein dunkles Rot - secondary='#1f2937', # Zweitfarbe - accent='#3b82f6', # Akzentfarbe (z.B. Blau) - positive='#22c55e', # Farbe für Erfolg (Grün) - negative='#ef4444', # Farbe für Fehler/Abbruch (Rot) - info='#3b82f6', # Info-Farbe - warning='#f59e0b' # Warn-Farbe (Orange) + primary='#B80B0B', # Hauptfarbe (z.B. für Standard-Buttons) Wenn keine Farbe angegeben wird, ist es diese Farbe + secondary='#FF3333', # Zweitfarbe + accent='#2078D4', # Akzentfarbe + positive='#188C42', # Farbe für Erfolg (Grün) + negative='#E31919', # Farbe für Fehler/Abbruch (Rot) + info='#939393', # Info-Farbe + warning='#f59e0b', # Warn-Farbe (Orange) +# Farben für Texte + normaltext="#F7F7F7", + accenttext="#2078D4", + infotext="#A8A8A8" ) - # (Optional) Wenn du die Hintergrundfarbe der ganzen Seite ändern willst: - # ui.query('body').style('background-color: #121212;') diff --git a/gui/info_text/info_system.py b/gui/info_text/info_system.py new file mode 100644 index 0000000..1a80ac1 --- /dev/null +++ b/gui/info_text/info_system.py @@ -0,0 +1,37 @@ +import json +import os +from nicegui import ui + +# 1. Pfad zur JSON Datei berechnen +BASE_DIR = os.path.dirname(os.path.abspath(__file__)) +JSON_PATH = os.path.join(BASE_DIR, "info_texts.json") + +# 2. JSON Datei in den Speicher laden +def load_info_texts(): + if os.path.exists(JSON_PATH): + # encoding="utf-8" ist wichtig für deutsche Umlaute (ä, ö, ü)! + with open(JSON_PATH, "r", encoding="utf-8") as file: + return json.load(file) + else: + print("FEHLER! Keine info_texts.json gefunden!") + return {} + +# Wir laden das Wörterbuch genau 1x beim Serverstart +TEXT_DICTIONARY = load_info_texts() +print(TEXT_DICTIONARY.get("league_info")) +print(JSON_PATH) +print(BASE_DIR) + +# 3. Unser neuer Baustein für die Webseite +def create_info_button(topic_key): + # Den Text aus dem Wörterbuch holen. Falls nicht vorhanden wird eine Fehlermeldung geworfen. + texts = TEXT_DICTIONARY.get(topic_key, ["Hilfetext nicht gefunden!"]) + + # --- DER DIALOG (Unsichtbar im Hintergrund) --- + with ui.dialog().classes("w-full items-center") as info_dialog, ui.card().classes("items-center text-textnormal"): + # Loopen durch die Sätze in der JSON + for sentence in texts: + ui.markdown(sentence).classes("font-bold text-white text-lg text-center") + + # --- DER BUTTON (Sichtbar auf der Seite) --- + ui.button(icon="info_outline", color= "", on_click=info_dialog.open).props('round size') diff --git a/gui/info_text/info_texts.json b/gui/info_text/info_texts.json new file mode 100644 index 0000000..b53be0a --- /dev/null +++ b/gui/info_text/info_texts.json @@ -0,0 +1,16 @@ +{ + "league_info": [ + "Um einer Liga beizutreten einfach auf **BEITRETEN** drücken und bestätigen.", + "Um deine Statistik in einer Liga zu sehen, klick auf eine Liga." + ], + + "mmr_info": [ + "**MMR Punkte** sind die Liga Punkte um die gespielt wird.", + "Verliert man ein Spiel, verliert man Punkte. Und umgekehrt." + ], + + "match_form_info": [ + "Um ein Spiel einzutragen gibt einfach deine Punkte ein. Wähle deinen Gegner aus. Und gibt seine Punkte ein.", + "**ACHTUNG:** Ein Spieler ist nur als Gegner auswählbar wenn er sich in der Liga angemeldet hat!" + ] +} diff --git a/gui/league_statistic.py b/gui/league_statistic.py index 7da6de1..d78531a 100644 --- a/gui/league_statistic.py +++ b/gui/league_statistic.py @@ -1,6 +1,7 @@ from nicegui import ui, app from gui import gui_style from data import data_api +from gui.info_text import info_system def setup_routes(): # 1. Die {}-Klammern definieren eine dynamische Variable in der URL @@ -19,7 +20,7 @@ def setup_routes(): if stats: with ui.header().classes('items-center justify-between bg-zinc-900 p-4 shadow-lg'): - ui.button('Zurück zur Übersicht', on_click=lambda: ui.navigate.to('/')) + ui.button(icon="arrow_back", on_click=lambda: ui.navigate.to('/')).props("round") ui.button("Spiel eintragen", on_click=lambda: ui.navigate.to(f'/add-match/{systemname}')) with ui.column().classes('w-full items-center mt-10'): @@ -59,21 +60,15 @@ def setup_routes(): # lg:grid-cols-3 teilt den Bildschirm auf großen Monitoren in 3 gleich große unsichtbare Spalten with ui.element('div').classes("w-full grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4"): - # LINKE SEITE (Belegt 1 Spalte) - # flex-col setzt die beiden Karten exakt übereinander with ui.column().classes("w-full gap-4"): - with ui.dialog().classes("w-full items-center") as mmr_info, ui.card(): - ui.label('MMR Punkte sind die Liga Punkte um die gespielt wird. Verliert man ein Spiel, verliert man Punkte. Und umgekehrt.').classes("font-bold text-white text-l") - ui.button(icon="close", on_click=mmr_info.close).classes("w-10 h-8 rounded-full") - with ui.card().classes("w-full items-center justify-center text-center"): with ui.row().classes("w-full items-center text-center"): ui.label("") ui.space() ui.label("MMR Punkte: ").classes('justify-center text-2xl font-bold') ui.space() - ui.button(icon="help", color="info" ,on_click=mmr_info.open).classes("w-9 h-8 rounded-full") - ui.label(str(stats["mmr"])).classes('text-4xl font-bold text-blue-400') + info_system.create_info_button("mmr_info") + ui.label(str(stats["mmr"])).classes('text-4xl font-bold text-accent') with ui.card().classes("w-full items-center justify-center text-center"): ui.label("Rang: ").classes('text-2xl font-bold') diff --git a/gui/main_gui.py b/gui/main_gui.py index 8391fbb..0021a4c 100644 --- a/gui/main_gui.py +++ b/gui/main_gui.py @@ -2,6 +2,7 @@ from nicegui import ui, app from data import database, data_api from gui import discord_login, gui_style from match_calculations import calc_match +from gui.info_text import info_system def setup_routes(admin_discord_id): @ui.page('/', dark=True) @@ -32,8 +33,8 @@ def setup_routes(admin_discord_id): # --- LINKE SEITE --- # Vereinslogo und den Titel in einer eigenen Reihe (Reihe 1) with ui.row().classes('items-center gap-4'): - #ui.image("gui/pictures/wsdg.png").classes('w-20 h-20 rounded-full') - ui.label('Diceghost Liga').classes('text-2xl font-bold text-white') + ui.image("gui/pictures/wsdg.png").classes('w-20 h-20 rounded-full') + ui.label('Diceghost Liga').classes('text-2xl font-bold text-normaltext') # --- MITTE --- discord_id = app.storage.user.get("discord_id") @@ -55,12 +56,12 @@ def setup_routes(admin_discord_id): # --- ANSICHT 1: Der normale Text mit Edit-Button --- with ui.row().classes('items-center gap-2') as display_row: - ui.label(display_name).classes('text-xl font-bold text-white') - ui.label("'aka'").classes('text-sm text-gray-500') - ui.label(discord_name).classes('text-lg text-gray-400') + ui.label(display_name).classes('text-xl font-bold text-normaltext') + ui.label("'aka'").classes('text-sm text-infotext') + ui.label(discord_name).classes('text-lg text-infotext') # Ein runder Button (.props('round')) - ui.button(icon='edit', color='primary', on_click=toggle_edit_mode).props('round dense') + ui.button(icon='edit', color='accent', on_click=toggle_edit_mode).props('round dense') # --- ANSICHT 2: Das Eingabefeld (startet unsichtbar!) --- with ui.row().classes('items-center gap-5') as edit_row: @@ -87,7 +88,7 @@ def setup_routes(admin_discord_id): name_input = ui.input('Neuer Name', value=display_name).on('keydown.enter', save_new_name) ui.button(icon='save', color='positive', on_click=save_new_name).props('round dense') - ui.button(icon='casino', on_click=generate_random_silly_name).props('round dense') + ui.button(icon='casino', color="accent", on_click=generate_random_silly_name).props('round dense') ui.button(icon='close', color='negative', on_click=toggle_edit_mode).props('round dense') avatar = app.storage.user.get('avatar_url') @@ -98,7 +99,7 @@ def setup_routes(admin_discord_id): app.storage.user.clear() ui.navigate.to('/') - ui.button('Logout', on_click=logout).classes('bg-red-500 text-white') + ui.button(icon="logout", on_click=logout).props('round dense') else: auth_url = discord_login.get_auth_url() @@ -177,15 +178,9 @@ def setup_routes(admin_discord_id): # --------------------------- if app.storage.user.get('authenticated', False): with ui.card().classes("w-full"): - with ui.dialog().classes("w-full items-center") as league_info, ui.card(): - ui.label('Um einer Liga beizutreten einfach auf "BEITRETEN" drücken und bestätigen.').classes("font-bold text-white text-l") - ui.label("Um deine Statistik in einer Liga zu sehen, klick auf eine Liga.").classes("font-bold text-white text-l") - ui.label("Du kannst, wenn du willst, gerne allen Ligen beitreten.").classes("font-bold text-white text-l") - ui.button(icon="close", on_click=league_info.close) - with ui.row().classes("w-full items-center"): ui.label(text="Meine Ligaplätze").classes("font-bold text-white text-xl") - ui.button(icon="help", color="information" ,on_click=league_info.open).classes("w-10 h-8 rounded-full") + info_system.create_info_button("league_info") placements = data_api.get_player_statistics(player_id) systems = data_api.get_gamesystem_data() diff --git a/main.py b/main.py index 9c30b26..2a7621a 100644 --- a/main.py +++ b/main.py @@ -5,6 +5,7 @@ from nicegui import ui, app from data import database from gui import main_gui, match_gui, discord_login, league_statistic, admin_gui, match_history_gui from wood import logger +from gui.info_text import info_system # 1. Lade die geheimen Variablen aus der .env Datei in den Speicher load_dotenv()