diff options
| author | Raymaekers Luca <luca@spacehb.net> | 2025-10-31 17:35:54 +0100 |
|---|---|---|
| committer | Raymaekers Luca <luca@spacehb.net> | 2025-10-31 17:35:54 +0100 |
| commit | 600901d2e286d6aa8e762bc3e617c1345a671d15 (patch) | |
| tree | 30eb3f73680721e21f14eae4ad7c803f039ec745 | |
| parent | 8cc81f19a41cfa289c5cfb15945c4be134d757a7 (diff) | |
checkpointmain
| -rw-r--r-- | code/game.cpp | 15 | ||||
| -rw-r--r-- | code/index.html | 45 | ||||
| -rw-r--r-- | code/platform.js | 53 | ||||
| -rwxr-xr-x | misc/tmux.sh | 2 |
4 files changed, 88 insertions, 27 deletions
diff --git a/code/game.cpp b/code/game.cpp index c829ee6..2d7ef6b 100644 --- a/code/game.cpp +++ b/code/game.cpp @@ -7,7 +7,7 @@ #define BYTES_PER_PIXEL 4 //~ Libraries -#de,fine STB_SPRINTF_IMPLEMENTATION +#define STB_SPRINTF_IMPLEMENTATION #include "libs/stb_sprintf.h" #include "libs/handmade_math.h" @@ -28,9 +28,11 @@ u8 GlobalImageBuffer[WIDTH*HEIGHT*BYTES_PER_PIXEL]; //~ Functions //- Platform (js) #define external extern "C" -external void LogMessage(u32 Length, char* message); +external void LogMessage(u32 Length, char *Message); #define S_Len(String) (sizeof(String) - 1), (String) +external void JS_DrawText(u32 Length, char *Message, s32 X, s32 Y); + external r32 floor(r32 X); external r32 ceil(r32 X); external r32 sqrt(r32 X); @@ -207,12 +209,19 @@ UpdateAndRender(s32 Width, s32 Height, s32 BytesPerPixel, RenderRectangle(Buffer, Pitch, Width, Height, BytesPerPixel, MinX, MinY, MaxX, MaxY, Color); + + + +#if 0 + JS_DrawText(S_Len("hello world world world"), MinX, MinY + 16); +#endif + + } Toggle = !Toggle; } - #if 0 // Draw mouse pointer { diff --git a/code/index.html b/code/index.html index f50730c..e3d24eb 100644 --- a/code/index.html +++ b/code/index.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <head> - <style> + <style> /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) @@ -50,20 +50,43 @@ table { border-collapse: collapse; border-spacing: 0; } -</style> -<style> - canvas#graphics-canvas { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); +/* Center canvas */ +.centered { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +input { + position: absolute; + padding: 0; + font-size: 16px; + + background: rgba(0,0,0,0.0); + + /*debug*/ + border: 1px solid red; + /*prod*/ + /*border: none;*/ + + outline: none; + +} +input:focus { + /*debug*/ + border: 1px solid blue; + /*prod*/ + /*border: none;*/ +} + + </style> - } -</style> <script type="module" src="./platform.js"></script> </head> <body> - <canvas id="graphics-canvas"></canvas> + <canvas id="graphics-canvas" class="centered"></canvas> + <input type="text"> </body> </html> diff --git a/code/platform.js b/code/platform.js index 35112a2..cb0ad8d 100644 --- a/code/platform.js +++ b/code/platform.js @@ -1,8 +1,9 @@ -//- Global variables -var HEAPU8; +//- Globals +var HEAPU8 = null; +var canvas = null; //- Helper functions -function ReadHeapString(ptr, length) +function readHeapString(ptr, length) { if (length === 0 || !ptr) return ''; var hasutf = 0; @@ -34,23 +35,33 @@ function sleep(ms) { //- Platform async function main() { - var env = { - LogMessage: function(length, message) + LogMessage: function(length, string) { - var messageJS = ReadHeapString(message, length); - console.log(messageJS); + let message = readHeapString(string, length); + console.log(message); }, + floor: Math.floor, ceil: Math.ceil, sqrt: Math.sqrt, pow: Math.pow, - fmod: Math.fround, // Note: JavaScript doesn't have a native fmod function, so we use fround as a close approximation + fmod: function(a, b) { + let result = a%b; + return result; + }, cos: Math.cos, acos: Math.acos, - fabs: Math.abs, // Note: JavaScript doesn't have a native fabs function, so we use abs as a close approximation + fabs: Math.abs, round: Math.round, + + JS_DrawText: function(length, string, x, y) { + let text = readHeapString(string, length); + const context = canvas.getContext("2d"); + context.font = "16px serif"; + context.fillText("hello", x, y); + }, }; let wasm_instance = 0; @@ -77,10 +88,10 @@ async function main() const height = wasm_instance.exports.GetBufferHeight(); const bytes_per_pixel = wasm_instance.exports.GetBytesPerPixel(); - const canvas = document.getElementById("graphics-canvas"); - const ctx = canvas.getContext("2d"); + canvas = document.getElementById("graphics-canvas"); canvas.width = width; canvas.height = height; + const context = canvas.getContext("2d"); let buffer_address = wasm_instance.exports.GlobalImageBuffer.value; let image = new ImageData( @@ -121,6 +132,20 @@ async function main() let update_hz = 30; let target_seconds_for_frame = 1/update_hz; + { + let input_element = document.body.querySelector("input"); + let rect = canvas.getBoundingClientRect(); + let x = 8; + let y = 10; + let width = 142; + let height = 42; + input_element.style.position = `absolute`; + input_element.style.left = `${rect.left + x}px`; + input_element.style.top = `${rect.top + y}px`; + input_element.style.width = `${width}px`; + input_element.style.height = `${height}px`; + } + //- Game loop let running = true; let end_counter = 0; @@ -144,11 +169,15 @@ async function main() let last_counter = performance.now(); + // NOTE(luca): We need one frame of lag here because otherwise we cannot call + // canvas drawing functions in `UpdateAndRender()` since they will be overwritten + // by the `context.putImageData()` call. + context.putImageData(image, 0, 0); + wasm_instance.exports.UpdateAndRender(width, height, bytes_per_pixel, target_seconds_for_frame, mouse_down, mouse_x, mouse_y); - ctx.putImageData(image, 0, 0); await new Promise(requestAnimationFrame); } diff --git a/misc/tmux.sh b/misc/tmux.sh index 84e5063..24596b7 100755 --- a/misc/tmux.sh +++ b/misc/tmux.sh @@ -4,7 +4,7 @@ ThisDir="$(dirname "$(readlink -f "$0")")" cd "$ThisDir" cd .. -setsid 4ed . +setsid 4ed . & tmux new-window './build/ws' tmux split-pane -h 'zsh' tmux select-pane -L |