add basics and logger

index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Discord Graph Node</title>
+    </head>
+    <body>
+        <canvas id="graph-engine"></canvas>
+        <script type="module" src="./src/main.ts"></script>
+    </body>
+</html>

package.json

@@ -4,7 +4,9 @@
   },
   "dependencies": {
     "@eslint/js": "^9.2.0",
+    "@types/luxon": "^3.4.2",
     "eslint": "^9.2.0",
+    "luxon": "^3.4.4",
     "prettier": "^3.2.5",
     "typescript-eslint": "^7.9.0"
   },

src/NodeEngine/GraphNodeEngine.ts

@@ -0,0 +1,24 @@
+export class GraphNodeEngine {
+	/**
+	 * @param {string | HTMLCanvasElement} graphCanvas The ID of the HTML Canvas element or a HTMLCanvasElement from the website. This is required for operation of the graph node engine.
+	 */
+	constructor(graphCanvas: string | HTMLCanvasElement) {
+        if (typeof graphCanvas === "string") {
+            let canvas = document.getElementById(graphCanvas);
+            console.log(canvas?.nodeName)
+            if (canvas?.nodeName === "CANVAS") {
+                this._canvas = canvas as HTMLCanvasElement;
+            }
+        } else {
+            this._canvas = graphCanvas
+        }
+    }
+
+    Initialize() {
+        if (this._canvas?.parentElement) {
+            
+        }
+    }
+
+    private _canvas: HTMLCanvasElement | null = null;
+}

src/NodeEngine/Logger.ts

@@ -0,0 +1,53 @@
+import { DateTime } from "luxon";
+
+export type LoggerReason = "verbose" | "debug" | "info" | "warn" | "error" | "fatal";
+
+const $ColorMap: Record<LoggerReason, string> = {
+    verbose: "#ffffff",
+    debug: "#a02ef2",
+    info: "#2ef2b7",
+    warn: "#ebde34",
+    error: "#eb3464",
+    fatal: "#7a0222"
+}
+
+export class Logger {
+    private constructor(name: string) {
+        this._name = name;
+    }
+
+    public verbose(message: string) {
+        this.__output(message, "verbose");
+    }
+
+    public debug(message: string) {
+        this.__output(message, "debug");
+    }
+
+    public info(message: string) {
+        this.__output(message, "info");
+    }
+
+    public warn(message: string) {
+        this.__output(message, "warn");
+    }
+
+    public error(message: string) {
+        this.__output(message, "error");
+    }
+
+    public fatal(message: string) {
+        this.__output(message, "fatal");
+    }
+
+    private __output(final: string, reason: LoggerReason) {
+        const time = DateTime.now();
+        console.log(`%c(${time.toISOTime()}) [${reason.toUpperCase()} @ ${this._name}] -> ${final}`, `color: ${$ColorMap[reason]};`);
+    }
+
+    private _name: string;
+
+    public static getLogger(name: string) {
+        return new Logger(name);
+    }
+}

src/main.ts

@@ -1 +1,12 @@
-console.log("Hello World!");
+import { GraphNodeEngine } from "./NodeEngine/GraphNodeEngine";
+import { Logger } from "./NodeEngine/Logger";
+
+const engine = new GraphNodeEngine("graph-engine");
+
+const logger = Logger.getLogger("Logger Test")
+logger.verbose("hello verobse")
+logger.debug("hello debug")
+logger.info("hello info")
+logger.warn("hello warn")
+logger.error("hello error")
+logger.fatal("hello fatal")

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2016",
+    "target": "es2020",
     "module": "commonjs",
     "rootDir": "./src",
     "baseUrl": "./",