window_js.odin 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452
  1. #+build js
  2. #+private file
  3. package karl2d
  4. @(private="package")
  5. WINDOW_INTERFACE_JS :: Window_Interface {
  6. state_size = js_state_size,
  7. init = js_init,
  8. shutdown = js_shutdown,
  9. window_handle = js_window_handle,
  10. process_events = js_process_events,
  11. get_events = js_get_events,
  12. get_width = js_get_width,
  13. get_height = js_get_height,
  14. clear_events = js_clear_events,
  15. set_position = js_set_position,
  16. set_size = js_set_size,
  17. get_window_scale = js_get_window_scale,
  18. set_flags = js_set_flags,
  19. is_gamepad_active = js_is_gamepad_active,
  20. get_gamepad_axis = js_get_gamepad_axis,
  21. set_gamepad_vibration = js_set_gamepad_vibration,
  22. set_internal_state = js_set_internal_state,
  23. }
  24. import "core:sys/wasm/js"
  25. import "base:runtime"
  26. import "core:log"
  27. import "core:fmt"
  28. js_state_size :: proc() -> int {
  29. return size_of(JS_State)
  30. }
  31. js_init :: proc(
  32. window_state: rawptr,
  33. window_width: int,
  34. window_height: int,
  35. window_title: string,
  36. flags: Window_Flags,
  37. allocator: runtime.Allocator,
  38. ) {
  39. s = (^JS_State)(window_state)
  40. s.allocator = allocator
  41. s.canvas_id = "webgl-canvas"
  42. s.flags = flags
  43. js.set_document_title(window_title)
  44. // The browser window probably has some other size than what was sent in.
  45. if .Resizable in flags {
  46. add_window_event_listener(.Resize, js_event_window_resize)
  47. update_canvas_size(s.canvas_id)
  48. } else {
  49. js_set_size(window_width, window_height)
  50. }
  51. add_canvas_event_listener(.Mouse_Move, js_event_mouse_move)
  52. add_canvas_event_listener(.Mouse_Down, js_event_mouse_down)
  53. add_canvas_event_listener(.Mouse_Up, js_event_mouse_up)
  54. add_window_event_listener(.Key_Down, js_event_key_down)
  55. add_window_event_listener(.Key_Up, js_event_key_up)
  56. }
  57. js_event_key_down :: proc(e: js.Event) {
  58. if e.key.repeat {
  59. return
  60. }
  61. key := key_from_js_event(e)
  62. append(&s.events, Window_Event_Key_Went_Down {
  63. key = key,
  64. })
  65. }
  66. js_event_key_up :: proc(e: js.Event) {
  67. key := key_from_js_event(e)
  68. append(&s.events, Window_Event_Key_Went_Up {
  69. key = key,
  70. })
  71. }
  72. js_event_window_resize :: proc(e: js.Event) {
  73. update_canvas_size(s.canvas_id)
  74. }
  75. js_event_mouse_move :: proc(e: js.Event) {
  76. append(&s.events, Window_Event_Mouse_Move {
  77. position = {f32(e.mouse.client.x), f32(e.mouse.client.y)},
  78. })
  79. }
  80. js_event_mouse_down :: proc(e: js.Event) {
  81. button := Mouse_Button.Left
  82. if e.mouse.button == 2 {
  83. button = .Right
  84. }
  85. if e.mouse.button == 1 {
  86. button = .Middle
  87. }
  88. append(&s.events, Window_Event_Mouse_Button_Went_Down {
  89. button = button,
  90. })
  91. }
  92. js_event_mouse_up :: proc(e: js.Event) {
  93. button := Mouse_Button.Left
  94. if e.mouse.button == 2 {
  95. button = .Right
  96. }
  97. if e.mouse.button == 1 {
  98. button = .Middle
  99. }
  100. append(&s.events, Window_Event_Mouse_Button_Went_Up {
  101. button = button,
  102. })
  103. }
  104. add_canvas_event_listener :: proc(evt: js.Event_Kind, callback: proc(e: js.Event)) {
  105. js.add_event_listener(
  106. s.canvas_id,
  107. evt,
  108. nil,
  109. callback,
  110. true,
  111. )
  112. }
  113. add_window_event_listener :: proc(evt: js.Event_Kind, callback: proc(e: js.Event)) {
  114. js.add_window_event_listener(evt, nil, callback, true)
  115. }
  116. remove_window_event_listener :: proc(evt: js.Event_Kind, callback: proc(e: js.Event)) {
  117. js.remove_window_event_listener(evt, nil, callback, true)
  118. }
  119. update_canvas_size :: proc(canvas_id: HTML_Canvas_ID) {
  120. rect := js.get_bounding_client_rect("body")
  121. width := f64(rect.width)
  122. height := f64(rect.height)
  123. js.set_element_key_f64(canvas_id, "width", width)
  124. js.set_element_key_f64(canvas_id, "height", height)
  125. s.width = int(rect.width)
  126. s.height = int(rect.height)
  127. append(&s.events, Window_Event_Resize {
  128. width = int(width),
  129. height = int(height),
  130. })
  131. }
  132. js_shutdown :: proc() {
  133. }
  134. js_window_handle :: proc() -> Window_Handle {
  135. return Window_Handle(&s.canvas_id)
  136. }
  137. // This works for XBox controller -- does it work for PlayStation?
  138. KARL2D_GAMEPAD_BUTTON_FROM_JS :: [Gamepad_Button]int {
  139. .Left_Face_Up = 12,
  140. .Left_Face_Down = 13,
  141. .Left_Face_Left = 14,
  142. .Left_Face_Right = 15,
  143. .Right_Face_Up = 3,
  144. .Right_Face_Down = 0,
  145. .Right_Face_Left = 2,
  146. .Right_Face_Right = 1,
  147. .Left_Shoulder = 5,
  148. .Left_Trigger = 7,
  149. .Right_Shoulder = 4,
  150. .Right_Trigger = 6,
  151. .Left_Stick_Press = 10,
  152. .Right_Stick_Press = 11,
  153. .Middle_Face_Left = 8,
  154. .Middle_Face_Middle = -1,
  155. .Middle_Face_Right = 9,
  156. }
  157. js_process_events :: proc() {
  158. for gamepad_idx in 0..<MAX_GAMEPADS {
  159. // new_state
  160. ns: js.Gamepad_State
  161. if !js.get_gamepad_state(gamepad_idx, &ns) || !ns.connected {
  162. if s.gamepad_state[gamepad_idx].connected {
  163. s.gamepad_state[gamepad_idx] = {}
  164. }
  165. continue
  166. }
  167. // prev_state
  168. ps := s.gamepad_state[gamepad_idx]
  169. // We check if any button changed from pressed to not pressed and the other way around.
  170. for js_idx, button in KARL2D_GAMEPAD_BUTTON_FROM_JS {
  171. if js_idx == -1 {
  172. continue
  173. }
  174. if !ps.buttons[js_idx].pressed && ns.buttons[js_idx].pressed {
  175. append(&s.events, Window_Event_Gamepad_Button_Went_Down {
  176. gamepad = gamepad_idx,
  177. button = button,
  178. })
  179. }
  180. if ps.buttons[js_idx].pressed && !ns.buttons[js_idx].pressed {
  181. append(&s.events, Window_Event_Gamepad_Button_Went_Up {
  182. gamepad = gamepad_idx,
  183. button = button,
  184. })
  185. }
  186. }
  187. s.gamepad_state[gamepad_idx] = ns
  188. }
  189. }
  190. js_get_events :: proc() -> []Window_Event {
  191. return s.events[:]
  192. }
  193. js_get_width :: proc() -> int {
  194. return s.width
  195. }
  196. js_get_height :: proc() -> int {
  197. return s.height
  198. }
  199. js_clear_events :: proc() {
  200. runtime.clear(&s.events)
  201. }
  202. js_set_position :: proc(x: int, y: int) {
  203. buf: [256]u8
  204. js.set_element_style(s.canvas_id, "margin-top", fmt.bprintf(buf[:], "%vpx", x))
  205. js.set_element_style(s.canvas_id, "margin-left", fmt.bprintf(buf[:], "%vpx", y))
  206. }
  207. js_set_size :: proc(w, h: int) {
  208. s.width = w
  209. s.height = h
  210. js.set_element_key_f64(s.canvas_id, "width", f64(w))
  211. js.set_element_key_f64(s.canvas_id, "height", f64(h))
  212. }
  213. js_get_window_scale :: proc() -> f32 {
  214. return f32(js.device_pixel_ratio())
  215. }
  216. js_set_flags :: proc(flags: Window_Flags) {
  217. if .Resizable in (flags ~ s.flags) {
  218. if .Resizable in flags {
  219. add_window_event_listener(.Resize, js_event_window_resize)
  220. update_canvas_size(s.canvas_id)
  221. } else {
  222. remove_window_event_listener(.Resize, js_event_window_resize)
  223. js_set_size(s.width, s.height)
  224. }
  225. }
  226. s.flags = flags
  227. }
  228. js_is_gamepad_active :: proc(gamepad: int) -> bool {
  229. if gamepad < 0 || gamepad >= MAX_GAMEPADS {
  230. return false
  231. }
  232. return s.gamepad_state[gamepad].connected
  233. }
  234. js_get_gamepad_axis :: proc(gamepad: int, axis: Gamepad_Axis) -> f32 {
  235. if gamepad < 0 || gamepad >= MAX_GAMEPADS {
  236. return 0
  237. }
  238. if axis == .Left_Trigger {
  239. return f32(s.gamepad_state[gamepad].buttons[KARL2D_GAMEPAD_BUTTON_FROM_JS[.Left_Trigger]].value)
  240. }
  241. if axis == .Right_Trigger {
  242. return f32(s.gamepad_state[gamepad].buttons[KARL2D_GAMEPAD_BUTTON_FROM_JS[.Right_Trigger]].value)
  243. }
  244. return f32(s.gamepad_state[gamepad].axes[int(axis)])
  245. }
  246. js_set_gamepad_vibration :: proc(gamepad: int, left: f32, right: f32) {
  247. if gamepad < 0 || gamepad >= MAX_GAMEPADS {
  248. return
  249. }
  250. }
  251. js_set_internal_state :: proc(state: rawptr) {
  252. assert(state != nil)
  253. s = (^JS_State)(state)
  254. }
  255. @(private="package")
  256. HTML_Canvas_ID :: string
  257. JS_State :: struct {
  258. allocator: runtime.Allocator,
  259. canvas_id: HTML_Canvas_ID,
  260. width: int,
  261. height: int,
  262. events: [dynamic]Window_Event,
  263. gamepad_state: [MAX_GAMEPADS]js.Gamepad_State,
  264. flags: Window_Flags,
  265. }
  266. s: ^JS_State
  267. key_from_js_event :: proc(e: js.Event) -> Keyboard_Key {
  268. switch e.key.code {
  269. case "Digit1": return .N1
  270. case "Digit2": return .N2
  271. case "Digit3": return .N3
  272. case "Digit4": return .N4
  273. case "Digit5": return .N5
  274. case "Digit6": return .N6
  275. case "Digit7": return .N7
  276. case "Digit8": return .N8
  277. case "Digit9": return .N9
  278. case "Digit0": return .N0
  279. case "KeyA": return .A
  280. case "KeyB": return .B
  281. case "KeyC": return .C
  282. case "KeyD": return .D
  283. case "KeyE": return .E
  284. case "KeyF": return .F
  285. case "KeyG": return .G
  286. case "KeyH": return .H
  287. case "KeyI": return .I
  288. case "KeyJ": return .J
  289. case "KeyK": return .K
  290. case "KeyL": return .L
  291. case "KeyM": return .M
  292. case "KeyN": return .N
  293. case "KeyO": return .O
  294. case "KeyP": return .P
  295. case "KeyQ": return .Q
  296. case "KeyR": return .R
  297. case "KeyS": return .S
  298. case "KeyT": return .T
  299. case "KeyU": return .U
  300. case "KeyV": return .V
  301. case "KeyW": return .W
  302. case "KeyX": return .X
  303. case "KeyY": return .Y
  304. case "KeyZ": return .Z
  305. case "Quote": return .Apostrophe
  306. case "Comma": return .Comma
  307. case "Minus": return .Minus
  308. case "Period": return .Period
  309. case "Slash": return .Slash
  310. case "Semicolon": return .Semicolon
  311. case "Equal": return .Equal
  312. case "BracketLeft": return .Left_Bracket
  313. case "Backslash": return .Backslash
  314. case "IntlBackslash": return .Backslash
  315. case "BracketRight": return .Right_Bracket
  316. case "Backquote": return .Backtick
  317. case "Space": return .Space
  318. case "Escape": return .Escape
  319. case "Enter": return .Enter
  320. case "Tab": return .Tab
  321. case "Backspace": return .Backspace
  322. case "Insert": return .Insert
  323. case "Delete": return .Delete
  324. case "ArrowRight": return .Right
  325. case "ArrowLeft": return .Left
  326. case "ArrowDown": return .Down
  327. case "ArrowUp": return .Up
  328. case "PageUp": return .Page_Up
  329. case "PageDown": return .Page_Down
  330. case "Home": return .Home
  331. case "End": return .End
  332. case "CapsLock": return .Caps_Lock
  333. case "ScrollLock": return .Scroll_Lock
  334. case "NumLock": return .Num_Lock
  335. case "PrintScreen": return .Print_Screen
  336. case "Pause": return .Pause
  337. case "F1": return .F1
  338. case "F2": return .F2
  339. case "F3": return .F3
  340. case "F4": return .F4
  341. case "F5": return .F5
  342. case "F6": return .F6
  343. case "F7": return .F7
  344. case "F8": return .F8
  345. case "F9": return .F9
  346. case "F10": return .F10
  347. case "F11": return .F11
  348. case "F12": return .F12
  349. case "ShiftLeft": return .Left_Shift
  350. case "ControlLeft": return .Left_Control
  351. case "AltLeft": return .Left_Alt
  352. case "MetaLeft": return .Left_Super
  353. case "ShiftRight": return .Right_Shift
  354. case "ControlRight": return .Right_Control
  355. case "AltRight": return .Right_Alt
  356. case "MetaRight": return .Right_Super
  357. case "ContextMenu": return .Menu
  358. case "Numpad0": return .NP_0
  359. case "Numpad1": return .NP_1
  360. case "Numpad2": return .NP_2
  361. case "Numpad3": return .NP_3
  362. case "Numpad4": return .NP_4
  363. case "Numpad5": return .NP_5
  364. case "Numpad6": return .NP_6
  365. case "Numpad7": return .NP_7
  366. case "Numpad8": return .NP_8
  367. case "Numpad9": return .NP_9
  368. case "NumpadDecimal": return .NP_Decimal
  369. case "NumpadDivide": return .NP_Divide
  370. case "NumpadMultiply": return .NP_Multiply
  371. case "NumpadSubtract": return .NP_Subtract
  372. case "NumpadAdd": return .NP_Add
  373. case "NumpadEnter": return .NP_Enter
  374. }
  375. log.errorf("Unhandled key code: %v", e.key.code)
  376. return .None
  377. }