feat(color): consider only the average color of the bottom 20% of the…

… image

src/GZCTF/ClientApp/package.json

@@ -74,13 +74,13 @@
     "axios": "^1.7.9",
     "babel-plugin-prismjs": "^2.1.0",
     "eslint": "^9.18.0",
-    "eslint-plugin-oxlint": "^0.15.6",
+    "eslint-plugin-oxlint": "^0.15.7",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "5.1.0",
     "form-data": "~4.0.1",
     "globals": "^15.14.0",
     "lodash": "^4.17.21",
-    "oxlint": "^0.15.6",
+    "oxlint": "^0.15.7",
     "postcss": "^8.5.1",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",

src/GZCTF/ClientApp/src/hooks/useForeground.ts

@@ -8,8 +8,28 @@ export const useForeground = (image?: string | null) => {
     if (!image) return
 
     const getColor = async () => {
+      const img = new Image()
+      img.src = image
+      img.crossOrigin = 'anonymous'
+      await new Promise((resolve) => {
+        img.onload = resolve
+      })
+
+      const imgWidth = img.width
+      const imgHeight = Math.ceil(img.height * 0.2)
+
+      const canvas =
+        typeof OffscreenCanvas !== 'undefined'
+          ? new OffscreenCanvas(imgWidth, imgHeight)
+          : document.createElement('canvas')
+
+      const ctx = canvas.getContext('2d')
+      if (!ctx) return
+
+      ctx.drawImage(img, 0, img.height - imgHeight, imgWidth, imgHeight, 0, 0, imgWidth, imgHeight)
+
       const fac = new FastAverageColor()
-      const color = await fac.getColorAsync(image)
+      const color = await fac.getColorAsync(canvas)
       if (color.value[3] < 128) {
         setColor('var(--mantine-color-text)')
       } else {