Info Button System mit text.json für die Info Texte.
GUI ein wenig neu designt.
This commit is contained in:
Daniel Nagel
parent
9b399af323
commit
c363e35e53
|
|
@ -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;')
|
||||
|
|
|
|||
37
gui/info_text/info_system.py
Normal file
37
gui/info_text/info_system.py
Normal file
|
|
@ -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')
|
||||
16
gui/info_text/info_texts.json
Normal file
16
gui/info_text/info_texts.json
Normal file
|
|
@ -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!"
|
||||
]
|
||||
}
|
||||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
1
main.py
1
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()
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user