Starting popup notice

frontend/static/css/index.css

@@ -0,0 +1,17 @@
+*{
+	color: #cccccc;
+	font-size: 35px;
+	background-color: #1a1a1a;
+}
+
+body {
+}
+
+#app #avatar
+{
+	max-height: 10em;
+	max-width: 10em;
+	min-height: 6em;
+	min-width: 6em;
+}
+

frontend/static/css/me.css

@@ -1,18 +1,17 @@
 #app #main .account
 {
-	background-color: red;
+	color: #1a1a1a;
 }
 
 #app #main
 {
 	width: 60%;
 	display: flex;
-	margin-left: auto;
-	margin-right: auto;
 	flex-direction: column;
+	color: #1a1a1a;
 }
 
 #app #main .profile
 {
-	background-color: green;
+	color: #1a1a1a;
 }

frontend/static/css/profile.css

@@ -1,9 +1,3 @@
-#app #avatar
-{
-	height: 100px;
-	width: 100px;
-}
-
 #app #username
 {
 	font-size: 0.8em;

frontend/static/css/search.css

@@ -1,7 +1,10 @@
 #app img
+
 {
-	max-height: 3em;
+	max-height: 4em;
-	max-width: 3em;
+	max-width: 4em;
+	min-height: 2em;
+	min-width: 2em;
 }
 
 #app ul

frontend/static/js/index.js

@@ -19,6 +19,8 @@ import TournamentPageView from "./views/tournament/TournamentPageView.js";
 import TournamentsView from "./views/tournament/TournamentsListView.js";
 import TournamentCreateView from "./views/tournament/TournamentCreateView.js";
 
+import {manage_popup} from "./utils/noticeUtils.js";
+
 let client = new Client(location.protocol + "//" + location.host)
 
 let lastView = undefined
@@ -107,6 +109,8 @@ const router = async(uri) => {
 
     if (await renderView(view))
         return 1;
+
+	manage_popup(client)
     
     return 0;
 };

frontend/static/js/utils/noticeUtils.js

@@ -0,0 +1,4 @@
+function manage_popup(client) {
+}
+
+export {manage_popup}

frontend/static/js/views/MeView.js

@@ -11,11 +11,24 @@ export default class extends AbstractAuthentificateView
 
     async postInit()
     {
-        document.getElementById("save-account-button").onclick = this.save_account;
+		this.display_avatar();
-        document.getElementById("delete-account-button").onclick = this.delete_account;
+        document.getElementById("save-account-button").onclick = () => this.save_account();
-        document.getElementById("save-profile-button").onclick = this.save_profile;
+        document.getElementById("delete-account-button").onclick = () => this.delete_account();
+        document.getElementById("save-profile-button").onclick = () => this.save_profile();
     }
 
+	async display_avatar() {
+        let profile = await client.profiles.getProfile(client.me.id);
+		if (profile !== undefined || profile !== null) {
+			if (document.getElementById("avatar") != undefined)
+				document.getElementById("avatar").remove();
+			let avatar = document.createElement("img");
+			avatar.id = "avatar";
+			avatar.src = profile.avatar_url;
+			document.getElementsByClassName("avatar")[0].appendChild(avatar);
+		}
+	}
+
     async delete_account()
     {
         let current_password = document.getElementById("current_password-input").value;
@@ -68,6 +81,7 @@ export default class extends AbstractAuthentificateView
             let form_data = new FormData();
             form_data.append("file", avatar.files[0]);
             await client.me.change_avatar(form_data);
+			this.display_avatar();
         }
         document.getElementById("save-profile").innerHTML = "Saved";
     }
@@ -78,6 +92,8 @@ export default class extends AbstractAuthentificateView
             <link rel="stylesheet" href="/static/css/me.css">
 			<h1>ME</h1>
             <div id="main">
+				<div class="avatar">
+				</div>
                 <div class="account">
                     <h3>Account</h3>
                     <input type="text" placeholder="username" id="username-input" text=${client.me.username}>

frontend/static/js/views/Search.js

@@ -10,7 +10,10 @@ export default class extends AbstractView {
 	async wait_get_online_users() {
 		return new Promise((resolve) => {
 			const checkInterval = setInterval(() => {
-				if (Object.keys(client.notice.online_users).length > 0) {
+				if (client.notice !== undefined &&
+					client.notice.online_users !== undefined &&
+					Object.keys(client.notice.online_users).length > 0) {
+
 					clearInterval(checkInterval);
 					resolve();
 				}

frontend/templates/index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bozo Pong</title>
-	<link rel="stylesheet" href="{% static 'css/bootstrap-5.3.2/bootstrap.css' %}">
+	<link rel="stylesheet" href="{% static 'css/index.css' %}">
 </head>
 <body data-bs-theme="dark">
 	<nav class="navbar navbar-expand-lg bg-body-tertiary rounded m-2">
@@ -23,6 +23,9 @@
 		</div>
 	</div>
 	</nav>
+	<div class="notice">
+		<span id="popup">Test</span>
+	</div>
 	<div id="app" class="m-3"></div>
 	<script type="module" src="{% static 'js/index.js' %}"></script>
 </body>