setValue(target.value)}
@@ -41,6 +47,6 @@ export const Display = ({
/>
))}
-
+
);
};
diff --git a/src/components/Flag/Flag.tsx b/src/components/Flag/Flag.tsx
index 2963c13..ed640c9 100644
--- a/src/components/Flag/Flag.tsx
+++ b/src/components/Flag/Flag.tsx
@@ -7,6 +7,15 @@ interface FlagProps {
}
export const Flag = ({ flag, showLabel }: FlagProps) => {
+ const getHeight = () => {
+ const heights = [15, 50];
+ const size = window.screen.width;
+
+ const base = heights[size < 400 ? 0 : 1];
+ const height = flag !== Flags.SPACE ? base : base * 2;
+ return `${height}px`;
+ };
+
return (
{
}}
>
.find((k))
Flags[k] === flag)]}
/>
From 6b03b7e24079cab6ec342f7fcb3451fd3fd38079 Mon Sep 17 00:00:00 2001
From: LachlanCourt
Date: Tue, 21 Oct 2025 15:58:36 +1100
Subject: [PATCH 4/7] Add image download
---
package.json | 1 +
src/components/Display/Display.tsx | 57 ++++++++++++++++++++----------
src/index.css | 5 +++
yarn.lock | 34 ++++++++++++++++++
4 files changed, 79 insertions(+), 18 deletions(-)
diff --git a/package.json b/package.json
index 2142e31..36c333f 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
"preview": "vite preview"
},
"dependencies": {
+ "html2canvas": "^1.4.1",
"react": "^19.1.1",
"react-dom": "^19.1.1"
},
diff --git a/src/components/Display/Display.tsx b/src/components/Display/Display.tsx
index a01b731..72022eb 100644
--- a/src/components/Display/Display.tsx
+++ b/src/components/Display/Display.tsx
@@ -1,5 +1,7 @@
+import { useRef } from "react";
import { Flag } from "../Flag/Flag";
import { Flags } from "../Keyboard/flags";
+import html2canvas from "html2canvas";
interface DisplayProps {
showInput?: boolean;
@@ -14,12 +16,28 @@ export const Display = ({
setValue,
showLabels,
}: DisplayProps) => {
+ const container = useRef(null);
+
+ const download = () => {
+ if (!container.current) return;
+ html2canvas(container.current).then((element) => {
+ const data = element.toDataURL("image/png");
+ const downloadLink = document.createElement("a");
+ downloadLink.href = data;
+ downloadLink.download = "image.png";
+ document.body.appendChild(downloadLink);
+ downloadLink.click();
+ document.body.removeChild(downloadLink);
+ });
+ };
+
return (
-
Date: Tue, 21 Oct 2025 16:21:16 +1100
Subject: [PATCH 5/7] Update scales
---
src/components/Display/Display.tsx | 11 +++++++++--
1 file changed, 9 insertions(+), 2 deletions(-)
diff --git a/src/components/Display/Display.tsx b/src/components/Display/Display.tsx
index 72022eb..dfec455 100644
--- a/src/components/Display/Display.tsx
+++ b/src/components/Display/Display.tsx
@@ -18,9 +18,16 @@ export const Display = ({
}: DisplayProps) => {
const container = useRef(null);
+ const getScale = () => {
+ const scales = [1, 1, 0.75, 0.5, 0.4, 0.4, 0.3];
+ return scales[Math.floor(value.length / 10)] || 0.1;
+ };
+
const download = () => {
if (!container.current) return;
- html2canvas(container.current).then((element) => {
+ html2canvas(container.current, {
+ scale: getScale(),
+ }).then((element) => {
const data = element.toDataURL("image/png");
const downloadLink = document.createElement("a");
downloadLink.href = data;
@@ -30,7 +37,7 @@ export const Display = ({
document.body.removeChild(downloadLink);
});
};
-
+ console.log(1 / Math.ceil(value.length / 10));
return (
- {value
- .toLowerCase()
- .split("")
- .map((char) => (
-
);
};
diff --git a/src/index.css b/src/index.css
index 08a3ac9..f11b834 100644
--- a/src/index.css
+++ b/src/index.css
@@ -66,3 +66,8 @@ button:focus-visible {
background-color: #f9f9f9;
}
}
+
+.display-container {
+ background-color: #242424;
+ padding: "2rem";
+}
diff --git a/yarn.lock b/yarn.lock
index 71d0fa9..d6144a1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -760,6 +760,11 @@ balanced-match@^1.0.0:
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+base64-arraybuffer@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
+ integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
+
baseline-browser-mapping@^2.8.9:
version "2.8.18"
resolved "https://registry.yarnpkg.com/baseline-browser-mapping/-/baseline-browser-mapping-2.8.18.tgz#b44b18cadddfa037ee8440dafaba4a329dfb327c"
@@ -847,6 +852,13 @@ cross-spawn@^7.0.6:
shebang-command "^2.0.0"
which "^2.0.1"
+css-line-break@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-2.1.0.tgz#bfef660dfa6f5397ea54116bb3cb4873edbc4fa0"
+ integrity sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==
+ dependencies:
+ utrie "^1.0.2"
+
csstype@^3.0.2:
version "3.1.3"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@@ -1129,6 +1141,14 @@ has-flag@^4.0.0:
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+html2canvas@^1.4.1:
+ version "1.4.1"
+ resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
+ integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
+ dependencies:
+ css-line-break "^2.1.0"
+ text-segmentation "^1.0.3"
+
ignore@^5.2.0:
version "5.3.2"
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
@@ -1483,6 +1503,13 @@ supports-color@^7.1.0:
dependencies:
has-flag "^4.0.0"
+text-segmentation@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/text-segmentation/-/text-segmentation-1.0.3.tgz#52a388159efffe746b24a63ba311b6ac9f2d7943"
+ integrity sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==
+ dependencies:
+ utrie "^1.0.2"
+
tinyglobby@^0.2.15:
version "0.2.15"
resolved "https://registry.yarnpkg.com/tinyglobby/-/tinyglobby-0.2.15.tgz#e228dd1e638cea993d2fdb4fcd2d4602a79951c2"
@@ -1545,6 +1572,13 @@ uri-js@^4.2.2:
dependencies:
punycode "^2.1.0"
+utrie@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/utrie/-/utrie-1.0.2.tgz#d42fe44de9bc0119c25de7f564a6ed1b2c87a645"
+ integrity sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==
+ dependencies:
+ base64-arraybuffer "^1.0.2"
+
vite@^7.1.7:
version "7.1.11"
resolved "https://registry.yarnpkg.com/vite/-/vite-7.1.11.tgz#4d006746112fee056df64985191e846ebfb6007e"
From 3cdd5b5644b51228424056708db91714682855ba Mon Sep 17 00:00:00 2001
From: LachlanCourt
+
+
+
+ {value
+ .toLowerCase()
+ .split("")
+ .map((char) => (
+
Date: Thu, 23 Oct 2025 14:31:14 +1100
Subject: [PATCH 6/7] Add delete and randomise buttons
---
src/components/Checkbox/Checkbox.tsx | 10 ++-
src/components/Display/Display.tsx | 2 +-
src/components/Keyboard/Keyboard.tsx | 116 ++++++++++++++++++---------
src/functions/shuffle.tsx | 7 ++
4 files changed, 95 insertions(+), 40 deletions(-)
create mode 100644 src/functions/shuffle.tsx
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 7dfc141..33215fe 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -13,12 +13,20 @@ export const Checkbox = ({
}: CheckboxProps) => {
const id = useId();
return (
-
+
onChange?.(target.checked)}
defaultChecked={defaultChecked}
+ style={{ width: "1.2rem" }}
/>