commit 212bf072b743e33def9b15fc1428c767f55ed632
parent 54e0a086a136ac517b25dd247d3861182237c0ee
Author: Lou Woell <lou.woell@posteo.de>
Date: Fri, 2 Feb 2024 21:42:50 +0100
Basic Scaling for Web
Makes the canvas fit the screen. No dynamic scaling.
Diffstat:
2 files changed, 33 insertions(+), 10 deletions(-)
diff --git a/makefile b/makefile
@@ -11,6 +11,7 @@ BIN = pong
# Only used for WASM compilation
RAYLIB_PATH = ~/Programming/raylib/
EMSCRIPTEN_PATH = /etc/profile.d/emscripten.sh
+EMCC_FLAGS = -Wall -DPLATFORM_WEB -s GL_ENABLE_GET_PROC_ADDRESS -s USE_GLFW=3
$(BIN): $(OBJS)
$(CC) -o $@ $^ $(CFLAGS) $(LIBS)
@@ -20,4 +21,4 @@ $(BIN): $(OBJS)
.PHONY: web
web:
- source $(EMSCRIPTEN_PATH) && emcc -o $(BIN).html pong.c -Wall -Os $(RAYLIB_PATH)/src/libraylib.a -I. -I $(RAYLIB_PATH)/src -I $(RAYLIB_PATH)/src/external -L. -L $(RAYLIB_PATH)/src -s USE_GLFW=3 --shell-file $(RAYLIB_PATH)/src/minshell.html -DPLATFORM_WEB -s GL_ENABLE_GET_PROC_ADDRESS
+ source $(EMSCRIPTEN_PATH) && emcc -o $(BIN).html pong.c $(EMCC_FLAGS) $(RAYLIB_PATH)/src/libraylib.a -I. -I $(RAYLIB_PATH)/src -I $(RAYLIB_PATH)/src/external -L. -L $(RAYLIB_PATH)/src --shell-file $(RAYLIB_PATH)/src/minshell.html
diff --git a/pong.c b/pong.c
@@ -5,6 +5,8 @@
#if defined(PLATFORM_WEB)
#include <emscripten/emscripten.h>
+ #include <emscripten/html5.h>
+ #include <sys/param.h>
#endif
// Color Scheme of my Website
@@ -15,16 +17,17 @@
/* #define DAY_COLOR SKYBLUE */
/* #define NIGHT_COLOR DARKBLUE */
-#define SQUARE_SIZE 25
-
-#define MAX_RECS_X 24
-#define MAX_RECS_Y 24
-
#define FONTSIZE 30
#define PAUSE_TEXT "PAUSED"
-#define HEIGHT SQUARE_SIZE * MAX_RECS_Y
-#define WIDTH SQUARE_SIZE * MAX_RECS_X
+#define MAX_RECS_X 24
+#define MAX_RECS_Y 24
+
+int WIDTH = 600;
+int HEIGHT = 600;
+
+int SQUARE_SIZE = 25;
+
typedef struct {
Vector2 Position;
@@ -227,10 +230,29 @@ void UpdateDrawFrame(void)
int main()
{
- const char * title = "Pong Wars";
+#if defined(PLATFORM_WEB)
+ SetConfigFlags(FLAG_VSYNC_HINT | FLAG_WINDOW_RESIZABLE);
+#else
SetConfigFlags(FLAG_VSYNC_HINT);
- InitWindow(WIDTH,HEIGHT, title);
+#endif
+
+ InitWindow(WIDTH,HEIGHT, "Pong Wars");
+
+#if defined(PLATFORM_WEB)
+ emscripten_get_canvas_element_size("canvas", &WIDTH, &HEIGHT);
+
+ WIDTH = MIN(WIDTH, HEIGHT);
+
+ SQUARE_SIZE = WIDTH / MAX_RECS_X;
+ // avoid Gaps due to rounding
+ WIDTH = MAX_RECS_X * SQUARE_SIZE;
+ HEIGHT = WIDTH;
+
+ emscripten_set_canvas_element_size("canvas", WIDTH, HEIGHT);
+ SetWindowSize( WIDTH, HEIGHT);
+ SetWindowMaxSize(WIDTH, HEIGHT);
+#endif
// needs initialized Window
pause_text_width = MeasureText(PAUSE_TEXT, FONTSIZE);