editor.mjs

import {EditorView, basicSetup} from "codemirror";
import { wast, wastLanguage } from "@codemirror/lang-wast";
import { Compartment, EditorSelection, EditorState, StateEffect } from "@codemirror/state";
import { oneDark } from "@codemirror/theme-one-dark";

const DEFAULT_CARTRIDGE = `;;
;; WASM-4: https://wasm4.org/docs
(import "env" "memory" (memory 1))
;; ┌───────────────────────────────────────────────────────────────────────────┐
;; │                                                                           │
;; │ Drawing Functions                                                         │
;; │                                                                           │
;; └───────────────────────────────────────────────────────────────────────────┘
(; Copies pixels to the framebuffer. ;)
(import "env" "blit" (func $blit (param i32 i32 i32 i32 i32 i32)))

(; Copies a subregion within a larger sprite atlas to the framebuffer. ;)
(import "env" "blitSub" (func $blitSub (param i32 i32 i32 i32 i32 i32 i32 i32 i32)))

(; Draws a line between two points. ;)
(import "env" "line" (func $line (param i32 i32 i32 i32)))

(; Draws a horizontal line. ;)
(import "env" "hline" (func $hline (param i32 i32 i32)))

(; Draws a vertical line. ;)
(import "env" "vline" (func $vline (param i32 i32 i32)))

(; Draws an oval (or circle). ;)
(import "env" "oval" (func $oval (param i32 i32 i32 i32)))

(; Draws a rectangle. ;)
(import "env" "rect" (func $rect (param i32 i32 i32 i32)))

(; Draws text using the built-in system font. ;)
(import "env" "text" (func $text (param i32 i32 i32)))

;; ┌───────────────────────────────────────────────────────────────────────────┐
;; │                                                                           │
;; │ Sound Functions                                                           │
;; │                                                                           │
;; └───────────────────────────────────────────────────────────────────────────┘
(; Plays a sound tone. ;)
(import "env" "tone" (func $tone (param i32 i32 i32 i32)))

;; ┌───────────────────────────────────────────────────────────────────────────┐
;; │                                                                           │
;; │ Storage Functions                                                         │
;; │                                                                           │
;; └───────────────────────────────────────────────────────────────────────────┘
(; Reads up to "size" bytes from persistent storage into the pointer "dest". ;)
(import "env" "diskr" (func $diskr (param i32 i32)))

(; Writes up to "size" bytes from the pointer "src" into persistent storage. ;)
(import "env" "diskw" (func $diskw (param i32 i32)))

(; Prints a message to the debug console. ;)
(import "env" "trace" (func $trace (param i32)))

(; Prints a message to the debug console. ;)
(import "env" "tracef" (func $tracef (param i32 i32)))


;; ┌───────────────────────────────────────────────────────────────────────────┐
;; │                                                                           │
;; │ Memory Addresses                                                          │
;; │                                                                           │
;; └───────────────────────────────────────────────────────────────────────────┘

(global $PALETTE0 i32 (i32.const 0x04))
(global $PALETTE1 i32 (i32.const 0x08))
(global $PALETTE2 i32 (i32.const 0x0c))
(global $PALETTE3 i32 (i32.const 0x10))
(global $DRAW_COLORS i32 (i32.const 0x14))
(global $GAMEPAD1 i32 (i32.const 0x16))
(global $GAMEPAD2 i32 (i32.const 0x17))
(global $GAMEPAD3 i32 (i32.const 0x18))
(global $GAMEPAD4 i32 (i32.const 0x19))
(global $MOUSE_X i32 (i32.const 0x1a))
(global $MOUSE_Y i32 (i32.const 0x1c))
(global $MOUSE_BUTTONS i32 (i32.const 0x1e))
(global $SYSTEM_FLAGS i32 (i32.const 0x1f))
(global $NETPLAY i32 (i32.const 0x20))
(global $FRAMEBUFFER i32 (i32.const 0xa0))

(global $BUTTON_1 i32 (i32.const 1))
(global $BUTTON_2 i32 (i32.const 2))
(global $BUTTON_LEFT i32 (i32.const 16))
(global $BUTTON_RIGHT i32 (i32.const 32))
(global $BUTTON_UP i32 (i32.const 64))
(global $BUTTON_DOWN i32 (i32.const 128))

(global $MOUSE_LEFT i32 (i32.const 1))
(global $MOUSE_RIGHT i32 (i32.const 2))
(global $MOUSE_MIDDLE i32 (i32.const 4))

(global $SYSTEM_PRESERVE_FRAMEBUFFER i32 (i32.const 1))
(global $SYSTEM_HIDE_GAMEPAD_OVERLAY i32 (i32.const 2))


(global $BLIT_2BPP i32 (i32.const 1))
(global $BLIT_1BPP i32 (i32.const 0))
(global $BLIT_FLIP_X i32 (i32.const 2))
(global $BLIT_FLIP_Y i32 (i32.const 4))
(global $BLIT_ROTATE i32 (i32.const 8))


(global $TONE_PULSE1 i32 (i32.const 0))
(global $TONE_PULSE2 i32 (i32.const 1))
(global $TONE_TRIANGLE i32 (i32.const 2))
(global $TONE_NOISE i32 (i32.const 3))
(global $TONE_MODE1 i32 (i32.const 0))
(global $TONE_MODE2 i32 (i32.const 4))
(global $TONE_MODE3 i32 (i32.const 8))
(global $TONE_MODE4 i32 (i32.const 12))
(global $TONE_PAN_LEFT i32 (i32.const 16))
(global $TONE_PAN_RIGHT i32 (i32.const 32))

;; smiley
(data (i32.const 0x19a0) "\\c3\\81\\24\\24\\00\\24\\99\\c3")

(data (i32.const 0x19a8) "Hello from Wat!\\00")

(data (i32.const 0x19b8) "Press X to blink\\00")

(func (export "start")
)

(func (export "update")
(local $gamepad i32)

;; *DRAW_COLORS = 2
(i32.store16 (global.get $DRAW_COLORS) (i32.const 2))

;; text("Hello from Wat!", 10, 10);
(call $text (i32.const 0x19a8) (i32.const 10) (i32.const 10))

;; uint8_t gamepad = *GAMEPAD1;
(local.set $gamepad (i32.load8_u (global.get $GAMEPAD1)))

;; if (gamepad & BUTTON_1) {
;;     *DRAW_COLORS = 4;
;; }
(if (i32.and (local.get $gamepad) (global.get $BUTTON_1))
(then
  (i32.store16 (global.get $DRAW_COLORS) (i32.const 4))
))

;; blit(smiley, 76, 76, 8, 8, BLIT_1BPP);
(call $blit (i32.const 0x19a0) (i32.const 76) (i32.const 76) (i32.const 8) (i32.const 8) (global.get $BLIT_1BPP))

;; text("Press X to blink", 16, 90);
(call $text (i32.const 0x19b8) (i32.const 16) (i32.const 90))
)`;

