File size: 3,546 Bytes
62b3eea
 
273f76c
 
 
5784cf3
 
 
 
 
 
273f76c
 
62b3eea
de7f21d
 
 
 
 
 
273f76c
 
de7f21d
d79f5f2
 
273f76c
11254d8
 
 
 
 
4427f36
 
 
 
11254d8
 
 
 
 
 
 
 
 
 
 
 
4427f36
 
 
 
11254d8
 
 
 
 
 
 
 
 
 
273f76c
 
11254d8
4427f36
11254d8
 
 
 
 
 
 
273f76c
11254d8
de7f21d
 
 
 
11254d8
 
 
 
de7f21d
 
 
 
11254d8
 
 
 
273f76c
de7f21d
 
5784cf3
de7f21d
273f76c
 
d79f5f2
 
 
 
 
 
 
5784cf3
d79f5f2
 
5784cf3
 
 
d79f5f2
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
import json

import gradio as gr

from theme import Seafoam
from utils.utils import (
    get_content,
    get_player_partners,
    get_player_badges,
    get_player_achievement_logs_html,
)

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_gallery = gr.Gallery(
                [
                    "medias/partner1.png",
                    "medias/partner2.png",
                    "medias/partner3.png",
                    "medias/partner4.png",
                ]
                * 2,
                label="夥伴",
                preview=False,
                elem_id="pet_gallery",
                columns=30,
                height=200,
            )
            pet_description = gr.Markdown("# 夥伴", elem_id="pet_avatar_description")

            badge_gallery = gr.Gallery(
                [
                    "medias/badge.png",
                    "medias/badge2.png",
                    "medias/badge3.png",
                    "medias/badge4.png",
                ]
                * 2,
                show_share_button=True,
                label="徽章",
                preview=False,
                elem_id="badge_gallery",
                columns=30,
                height=200,
            )
            badge_description = gr.Markdown("# 徽章", elem_id="badge_avatar_description")

        with gr.Column(scale=1):
            avatar = gr.Gallery(
                ["medias/avatar.png", "medias/avatar2.png"],
                preview=True,
                elem_id="user_avatar",
            )
            avatar_description = gr.Markdown(
                "# 光束守護者", elem_id="user_avatar_description"
            )

        with gr.Column(scale=1):
            description = gr.Markdown("# 冒險階段", elem_id="adventure_description")
            progress_bar_html = (
                "<div style='max-width:100%; max-height:360px; overflow:auto'>"
                + get_content("htmls/progress_bar.html")
            )
            progress_bar = gr.HTML(
                progress_bar_html,
            )

            stage_desc_html = (
                "<div style='max-width:100%; max-height:360px; overflow:auto'>"
                + get_content("htmls/stage_desc.html")
            )
            stage_desc = gr.HTML(
                stage_desc_html,
            )

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

    # handling player info
    with gr.Row():
        player_backend_id = gr.Textbox(
            "http://id.junyiacademy.org/d6317d299321450191dd5da599a48b3d", visible=False
        )
        player_info_query_btn = gr.Button("Query")

    # actions when player login
    player_info_query_btn.click(get_player_info, player_backend_id, player_info).then(
        get_player_partners, player_info, pet_gallery
    ).then(get_player_badges, player_info, badge_gallery).then(
        get_player_achievement_logs_html, player_info, f
    )

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