From 006377b31a2f3c71f68a47872de4850a24b4ef98 Mon Sep 17 00:00:00 2001
From: keanutaufan <keanu.taufan21@gmail.com>
Date: Sat, 14 Sep 2024 23:11:47 +0700
Subject: [PATCH] Add error logging util

---
 index.html    |  1 +
 src/debug.ts  | 10 ++++++++++
 src/main.ts   | 21 ++++++++++++++++++++-
 src/style.css | 10 ++++++++++
 4 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 src/debug.ts

diff --git a/index.html b/index.html
index 994bd88..04815d7 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
     <canvas id="canvas" width="1200px" height="600px">
       HTML5 Canvas is not supported.
     </canvas>
+    <div id="errorText"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/debug.ts b/src/debug.ts
new file mode 100644
index 0000000..cf8b088
--- /dev/null
+++ b/src/debug.ts
@@ -0,0 +1,10 @@
+export function showError(error: any) {
+  const p = document.querySelector<HTMLDivElement>("#errorText");
+  if (p) {
+    const newErrorText = document.createElement("p");
+    newErrorText.innerText = error;
+    p.appendChild(newErrorText);
+  }
+  
+  console.error(error);
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index fa916f1..274412e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1 +1,20 @@
-import "./style.css";
\ No newline at end of file
+import { showError } from "./debug";
+import "./style.css";
+
+function render() {
+  const canvas = document.querySelector<HTMLCanvasElement>("#canvas");
+  if (!canvas) {
+    throw new Error("Canvas does not exist");
+  }
+
+  const gl = canvas.getContext("webgl");
+  if (!gl) {
+    throw new Error("This browser does not support WebGL");
+  }
+}
+
+try {
+  render();
+} catch (err) {
+  showError(err);
+}
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 4195a1a..7bccbe5 100644
--- a/src/style.css
+++ b/src/style.css
@@ -5,6 +5,7 @@ html, head, body {
 
 body {
   display: flex;
+  flex-direction: column;
   height: 100vh;
   padding: 1rem;
   box-sizing: border-box;
@@ -17,4 +18,13 @@ body {
   height: 600px;
   background-color: #da6052;
   image-rendering: crisp-edges;
+}
+
+#errorText {
+  color: #de5243;
+  text-align: center;
+}
+
+#errorText p {
+  font-size: 2rem;
 }
\ No newline at end of file