File size: 3,750 Bytes
62b3eea
 
273f76c
 
 
5784cf3
 
 
 
9dae054
 
 
 
5784cf3
273f76c
 
62b3eea
de7f21d
 
 
 
 
 
273f76c
 
de7f21d
8e9bd24
d79f5f2
273f76c
11254d8
 
 
57e2032
11254d8
57e2032
11254d8
 
 
 
 
 
 
57e2032
11254d8
57e2032
11254d8
 
 
 
 
 
273f76c
b002f06
39977eb
 
b002f06
11254d8
 
b002f06
11254d8
 
273f76c
013e105
00cd8e1
 
 
9dae054
013e105
 
 
 
 
 
 
 
de7f21d
013e105
 
 
 
 
 
 
11254d8
 
273f76c
39977eb
9dae054
273f76c
d79f5f2
 
00cd8e1
35ad3f3
d79f5f2
5784cf3
4f341ae
00cd8e1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
273f76c
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
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,
    get_player_nickname,
)

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,
        ):
            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(
                "medias/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("", visible=True, elem_id="player_backend_id")
        player_info_query_btn = gr.Button("Query", elem_id="trigger_button")

    # 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_player_nickname, player_info, avatar_description
        )
    ).then(
        player_info_query_btn.click(get_current_story, None, adventure)
    )

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