From 187602d871b939c6cbb045d9696a5873f4c9c279 Mon Sep 17 00:00:00 2001
From: Andreas Grasser <andi@grasserisen.de>
Date: Sat, 19 Nov 2022 20:52:03 +0100
Subject: [PATCH] Design-Verbesserungen

---
 create-circle.js | 17 +++++++++++++++++
 image.js         |  4 ++--
 index.html       |  1 +
 style.css        |  1 +
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/create-circle.js b/create-circle.js
index 4a4a00d..4355ffd 100644
--- a/create-circle.js
+++ b/create-circle.js
@@ -11,6 +11,8 @@ let requestCounter = 1;
 function circle_main() {
     // Make Button invisible to prevent clicking
     document.getElementById("btn_create").style.display = "none";
+    // Reset all global variables
+    [ownProfilePic, userInfo, connection_list, requestCounter] = [null, null, {}, 1];
     // Get handle from Textfield
     let mastodon_handle = document.getElementById("txt_mastodon_handle").value;
     userInfo = formatedUserHandle(mastodon_handle);
@@ -140,6 +142,7 @@ function showConnections() {
     );
     
     // Render the Objects
+    document.getElementById("btn_download").style.display = "inline";
     render(items);
 }
 
@@ -165,4 +168,18 @@ function httpRequest(url, callback, callbackVal=null)
     }
     xmlHttp.open("GET", url, true);
     xmlHttp.send(null);
+}
+
+function downloadImage() {
+    var canvas = document.getElementById("canvas");
+    // Convert the canvas to data
+    var image = canvas.toDataURL();
+    // Create a link
+    var aDownloadLink = document.createElement('a');
+    // Add the name of the file to the link
+    aDownloadLink.download = 'mastodon-circle.png';
+    // Attach the data to the link
+    aDownloadLink.href = image;
+    // Get the code to click the download link
+    aDownloadLink.click();
 }
\ No newline at end of file
diff --git a/image.js b/image.js
index ce89a52..7d6f9ab 100644
--- a/image.js
+++ b/image.js
@@ -13,9 +13,8 @@ function render(users) {
 	const height = canvas.height;
 
 	// fill the background
-	ctx.fillStyle = "#C5EDCE";
+	ctx.fillStyle = "#282c37";
 	ctx.fillRect(0, 0, width, height);
-    ctx.fillStyle = "#000000";
 
     loadImage(ctx, ownProfilePic, (width/2)-110, (height/2)-110, 110, 110);
 
@@ -53,6 +52,7 @@ function render(users) {
 		}
 	}
 
+	ctx.fillStyle = "#DDDDDD";
     ctx.fillText("@sonnenbrandi@mieke.club mit lieben Grüßen an Duiker101", 700, 985, 290)
 };
 
diff --git a/index.html b/index.html
index fea9263..1a18b42 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
     <!-- Logo? -->
     <input id="txt_mastodon_handle" type="text" placeholder="@sonnenbrandi@mieke.club" style="width: 300px;">
     <button id="btn_create" onClick="circle_main()">Circle Erstellen</button>
+    <button id="btn_download" onClick="downloadImage()" style="display: none;">DOWNLOAD</button>
     <br><br><br>
     <canvas id="canvas" width="1000" height="1000"></canvas>
     <div id="outDiv"></div>
diff --git a/style.css b/style.css
index fd5c58c..68b5bda 100644
--- a/style.css
+++ b/style.css
@@ -6,4 +6,5 @@ body {
     padding-left: 10%;
     padding-right: 10%;
     padding-top: 75px;
+    text-align: center;
 }
\ No newline at end of file