WIP

src/board/Board.ts

@@ -83,6 +83,14 @@ class Board {
     this.updateConfig(config, false);
   }
 
+  async setCanvas(canvas: HTMLCanvasElement) {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
+    this.setSize(this.cfg.size);
+
+    await this.refresh();
+  }
+
   async updateConfig(config: Partial<BoardConfig>, refresh: boolean = true) {
     const cfg = { ...this.cfg, ...config };
 

src/board/layers/drawHeader.ts

@@ -1,6 +1,7 @@
 import { Header, Style } from "../../types";
 import drawRectangle from "./drawRectangle";
 import drawText from "./drawText";
+import loadImage from "../loaders/loadImage";
 
 const drawHeader = async (
   ctx: CanvasRenderingContext2D,
@@ -84,6 +85,25 @@ const drawHeader = async (
 
       fromTop += line;
     });
+
+  const logo = await loadImage("/img/logo-full.svg");
+  const logoHeight = size * 0.114 * 0.5;
+
+  ctx.shadowColor = "rgba(0, 0, 0, 1)";
+  ctx.shadowOffsetX = 0;
+  ctx.shadowOffsetY = 0;
+  ctx.shadowBlur = 10 * scale;
+  ctx.drawImage(
+    logo,
+    size / 4,
+    margin + size + margin - logoHeight * 2,
+    size / 2,
+    logoHeight
+  );
+  ctx.shadowColor = "rgba(0, 0, 0, 0)";
+  ctx.shadowBlur = 0;
+  ctx.shadowOffsetX = 0;
+  ctx.shadowOffsetY = 0;
 };
 
 export default drawHeader;

src/board/styles-board/gradient/contrast-b.ts

@@ -24,7 +24,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "color",
-    data: "#3cff0055",
+    data: "#ffaa0055",
   },
   border: {
     type: "gradient",

src/board/styles-board/gradient/contrast-c.ts

@@ -24,7 +24,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "color",
-    data: "#3cff0055",
+    data: "#00ffff55",
   },
   border: {
     type: "gradient",

src/board/styles-board/gradient/contrast-d.ts

@@ -24,7 +24,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "color",
-    data: "#3cff0055",
+    data: "#ffaa0055",
   },
   border: {
     type: "gradient",

src/board/styles-board/gradient/smooth-forest.ts

@@ -24,7 +24,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "color",
-    data: "#00ffee55",
+    data: "#ffff0055",
   },
   border: {
     type: "gradient",

src/board/styles-board/gradient/smooth-sea.ts

@@ -24,7 +24,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "color",
-    data: "#3cff0055",
+    data: "#ff00ff55",
   },
   border: {
     type: "gradient",

src/board/styles-board/gradient/smooth-spring.ts

@@ -24,7 +24,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "color",
-    data: "#00ffee55",
+    data: "#00ffff55",
   },
   border: {
     type: "gradient",

src/board/styles-board/gradient/smooth-violet.ts

@@ -24,7 +24,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "color",
-    data: "#3cff0055",
+    data: "#ffaa0055",
   },
   border: {
     type: "gradient",

src/board/styles-board/solid/azure.ts

@@ -23,7 +23,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "color",
-    data: "#ffff0055",
+    data: "#ff000044",
   },
   border: {
     type: "solid",

src/board/styles-board/solid/spring.ts

@@ -23,7 +23,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "color",
-    data: "#ffff0055",
+    data: "#00ffff55",
   },
   border: {
     type: "solid",