let readOnly = new Compartment;

function setEditable(editor, value) {
	editor.dispatch({
		effects: readOnly.reconfigure(EditorState.readOnly.of(!value))
	});
}

let darkMode = new Compartment;

function setDarkMode(editor, val) {
	editor.dispatch({
		effects: darkMode.reconfigure(val? oneDark : [])
	})
	
	if (val) {
		document.body.classList.add("dark-mode");
	} else {
		document.body.classList.remove("dark-mode");
	}

	localStorage.setItem("dark-mode", val);
}

let editor = new EditorView({
	lineWrapping: true,
	extensions: [basicSetup, wast(), readOnly.of(EditorState.readOnly.of(false)), EditorView.lineWrapping, darkMode.of([])],
	parent: document.getElementById("text")
});

document.getElementById("dark-mode").oninput = (e) => {
	setDarkMode(editor, e.target.checked);
};


let darkModeStorage;
if ((darkModeStorage = localStorage.getItem("dark-mode")) !== null) {
	let value = darkModeStorage === "true";
	setDarkMode(editor, value);
	if (value){
		document.getElementById("dark-mode").checked = true;
	}
} else {
	localStorage.setItem("dark-mode", false);
}

editor.dispatch({
	changes: {from: 0, to: editor.state.doc.length, insert: DEFAULT_CARTRIDGE}
});
export {editor, setEditable};