app.py

import json

import gradio as gr

from theme import Seafoam
from utils.utils import (
    get_content,
    get_player_partners,
    get_player_badges,
    get_player_adventure_logs_html,
    get_player_achievements,
    get_current_story,
)

seafoam = Seafoam()


def get_player_info(player_backend_user_id):
    with open("data.json", "r", encoding="utf-8") as file:
        player_info = json.load(file)
    return player_info[player_backend_user_id]


# start of gradio interface
with gr.Blocks(theme=seafoam, css=get_content("css/style.css")) as demo:
    player_info = gr.State()

    with gr.Row():
        with gr.Column(
            scale=1,
            elem_classes="gallery_container",
        ):
            pet_description = gr.Markdown("# 夥伴", elem_id="pet_avatar_description")
            pet_gallery = gr.Gallery(
                [],
                label="夥伴",
                preview=False,
                elem_id="pet_gallery",
                columns=30,
                height=200,
            )

            badge_description = gr.Markdown("# 徽章", elem_id="badge_avatar_description")
            badge_gallery = gr.Gallery(
                [],
                label="徽章",
                preview=False,
                elem_id="badge_gallery",
                columns=30,
                height=200,
            )

        with gr.Column(scale=1, elem_id="player_avatar_container"):
            avatar = gr.Image(
                "avatar/blank_avatar.png",
                elem_id="player_avatar",
            )
            avatar_description = gr.Markdown(
                "# 光束守護者", elem_id="player_avatar_description"
            )

        with gr.Column(scale=1):
            with gr.Column(elem_id="adventure_container"):
                adventure_description = gr.Markdown(
                    "# 冒險階段", elem_id="adventure_description"
                )
                adventure = gr.Slider(
                    value=0,
                    show_label=False,
                    interactive=False,
                    elem_id="adventure_slider",
                    info="",
                )
            achievements_description = gr.Markdown(
                "# 達成成就", elem_id="achievements_description"
            )
            achievements = gr.HighlightedText(
                value=[],
                elem_classes="achievements",
                color_map={
                    "完成": "green",
                    "未完成": "red",
                },
            )

    with gr.Row():
        html = (
            "<div style='max-width:100%; max-height:360px; overflow:auto'>"
            + get_content("htmls/adventure_blank.html")
        )
        adventure_log = gr.HTML(html, label="Adventure Log", elem_id="adventure_log")

    # handling player info
    with gr.Row():
        player_backend_id = gr.Textbox("", elem_id="player_backend_id", visible=False)
        player_info_query_btn = gr.Button(
            "Query", elem_id="trigger_button", visible=False
        )

    # actions when player login
    player_info_query_btn.click(get_player_info, player_backend_id, player_info).then(
        player_info_query_btn.click(get_player_partners, player_info, pet_gallery)
    ).then(
        player_info_query_btn.click(get_player_badges, player_info, badge_gallery)
    ).then(
        player_info_query_btn.click(
            get_player_adventure_logs_html, player_info, adventure_log
        )
    ).then(
        player_info_query_btn.click(get_player_achievements, player_info, achievements)
    ).then(
        player_info_query_btn.click(get_current_story, None, adventure)
    )

if __name__ == "__main__":
    demo.launch()