From 6ffe24d2e86f772791e2711dc24f0ba53b8d72b5 Mon Sep 17 00:00:00 2001 From: Freddi Date: Tue, 1 Nov 2022 11:33:35 +0100 Subject: [PATCH 1/5] Add Custom gradients --- README.md | 2 +- src/lib/scripts/gradients.ts | 30 ++++++++++++++++++++------ src/routes/generate/index.svelte | 36 ++++++++++++++++++++++++++++---- 3 files changed, 57 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 11270ab..c10a0f3 100644 --- a/README.md +++ b/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 diff --git a/src/lib/scripts/gradients.ts b/src/lib/scripts/gradients.ts index 7879633..1141bbf 100644 --- a/src/lib/scripts/gradients.ts +++ b/src/lib/scripts/gradients.ts @@ -16,14 +16,32 @@ 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); + ctx.getImageData(0, 0, 20, 20); } -export default changeGradient; +export default { + changeGradient, generateGradient +}; diff --git a/src/routes/generate/index.svelte b/src/routes/generate/index.svelte index 73cd4dc..f89b004 100644 --- a/src/routes/generate/index.svelte +++ b/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,9 +20,14 @@ 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, ""); + colorpicker1 = window.document.getElementById("gradientColor1") as HTMLInputElement; + colorpicker2 = window.document.getElementById("gradientColor2") as HTMLInputElement; gradientCanvas = window.document.getElementById("gradientCanvas") as HTMLCanvasElement; gradientCanvas.width = 300; @@ -30,7 +35,7 @@ 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; @@ -92,14 +97,29 @@
- changeGradient(gradientCtx, "left")} orientation="left" /> + gradients.changeGradient(gradientCtx, "left")} orientation="left" />
- changeGradient(gradientCtx, "right")} orientation="right" /> + gradients.changeGradient(gradientCtx, "right")} orientation="right" /> +
+
+ { + gradients.generateGradient(gradientCtx) + } + }> + { + gradients.generateGradient(gradientCtx) + } + }>
@@ -166,6 +186,14 @@ } } + #GradientColorPicker { + margin-top: 2rem; + display: flex; + flex-direction: row; + gap: 2rem; + justify-content: center; + } + #SaveButtonWrapper { margin-top: 2rem; display: flex; From e8c25e76bdd111d1761e98dc4e1109956802f23d Mon Sep 17 00:00:00 2001 From: Freddi Date: Tue, 1 Nov 2022 11:43:09 +0100 Subject: [PATCH 2/5] Update gradients.ts --- src/lib/scripts/gradients.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/scripts/gradients.ts b/src/lib/scripts/gradients.ts index 1141bbf..bb572d4 100644 --- a/src/lib/scripts/gradients.ts +++ b/src/lib/scripts/gradients.ts @@ -39,7 +39,6 @@ function generateGradient(ctx: CanvasRenderingContext2D) { gradient.addColorStop(1, colorpicker2.value); ctx.fillStyle = gradient; ctx.fillRect(0, 0, 20, 20); - ctx.getImageData(0, 0, 20, 20); } export default { From 9a400b4de1059792e720768a8812780b5cc497dc Mon Sep 17 00:00:00 2001 From: Freddi Date: Tue, 1 Nov 2022 12:24:38 +0100 Subject: [PATCH 3/5] Update index.svelte Code Cleanup --- src/routes/generate/index.svelte | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/routes/generate/index.svelte b/src/routes/generate/index.svelte index f89b004..c95c2c1 100644 --- a/src/routes/generate/index.svelte +++ b/src/routes/generate/index.svelte @@ -26,8 +26,6 @@ onMount(async () => { if (!urlSearchParamIGN) goto("/generate?ign=I_Like_Cats__", { replaceState: false }); else username = urlSearchParamIGN.replace(/[^a-z0-9_]/gi, ""); - colorpicker1 = window.document.getElementById("gradientColor1") as HTMLInputElement; - colorpicker2 = window.document.getElementById("gradientColor2") as HTMLInputElement; gradientCanvas = window.document.getElementById("gradientCanvas") as HTMLCanvasElement; gradientCanvas.width = 300; From 273298911dd525540d7c677e63bba00dbec83b1b Mon Sep 17 00:00:00 2001 From: Freddi Date: Tue, 1 Nov 2022 12:26:18 +0100 Subject: [PATCH 4/5] Update index.svelte Code Cleanup --- src/routes/generate/index.svelte | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/routes/generate/index.svelte b/src/routes/generate/index.svelte index c95c2c1..b95708b 100644 --- a/src/routes/generate/index.svelte +++ b/src/routes/generate/index.svelte @@ -27,7 +27,6 @@ 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"); @@ -35,7 +34,6 @@ gradientCtx.imageSmoothingEnabled = false; gradients.changeGradient(gradientCtx); - profileCanvas = window.document.getElementById("profileCanvas") as HTMLCanvasElement; profileCanvas.width = 300; profileCanvas.height = 300; profileCtx = profileCanvas.getContext("2d"); @@ -98,8 +96,8 @@ gradients.changeGradient(gradientCtx, "left")} orientation="left" />
- - + +
gradients.changeGradient(gradientCtx, "right")} orientation="right" /> From 5b4ea0f012569093fe0dbaac3f8d831bbd89c547 Mon Sep 17 00:00:00 2001 From: Freddi Date: Sat, 22 Jul 2023 02:06:51 +0200 Subject: [PATCH 5/5] Create docker-compose.yml --- docker-compose.yml | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 docker-compose.yml diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..b0f2e57 --- /dev/null +++ b/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 +