|
| 1 | +import wasmFile from 'wasmoon/dist/glue.wasm'; |
| 2 | +import { LuaFactory, LuaMultiReturn } from 'wasmoon' |
| 3 | +import { editor } from 'monaco-editor' |
| 4 | +import gly from '@gamely/core-native-html5' |
| 5 | +import gly_engine from '@gamely/gly-engine/dist/main.lua' |
| 6 | +import defaultScript from './default.lua' |
| 7 | + |
| 8 | +let monacoTimeout; |
| 9 | + |
| 10 | +document.addEventListener('DOMContentLoaded', async () => { |
| 11 | + const elInpWidth = document.querySelector('#width') |
| 12 | + const elInpHeight = document.querySelector('#height') |
| 13 | + const elSelFormat = document.querySelector('#resolution') |
| 14 | + const elBtnDownload = document.querySelector('#download') |
| 15 | + const elSelResolution = document.querySelector('#resolution') |
| 16 | + const elMonacoEditor = document.querySelector('#editor') |
| 17 | + const elCanvas = document.querySelector('#gameCanvas') |
| 18 | + |
| 19 | + const monacoEditor = editor.create(elMonacoEditor, { |
| 20 | + language: 'lua', |
| 21 | + theme: 'vs-dark', |
| 22 | + automaticLayout: true, |
| 23 | + fontLigatures: true, |
| 24 | + fontFamily: 'Cascadia Code' |
| 25 | + }); |
| 26 | + |
| 27 | + monacoEditor.setValue(defaultScript) |
| 28 | + |
| 29 | + const factory = new LuaFactory(wasmFile) |
| 30 | + const lua = await factory.createEngine() |
| 31 | + await lua.doString(gly_engine) |
| 32 | + |
| 33 | + gly.global.set('native_callback_init', lua.global.get('native_callback_init')) |
| 34 | + gly.global.set('native_callback_loop', lua.global.get('native_callback_loop')) |
| 35 | + gly.global.set('native_callback_draw', lua.global.get('native_callback_draw')) |
| 36 | + gly.global.set('native_callback_resize', lua.global.get('native_callback_resize')) |
| 37 | + gly.global.set('native_callback_keyboard', lua.global.get('native_callback_keyboard')) |
| 38 | + lua.global.set('native_draw_start', gly.global.get('native_draw_start')) |
| 39 | + lua.global.set('native_draw_flush', gly.global.get('native_draw_flush')) |
| 40 | + lua.global.set('native_draw_clear', gly.global.get('native_draw_clear')) |
| 41 | + lua.global.set('native_draw_color', gly.global.get('native_draw_color')) |
| 42 | + lua.global.set('native_draw_font', gly.global.get('native_draw_font')) |
| 43 | + lua.global.set('native_draw_rect', gly.global.get('native_draw_rect')) |
| 44 | + lua.global.set('native_draw_line', gly.global.get('native_draw_line')) |
| 45 | + lua.global.set('native_draw_image', gly.global.get('native_draw_image')) |
| 46 | + lua.global.set('native_dict_http', gly.global.get('native_dict_http')) |
| 47 | + lua.global.set('native_dict_json', gly.global.get('native_dict_json')) |
| 48 | + lua.global.set('native_dict_poly', gly.global.get('native_dict_poly')) |
| 49 | + lua.global.set('native_draw_text', (x, y, text) => { |
| 50 | + const native_draw_text = gly.global.get('native_draw_text') |
| 51 | + return LuaMultiReturn.from(native_draw_text(x, y, text)) |
| 52 | + }) |
| 53 | + |
| 54 | + gly.error('canvas') |
| 55 | + gly.init('#gameCanvas') |
| 56 | + |
| 57 | + const apply = () => { |
| 58 | + const code = monacoEditor.getValue() |
| 59 | + gly.load(`return {draw=function(std)\nprint('oi')\n${code}\nend}`) |
| 60 | + elCanvas.width = elInpWidth.value; |
| 61 | + elCanvas.height= elInpHeight.value; |
| 62 | + window.requestAnimationFrame(gly.update) |
| 63 | + } |
| 64 | + |
| 65 | + monacoEditor.onDidChangeModelContent(() => { |
| 66 | + clearTimeout(monacoTimeout); |
| 67 | + monacoTimeout = setTimeout(() => { |
| 68 | + apply() |
| 69 | + }, 100); |
| 70 | + }); |
| 71 | + |
| 72 | + elSelResolution.addEventListener('change', () => { |
| 73 | + const [width, height] = elSelResolution.value.split('x').map(Number); |
| 74 | + elInpWidth.value = width; |
| 75 | + elInpHeight.value = height; |
| 76 | + apply(); |
| 77 | + }) |
| 78 | + |
| 79 | + elBtnDownload.addEventListener('click', (ev) => { |
| 80 | + ev.preventDefault(); |
| 81 | + const ext = elSelFormat.value |
| 82 | + const url = elCanvas.toDataURL(`image/${ext}`) |
| 83 | + const downloadLink = document.createElement('a') |
| 84 | + downloadLink.href = url |
| 85 | + downloadLink.target = '_blank' |
| 86 | + downloadLink.download = `icon.${ext}` |
| 87 | + downloadLink.click() |
| 88 | + URL.revokeObjectURL(url) |
| 89 | + }) |
| 90 | + |
| 91 | + elInpWidth.addEventListener('change', apply); |
| 92 | + elInpHeight.addEventListener('change', apply); |
| 93 | + |
| 94 | + apply(); |
| 95 | +}) |
0 commit comments