From 79f694522ef4028af711938ceadf0d2538644bc6 Mon Sep 17 00:00:00 2001
From: danbugs <danilochiarlone@gmail.com>
Date: Mon, 19 Feb 2024 12:30:58 -0800
Subject: [PATCH] Last fixes for frontend and backend

Signed-off-by: danbugs <danilochiarlone@gmail.com>
---
 Dockerfile-SmitheFrontend                     |  6 +++
 Makefile                                      |  4 ++
 backend-service.yml                           |  3 +-
 frontend-ingress.yml                          | 16 +++++++
 frontend-service.yml                          |  3 +-
 frontend/index.html                           |  4 +-
 frontend/nginx.conf                           | 45 +++++++++++++++++++
 .../player_profile_tournament_list.rs         |  7 +--
 frontend/styles.css                           | 37 ++++++++-------
 image-upload-backend/app.js                   |  4 +-
 10 files changed, 101 insertions(+), 28 deletions(-)
 create mode 100644 frontend-ingress.yml
 create mode 100644 frontend/nginx.conf

diff --git a/Dockerfile-SmitheFrontend b/Dockerfile-SmitheFrontend
index ae5aa12..0361f48 100644
--- a/Dockerfile-SmitheFrontend
+++ b/Dockerfile-SmitheFrontend
@@ -1,5 +1,11 @@
 # Use Nginx as the base image
 FROM nginx:alpine
 
+# Remove the default Nginx configuration file
+RUN rm /etc/nginx/conf.d/default.conf
+
+# Copy the Nginx configuration file from your local frontend/nginx.conf to the container's Nginx conf directory
+COPY frontend/nginx.conf /etc/nginx/conf.d/
+
 # Copy the dist folder from your local frontend/dist to the container's Nginx html directory
 COPY frontend/dist/ /usr/share/nginx/html/
diff --git a/Makefile b/Makefile
index 5d1685f..de21165 100644
--- a/Makefile
+++ b/Makefile
@@ -89,6 +89,10 @@ build-frontend:
 serve-frontend:
 	trunk serve ./frontend/index.html
 
+.PHONY: run-image-backend
+run-image-backend:
+	node ./image-upload-backend/app.js
+
 # PYTHON
 .PHONY: py-install-reqs
 py-install-reqs:
diff --git a/backend-service.yml b/backend-service.yml
index 7cbb560..4a504dd 100644
--- a/backend-service.yml
+++ b/backend-service.yml
@@ -3,11 +3,10 @@ kind: Service
 metadata:
   name: backend-service
 spec:
-  type: NodePort
+  type: LoadBalancer
   selector:
     app: backend
   ports:
     - protocol: TCP
       port: 8000
       targetPort: 8000
-      nodePort: 31112
diff --git a/frontend-ingress.yml b/frontend-ingress.yml
new file mode 100644
index 0000000..15625e0
--- /dev/null
+++ b/frontend-ingress.yml
@@ -0,0 +1,16 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: frontend-ingress
+spec:
+  rules:
+  - host: smithe.net
+    http:
+      paths:
+      - path: /
+        pathType: Prefix
+        backend:
+          service:
+            name: frontend-service
+            port:
+              number: 80
\ No newline at end of file
diff --git a/frontend-service.yml b/frontend-service.yml
index d9fbf77..89f0886 100644
--- a/frontend-service.yml
+++ b/frontend-service.yml
@@ -3,11 +3,10 @@ kind: Service
 metadata:
   name: frontend-service
 spec:
-  type: NodePort
+  type: LoadBalancer
   selector:
     app: frontend
   ports:
     - protocol: TCP
       port: 80
       targetPort: 80
