refactor: change avatar location to middle

app.py

@@ -59,14 +59,14 @@ with gr.Blocks(theme=seafoam, css=get_content("css/style.css")) as demo:
             )
             badge_description = gr.Markdown("# 徽章", elem_id="badge_avatar_description")
 
-        with gr.Column(scale=1):
+        with gr.Column(scale=1, elem_id="player_avatar_container"):
             avatar = gr.Gallery(
                 ["medias/avatar.png", "medias/avatar2.png"],
                 preview=True,
-                elem_id="user_avatar",
+                elem_id="player_avatar",
             )
             avatar_description = gr.Markdown(
-                "# 光束守護者", elem_id="user_avatar_description"
+                "# 光束守護者", elem_id="player_avatar_description"
             )
 
         with gr.Column(scale=1):
@@ -102,6 +102,7 @@ with gr.Blocks(theme=seafoam, css=get_content("css/style.css")) as demo:
         player_info_query_btn = gr.Button("Query")
 
     # actions when player login
+    #player_info_query_btn.click(get_player_info, player_backend_id, player_info)
     player_info_query_btn.click(get_player_partners, player_info, pet_gallery)
     player_info_query_btn.click(get_player_badges, player_info, badge_gallery)
     player_info_query_btn.click(get_player_achievement_logs_html, player_info, f)

css/style.css

@@ -5,16 +5,20 @@
     background-repeat: no-repeat;
 }
 
-#user_avatar {
+#player_avatar_container {
+    place-items: center;
+}
+
+#player_avatar {
     background-color: transparent !important;
-    width: 25vw; 
-    height: 25vw;
+    width: 20vw; 
+    height: 20vw;
     border-radius: 50% !important;
     box-shadow: 0 10px 15px rgba(0,0,0,0.1);
     border-color: #fff !important;
 }
 
-#user_avatar_description h1{
+#player_avatar_description h1{
     font-size: 2.5rem;
     text-align: center;
 }