Taken from here: https://discord.com/channels/608064116111966245/608064116984250379/1055555451569328179
Have 2 terminals running. In the first, start a web server:
ruby -run -e httpd ./builds/mygame-html5-0.1in the second terminal, run the build:
| <!doctype html> | |
| <html lang="en" class=""><head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Web Awesome Page Demo 1</title> | |
| <link rel="preconnect" href="https://early.webawesome.com"> | |
| <link rel="stylesheet" href="https://early.webawesome.com/[email protected]/dist/styles/themes/default.css"> | |
| <link rel="stylesheet" href="https://early.webawesome.com/[email protected]/dist/styles/webawesome.css"> | |
| <script type="module" src="https://early.webawesome.com/[email protected]/dist/webawesome.loader.js"></script> | |
| </head> |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Signals</title> | |
| </head> | |
| <body> | |
| <button id="decrement"> | |
| - |
| // end of dragonruby-html5-loader.js ... | |
| // .dragonruby/stubs/html5/dragonruby-html5-loader.js | |
| const audioContext = new AudioContext() | |
| let hasPlayed = false | |
| function startAudioContext(context){ | |
| // this accomplishes the iOS specific requirement | |
| var buffer = context.createBuffer(1, 1, context.sampleRate) |
| # Sample from: | |
| # https://docs.dragonruby.org/#/samples/rendering-basics?id=labels-text-wrapping-mainrb | |
| def tick(args) | |
| lines = ["line1", "line2", "line3", "line4"] | |
| labels = lines.map.with_index do |text, index| | |
| { | |
| x: 1280 / 2, | |
| y: 720 / 2, | |
| text: text, | |
| anchor_y: index |
| class DrawBuffer | |
| attr_accessor :primitives, :outputs, :render_targets | |
| def initialize | |
| @primitives = [] | |
| @render_targets = {} | |
| end | |
| def [](key) | |
| @render_targets[key] = [] if !@render_targets.has_key?(key) |
| def tick(args) | |
| max_w = args.grid.w | |
| max_h = args.grid.h | |
| box_y = max_h / 4 | |
| box_w = (args.grid.w / 3) - 4 | |
| box_h = max_h / 2 | |
| border_thickness = 2 | |
| borders = [ | |
| # TOP | |
| { |
| def tick args | |
| if args.inputs.keyboard.key_down.r | |
| $gtk.reset | |
| end | |
| # press i to run benchmark using iterations | |
| if args.inputs.keyboard.key_down.b | |
| max_particles = 10_000 | |
| args.gtk.console.show | |
| args.gtk.benchmark( | |
| iterations: 100, # number of iterations |
Taken from here: https://discord.com/channels/608064116111966245/608064116984250379/1055555451569328179
Have 2 terminals running. In the first, start a web server:
ruby -run -e httpd ./builds/mygame-html5-0.1in the second terminal, run the build:
| def draw_circle(args, diameter: 200) | |
| diameter.times do |i| | |
| r1 = diameter / 2 | |
| h1 = i - r1 | |
| l1 = Math::sqrt(r1 * r1 - h1 * h1) | |
| r2 = r1 - 4 # Modify this to adjust the size of the inner circle. the bigger this is, the more empty space, the smaller, the less empty space. | |
| h2 = (i - r2) - (r1 - r2) | |
| if h2.abs < r2 | |
| l2 = Math::sqrt(r2 * r2 - h2 * h2) |
| // .dragonruby/stubs/html5/dragonruby-html5-loader.js | |
| // ... | |
| // end of dragonruby-html5-loader.js ... | |
| // A silly hack for Safari browsers to get `window.open` to behave properly. | |
| // The hack is fairly straightforward. We create a "hidden" anchor. When the user clicks on the page, if `window.open` gets called | |
| // in a "click" event, it will set the `href` and `target` attributes on the anchor, and then when the `pointerup` finishes, reverts | |
| // the override on `window.open` and remove the `href` and `target` attributes. | |
| // | |
| // As for "why" this works, Safari as part of "security", generally only expects `window.open` to be called in "click" and "click-like" |