Add Custom Gradient Color Picker

README.md

@@ -19,7 +19,7 @@ To then start the local site
 
 # 🗺 Roadmap
  - [ ] ↔ Flip the profile picture
- - [ ] 🎨 Custom gradients
+ - [X] 🎨 Custom gradients ([@FrederikHeinrich](https://github.com/FrederikHeinrich/))
  - [ ] 🎩 Cosmetics
  - [ ] 💈 Hair layer toggle
  - [ ] 📷 Upload custom background

docker-compose.yml

@@ -0,0 +1,9 @@
+version: '3'
+services:
+  web:
+    image: node:17.4.0
+    restart: always
+    ports:
+      - "3000:3000"
+    command: npm run dev
+

src/lib/scripts/gradients.ts

@@ -16,14 +16,31 @@ function changeGradient(ctx: CanvasRenderingContext2D, orientation?: "left" | "r
 		if (selected < 0) selected = gradients.length - 1
 	}
 
+	let colorpicker1 = document.getElementById("gradientColor1") as HTMLInputElement;
+	let colorpicker2 = document.getElementById("gradientColor2") as HTMLInputElement;
+
+	colorpicker1.value = gradients[selected][0];
+	colorpicker2.value = gradients[selected][1];
+
+	const gradient = ctx.createLinearGradient(0, 15, 0, 0);
+	gradient.addColorStop(0, colorpicker1.value);
+	gradient.addColorStop(1, colorpicker2.value);
+	ctx.fillStyle = gradient;
+	ctx.fillRect(0, 0, 20, 20);
+}
+
+function generateGradient(ctx: CanvasRenderingContext2D) {
+
+	let colorpicker1 = document.getElementById("gradientColor1") as HTMLInputElement;
+	let colorpicker2 = document.getElementById("gradientColor2") as HTMLInputElement;
+
 	const gradient = ctx.createLinearGradient(0, 15, 0, 0);
-	let interval = 1;
-	gradients[selected].forEach(colour => {
-		gradient.addColorStop(interval, colour)
-		interval -= 1 / (gradients[selected].length - 1);
-	})
+	gradient.addColorStop(0, colorpicker1.value);
+	gradient.addColorStop(1, colorpicker2.value);
 	ctx.fillStyle = gradient;
 	ctx.fillRect(0, 0, 20, 20);
 }
 
-export default changeGradient;
+export default {
+	changeGradient, generateGradient
+};

src/routes/generate/index.svelte

@@ -5,7 +5,7 @@
     import ArrowButton from "@components/ArrowButton.svelte";
     import Popup from "@components/Popup.svelte";
     import SEO from "@components/SEO.svelte";
-    import changeGradient from "@scripts/gradients";
+    import gradients from "@scripts/gradients";
     import generatePfp from "@scripts/generateProfile";
     import { mergeCanvases } from "@scripts/utils";
     import { page } from "$app/stores";
@@ -20,19 +20,20 @@
     let gradientCtx: CanvasRenderingContext2D;
     let profileCanvas: HTMLCanvasElement;
     let profileCtx: CanvasRenderingContext2D;
+    let colorpicker1: HTMLInputElement;
+    let colorpicker2: HTMLInputElement;
+
     onMount(async () => {
         if (!urlSearchParamIGN) goto("/generate?ign=I_Like_Cats__", { replaceState: false });
         else username = urlSearchParamIGN.replace(/[^a-z0-9_]/gi, "");
 
-        gradientCanvas = window.document.getElementById("gradientCanvas") as HTMLCanvasElement;
         gradientCanvas.width = 300;
         gradientCanvas.height = 300;
         gradientCtx = gradientCanvas.getContext("2d");
         gradientCtx.scale(16, 16);
         gradientCtx.imageSmoothingEnabled = false;
-        changeGradient(gradientCtx);
+        gradients.changeGradient(gradientCtx);
 
-        profileCanvas = window.document.getElementById("profileCanvas") as HTMLCanvasElement;
         profileCanvas.width = 300;
         profileCanvas.height = 300;
         profileCtx = profileCanvas.getContext("2d");
@@ -92,14 +93,29 @@
         </div>
 
         <div id="uiWrapper">
-            <ArrowButton on:click={() => changeGradient(gradientCtx, "left")} orientation="left" />
+            <ArrowButton on:click={() => gradients.changeGradient(gradientCtx, "left")} orientation="left" />
 
             <div id="canvasWrapper">
-                <canvas id="gradientCanvas" />
-                <canvas id="profileCanvas" />
+                <canvas id="gradientCanvas" bind:this={gradientCanvas} />
+                <canvas id="profileCanvas" bind:this={profileCanvas} />
             </div>
 
-            <ArrowButton on:click={() => changeGradient(gradientCtx, "right")} orientation="right" />
+            <ArrowButton on:click={() => gradients.changeGradient(gradientCtx, "right")} orientation="right" />
+        </div>
+        <div id="GradientColorPicker">
+            <input type="color" id="gradientColor1" name="gradientColor1" bind:this={ 
+            colorpicker1 } on:input={
+                () => {
+                    gradients.generateGradient(gradientCtx)
+                }
+            }>
+            <input type="color" id="gradientColor2" name="gradientColor2" bind:this={
+            colorpicker2
+        } on:input={
+                () => {
+                    gradients.generateGradient(gradientCtx)
+                }
+            }>
         </div>
 
         <div id="SaveButtonWrapper">
@@ -166,6 +182,14 @@
             }
         }
 
+        #GradientColorPicker {
+            margin-top: 2rem;
+            display: flex;
+            flex-direction: row;
+            gap: 2rem;
+            justify-content: center;
+        }
+
         #SaveButtonWrapper {
             margin-top: 2rem;
             display: flex;