From 582bef71d29f524748ef9059eea9ec1e9a361eb3 Mon Sep 17 00:00:00 2001
From: FreeArtMan <dos21h@gmail.com>
Date: Sat, 19 May 2018 10:54:04 +0100
Subject: Updated webassembly/SDL with demo

---
 md/writeup/web_assembly_sdl_example.md | 144 +++++++++++++++++++++++----------
 1 file changed, 101 insertions(+), 43 deletions(-)

(limited to 'md/writeup/web_assembly_sdl_example.md')

diff --git a/md/writeup/web_assembly_sdl_example.md b/md/writeup/web_assembly_sdl_example.md
index 0e36f79..d2fc0aa 100644
--- a/md/writeup/web_assembly_sdl_example.md
+++ b/md/writeup/web_assembly_sdl_example.md
@@ -33,8 +33,29 @@ Porting requiring to define loop that will be registered for webassembly engine
 There need to be covered more things if there is need to use some fonts,images or files. But for
 now its minimal example that will draw SDL window in your browser ;]
 
-## Source
+## Demo
+
+This example compilable for PC target and for webassembly. Enjoy playing with it.
+
+<script type='text/javascript'>
+	var Module = {};
+	fetch('/demo/sdl/index.wasm')
+	.then(response =>
+		response.arrayBuffer()
+	).then(buffer => {
+		Module.canvas = document.getElementById("canvas");
+		Module.wasmBinary = buffer;
+		var script = document.createElement('script');
+		script.src = "/demo/sdl/index.js";
+		script.onload = function() {
+		console.log("Emscripten boilerplate loaded.")
+		}
+		document.body.appendChild(script);
+	});
+</script><canvas id="canvas" style="width:100%; height:100%;"></canvas>
+
 
+## Source
 
 
 ```c
@@ -50,29 +71,36 @@ now its minimal example that will draw SDL window in your browser ;]
 #include <SDL2/SDL_ttf.h>
 #endif
 
-#define SCREEN_WIDTH 200
+#define SCREEN_WIDTH  200
 #define SCREEN_HEIGHT 200
 
 SDL_Window *window = NULL;
-SDL_Surface *screen = NULL;
-SDL_Surface *blank = NULL;
+SDL_Renderer *renderer = NULL;
 
 #define MAX(a,b) ((a) > (b) ? a : b)
 #define MIN(a,b) ((a) < (b) ? a : b)
 
+int posX=0;
+int posY=0;
+int sizeW=20;
+int sizeH=20;
+
+static int quit = 0;
+
 void render()
 {
+	
 	SDL_Rect r_scr;
-	r_scr.x = 10;
-	r_scr.y = 20;
-	r_scr.w = 10;
-	r_scr.h = 10;
-	SDL_Rect r_im;
-	r_im.x = 0;
-	r_im.y = 0;
-	r_im.w = 16;
-	r_im.h = 16;
-	SDL_BlitSurface(blank, NULL, screen, &r_scr);
+	r_scr.x = posX;
+	r_scr.y = posY;
+	r_scr.w = sizeW;
+	r_scr.h = sizeH;
+	SDL_SetRenderDrawColor( renderer, 0x00, 0x00, 0x00, 0xFF );
+	SDL_RenderClear(renderer);
+
+	SDL_SetRenderDrawColor(renderer, 0xff, 0xff, 0x00, 0x00);
+	SDL_RenderDrawRect(renderer, &r_scr);
+	SDL_RenderPresent(renderer);
 }
 
 #if __EMSCRIPTEN__
@@ -81,6 +109,61 @@ void main_tick() {
 int main_tick() {
 #endif
 	
+	SDL_Event event;
+
+		while (SDL_PollEvent(&event))
+		{
+			switch (event.type)
+			{
+			case SDL_QUIT:
+			{
+				quit = 1;
+				break;
+			}
+			case SDL_KEYDOWN:
+			{
+				switch (event.key.keysym.sym)
+				{
+				case SDLK_UP:
+				{
+					if (posY>=20)
+					{
+						posY-=20;
+					}
+					break;
+				}
+				case SDLK_DOWN:
+				{
+					if (posY+sizeH<SCREEN_HEIGHT)
+					{
+						posY += 20;
+					}
+					break;
+				}
+				case SDLK_LEFT:
+				{
+					if (posX>=20)
+					{
+						posX-=20;
+					}
+					break;
+				}
+				case SDLK_RIGHT:
+				{
+					if (posX+sizeW<SCREEN_WIDTH)
+					{
+						posX+=20;
+					}
+					break;
+				}
+				}
+				break;
+			}
+			}
+			
+		}
+	
+
 	render();
 	SDL_UpdateWindowSurface(window);
 
@@ -95,24 +178,9 @@ void main_loop()
 #if __EMSCRIPTEN__
 	emscripten_set_main_loop(main_tick, -1, 1);
 #else
-	int quit = 0;
-	SDL_Event event;
-	
-
 	while (0 == quit)
 	{
-		
-		while (SDL_PollEvent(&event))
-		{
-			quit = main_tick();
-			switch (event.type)
-			{
-			case SDL_QUIT:
-				quit = 1;
-				break;
-			}
-			
-		}
+		main_tick();
 	}
 #endif
 }
@@ -126,23 +194,13 @@ int main()
 		SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED,
 		SCREEN_WIDTH, SCREEN_HEIGHT,
 		SDL_WINDOW_SHOWN | SDL_WINDOW_OPENGL);
-	screen = SDL_GetWindowSurface(window);
-	SDL_GL_SetSwapInterval(1);
 
-	blank = SDL_CreateRGBSurface(0, 16, 16, 32, 0, 255, 255, 50);
-	Uint32 color = SDL_MapRGB(blank->format, 150, 0 , 0);
-	for (int x = 0; x < 16; x++)
-	{
-		for (int y = 0; y < 16; y++)
-		{
-			Uint32 *bufp;
-			bufp = (Uint32 *)blank->pixels + y*blank->pitch/4 + x;
-			*bufp = color;
-		}
-	}
+	renderer = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED);
+	SDL_SetRenderDrawColor(renderer, 0xff, 0xff, 0xff, 0xff);
 
 	main_loop();
 
+	SDL_DestroyRenderer(renderer);
 	SDL_DestroyWindow(window);
 	SDL_Quit();
 
-- 
cgit v1.2.3