no more react

src/components/client/shell/color.ts

@@ -1,3 +1,5 @@
+
+
 const red   = (s: string) => <span className="red">{s}</span>
 const green = (s: string) => <span className="green">{s}</span>
 const blue  = (s: string) => <span className="blue">{s}</span>

src/components/client/shell/events.ts

@@ -36,6 +36,7 @@ function new_prompt(): JSX.Element {
 function keyboard_events(terminal_window: HTMLElement, new_elements_f: newElement) {
 	const terminal_event = (keyboard_event: KeyboardEvent) => {
 		if (keyboard_event.key === Key.Enter) {
+			keyboard_event.preventDefault()
 			const current_prompt = get_current_prompt()
 			if (current_prompt) {
 				const prompt = new_prompt()
@@ -44,11 +45,11 @@ function keyboard_events(terminal_window: HTMLElement, new_elements_f: newElemen
 				terminal_window.removeEventListener("keydown", terminal_event)
 			}
 		} else if (keyboard_event.key === Key.ArrowUp) {
-
+			keyboard_event.preventDefault()
 		} else if (keyboard_event.key === Key.ArrowDown) {
-
+			keyboard_event.preventDefault()
 		} else if (keyboard_event.key === Key.Tab) {
-
+			keyboard_event.preventDefault()
 		}
 	}
 	terminal_window.addEventListener("keydown", terminal_event)
@@ -56,5 +57,6 @@ function keyboard_events(terminal_window: HTMLElement, new_elements_f: newElemen
 
 export {
 	keyboard_events,
-	display_prompt
+	display_prompt,
+	get_current_prompt
 }

src/components/client/terminal/contextMenu.ts

@@ -0,0 +1,30 @@
+const terminal_window = document.querySelector("main")
+
+interface PromptPosition {
+	x: number,
+	y: number,
+}
+
+interface PromptContext extends PromptPosition {
+	enabled: boolean,
+}
+
+function Menu(pos: PromptPosition) {
+	console.log(pos.x, pos.y)
+}
+
+export default function ContextMenu() {
+	if (terminal_window) {
+		useEffect(() => {
+			const [contextMenu, newContextMenu] = useState(false)
+			const [_, toggleRightClick] = useState({enabled: false, x: 0, y: 0})
+
+			terminal_window.addEventListener("contextmenu", (menuEvent) => {
+				menuEvent.preventDefault()
+				toggleRightClick({enabled: true, x: menuEvent.pageX, y: menuEvent.pageY})
+				Menu({x: menuEvent.pageX, y: menuEvent.pageY})
+			})
+		})
+
+	}
+}

src/components/client/terminal/exec.ts

@@ -0,0 +1,34 @@
+import { red } from "../shell/color"
+import { display_prompt, keyboard_events } from "../shell/events"
+
+const terminal_window = document.getElementById("interactive-area")
+
+// function panic(message: string) {
+// 	return <>
+// 		<p>{red("=================================================")}</p>
+// 		<p>{red("An unexpected JavaScript error occured:")}</p>
+// 		<p>{red(message)}</p>
+// 		<p>{red("=================================================")}</p>
+// 	</>
+// }
+
+// function ps1(terminal_window_safe: HTMLElement): JSX.Element[] {
+// 	const [renderedElements, renderElement] = useState([display_prompt()])
+// 	const new_elements_f = (elements: JSX.Element[]) => renderElement([...renderedElements, ...elements])
+
+// 	keyboard_events(terminal_window_safe, new_elements_f)
+
+// 	return renderedElements
+// }
+
+// export default function Shell() {
+// 	if (terminal_window) {
+// 		return ps1(terminal_window).map((element, k) => <React.Fragment key={k}>{element}</React.Fragment>)
+// 	}
+// 	return panic("The <main> element is missing")
+// }
+
+// export {
+// 	panic,
+// 	type newElement,
+// }

src/components/react/terminal/exec.tsx

@@ -1,35 +0,0 @@
-import { useState, type JSX } from "react"
-import { red } from "../shell/color"
-import { display_prompt, keyboard_events } from "../shell/events"
-
-import React from "react"
-
-const terminal_window = document.querySelector("main")
-
-function panic(message: string) {
-	return <>
-		<p>{red("=================================================")}</p>
-		<p>{red("An unexpected JavaScript error occured:")}</p>
-		<p>{red(message)}</p>
-		<p>{red("=================================================")}</p>
-	</>
-}
-
-type newElement = (elements: JSX.Element[]) => void
-
-export default function Shell() {
-	if (terminal_window) {
-		const [renderedElements, renderElement] = useState([display_prompt()])
-		const new_elements_f = (elements: JSX.Element[]) => renderElement([...renderedElements, ...elements])
-
-		keyboard_events(terminal_window, new_elements_f)
-
-		return renderedElements.map((element, k) => <React.Fragment key={k}>{element}</React.Fragment>)
-	}
-	return panic("The <main> element is missing")
-}
-
-export {
-	panic,
-	type newElement,
-}

src/pages/index.astro

@@ -1,13 +1,12 @@
 ---
 import Webpage from '../layouts/Webpage.astro';
 import Motd from '../components/terminal/motd.astro';
-import Terminal from '../components/react/terminal/exec';
 ---
 
 <Webpage>
 	<main>
 		<Motd/>
-		<Terminal client:only="react"/>
+		<script src="../components/client/terminal/exec.ts"></script>
 	</main>
 </Webpage>