{
lineHeight={1}
variant="h3"
marginBottom={2}
+ fontSize={calculateFontSize(nova?.name as string)}
>
{nova?.name}
diff --git a/src/pages/Nova/ToolbarConnector.tsx b/src/pages/Nova/ToolbarConnector.tsx
index fd527ae..a5983ce 100644
--- a/src/pages/Nova/ToolbarConnector.tsx
+++ b/src/pages/Nova/ToolbarConnector.tsx
@@ -6,7 +6,7 @@ import { useAppDispatch } from "@store/store.model";
import { communityApi } from "@api/community.api";
import { environment } from "@api/environment";
-export const TOOLBAR_HEIGHT = 84;
+export const TOOLBAR_HEIGHT = 70;
export const ToolbarConnector = () => {
const { isConnected, disconnect } = useAutConnector({
@@ -32,6 +32,7 @@ export const ToolbarConnector = () => {
sx={{
width: "100%",
zIndex: 99,
+ opacity: 0.9,
position: "fixed",
top: 0,
backgroundColor: "nightBlack.main",
diff --git a/src/pages/Oauth2Callback/Callback.tsx b/src/pages/Oauth2Callback/Callback.tsx
index d0fe95a..9628b7f 100644
--- a/src/pages/Oauth2Callback/Callback.tsx
+++ b/src/pages/Oauth2Callback/Callback.tsx
@@ -10,9 +10,12 @@ const Callback = () => {
useEffect(() => {
const payload = queryToObject(window.location.search.split("?")[1]);
const error = payload && payload.error;
-
- if (!window.opener) {
- throw new Error("No window opener");
+ if (!window.opener && !error) {
+ localStorage.setItem("OAUTH_RESPONSE", JSON.stringify({ payload }));
+ window.close();
+ } else if (!window.opener && error) {
+ localStorage.setItem("OAUTH_RESPONSE", JSON.stringify({ error }));
+ window.close();
}
if (error) {
window.opener.postMessage({
@@ -26,7 +29,6 @@ const Callback = () => {
payload
});
}
- // window.close();
}, []);
return (
diff --git a/src/utils/AutSIgilGenerator/DrawHoleFunctions.ts b/src/utils/AutSIgilGenerator/DrawHoleFunctions.ts
new file mode 100644
index 0000000..1303749
--- /dev/null
+++ b/src/utils/AutSIgilGenerator/DrawHoleFunctions.ts
@@ -0,0 +1,90 @@
+function holeNine(ctx, hole) {
+ ctx.drawImage(hole, (hole.height / 2) * -1, (hole.height / 2) * -1);
+}
+function holeTwo(ctx, hole, zoneHeight) {
+ ctx.drawImage(
+ hole,
+ (hole.height / 2) * -1 - zoneHeight,
+ (hole.height / 2) * -1
+ );
+}
+function holeFive(ctx, hole, zoneHeight) {
+ ctx.drawImage(
+ hole,
+ (hole.height / 2) * -1 + zoneHeight,
+ (hole.height / 2) * -1
+ );
+}
+function holeFour(ctx, hole, zoneHeight) {
+ ctx.drawImage(
+ hole,
+ (hole.height / 2) * -1,
+ (hole.height / 2) * -1 - zoneHeight
+ );
+}
+function holeThree(ctx, hole, zoneHeight) {
+ ctx.drawImage(
+ hole,
+ (hole.height / 2) * -1,
+ (hole.height / 2) * -1 + zoneHeight
+ );
+}
+function holeOne(ctx, hole, zoneHeight) {
+ ctx.drawImage(
+ hole,
+ (hole.height / 2) * -1 - zoneHeight,
+ (hole.height / 2) * -1 - zoneHeight
+ );
+}
+function holeSeven(ctx, hole, zoneHeight) {
+ ctx.drawImage(
+ hole,
+ (hole.height / 2) * -1 + zoneHeight,
+ (hole.height / 2) * -1 + zoneHeight
+ );
+}
+function holeSix(ctx, hole, zoneHeight) {
+ ctx.drawImage(
+ hole,
+ (hole.height / 2) * -1 + zoneHeight,
+ (hole.height / 2) * -1 - zoneHeight
+ );
+}
+function holeEight(ctx, hole, zoneHeight) {
+ ctx.drawImage(
+ hole,
+ (hole.height / 2) * -1 - zoneHeight,
+ (hole.height / 2) * -1 + zoneHeight
+ );
+}
+
+export const drawHole = (value, ctx, hole, zoneHeight) => {
+ const stringValue = value.toString();
+ if (stringValue === "9") {
+ holeNine(ctx, hole);
+ }
+ if (stringValue === "2") {
+ holeTwo(ctx, hole, zoneHeight);
+ }
+ if (stringValue === "5") {
+ holeFive(ctx, hole, zoneHeight);
+ }
+ if (stringValue === "4") {
+ holeFour(ctx, hole, zoneHeight);
+ }
+ if (stringValue === "3") {
+ holeThree(ctx, hole, zoneHeight);
+ }
+ if (stringValue === "1") {
+ holeOne(ctx, hole, zoneHeight);
+ }
+ if (stringValue === "7") {
+ holeSeven(ctx, hole, zoneHeight);
+ }
+ if (stringValue === "6") {
+ holeSix(ctx, hole, zoneHeight);
+ }
+ if (stringValue === "8") {
+ holeEight(ctx, hole, zoneHeight);
+ }
+};
diff --git a/src/utils/AutSIgilGenerator/DrawScratchFunctions.ts b/src/utils/AutSIgilGenerator/DrawScratchFunctions.ts
new file mode 100644
index 0000000..a8afd2f
--- /dev/null
+++ b/src/utils/AutSIgilGenerator/DrawScratchFunctions.ts
@@ -0,0 +1,484 @@
+import { checkReversed } from "./utils";
+
+// trip horizontal
+
+function OneSix(ctx, mark, zoneHeight) {
+ ctx.drawImage(mark, (mark.height / 2) * -1, -218 - zoneHeight);
+}
+
+function TwoFive(ctx, mark) {
+ ctx.drawImage(mark, (mark.height / 2) * -1, -218);
+}
+
+function EightSeven(ctx, mark, zoneHeight) {
+ ctx.drawImage(mark, (mark.height / 2) * -1, -218 + zoneHeight);
+}
+
+// trip vertical
+
+function OneEight(ctx, mark, zoneHeight) {
+ ctx.rotate((90 * Math.PI) / 180);
+
+ ctx.drawImage(mark, (mark.height / 2) * -1, -218 + zoneHeight);
+
+ ctx.rotate((-90 * Math.PI) / 180);
+}
+
+function FourThree(ctx, mark) {
+ ctx.rotate((90 * Math.PI) / 180);
+
+ ctx.drawImage(mark, (mark.height / 2) * -1, -218);
+
+ ctx.rotate((-90 * Math.PI) / 180);
+}
+
+function SixSeven(ctx, mark, zoneHeight) {
+ ctx.rotate((90 * Math.PI) / 180);
+
+ ctx.drawImage(mark, (mark.height / 2) * -1, -218 - zoneHeight);
+
+ ctx.rotate((-90 * Math.PI) / 180);
+}
+
+// trip left lean
+
+function OneThree(ctx, mark, triplediagonalOffestX, triplediagonalOffestY) {
+ ctx.rotate((63 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 - triplediagonalOffestX,
+ -218 + triplediagonalOffestY
+ );
+ ctx.rotate((-63 * Math.PI) / 180);
+}
+
+function FourSeven(ctx, mark, triplediagonalOffestX, triplediagonalOffestY) {
+ ctx.rotate((63 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 + triplediagonalOffestX,
+ -218 - triplediagonalOffestY
+ );
+ ctx.rotate((-63 * Math.PI) / 180);
+}
+
+// trip right lean
+
+function FourEight(ctx, mark, triplediagonalOffestX, triplediagonalOffestY) {
+ ctx.rotate((-63 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 - triplediagonalOffestX,
+ -218 - triplediagonalOffestY
+ );
+ ctx.rotate((63 * Math.PI) / 180);
+}
+function SixThree(ctx, mark, triplediagonalOffestX, triplediagonalOffestY) {
+ ctx.rotate((-63 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 + triplediagonalOffestX,
+ -218 + triplediagonalOffestY
+ );
+ ctx.rotate((63 * Math.PI) / 180);
+}
+
+// trip horizontal left lean
+function OneFive(ctx, mark, triplediagonalOffestX, triplediagonalOffestY) {
+ ctx.rotate((90 * Math.PI) / 180);
+ ctx.rotate((-63 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 - triplediagonalOffestX,
+ -218 - triplediagonalOffestY
+ );
+ ctx.rotate((-90 * Math.PI) / 180);
+ ctx.rotate((63 * Math.PI) / 180);
+}
+
+function TwoSeven(ctx, mark, triplediagonalOffestX, triplediagonalOffestY) {
+ ctx.rotate((90 * Math.PI) / 180);
+ ctx.rotate((-63 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 + triplediagonalOffestX,
+ -218 + triplediagonalOffestY
+ );
+ ctx.rotate((-90 * Math.PI) / 180);
+ ctx.rotate((63 * Math.PI) / 180);
+}
+
+// trip horizontal right lean
+
+function TwoSix(ctx, mark, triplediagonalOffestX, triplediagonalOffestY) {
+ ctx.rotate((90 * Math.PI) / 180);
+ ctx.rotate((63 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 - triplediagonalOffestX,
+ -218 + triplediagonalOffestY
+ );
+ ctx.rotate((-90 * Math.PI) / 180);
+ ctx.rotate((-63 * Math.PI) / 180);
+}
+function EightFive(ctx, mark, triplediagonalOffestX, triplediagonalOffestY) {
+ ctx.rotate((90 * Math.PI) / 180);
+ ctx.rotate((63 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 + triplediagonalOffestX,
+ -218 - triplediagonalOffestY
+ );
+ ctx.rotate((-90 * Math.PI) / 180);
+ ctx.rotate((-63 * Math.PI) / 180);
+}
+
+// double
+
+function OneNine(ctx, mark, doubleDiagonalOffsetX) {
+ ctx.rotate((45 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 - doubleDiagonalOffsetX,
+ (mark.height / 2) * -1 + 23
+ );
+ ctx.rotate((-45 * Math.PI) / 180);
+}
+
+function NineSeven(ctx, mark, doubleDiagonalOffsetX) {
+ ctx.rotate((45 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 + doubleDiagonalOffsetX,
+ (mark.height / 2) * -1 + 23
+ );
+ ctx.rotate((-45 * Math.PI) / 180);
+}
+
+function TwoThree(ctx, mark, zoneDiagonal) {
+ ctx.rotate((45 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1,
+ (mark.height / 2) * -1 + 23 + zoneDiagonal / 2
+ );
+ ctx.rotate((-45 * Math.PI) / 180);
+}
+
+function FourFive(ctx, mark, zoneDiagonal) {
+ ctx.rotate((45 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1,
+ (mark.height / 2) * -1 + 23 - zoneDiagonal / 2
+ );
+ ctx.rotate((-45 * Math.PI) / 180);
+}
+
+// double right
+
+function NineSix(ctx, mark) {
+ const doubleDiagonalOffsetX = 90;
+
+ ctx.rotate((-45 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 + doubleDiagonalOffsetX,
+ (mark.height / 2) * -1 + 23
+ );
+ ctx.rotate((45 * Math.PI) / 180);
+}
+
+function EightNine(ctx, mark) {
+ const doubleDiagonalOffsetX = 90;
+ ctx.rotate((-45 * Math.PI) / 180);
+
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 - doubleDiagonalOffsetX,
+ (mark.height / 2) * -1 + 23
+ );
+ ctx.rotate((45 * Math.PI) / 180);
+}
+
+function FourTwo(ctx, mark, zoneDiagonal) {
+ ctx.rotate((-45 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1,
+ (mark.height / 2) * -1 + 23 - zoneDiagonal / 2
+ );
+ ctx.rotate((45 * Math.PI) / 180);
+}
+
+function FiveThree(ctx, mark, zoneDiagonal) {
+ ctx.rotate((-45 * Math.PI) / 180);
+
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1,
+ (mark.height / 2) * -1 + 23 + zoneDiagonal / 2
+ );
+ ctx.rotate((45 * Math.PI) / 180);
+}
+
+// double vertical
+
+function FourNine(ctx, mark, doubleMarkOffset) {
+ ctx.rotate((90 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 - doubleMarkOffset,
+ (mark.height / 2) * -1 + 23
+ );
+ ctx.rotate((-90 * Math.PI) / 180);
+}
+
+function NineThree(ctx, mark, doubleMarkOffset) {
+ ctx.rotate((90 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 + doubleMarkOffset,
+ (mark.height / 2) * -1 + 23
+ );
+ ctx.rotate((-90 * Math.PI) / 180);
+}
+
+function TwoEight(ctx, mark, zoneHeight, doubleMarkOffset) {
+ ctx.rotate((90 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 + doubleMarkOffset,
+ (mark.height / 2) * -1 + 23 + zoneHeight
+ );
+ ctx.rotate((-90 * Math.PI) / 180);
+}
+
+function FiveSeven(ctx, mark, zoneHeight, doubleMarkOffset) {
+ ctx.rotate((90 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 + doubleMarkOffset,
+ (mark.height / 2) * -1 + 23 - zoneHeight
+ );
+ ctx.rotate((-90 * Math.PI) / 180);
+}
+
+function OneTwo(ctx, mark, zoneHeight, doubleMarkOffset) {
+ ctx.rotate((90 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 - doubleMarkOffset,
+ (mark.height / 2) * -1 + 23 + zoneHeight
+ );
+ ctx.rotate((-90 * Math.PI) / 180);
+}
+
+function SixFive(ctx, mark, zoneHeight, doubleMarkOffset) {
+ ctx.rotate((90 * Math.PI) / 180);
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 - doubleMarkOffset,
+ (mark.height / 2) * -1 + 23 - zoneHeight
+ );
+ ctx.rotate((-90 * Math.PI) / 180);
+}
+
+// double horizontal
+
+function TwoNine(ctx, mark, doubleMarkOffset) {
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 - doubleMarkOffset,
+ (mark.height / 2) * -1 + 23
+ );
+}
+
+function NineFive(ctx, mark, doubleMarkOffset) {
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 + doubleMarkOffset,
+ (mark.height / 2) * -1 + 23
+ );
+}
+
+function ThreeSeven(ctx, mark, zoneHeight, doubleMarkOffset) {
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 + doubleMarkOffset,
+ (mark.height / 2) * -1 + 23 + zoneHeight
+ );
+}
+
+function FourSix(ctx, mark, zoneHeight, doubleMarkOffset) {
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 + doubleMarkOffset,
+ (mark.height / 2) * -1 + 23 - zoneHeight
+ );
+}
+
+function EightThree(ctx, mark, zoneHeight, doubleMarkOffset) {
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 - doubleMarkOffset,
+ (mark.height / 2) * -1 + 23 + zoneHeight
+ );
+}
+
+function OneFour(ctx, mark, zoneHeight, doubleMarkOffset) {
+ ctx.drawImage(
+ mark,
+ (mark.height / 2) * -1 - doubleMarkOffset,
+ (mark.height / 2) * -1 + 23 - zoneHeight
+ );
+}
+
+// diagonal trip
+function OneSeven(ctx, mark) {
+ ctx.rotate((45 * Math.PI) / 180);
+ ctx.drawImage(mark, (mark.height / 2) * -1, -260);
+
+ ctx.rotate((-45 * Math.PI) / 180);
+}
+
+function SixEight(ctx, mark) {
+ ctx.rotate((-45 * Math.PI) / 180);
+ ctx.drawImage(mark, (mark.height / 2) * -1, -260);
+
+ ctx.rotate((45 * Math.PI) / 180);
+}
+
+export const drawScratch = (
+ value,
+ ctx,
+ mark3,
+ mark2,
+ mark4,
+ zoneHeight,
+ zoneDiagonal,
+ doubleMarkOffset,
+ triplediagonalOffestX,
+ triplediagonalOffestY,
+ doubleDiagonalOffsetX
+) => {
+ if (checkReversed(value, "16")) {
+ OneSix(ctx, mark3, zoneHeight);
+ }
+ if (checkReversed(value, "25")) {
+ TwoFive(ctx, mark3);
+ }
+ if (checkReversed(value, "87")) {
+ EightSeven(ctx, mark3, zoneHeight);
+ }
+ // vertical
+ if (checkReversed(value, "18")) {
+ OneEight(ctx, mark3, zoneHeight);
+ }
+ if (checkReversed(value, "43")) {
+ FourThree(ctx, mark3);
+ }
+ if (checkReversed(value, "67")) {
+ SixSeven(ctx, mark3, zoneHeight);
+ }
+ // trip lean left
+ if (checkReversed(value, "13")) {
+ OneThree(ctx, mark3, triplediagonalOffestX, triplediagonalOffestY);
+ }
+ if (checkReversed(value, "47")) {
+ FourSeven(ctx, mark3, triplediagonalOffestX, triplediagonalOffestY);
+ }
+ // trip lean right
+ if (checkReversed(value, "48")) {
+ FourEight(ctx, mark3, triplediagonalOffestX, triplediagonalOffestY);
+ }
+ if (checkReversed(value, "63")) {
+ SixThree(ctx, mark3, triplediagonalOffestX, triplediagonalOffestY);
+ }
+ // trip horizontal lean left
+ if (checkReversed(value, "15")) {
+ OneFive(ctx, mark3, triplediagonalOffestX, triplediagonalOffestY);
+ }
+ if (checkReversed(value, "27")) {
+ TwoSeven(ctx, mark3, triplediagonalOffestX, triplediagonalOffestY);
+ }
+ // trip horizontal lean right
+ if (checkReversed(value, "26")) {
+ TwoSix(ctx, mark3, triplediagonalOffestX, triplediagonalOffestY);
+ }
+ if (checkReversed(value, "85")) {
+ EightFive(ctx, mark3, triplediagonalOffestX, triplediagonalOffestY);
+ }
+ // double diagonal left
+ if (checkReversed(value, "19")) {
+ OneNine(ctx, mark2, doubleDiagonalOffsetX);
+ }
+ if (checkReversed(value, "97")) {
+ NineSeven(ctx, mark2, doubleDiagonalOffsetX);
+ }
+ if (checkReversed(value, "23")) {
+ TwoThree(ctx, mark2, zoneDiagonal);
+ }
+ if (checkReversed(value, "45")) {
+ FourFive(ctx, mark2, zoneDiagonal);
+ }
+ // double diagonal right
+ if (checkReversed(value, "96")) {
+ NineSix(ctx, mark2);
+ }
+ if (checkReversed(value, "89")) {
+ EightNine(ctx, mark2);
+ }
+ if (checkReversed(value, "42")) {
+ FourTwo(ctx, mark2, zoneDiagonal);
+ }
+ if (checkReversed(value, "53")) {
+ FiveThree(ctx, mark2, zoneDiagonal);
+ }
+ // double vertical
+ if (checkReversed(value, "49")) {
+ FourNine(ctx, mark2, doubleMarkOffset);
+ }
+ if (checkReversed(value, "93")) {
+ NineThree(ctx, mark2, doubleMarkOffset);
+ }
+ if (checkReversed(value, "28")) {
+ TwoEight(ctx, mark2, zoneHeight, doubleMarkOffset);
+ }
+ if (checkReversed(value, "57")) {
+ FiveSeven(ctx, mark2, zoneHeight, doubleMarkOffset);
+ }
+ if (checkReversed(value, "12")) {
+ OneTwo(ctx, mark2, zoneHeight, doubleMarkOffset);
+ }
+ if (checkReversed(value, "65")) {
+ SixFive(ctx, mark2, zoneHeight, doubleMarkOffset);
+ }
+ // double horizontal
+
+ if (checkReversed(value, "29")) {
+ TwoNine(ctx, mark2, doubleMarkOffset);
+ }
+ if (checkReversed(value, "95")) {
+ NineFive(ctx, mark2, doubleMarkOffset);
+ }
+ if (checkReversed(value, "37")) {
+ ThreeSeven(ctx, mark2, zoneHeight, doubleMarkOffset);
+ }
+ if (checkReversed(value, "46")) {
+ FourSix(ctx, mark2, zoneHeight, doubleMarkOffset);
+ }
+ if (checkReversed(value, "83")) {
+ EightThree(ctx, mark2, zoneHeight, doubleMarkOffset);
+ }
+ if (checkReversed(value, "14")) {
+ OneFour(ctx, mark2, zoneHeight, doubleMarkOffset);
+ }
+ // diagonal trip
+ if (checkReversed(value, "17")) {
+ OneSeven(ctx, mark4);
+ }
+ if (checkReversed(value, "68")) {
+ SixEight(ctx, mark4);
+ }
+};
diff --git a/src/utils/AutSIgilGenerator/ImageLoader.ts b/src/utils/AutSIgilGenerator/ImageLoader.ts
new file mode 100644
index 0000000..b0d740a
--- /dev/null
+++ b/src/utils/AutSIgilGenerator/ImageLoader.ts
@@ -0,0 +1,11 @@
+export const LoadImage = (url: string): Promise => {
+ const image = new Image();
+ return new Promise((resolve, reject) => {
+ image.onerror = reject;
+ image.onload = () => {
+ resolve(image);
+ };
+ image.crossOrigin = "Anonymous";
+ image.src = url;
+ });
+};
diff --git a/src/utils/AutSIgilGenerator/Sigil.model.ts b/src/utils/AutSIgilGenerator/Sigil.model.ts
new file mode 100644
index 0000000..0221379
--- /dev/null
+++ b/src/utils/AutSIgilGenerator/Sigil.model.ts
@@ -0,0 +1,6 @@
+import { Canvas } from "canvas";
+
+export interface SigilOutput {
+ previewElement: Canvas;
+ toBase64: () => string;
+}
diff --git a/src/utils/AutSIgilGenerator/SigilGenerator.ts b/src/utils/AutSIgilGenerator/SigilGenerator.ts
new file mode 100644
index 0000000..1a5f35d
--- /dev/null
+++ b/src/utils/AutSIgilGenerator/SigilGenerator.ts
@@ -0,0 +1,108 @@
+import { SigilOutput } from "./Sigil.model";
+import { LoadImage } from "./ImageLoader";
+import { Scratch } from "./assets/scratch";
+import { Base } from "./assets/base";
+import { Hole } from "./assets/hole";
+import { randomIntFromInterval } from "./utils";
+import { drawScratch } from "./DrawScratchFunctions";
+import { drawHole } from "./DrawHoleFunctions";
+// import * as fs from "fs";
+// import { Blob } from "node:buffer";
+import {
+ Canvas,
+ CanvasRenderingContext2D,
+ createCanvas,
+ loadImage
+} from "canvas";
+
+const drawSigil = async (ctx: CanvasRenderingContext2D, address: string) => {
+ const url3 = Scratch(500, 500);
+ const url2 = Scratch(500 - 500 / 3, 500 - 500 / 3);
+ const url4 = Scratch(500 + 500 / 5, 500 + 500 / 5);
+ const holeUrl = Hole();
+ const baseUrl = Base();
+ const base = await loadImage(baseUrl);
+ const mark3 = await loadImage(url3);
+ const mark2 = await loadImage(url2);
+ const mark4 = await loadImage(url4);
+ const hole = await loadImage(holeUrl);
+
+ const d = (base.height as number) * Math.sqrt(2);
+ const xSquared = (d / 2) ** 2 + (d / 2) ** 2;
+ const x = Math.sqrt(xSquared) / 2;
+ ctx.translate(300, 300);
+ // ctx.drawImage(base as any, x * -1, x * -1);
+
+ const zoneHeight = Math.sqrt(xSquared) / 3;
+ const zoneDiagonal = zoneHeight * Math.sqrt(2);
+ const tripleDiagonalOffestX = 30;
+ const tripleDiagonalOffestY = 60;
+
+ const doubleDiagonalOffsetX = 90;
+ const doubleMarkOffset = 66;
+ // for (let i = 0; i < 9; i++) {
+ // input.push(randomIntFromInterval(1, 9, input[i - 1], input[i - 2]));
+ // }
+
+ const parsedAddress = parseInt(`0x${address.substring(35)}`, 16);
+ const baseNine = parsedAddress.toString(9);
+ const input = baseNine.split("");
+
+ for (let i = 0; i < input.length; i++) {
+ if (input[i + 1]) {
+ const firstNumber = parseInt(input[i], 10) + 1;
+ const secondNumber = parseInt(input[i + 1], 10) + 1;
+ const value = [firstNumber, secondNumber].join("");
+ if (
+ value !== "11" &&
+ value !== "22" &&
+ value !== "33" &&
+ value !== "44" &&
+ value !== "55" &&
+ value !== "66" &&
+ value !== "77" &&
+ value !== "88" &&
+ value !== "99"
+ ) {
+ drawScratch(
+ value,
+ ctx,
+ mark3,
+ mark2,
+ mark4,
+ zoneHeight,
+ zoneDiagonal,
+ doubleMarkOffset,
+ tripleDiagonalOffestX,
+ tripleDiagonalOffestY,
+ doubleDiagonalOffsetX
+ );
+ }
+ }
+ }
+ // const firstHoleFromBase9 = parseInt(input[0]) + 1;
+ // const lastHoleFromBase9 = parseInt(input[input.length - 1]) + 1;
+ // drawHole(firstHoleFromBase9, ctx, hole, zoneHeight);
+ // drawHole(lastHoleFromBase9, ctx, hole, zoneHeight);
+};
+
+export const generateAutIdDAOSigil = async (
+ address: string
+): Promise => {
+ const canvasWidth = 600;
+ const canvasHeight = 600;
+ const canvas = createCanvas(canvasWidth, canvasHeight);
+ const ctx = canvas.getContext("2d");
+
+ ctx.imageSmoothingEnabled = true;
+ // ctx.imageSmoothingQuality = "high";
+
+ canvas.width = canvasWidth;
+ canvas.height = canvasHeight;
+ await drawSigil(ctx, address);
+
+ return {
+ previewElement: canvas,
+ toBase64: () => canvas.toDataURL()
+ } as SigilOutput;
+};
diff --git a/src/utils/AutSIgilGenerator/assets/base.ts b/src/utils/AutSIgilGenerator/assets/base.ts
new file mode 100644
index 0000000..09b0b2c
--- /dev/null
+++ b/src/utils/AutSIgilGenerator/assets/base.ts
@@ -0,0 +1,61 @@
+/* eslint-disable max-len */
+import { DOMParser, XMLSerializer } from "xmldom";
+
+export const Base = (): string => {
+ const SVGDomElement = new DOMParser().parseFromString(
+ `
+
+`,
+ "application/xml"
+ );
+
+ const serializedSVG = new XMLSerializer().serializeToString(SVGDomElement);
+ return `data:image/svg+xml;base64, ${btoa(unescape(encodeURIComponent(serializedSVG)))}`;
+};
diff --git a/src/utils/AutSIgilGenerator/assets/hole.ts b/src/utils/AutSIgilGenerator/assets/hole.ts
new file mode 100644
index 0000000..dbc3c10
--- /dev/null
+++ b/src/utils/AutSIgilGenerator/assets/hole.ts
@@ -0,0 +1,35 @@
+/* eslint-disable max-len */
+import { DOMParser, XMLSerializer } from "xmldom";
+
+export const Hole = (): string => {
+ const SVGDomElement = new DOMParser().parseFromString(
+ `
+
+
+ `,
+ "application/xml"
+ );
+ const serializedSVG = new XMLSerializer().serializeToString(SVGDomElement);
+ return `data:image/svg+xml;base64, ${btoa(unescape(encodeURIComponent(serializedSVG)))}`;
+};
diff --git a/src/utils/AutSIgilGenerator/assets/scratch.ts b/src/utils/AutSIgilGenerator/assets/scratch.ts
new file mode 100644
index 0000000..7ccc8cf
--- /dev/null
+++ b/src/utils/AutSIgilGenerator/assets/scratch.ts
@@ -0,0 +1,41 @@
+/* eslint-disable max-len */
+import { DOMParser, XMLSerializer } from "xmldom";
+
+function addNewLines(data) {
+ const split = data.match(/.{1,76}/g);
+
+ const joined = split.join("\n");
+
+ // console.log(joined);
+
+ return joined;
+}
+
+export const Scratch = (w: number, h: number): string => {
+ const SVGDomElement = new DOMParser().parseFromString(
+ `
+
+
+ `,
+ "application/xml"
+ );
+ const serializedSVG = new XMLSerializer().serializeToString(SVGDomElement);
+ return `data:image/svg+xml;base64, ${addNewLines(btoa(serializedSVG))}`;
+};
diff --git a/src/utils/AutSIgilGenerator/utils.ts b/src/utils/AutSIgilGenerator/utils.ts
new file mode 100644
index 0000000..901842a
--- /dev/null
+++ b/src/utils/AutSIgilGenerator/utils.ts
@@ -0,0 +1,23 @@
+export function reverse(s) {
+ return s.split("").reverse().join("");
+}
+
+export function checkReversed(input: string, compare: string): boolean {
+ if (input === compare || reverse(input) === compare) {
+ return true;
+ }
+ return false;
+}
+
+export function randomIntFromInterval(
+ min,
+ max,
+ excludeNumber?,
+ excludeNumberSecond?
+) {
+ // min and max included
+ const number = Math.floor(Math.random() * (max - min + 1) + min);
+ return number === excludeNumber || number === excludeNumberSecond
+ ? randomIntFromInterval(min, max, excludeNumber)
+ : number;
+}