From 5307946ce62402ac7cf23aa1b0bf0770b49acc37 Mon Sep 17 00:00:00 2001
From: Fluffy <michal-gdula@protonmail.com>
Date: Fri, 23 Jun 2023 21:58:31 +0000
Subject: [PATCH] Update pfp preview on file uplaod

---
 TFR/server/__init__.py                        |  6 +---
 TFR/server/static/sass/profile-settings.sass  | 11 ++++++-
 TFR/server/static/sass/style.sass             | 13 +++++++--
 TFR/server/templates/error.html               |  2 +-
 .../templates/views/account_settings.html     | 29 +++++++++++++++----
 TFR/server/templates/views/scores.html        | 20 +++++--------
 6 files changed, 53 insertions(+), 28 deletions(-)

diff --git a/TFR/server/__init__.py b/TFR/server/__init__.py
index 053fc46..04a6baf 100644
--- a/TFR/server/__init__.py
+++ b/TFR/server/__init__.py
@@ -1,5 +1,3 @@
-from random import randint
-
 from flask import Flask, render_template, abort
 from flask_assets import Bundle
 from werkzeug.exceptions import HTTPException
@@ -53,8 +51,6 @@ def error_page(err):
         abort(500)
 
     return (
-        render_template(
-            "error.html", error=err.code, msg=err.description, image=str(randint(1, 3))
-        ),
+        render_template("error.html", error=err.code, msg=err.description),
         err.code,
     )
diff --git a/TFR/server/static/sass/profile-settings.sass b/TFR/server/static/sass/profile-settings.sass
index 8219a87..4b613ac 100644
--- a/TFR/server/static/sass/profile-settings.sass
+++ b/TFR/server/static/sass/profile-settings.sass
@@ -12,6 +12,7 @@
         flex-direction: column
 
         border: 1px solid RGBA($white, 0.1)
+        box-sizing: content-box
 
         > img
             height: 10rem
@@ -67,7 +68,11 @@
         gap: 0.5rem
 
         > .text-input
-            margin: 0 !important
+            margin: 0
+
+        > button
+            margin: 0 0 0 auto
+            width: auto
 
 @media (max-width: 621px)
 	.profile-settings
@@ -80,3 +85,7 @@
 			> img
 				height: 13rem
 				width: 13rem
+
+		.other > button
+            margin: 0
+            width: 100%
\ No newline at end of file
diff --git a/TFR/server/static/sass/style.sass b/TFR/server/static/sass/style.sass
index fd0004f..716e30b 100644
--- a/TFR/server/static/sass/style.sass
+++ b/TFR/server/static/sass/style.sass
@@ -90,9 +90,16 @@ body
 					padding: 0.5rem
 					text-align: center
 
-					&.player
-						color: RGB($secondary)
-						text-shadow: 0 0 5px RGBA($secondary, 0.7)
+					> a
+						color: RGB($white)
+						text-decoration: none
+
+						&#you
+							color: RGB($primary)
+							text-shadow: 0 0 5px RGBA($primary, 0.4)
+
+						&:hover
+							text-decoration: underline
 
 					> i
 						padding: 0.25rem
diff --git a/TFR/server/templates/error.html b/TFR/server/templates/error.html
index 9dd1290..977574f 100644
--- a/TFR/server/templates/error.html
+++ b/TFR/server/templates/error.html
@@ -3,6 +3,6 @@
     <div class="center-text">
         <h2>{{ error }}</h2>
         <p>{{ msg }}</p>
-        <image src="{{ url_for('static', filename='images/error/' + image + '.jpg') }}" alt="Error">
+        <image src="{{ url_for('static', filename='images/error.png') }}" alt="Error">
     </div>
 {% endblock %}
\ No newline at end of file
diff --git a/TFR/server/templates/views/account_settings.html b/TFR/server/templates/views/account_settings.html
index 66ceb3e..5a450fb 100644
--- a/TFR/server/templates/views/account_settings.html
+++ b/TFR/server/templates/views/account_settings.html
@@ -8,9 +8,9 @@
             <div class="profile-settings">
                 <div class="picture">
                     {% if current_user.picture %}
-                        <img src="{{ url_for('api.upload_dir', filename=current_user.picture) }}" alt="Profile picture">
+                        <img src="{{ url_for('api.upload_dir', filename=current_user.picture) }}" alt="Profile picture" id="picture-preview">
                     {% else %}
-                        <img src="{{ url_for('static', filename='images/pfp.png') }}" alt="Profile picture">
+                        <img src="{{ url_for('static', filename='images/pfp.png') }}" alt="Profile picture" id="picture-preview">
                     {% endif %}
                     <label for="profile-picture">Profile Picture</label>
                     <input type="file" name="file" id="profile-picture">
@@ -60,9 +60,26 @@
     </div>
 
 
-    {% if not current_user.email %}
-        <script>
+    <script>
+        {% if not current_user.email %}
             addFlashMessage("No Email set. If you loose your account, it will not be possible to recover it!", "error")
-        </script>
-    {% endif %}
+        {% endif %}
+
+        // Adjusted from https://stackoverflow.com/a/3814285/14885829
+        document.getElementById('profile-picture').onchange = (event) => {
+            let tgt = event.target || window.event.srcElement,
+                files = tgt.files;
+            
+            if (FileReader && files && files.length) {
+                let fr = new FileReader();
+                fr.onload = () => {
+                    document.getElementById('picture-preview').src = fr.result;
+                }
+                fr.readAsDataURL(files[0]);
+            }
+            else {
+                addFlashMessage("Your browser could not show a preview of your profile picture!", "error")
+            }
+        }
+    </script>
 {% endblock %}
diff --git a/TFR/server/templates/views/scores.html b/TFR/server/templates/views/scores.html
index 9f56813..336e62f 100644
--- a/TFR/server/templates/views/scores.html
+++ b/TFR/server/templates/views/scores.html
@@ -45,11 +45,8 @@
             {% endif %}
             <div class="other">
                 <h2>{{ user.username }}</h2>
-                <p>Joined {{ user.joined_at.strftime('%Y-%m-%d') }}</p>
-
                 <hr>
-
-                <p>Best score: {{ scores[0].score | format_result }}</p>
+                <p>Joined {{ user.joined_at|timesince }}</p>
             </div>
         </div>
     {% endif %}
@@ -74,14 +71,13 @@
                         {% else %}
                             <td>{{ loop.index }}</td>
                         {% endif %}
-
-                        {% if score.users.id == current_user.id %}
-                            <td class="player">{{ score.users.username }}</td>
-                        {% else %}
-                            <td>{{ score.users.username }}</td>
-                        {% endif %}
-
-                        <td>{{ score.score | format_result }}</td>
+                        <td>
+                            <a
+                                href="{{ url_for('views.index', user=score.users.username) }}"
+                                {% if score.users.id == current_user.id %}id="you"{% endif %}
+                            >{{ score.users.username }}</a>
+                        </td>
+                        <td>{{ score.score|format_result }}</td>
                         <td>{{ score.scored_at.strftime('%Y-%m-%d') }}</td>
                     </tr>
                 {% endfor %}