From 5c440c17ba78453d4362d038060a3106432fe087 Mon Sep 17 00:00:00 2001 From: klangner Date: Fri, 15 Jan 2021 14:26:19 +0100 Subject: [PATCH] Improved map selection in demo app --- docs/0.bootstrap.js | 2 +- docs/index.html | 21 ++++++++++++--------- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/docs/0.bootstrap.js b/docs/0.bootstrap.js index 2b47808..9972d69 100644 --- a/docs/0.bootstrap.js +++ b/docs/0.bootstrap.js @@ -43,7 +43,7 @@ eval("\"use strict\";\n// Instantiate WebAssembly module\nvar wasmExports = __we /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var mapgen_demo__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! mapgen-demo */ \"../pkg/mapgen_demo.js\");\n/* harmony import */ var mapgen_demo_mapgen_demo_bg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! mapgen-demo/mapgen_demo_bg */ \"../pkg/mapgen_demo_bg.wasm\");\n\n\n\nconst CANVAS_SIZE = 750;\nconst GRID_COLS = 80;\nconst GRID_ROWS = 50;\nconst CELL_SIZE = CANVAS_SIZE/GRID_ROWS;\nconst TILE_SIZE = 39;\n\n// Init canvas\nconst canvas = document.getElementById(\"mapgen-canvas\");\ncanvas.height = CELL_SIZE * GRID_ROWS;\ncanvas.width = CELL_SIZE * GRID_COLS;\nconst ctx = canvas.getContext('2d');\n// Info box\nconst infoDiv = document.getElementById('map-info');\n// API to the WASM\nlet world = null;\n\n// Load tiles bitmap\nlet tiles_image = new Image();\ntiles_image.src = 'assets/tiles.png';\n\n// Take provided seed or generate new one\nfunction get_seed() {\n var seed_text = document.getElementById(\"seed\").value;\n if( seed_text.length > 0) {\n return Number(seed_text);\n } \n return Date.now();\n}\n\n// Map generators\nfunction newCellularAutomata() {\n world = mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"World\"].new_cellular_automata(GRID_COLS, GRID_ROWS, get_seed());\n requestAnimationFrame(renderLoop);\n}\n\nfunction newSimpleRooms() {\n var seed = Date.now();\n world = mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"World\"].new_simple_rooms(GRID_COLS, GRID_ROWS, get_seed());\n requestAnimationFrame(renderLoop);\n}\n\nfunction newBspInterior() {\n var seed = Date.now();\n world = mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"World\"].new_bsp_interior(GRID_COLS, GRID_ROWS, get_seed());\n requestAnimationFrame(renderLoop);\n}\n\nfunction newDrunkard() {\n var seed = Date.now();\n world = mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"World\"].new_drunkard(GRID_COLS, GRID_ROWS, get_seed());\n requestAnimationFrame(renderLoop);\n}\n\nfunction newBspRooms() {\n var seed = Date.now();\n world = mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"World\"].new_bsp_rooms(GRID_COLS, GRID_ROWS, get_seed());\n requestAnimationFrame(renderLoop);\n}\n\nfunction newMaze() {\n var seed = Date.now();\n world = mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"World\"].new_maze(GRID_COLS, GRID_ROWS, get_seed());\n requestAnimationFrame(renderLoop);\n}\n\nfunction newVoronoi() {\n var seed = Date.now();\n world = mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"World\"].new_voronoi(GRID_COLS, GRID_ROWS, get_seed());\n requestAnimationFrame(renderLoop);\n}\n\nfunction newRandomGen() {\n var seed = Date.now();\n world = mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"World\"].new_random(GRID_COLS, GRID_ROWS, get_seed());\n requestAnimationFrame(renderLoop);\n}\n\nconst renderLoop = () => {\n // universe.tick();\n drawCells();\n requestAnimationFrame(renderLoop);\n};\n\nconst getIndex = (row, column) => {\n return row * GRID_COLS + column;\n};\n\nconst is_inner_wall = (tiles, col, row) => {\n for (let c = Math.max(col - 1, 0); c < Math.min(col + 2, GRID_COLS); c++) {\n for (let r = Math.max(row - 1, 0); r < Math.min(row + 2, GRID_ROWS); r++) {\n if ((c != col || r != row) && tiles[getIndex(r, c)] == mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"Cell\"].Floor) {\n return false;\n }\n }\n }\n\n return true;\n}\n\nconst draw_tile = (ctx, row, col, tile_type) => {\n var tile_x = 0;\n var tile_y = 0;\n if (tile_type == \"floor\") {\n tile_x = 3;\n tile_y = 2;\n } else if (tile_type == \"wall\") {\n tile_x = 0;\n tile_y = 3;\n } else if (tile_type == \"player\") {\n tile_x = 0;\n tile_y = 8;\n } else if (tile_type == \"exit\") {\n tile_x = 10;\n tile_y = 1;\n } else {\n tile_x = 18;\n tile_y = 0;\n }\n\n ctx.drawImage(\n tiles_image,\n tile_x * TILE_SIZE + 3,\n tile_y * TILE_SIZE + 3,\n TILE_SIZE - 3,\n TILE_SIZE - 3,\n col * CELL_SIZE,\n row * CELL_SIZE,\n CELL_SIZE,\n CELL_SIZE);\n\n}\n\nconst drawCells = () => {\n const tilesPtr = world.tiles();\n const tiles = new Uint8Array(mapgen_demo_mapgen_demo_bg__WEBPACK_IMPORTED_MODULE_1__[\"memory\"].buffer, tilesPtr, GRID_COLS * GRID_ROWS);\n\n // tiles\n for (let row = 0; row < GRID_ROWS; row++) {\n for (let col = 0; col < GRID_COLS; col++) {\n const idx = getIndex(row, col);\n if (tiles[idx] == mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"Cell\"].Floor) {\n draw_tile(ctx, row, col, \"floor\");\n } else if (is_inner_wall(tiles, col, row)){\n draw_tile(ctx, row, col, \"inner-wall\");\n } else {\n draw_tile(ctx, row, col, \"wall\");\n }\n }\n }\n\n // Player position\n let player = world.player_pos();\n draw_tile(ctx, player.row(), player.col(), \"player\");\n\n // Exit position\n let exit = world.exit_pos();\n draw_tile(ctx, exit.row(), exit.col(), \"exit\");\n};\n\nnewRandomGen();\n\n// Connect UI element\ndocument.getElementById('cellular-automata-option').addEventListener('click', newCellularAutomata);\ndocument.getElementById('simple-rooms-option').addEventListener('click', newSimpleRooms);\ndocument.getElementById('bsp-rooms-option').addEventListener('click', newBspRooms);\ndocument.getElementById('drunkard-option').addEventListener('click', newDrunkard);\ndocument.getElementById('bsp-interior-option').addEventListener('click', newBspInterior);\ndocument.getElementById('maze-option').addEventListener('click', newMaze);\ndocument.getElementById('voronoi-option').addEventListener('click', newVoronoi);\ndocument.getElementById('random-option').addEventListener('click', newRandomGen);\n\n\n//# sourceURL=webpack:///./index.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var mapgen_demo__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! mapgen-demo */ \"../pkg/mapgen_demo.js\");\n/* harmony import */ var mapgen_demo_mapgen_demo_bg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! mapgen-demo/mapgen_demo_bg */ \"../pkg/mapgen_demo_bg.wasm\");\n\n\n\nconst CANVAS_SIZE = 750;\nconst GRID_COLS = 80;\nconst GRID_ROWS = 50;\nconst CELL_SIZE = CANVAS_SIZE/GRID_ROWS;\nconst TILE_SIZE = 39;\n\n// Init canvas\nconst canvas = document.getElementById(\"mapgen-canvas\");\ncanvas.height = CELL_SIZE * GRID_ROWS;\ncanvas.width = CELL_SIZE * GRID_COLS;\nconst ctx = canvas.getContext('2d');\n// Info box\nconst infoDiv = document.getElementById('map-info');\n// API to the WASM\nlet world = null;\n\n// Load tiles bitmap\nlet tiles_image = new Image();\ntiles_image.src = 'assets/tiles.png';\n\n// Take provided seed or generate new one\nfunction get_seed() {\n var seed_text = document.getElementById(\"seed\").value;\n if( seed_text.length > 0) {\n return Number(seed_text);\n } \n return Date.now();\n}\n\n\nfunction setGenerator(e) {\n document.getElementById(\"generatorDropdown\").innerHTML = e.target.innerText;\n}\n\n// Map generators\nfunction refreshMap() {\n var generator_name = document.getElementById(\"generatorDropdown\").innerHTML;\n\n switch(generator_name){\n case \"Cellular Automata\":\n world = mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"World\"].new_cellular_automata(GRID_COLS, GRID_ROWS, get_seed());\n break;\n \n case \"Simple Rooms\":\n world = mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"World\"].new_simple_rooms(GRID_COLS, GRID_ROWS, get_seed());\n break;\n \n case \"BSP Rooms\":\n world = mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"World\"].new_bsp_rooms(GRID_COLS, GRID_ROWS, get_seed());\n break;\n \n case \"BSP Interior\":\n world = mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"World\"].new_bsp_interior(GRID_COLS, GRID_ROWS, get_seed());\n break;\n \n case \"Drunkard Walk\":\n world = mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"World\"].new_drunkard(GRID_COLS, GRID_ROWS, get_seed());\n break;\n \n case \"Maze\":\n world = mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"World\"].new_maze(GRID_COLS, GRID_ROWS, get_seed());\n break;\n \n case \"Voronoi Hive\":\n world = mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"World\"].new_voronoi(GRID_COLS, GRID_ROWS, get_seed());\n break;\n \n default:\n world = mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"World\"].new_random(GRID_COLS, GRID_ROWS, get_seed());\n }\n\n requestAnimationFrame(renderLoop);\n}\n\n// Main loop\nfunction renderLoop() {\n // universe.tick();\n drawCells();\n requestAnimationFrame(renderLoop);\n};\n\nconst getIndex = (row, column) => {\n return row * GRID_COLS + column;\n};\n\nconst is_inner_wall = (tiles, col, row) => {\n for (let c = Math.max(col - 1, 0); c < Math.min(col + 2, GRID_COLS); c++) {\n for (let r = Math.max(row - 1, 0); r < Math.min(row + 2, GRID_ROWS); r++) {\n if ((c != col || r != row) && tiles[getIndex(r, c)] == mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"Cell\"].Floor) {\n return false;\n }\n }\n }\n\n return true;\n}\n\nconst draw_tile = (ctx, row, col, tile_type) => {\n var tile_x = 0;\n var tile_y = 0;\n if (tile_type == \"floor\") {\n tile_x = 3;\n tile_y = 2;\n } else if (tile_type == \"wall\") {\n tile_x = 0;\n tile_y = 3;\n } else if (tile_type == \"player\") {\n tile_x = 0;\n tile_y = 8;\n } else if (tile_type == \"exit\") {\n tile_x = 10;\n tile_y = 1;\n } else {\n tile_x = 18;\n tile_y = 0;\n }\n\n ctx.drawImage(\n tiles_image,\n tile_x * TILE_SIZE + 3,\n tile_y * TILE_SIZE + 3,\n TILE_SIZE - 3,\n TILE_SIZE - 3,\n col * CELL_SIZE,\n row * CELL_SIZE,\n CELL_SIZE,\n CELL_SIZE);\n\n}\n\nconst drawCells = () => {\n const tilesPtr = world.tiles();\n const tiles = new Uint8Array(mapgen_demo_mapgen_demo_bg__WEBPACK_IMPORTED_MODULE_1__[\"memory\"].buffer, tilesPtr, GRID_COLS * GRID_ROWS);\n\n // tiles\n for (let row = 0; row < GRID_ROWS; row++) {\n for (let col = 0; col < GRID_COLS; col++) {\n const idx = getIndex(row, col);\n if (tiles[idx] == mapgen_demo__WEBPACK_IMPORTED_MODULE_0__[\"Cell\"].Floor) {\n draw_tile(ctx, row, col, \"floor\");\n } else if (is_inner_wall(tiles, col, row)){\n draw_tile(ctx, row, col, \"inner-wall\");\n } else {\n draw_tile(ctx, row, col, \"wall\");\n }\n }\n }\n\n // Player position\n let player = world.player_pos();\n draw_tile(ctx, player.row(), player.col(), \"player\");\n\n // Exit position\n let exit = world.exit_pos();\n draw_tile(ctx, exit.row(), exit.col(), \"exit\");\n};\n\n// Connect UI element\ndocument.getElementById('cellular-automata-option').addEventListener('click', setGenerator);\ndocument.getElementById('simple-rooms-option').addEventListener('click', setGenerator);\ndocument.getElementById('bsp-rooms-option').addEventListener('click', setGenerator);\ndocument.getElementById('drunkard-option').addEventListener('click', setGenerator);\ndocument.getElementById('bsp-interior-option').addEventListener('click', setGenerator);\ndocument.getElementById('maze-option').addEventListener('click', setGenerator);\ndocument.getElementById('voronoi-option').addEventListener('click', setGenerator);\ndocument.getElementById('random-option').addEventListener('click', setGenerator);\n\ndocument.getElementById('refresh').addEventListener('click', refreshMap);\n\nrefreshMap();\n\n//# sourceURL=webpack:///./index.js?"); /***/ }), diff --git a/docs/index.html b/docs/index.html index 9b4a739..bf3a7e2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -28,14 +28,15 @@ -