-      nodePort: 31111
diff --git a/frontend/index.html b/frontend/index.html
index 7203f84..54e0727 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -21,7 +21,9 @@
     crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link href='https://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
   <link rel="icon" type="image/png" href="/assets/favicon.png" />
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"
+    integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <style type="text/css">
     body {
       font-family: 'Ubuntu', sans-serif;
diff --git a/frontend/nginx.conf b/frontend/nginx.conf
new file mode 100644
index 0000000..2bc9ed6
--- /dev/null
+++ b/frontend/nginx.conf
@@ -0,0 +1,45 @@
+server {
+    listen       80;
+    listen  [::]:80;
+    server_name  localhost;
+
+    #access_log  /var/log/nginx/host.access.log  main;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html =404;
+    }
+
+    #error_page  404              /404.html;
+
+    # redirect server error pages to the static page /50x.html
+    #
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+
+    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
+    #
+    #location ~ \.php$ {
+    #    proxy_pass   http://127.0.0.1;
+    #}
+
+    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
+    #
+    #location ~ \.php$ {
+    #    root           html;
+    #    fastcgi_pass   127.0.0.1:9000;
+    #    fastcgi_index  index.php;
+    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
+    #    include        fastcgi_params;
+    #}
+
+    # deny access to .htaccess files, if Apache's document root
+    # concurs with nginx's one
+    #
+    #location ~ /\.ht {
+    #    deny  all;
+    #}
+}
\ No newline at end of file
diff --git a/frontend/src/components/player_profile/player_profile_tournament_list.rs b/frontend/src/components/player_profile/player_profile_tournament_list.rs
index 7e7a6d5..50fc70a 100644
--- a/frontend/src/components/player_profile/player_profile_tournament_list.rs
+++ b/frontend/src/components/player_profile/player_profile_tournament_list.rs
@@ -152,7 +152,8 @@ pub fn player_profile_tournament_list(props: &Props) -> Html {
                                                     // Construct Twitter Web Intent URL
                                                     let twitter_message = "Heads up, the URL below will be rendered as an image once you send out the tweet - feel free to delete this message and add your own comment about your run while leaving the URL at the bottom.\n";
                                                     let image_url = format!(
-                                                        "https://smithe.pictures/image/{}",
+                                                        "{}/image/{}",
+                                                        env!("SERVER_ADDRESS_2"),
                                                         success.filename
                                                     );
                                                     let tweet_intent_url = format!("https://twitter.com/intent/tweet?text={}%0A{}", encode_uri_component(twitter_message), encode_uri_component(&image_url));
@@ -334,7 +335,7 @@ pub fn player_profile_tournament_list(props: &Props) -> Html {
                                                                     <div class="tournament-info">
                                                                         <h3 class="tournament-title">{t.event_name.to_string()}</h3>
                                                                         <p class="tournament-details">
-                                                                            {format!("Seed: {}, Placement: {}/{}", &t.seed, &t.placement, &t.num_entrants)}
+                                                                            {format!("Placement: {}/{}", &t.placement, &t.num_entrants)}
                                                                         </p>
                                                                     </div>
                                                                     <div class="match-results">
@@ -349,7 +350,7 @@ pub fn player_profile_tournament_list(props: &Props) -> Html {
                                                                                                     std::cmp::Ordering::Equal => "tie",
                                                                                                 }
                                                                                             }>
-                                                                                            {format!("{} - {} vs {} (Seed: {})", s.requester_score, s.opponent_score, s.opponent_tag_with_prefix, s.opponent_seed)}
+                                                                                            {format!("{} - {} vs {}", s.requester_score, s.opponent_score, s.opponent_tag_with_prefix)}
                                                                                         </span>
                                                                                     </div>
                                                                                 }
diff --git a/frontend/styles.css b/frontend/styles.css
index 57610c0..8c33ccb 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -21,17 +21,16 @@ ul.list-group.list-group-hover button:hover{
 
 /* screenshot stuff */
 .screenshot-container {
-    width: 800px; /* Fixed width */
-    height: 418px; /* Fixed height */
-    border-radius: 25px; /* Rounded edges, considering Twitter's card style */
+    width: 800px;
+    height: 418px;
+    border-radius: 25px;
     overflow: hidden;
     background: white;
-    box-shadow: 0 0 15px rgba(0,0,0,0.1);
-    padding: 15px; /* Further reduced padding to fit the title */
+    padding: 15px;
     font-family: 'Arial', sans-serif;
     display: flex;
     flex-direction: column;
-    justify-content: space-between; /* Distribute space evenly */
+    justify-content: space-between;
 }
 
 .tournament-info {
@@ -40,29 +39,29 @@ ul.list-group.list-group-hover button:hover{
 }
 
 .tournament-title {
-    font-size: 22px; /* Slightly reduced font size to prevent cutting off */
-    margin-bottom: 2px; /* Minimized bottom margin */
+    font-size: 22px;
+    margin-bottom: 2px;
 }
 
 .tournament-details {
-    font-size: 16px; /* Adjusted for space */
+    font-size: 16px;
 }
 
 .match-results {
-    width: 770px; /* Width to fit within the padding */
+    width: 770px;
     text-align: center;
-    font-size: 15px; /* Slightly reduced font size to fit more content */
+    font-size: 15px;
 }
 
 .match-result {
     background: #f2f2f2;
-    padding: 6px 10px; /* Slightly reduced padding */
-    margin: 3px 0; /* Reduced margin to fit more items */
-    border-radius: 10px; /* Adjusted border radius */
+    border: 1px solid #e6e6e6;
+    border-radius: 10px;
 }
 
 .win {
     color: green;
+    font-weight: bold;
 }
 
 .loss {
@@ -74,17 +73,17 @@ ul.list-group.list-group-hover button:hover{
 }
 
 .twitter-footer {
-    font-size: 15px; /* Slightly reduced font size */
+    font-size: 15px;
 }
 
 .grecaptcha-badge {
-    z-index: 1000; /* Set z-index to a high value */
-    position: relative; /* Make sure it's positioned relative or absolute */
+    z-index: 1000;
+    position: relative;
 }
 
 footer {
-    z-index: 10; /* Lower z-index than the reCAPTCHA */
-    position: fixed; /* Or use 'absolute' if 'fixed' is not necessary */
+    z-index: 10;
+    position: fixed;
     bottom: 0;
     width: 100%;
   }
\ No newline at end of file
diff --git a/image-upload-backend/app.js b/image-upload-backend/app.js
index d2174b7..f99f7fe 100644
--- a/image-upload-backend/app.js
+++ b/image-upload-backend/app.js
@@ -12,7 +12,9 @@ const app = express();
 
 // CORS configuration to allow only smithe.net
 const corsOptions = {
-    origin: ['http://smithe.net', 'https://smithe.net'],
+    // when not in prod, uncomment below to allow all origins
+    // origin: '*',
+    origin: ['http://127.0.0.1:8080', 'http://smithe.net', 'https://smithe.net'],
     optionsSuccessStatus: 200 // For legacy browser support
   };