glimmer-dsl-libui 0.2.14 → 0.2.18

data/README.md

@@ -1,4 +1,4 @@
-# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for LibUI 0.2.14
+# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for LibUI 0.2.18
 ## Prerequisite-Free Ruby Desktop Development GUI Library
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-libui.svg)](http://badge.fury.io/rb/glimmer-dsl-libui)
 [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -28,7 +28,16 @@ include Glimmer
 window('hello world').show
 ```
 
+Mac
+
 ![glimmer-dsl-libui-mac-basic-window.png](images/glimmer-dsl-libui-mac-basic-window.png)
+
+Windows
+
+![glimmer-dsl-libui-windows-basic-window.png](images/glimmer-dsl-libui-windows-basic-window.png)
+
+Linux
+
 ![glimmer-dsl-libui-linux-basic-window.png](images/glimmer-dsl-libui-linux-basic-window.png)
 
 Basic Table Progress Bar
@@ -68,7 +77,16 @@ window('Task Progress', 300, 200) {
 }.show
 ```
 
+Mac
+
 ![glimmer-dsl-libui-mac-basic-table-progress-bar.png](images/glimmer-dsl-libui-mac-basic-table-progress-bar.png)
+
+Windows
+
+![glimmer-dsl-libui-windows-basic-table-progress-bar.png](images/glimmer-dsl-libui-windows-basic-table-progress-bar.png)
+
+Linux
+
 ![glimmer-dsl-libui-linux-basic-table-progress-bar.png](images/glimmer-dsl-libui-linux-basic-table-progress-bar.png)
 
 Area Gallery
@@ -94,31 +112,24 @@ window('Area Gallery', 400, 400) {
       fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
     }
     path { # declarative stable path
-      figure(100, 100) {
-        line(100, 400)
-        line(400, 100)
-        line(400, 400)
-
-        closed true
-      }
-
+      polygon(100, 100, 100, 400, 400, 100, 400, 400)
+      
       fill r: 202, g: 102, b: 104, a: 0.5
       stroke r: 0, g: 0, b: 0
     }
     path { # declarative stable path
-      figure(0, 0) {
-        bezier(200, 100, 100, 200, 400, 100)
-        bezier(300, 100, 100, 300, 100, 400)
-        bezier(100, 300, 300, 100, 400, 400)
-
-        closed true
-      }
+      polybezier(0, 0, 200, 100, 100, 200, 400, 100, 300, 100, 100, 300, 100, 400, 100, 300, 300, 100, 400, 400)
 
       fill r: 202, g: 102, b: 204, a: 0.5
       stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
     }
     path { # declarative stable path
-      arc(400, 220, 180, 90, 90, false)
+      polyline(100, 100, 400, 100, 100, 400, 400, 400, 0, 0)
+    
+      stroke r: 0, g: 0, b: 0, thickness: 2
+    }
+    path { # declarative stable path
+      arc(404, 216, 190, 90, 90, false)
 
       # radial gradient (has an outer_radius in addition to x0, y0, x1, y1, and stops)
       fill outer_radius: 90, x0: 0, y0: 0, x1: 500, y1: 500, stops: [{pos: 0.25, r: 102, g: 102, b: 204, a: 0.5}, {pos: 0.75, r: 204, g: 102, b: 204}]
@@ -130,9 +141,9 @@ window('Area Gallery', 400, 400) {
       fill r: 202, g: 102, b: 204, a: 0.5
       stroke r: 0, g: 0, b: 0, thickness: 2
     }
-    text(160, 40, 100) { # x, y, width
+    text(161, 40, 100) { # x, y, width
       string('Area Gallery') {
-        font family: 'Times', size: 14
+        font family: 'Arial', size: 14
         color :black
       }
     }
@@ -188,7 +199,16 @@ window('Area Gallery', 400, 400) {
 }.show
 ```
 
+Mac
+
 ![glimmer-dsl-libui-mac-area-gallery.png](images/glimmer-dsl-libui-mac-area-gallery.png)
+
+Windows
+
+![glimmer-dsl-libui-windows-area-gallery.png](images/glimmer-dsl-libui-windows-area-gallery.png)
+
+Linux
+
 ![glimmer-dsl-libui-linux-area-gallery.png](images/glimmer-dsl-libui-linux-area-gallery.png)
 
 [Check Out Many More Examples Over Here!](#examples)
@@ -257,16 +277,19 @@ Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interes
     - [Basic Draw Text](#basic-draw-text)
     - [Custom Draw Text](#custom-draw-text)
     - [Method-Based Custom Keyword](#method-based-custom-keyword)
+    - [Tetris](#tetris)
   - [Applications](#applications)
     - [Manga2PDF](#manga2pdf)
     - [Befunge98 GUI](#befunge98-gui)
-  - [Contributing to glimmer-dsl-libui](#contributing-to-glimmer-dsl-libui)
+    - [i3off Gtk Ruby](#i3off-gtk-ruby)
+  - [Process](#process)
+  - [Resources](#resources)
   - [Help](#help)
     - [Issues](#issues)
     - [Chat](#chat)
-  - [Process](#process)
   - [Planned Features and Feature Suggestions](#planned-features-and-feature-suggestions)
   - [Change Log](#change-log)
+  - [Contributing](#contributing)
   - [Contributors](#contributors)
   - [License](#license)
 
@@ -347,7 +370,7 @@ gem install glimmer-dsl-libui
 Or install via Bundler `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-libui', '~> 0.2.14'
+gem 'glimmer-dsl-libui', '~> 0.2.18'
 ```
 
 Add `require 'glimmer-dsl-libui'` at the top, and then `include Glimmer` into the top-level main object for testing or into an actual class for serious usage.
@@ -464,6 +487,9 @@ Keyword(Args) | Properties | Listeners
 `non_wrapping_multiline_entry` | `read_only` (Boolean), `text` (`String`) | `on_changed`
 `password_entry` | `read_only` (Boolean), `text` (`String`) | `on_changed`
 `path(draw_fill_mode = :winding)` | `fill` (`Hash` of `:r` as `0`-`255`, `:g` as `0`-`255`, `:b` as `0`-`255`, `:a` as `0.0`-`1.0`, hex, or [X11](https://en.wikipedia.org/wiki/X11_color_names) color), `stroke` (`Hash` of `:r` as `0`-`255`, `:g` as `0`-`255`, `:b` as `0`-`255`, `:a` as `0.0`-`1.0`, hex, or [X11](https://en.wikipedia.org/wiki/X11_color_names) color), `:cap` as (`:round`, `:square`, `:flat`), `:join` as (`:miter`, `:round`, `:bevel`), `:thickness` as `Numeric`, `:miter_limit` as `Numeric`, `:dashes` as `Array` of `Numeric` ) | None
+`polygon(point_array as Array of Arrays of Numeric or Array of Numeric)` | `point_array` (`Array of Arrays of Numeric or Array of Numeric`) | None
+`polyline(point_array as Array of Arrays of Numeric or Array of Numeric)` | `point_array` (`Array of Arrays of Numeric or Array of Numeric`) | None
+`polybezier(point_array as Array of Arrays of Numeric or Array of Numeric)` | `point_array` (`Array of Arrays of Numeric or Array of Numeric`) | None
 `preferences_menu_item` | None | `on_clicked`
 `progress_bar` | `value` (`Numeric`) | None
 `progress_bar_column(name as String)` | None | None
@@ -715,6 +741,9 @@ Available nested `path` shapes:
 - `arc(x_center as Numeric, y_center as Numeric, radius as Numeric, start_angle as Numeric, sweep as Numeric, is_negative as Boolean)`
 - `line(x as Numeric, y as Numeric)`
 - `bezier(c1_x as Numeric, c1_y as Numeric, c2_x as Numeric, c2_y as Numeric, end_x as Numeric, end_y as Numeric)`
+- `polygon(point_array as Array of Arrays of Numeric or Array of Numeric)`: closed figure of lines; can receive points as [[x1, y1], [x2, y2], ...] or [x1, y1, x2, y2, ...]
+- `polyline(point_array as Array of Arrays of Numeric or Array of Numeric)`: open figure of lines; can receive points as [[x1, y1], [x2, y2], ...] or [x1, y1, x2, y2, ...]
+- `polybezier(point_array as Array of Arrays of Numeric or Array of Numeric)`: open figure of beziers; can receive points as [[start_x1, start_y1], [c1_x2, c1_y2, c2_x2, c2_y2, end_x2, end_y2], [c1_x3, c1_y3, c2_x3, c2_y3, end_x3, end_y3], ...] or [start_x1, start_y1, c1_x2, c1_y2, c2_x2, c2_y2, end_x2, end_y2, c1_x3, c1_y3, c2_x3, c2_y3, end_x3, end_y3, ...]
 - `figure(x=nil as Numeric, y=nil as Numeric)` (composite that can contain other shapes) (can set `closed true` to connect last point to first point automatically)
 
 Check [examples/area_gallery.rb](#area-gallery) for an overiew of all `path` shapes.
@@ -769,6 +798,12 @@ Note that when nesting an `area` directly underneath `window` (without a layout
 
 To redraw an `area`, you may call the `#queue_redraw_all` method, or simply `#redraw`.
 
+`area` has the following Glimmer-added API methods/attributes:
+- `request_auto_redraw`: requests auto redraw upon changes to nested stable `path` or shapes
+- `pause_auto_redraw`: pause auto redraw upon changes to nested stable `path` or shapes (useful to avoid too many micro-change redraws, to group all redraws as one after many micro-changes)
+- `resume_auto_redraw`: resume auto redraw upon changes to nested stable `path` or shapes
+- `auto_redraw_enabled`/`auto_redraw_enabled?`/`auto_redraw_enabled=`: an attribute to disable/enable auto redraw on an `area` upon changes to nested stable `path` or shapes
+
 A transform `matrix` can be set on a path by building a `matrix(m11 = nil, m12 = nil, m21 = nil, m22 = nil, m31 = nil, m32 = nil) {operations}` proxy object and then setting via `transform` property, or alternatively by building and setting the matrix in one call to `transform(m11 = nil, m12 = nil, m21 = nil, m22 = nil, m31 = nil, m32 = nil) {operations}` passing it the matrix arguments and/or content operations.
 
 When instantiating a `matrix` object, it always starts with identity matrix.
@@ -1044,10 +1079,10 @@ window('Method-Based Custom Keyword') {
 - `table` `checkbox_column` and `checkbox_text_column` checkbox editing only works on Linux and Windows (not Mac) due to a current limitation in [libui](https://github.com/andlabs/ui/issues/357).
 - `text` `align` property seems not to work on the Mac ([libui](https://github.com/andlabs/libui) has an [issue](https://github.com/andlabs/libui/pull/407) about it)
 - `text` `string` `background` does not work on Windows due to an [issue in libui](https://github.com/andlabs/libui/issues/347).
-- `arc` shape does not work on Windows unless a figure is started due to implementation of [libui](https://github.com/andlabs/libui).
 - `table` controls on Windows intentionally get an extra empty row at the end because if any row were to be deleted for the first time, double-deletion happens due to an issue in [libui](https://github.com/andlabs/libui) on Windows.
 - `table` `progress_bar` column on Windows cannot be updated with a positive value if it started initially with `-1` (it ignores update to avoid crashing due to an issue in [libui](https://github.com/andlabs/libui) on Windows.
 - It seems that [libui](https://github.com/andlabs/libui) does not support nesting multiple `area` controls under a `grid` as only the first one shows up in that scenario. To workaround that limitation, use a `vertical_box` with nested `horizontal_box`s instead to include multiple `area`s in a GUI.
+- As per the code of [examples/basic_transform.rb](#basic-transform), Windows requires different ordering of transforms than Mac and Linux.
 
 ### Original API
 
@@ -1099,6 +1134,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-meta-example.png](images/glimmer-dsl-libui-mac-meta-example.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-meta-example.png](images/glimmer-dsl-libui-windows-meta-example.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-meta-example.png](images/glimmer-dsl-libui-linux-meta-example.png)
@@ -1149,15 +1188,20 @@ class MetaExample
   end
   
   def run_example(example)
-    command = "ruby -r #{glimmer_dsl_libui_file} #{example} 2>&1"
-    result = ''
-    IO.popen(command) do |f|
-      f.each_line do |line|
-        result << line
-        puts line
+    Thread.new do
+      command = "ruby -r #{glimmer_dsl_libui_file} #{example} 2>&1"
+      result = ''
+      IO.popen(command) do |f|
+        sleep(0.0001) # yield to main thread
+        f.each_line do |line|
+          result << line
+          puts line
+          $stdout.flush # for Windows
+          sleep(0.0001) # yield to main thread
+        end
       end
+      Glimmer::LibUI.queue_main { msg_box('Error Running Example', result) } if result.downcase.include?('error')
     end
-    msg_box('Error Running Example', result) if result.downcase.include?('error')
   end
   
   def launch
@@ -1258,6 +1302,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-basic-window.png](images/glimmer-dsl-libui-mac-basic-window.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-basic-window.png](images/glimmer-dsl-libui-windows-basic-window.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-basic-window.png](images/glimmer-dsl-libui-linux-basic-window.png)
@@ -1338,6 +1386,11 @@ Mac
 ![glimmer-dsl-libui-mac-basic-button.png](images/glimmer-dsl-libui-mac-basic-button.png)
 ![glimmer-dsl-libui-mac-basic-button-msg-box.png](images/glimmer-dsl-libui-mac-basic-button-msg-box.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-basic-button.png](images/glimmer-dsl-libui-windows-basic-button.png)
+![glimmer-dsl-libui-windows-basic-button-msg-box.png](images/glimmer-dsl-libui-windows-basic-button-msg-box.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-basic-button.png](images/glimmer-dsl-libui-linux-basic-button.png)
@@ -1415,6 +1468,11 @@ Mac
 ![glimmer-dsl-libui-mac-basic-entry.png](images/glimmer-dsl-libui-mac-basic-entry.png)
 ![glimmer-dsl-libui-mac-basic-entry-msg-box.png](images/glimmer-dsl-libui-mac-basic-entry-msg-box.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-basic-entry.png](images/glimmer-dsl-libui-windows-basic-entry.png)
+![glimmer-dsl-libui-windows-basic-entry-msg-box.png](images/glimmer-dsl-libui-windows-basic-entry-msg-box.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-basic-entry.png](images/glimmer-dsl-libui-linux-basic-entry.png)
@@ -1515,6 +1573,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-simple-notepad.png](images/glimmer-dsl-libui-mac-simple-notepad.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-simple-notepad.png](images/glimmer-dsl-libui-windows-simple-notepad.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-simple-notepad.png](images/glimmer-dsl-libui-linux-simple-notepad.png)
@@ -1588,6 +1650,11 @@ Mac
 ![glimmer-dsl-libui-mac-midi-player.png](images/glimmer-dsl-libui-mac-midi-player.png)
 ![glimmer-dsl-libui-mac-midi-player-msg-box.png](images/glimmer-dsl-libui-mac-midi-player-msg-box.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-midi-player.png](images/glimmer-dsl-libui-windows-midi-player.png)
+![glimmer-dsl-libui-windows-midi-player-msg-box.png](images/glimmer-dsl-libui-windows-midi-player-msg-box.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-midi-player.png](images/glimmer-dsl-libui-linux-midi-player.png)
@@ -1805,6 +1872,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-control-gallery.png](images/glimmer-dsl-libui-mac-control-gallery.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-control-gallery.png](images/glimmer-dsl-libui-windows-control-gallery.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-control-gallery.png](images/glimmer-dsl-libui-linux-control-gallery.png)
@@ -2196,6 +2267,11 @@ Mac
 ![glimmer-dsl-libui-mac-font-button.png](images/glimmer-dsl-libui-mac-font-button.png)
 ![glimmer-dsl-libui-mac-font-button-selection.png](images/glimmer-dsl-libui-mac-font-button-selection.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-font-button.png](images/glimmer-dsl-libui-windows-font-button.png)
+![glimmer-dsl-libui-windows-font-button-selection.png](images/glimmer-dsl-libui-windows-font-button-selection.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-font-button.png](images/glimmer-dsl-libui-linux-font-button.png)
@@ -2280,6 +2356,11 @@ Mac
 ![glimmer-dsl-libui-mac-color-button.png](images/glimmer-dsl-libui-mac-color-button.png)
 ![glimmer-dsl-libui-mac-color-button-selection.png](images/glimmer-dsl-libui-mac-color-button-selection.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-color-button.png](images/glimmer-dsl-libui-windows-color-button.png)
+![glimmer-dsl-libui-windows-color-button-selection.png](images/glimmer-dsl-libui-windows-color-button-selection.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-color-button.png](images/glimmer-dsl-libui-linux-color-button.png)
@@ -2292,7 +2373,7 @@ require 'glimmer-dsl-libui'
 
 include Glimmer
 
-window('color button', 230) {
+window('color button', 240) {
   color_button { |cb|
     color :blue
     
@@ -2324,6 +2405,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-date-time-picker.png](images/glimmer-dsl-libui-mac-date-time-picker.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-date-time-picker.png](images/glimmer-dsl-libui-windows-date-time-picker.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-date-time-picker.png](images/glimmer-dsl-libui-linux-date-time-picker.png)
@@ -2416,6 +2501,12 @@ Mac
 ![glimmer-dsl-libui-mac-grid-expand.png](images/glimmer-dsl-libui-mac-grid-expand.png)
 ![glimmer-dsl-libui-mac-grid-align.png](images/glimmer-dsl-libui-mac-grid-align.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-grid-span.png](images/glimmer-dsl-libui-windows-grid-span.png)
+![glimmer-dsl-libui-windows-grid-expand.png](images/glimmer-dsl-libui-windows-grid-expand.png)
+![glimmer-dsl-libui-windows-grid-align.png](images/glimmer-dsl-libui-windows-grid-align.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-grid-span.png](images/glimmer-dsl-libui-linux-grid-span.png)
@@ -2554,6 +2645,11 @@ Mac
 ![glimmer-dsl-libui-mac-form.png](images/glimmer-dsl-libui-mac-form.png)
 ![glimmer-dsl-libui-mac-form-msg-box.png](images/glimmer-dsl-libui-mac-form-msg-box.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-form.png](images/glimmer-dsl-libui-windows-form.png)
+![glimmer-dsl-libui-windows-form-msg-box.png](images/glimmer-dsl-libui-windows-form-msg-box.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-form.png](images/glimmer-dsl-libui-linux-form.png)
@@ -2619,6 +2715,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-basic-table.png](images/glimmer-dsl-libui-mac-basic-table.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-basic-table.png](images/glimmer-dsl-libui-windows-basic-table.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-basic-table.png](images/glimmer-dsl-libui-linux-basic-table.png)
@@ -2741,6 +2841,12 @@ Mac
 ![glimmer-dsl-libui-mac-editable-table-editing.png](images/glimmer-dsl-libui-mac-editable-table-editing.png)
 ![glimmer-dsl-libui-mac-editable-table-edited.png](images/glimmer-dsl-libui-mac-editable-table-edited.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-editable-table.png](images/glimmer-dsl-libui-windows-editable-table.png)
+![glimmer-dsl-libui-windows-editable-table-editing.png](images/glimmer-dsl-libui-windows-editable-table-editing.png)
+![glimmer-dsl-libui-windows-editable-table-edited.png](images/glimmer-dsl-libui-windows-editable-table-edited.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-editable-table.png](images/glimmer-dsl-libui-linux-editable-table.png)
@@ -2808,6 +2914,11 @@ Mac
 ![glimmer-dsl-libui-mac-editable-column-table-editing.png](images/glimmer-dsl-libui-mac-editable-column-table-editing.png)
 ![glimmer-dsl-libui-mac-editable-column-table-edited.png](images/glimmer-dsl-libui-mac-editable-column-table-edited.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-editable-column-table-editing.png](images/glimmer-dsl-libui-windows-editable-column-table-editing.png)
+![glimmer-dsl-libui-windows-editable-column-table-edited.png](images/glimmer-dsl-libui-windows-editable-column-table-edited.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-editable-column-table-editing.png](images/glimmer-dsl-libui-linux-editable-column-table-editing.png)
@@ -2875,6 +2986,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-basic-table-image.png](images/glimmer-dsl-libui-mac-basic-table-image.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-basic-table-image.png](images/glimmer-dsl-libui-windows-basic-table-image.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-basic-table-image.png](images/glimmer-dsl-libui-linux-basic-table-image.png)
@@ -3033,6 +3148,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-basic-table-image-text.png](images/glimmer-dsl-libui-mac-basic-table-image-text.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-basic-table-image-text.png](images/glimmer-dsl-libui-windows-basic-table-image-text.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-basic-table-image-text.png](images/glimmer-dsl-libui-linux-basic-table-image-text.png)
@@ -3104,6 +3223,11 @@ Mac
 ![glimmer-dsl-libui-mac-basic-table-button.png](images/glimmer-dsl-libui-mac-basic-table-button.png)
 ![glimmer-dsl-libui-mac-basic-table-button-deleted.png](images/glimmer-dsl-libui-mac-basic-table-button-deleted.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-basic-table-button.png](images/glimmer-dsl-libui-windows-basic-table-button.png)
+![glimmer-dsl-libui-windows-basic-table-button-deleted.png](images/glimmer-dsl-libui-windows-basic-table-button-deleted.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-basic-table-button.png](images/glimmer-dsl-libui-linux-basic-table-button.png)
@@ -3165,6 +3289,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-basic-table-checkbox.png](images/glimmer-dsl-libui-mac-basic-table-checkbox.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-basic-table-checkbox.png](images/glimmer-dsl-libui-windows-basic-table-checkbox.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-basic-table-checkbox.png](images/glimmer-dsl-libui-linux-basic-table-checkbox.png)
@@ -3217,6 +3345,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-basic-table-checkbox-text.png](images/glimmer-dsl-libui-mac-basic-table-checkbox-text.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-basic-table-checkbox-text.png](images/glimmer-dsl-libui-windows-basic-table-checkbox-text.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-basic-table-checkbox-text.png](images/glimmer-dsl-libui-linux-basic-table-checkbox-text.png)
@@ -3269,6 +3401,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-basic-table-progress-bar.png](images/glimmer-dsl-libui-mac-basic-table-progress-bar.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-basic-table-progress-bar.png](images/glimmer-dsl-libui-windows-basic-table-progress-bar.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-basic-table-progress-bar.png](images/glimmer-dsl-libui-linux-basic-table-progress-bar.png)
@@ -3336,6 +3472,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-basic-table-color.png](images/glimmer-dsl-libui-mac-basic-table-color.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-basic-table-color.png](images/glimmer-dsl-libui-windows-basic-table-color.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-basic-table-color.png](images/glimmer-dsl-libui-linux-basic-table-color.png)
@@ -3404,6 +3544,12 @@ Mac
 ![glimmer-dsl-libui-mac-form-table-contact-entered.png](images/glimmer-dsl-libui-mac-form-table-contact-entered.png)
 ![glimmer-dsl-libui-mac-form-table-filtered.png](images/glimmer-dsl-libui-mac-form-table-filtered.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-form-table.png](images/glimmer-dsl-libui-windows-form-table.png)
+![glimmer-dsl-libui-windows-form-table-contact-entered.png](images/glimmer-dsl-libui-windows-form-table-contact-entered.png)
+![glimmer-dsl-libui-windows-form-table-filtered.png](images/glimmer-dsl-libui-windows-form-table-filtered.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-form-table.png](images/glimmer-dsl-libui-linux-form-table.png)
@@ -3524,6 +3670,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-basic-area.png](images/glimmer-dsl-libui-mac-basic-area.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-basic-area.png](images/glimmer-dsl-libui-windows-basic-area.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-basic-area.png](images/glimmer-dsl-libui-linux-basic-area.png)
@@ -3647,6 +3797,11 @@ Mac
 ![glimmer-dsl-libui-mac-dynamic-area.png](images/glimmer-dsl-libui-mac-dynamic-area.png)
 ![glimmer-dsl-libui-mac-dynamic-area-updated.png](images/glimmer-dsl-libui-mac-dynamic-area-updated.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-dynamic-area.png](images/glimmer-dsl-libui-windows-dynamic-area.png)
+![glimmer-dsl-libui-windows-dynamic-area-updated.png](images/glimmer-dsl-libui-windows-dynamic-area-updated.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-dynamic-area.png](images/glimmer-dsl-libui-linux-dynamic-area.png)
@@ -3878,6 +4033,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-area-gallery.png](images/glimmer-dsl-libui-mac-area-gallery.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-area-gallery.png](images/glimmer-dsl-libui-windows-area-gallery.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-area-gallery.png](images/glimmer-dsl-libui-linux-area-gallery.png)
@@ -3905,31 +4064,24 @@ window('Area Gallery', 400, 400) {
       fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
     }
     path { # declarative stable path
-      figure(100, 100) {
-        line(100, 400)
-        line(400, 100)
-        line(400, 400)
-
-        closed true
-      }
-
+      polygon(100, 100, 100, 400, 400, 100, 400, 400)
+      
       fill r: 202, g: 102, b: 104, a: 0.5
       stroke r: 0, g: 0, b: 0
     }
     path { # declarative stable path
-      figure(0, 0) {
-        bezier(200, 100, 100, 200, 400, 100)
-        bezier(300, 100, 100, 300, 100, 400)
-        bezier(100, 300, 300, 100, 400, 400)
-
-        closed true
-      }
+      polybezier(0, 0, 200, 100, 100, 200, 400, 100, 300, 100, 100, 300, 100, 400, 100, 300, 300, 100, 400, 400)
 
       fill r: 202, g: 102, b: 204, a: 0.5
       stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
     }
     path { # declarative stable path
-      arc(400, 220, 180, 90, 90, false)
+      polyline(100, 100, 400, 100, 100, 400, 400, 400, 0, 0)
+    
+      stroke r: 0, g: 0, b: 0, thickness: 2
+    }
+    path { # declarative stable path
+      arc(404, 216, 190, 90, 90, false)
 
       # radial gradient (has an outer_radius in addition to x0, y0, x1, y1, and stops)
       fill outer_radius: 90, x0: 0, y0: 0, x1: 500, y1: 500, stops: [{pos: 0.25, r: 102, g: 102, b: 204, a: 0.5}, {pos: 0.75, r: 204, g: 102, b: 204}]
@@ -3941,9 +4093,9 @@ window('Area Gallery', 400, 400) {
       fill r: 202, g: 102, b: 204, a: 0.5
       stroke r: 0, g: 0, b: 0, thickness: 2
     }
-    text(160, 40, 100) { # x, y, width
+    text(161, 40, 100) { # x, y, width
       string('Area Gallery') {
-        font family: 'Times', size: 14
+        font family: 'Arial', size: 14
         color :black
       }
     }
@@ -4092,18 +4244,42 @@ window('Area Gallery', 400, 400) {
           end_x 400
           end_y 400
         }
-
-        closed true
       }
 
       fill r: 202, g: 102, b: 204, a: 0.5
       stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
     }
+    path { # declarative stable path
+      polyline(100, 100, 400, 100, 100, 400, 400, 400, 0, 0)
+      figure {
+        x 100
+        y 100
+        
+        line {
+          x 400
+          y 100
+        }
+        line {
+          x 100
+          y 400
+        }
+        line {
+          x 400
+          y 400
+        }
+        line {
+          x 0
+          y 0
+        }
+      }
+    
+      stroke r: 0, g: 0, b: 0, thickness: 2
+    }
     path { # declarative stable path
       arc {
-        x_center 400
-        y_center 220
-        radius 180
+        x_center 404
+        y_center 216
+        radius 190
         start_angle 90
         sweep 90
         is_negative false
@@ -4124,12 +4300,12 @@ window('Area Gallery', 400, 400) {
       stroke r: 0, g: 0, b: 0, thickness: 2
     }
     text {
-      x 160
+      x 161
       y 40
       width 100
       
       string {
-        font family: 'Times', size: 14
+        font family: 'Arial', size: 14
         color :black
         
         'Area Gallery'
@@ -4200,42 +4376,35 @@ window('Area Gallery', 400, 400) {
       path { # a dynamic path is added semi-declaratively inside on_draw block
         square(0, 0, 100)
         square(100, 100, 400)
-        
+  
         fill r: 102, g: 102, b: 204
       }
       path { # a dynamic path is added semi-declaratively inside on_draw block
         rectangle(0, 100, 100, 400)
         rectangle(100, 0, 400, 100)
-
+  
         # linear gradient (has x0, y0, x1, y1, and stops)
         fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
       }
       path { # a dynamic path is added semi-declaratively inside on_draw block
-        figure(100, 100) {
-          line(100, 400)
-          line(400, 100)
-          line(400, 400)
-
-          closed true
-        }
-
+        polygon(100, 100, 100, 400, 400, 100, 400, 400)
+        
         fill r: 202, g: 102, b: 104, a: 0.5
         stroke r: 0, g: 0, b: 0
       }
       path { # a dynamic path is added semi-declaratively inside on_draw block
-        figure(0, 0) {
-          bezier(200, 100, 100, 200, 400, 100)
-          bezier(300, 100, 100, 300, 100, 400)
-          bezier(100, 300, 300, 100, 400, 400)
-
-          closed true
-        }
-
+        polybezier(0, 0, 200, 100, 100, 200, 400, 100, 300, 100, 100, 300, 100, 400, 100, 300, 300, 100, 400, 400)
+  
         fill r: 202, g: 102, b: 204, a: 0.5
         stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
       }
       path { # a dynamic path is added semi-declaratively inside on_draw block
-        arc(400, 220, 180, 90, 90, false)
+        polyline(100, 100, 400, 100, 100, 400, 400, 400, 0, 0)
+      
+        stroke r: 0, g: 0, b: 0, thickness: 2
+      }
+      path { # a dynamic path is added semi-declaratively inside on_draw block
+        arc(404, 216, 190, 90, 90, false)
   
         # radial gradient (has an outer_radius in addition to x0, y0, x1, y1, and stops)
         fill outer_radius: 90, x0: 0, y0: 0, x1: 500, y1: 500, stops: [{pos: 0.25, r: 102, g: 102, b: 204, a: 0.5}, {pos: 0.75, r: 204, g: 102, b: 204}]
@@ -4247,9 +4416,9 @@ window('Area Gallery', 400, 400) {
         fill r: 202, g: 102, b: 204, a: 0.5
         stroke r: 0, g: 0, b: 0, thickness: 2
       }
-      text(160, 40, 100) { # x, y, width
+      text(161, 40, 100) { # x, y, width
         string('Area Gallery') {
-          font family: 'Times', size: 14
+          font family: 'Arial', size: 14
           color :black
         }
       }
@@ -4364,10 +4533,10 @@ window('Area Gallery', 400, 400) {
             x 400
             y 400
           }
-
+  
           closed true
         }
-
+  
         fill r: 202, g: 102, b: 104, a: 0.5
         stroke r: 0, g: 0, b: 0
       }
@@ -4400,18 +4569,42 @@ window('Area Gallery', 400, 400) {
             end_x 400
             end_y 400
           }
-
-          closed true
         }
-
+  
         fill r: 202, g: 102, b: 204, a: 0.5
         stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
       }
+      path { # a dynamic path is added semi-declaratively inside on_draw block
+        polyline(100, 100, 400, 100, 100, 400, 400, 400, 0, 0)
+        figure {
+          x 100
+          y 100
+          
+          line {
+            x 400
+            y 100
+          }
+          line {
+            x 100
+            y 400
+          }
+          line {
+            x 400
+            y 400
+          }
+          line {
+            x 0
+            y 0
+          }
+        }
+      
+        stroke r: 0, g: 0, b: 0, thickness: 2
+      }
       path { # a dynamic path is added semi-declaratively inside on_draw block
         arc {
-          x_center 400
-          y_center 220
-          radius 180
+          x_center 404
+          y_center 216
+          radius 190
           start_angle 90
           sweep 90
           is_negative false
@@ -4432,12 +4625,12 @@ window('Area Gallery', 400, 400) {
         stroke r: 0, g: 0, b: 0, thickness: 2
       }
       text {
-        x 160
+        x 161
         y 40
         width 100
         
         string {
-          font family: 'Times', size: 14
+          font family: 'Arial', size: 14
           color :black
           
           'Area Gallery'
@@ -4516,6 +4709,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-histogram.png](images/glimmer-dsl-libui-mac-histogram.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-histogram.png](images/glimmer-dsl-libui-windows-histogram.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-histogram.png](images/glimmer-dsl-libui-linux-histogram.png)
@@ -4750,20 +4947,13 @@ end
 
 # method-based custom control representing a graph path
 def graph_path(width, height, should_extend, &block)
-  locations = point_locations(width, height)
+  locations = point_locations(width, height).flatten
   path {
-    first_location = locations[0] # x and y
-    figure(first_location[0], first_location[1]) {
-      locations.each do |loc|
-        line(loc[0], loc[1])
-      end
-      if should_extend
-        line(width, height)
-        line(0, height)
-        
-        closed true
-      end
-    }
+    if should_extend
+      polygon(locations + [width, height, 0, height])
+    else
+      polyline(locations)
+    end
     
     # apply a transform to the coordinate space for this path so (0, 0) is the top-left corner of the graph
     transform {
@@ -4857,6 +5047,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-basic-transform.png](images/glimmer-dsl-libui-mac-basic-transform.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-basic-transform.png](images/glimmer-dsl-libui-windows-basic-transform.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-basic-transform.png](images/glimmer-dsl-libui-linux-basic-transform.png)
@@ -4914,6 +5108,11 @@ Mac
 ![glimmer-dsl-libui-mac-login.png](images/glimmer-dsl-libui-mac-login.png)
 ![glimmer-dsl-libui-mac-login-logged-in.png](images/glimmer-dsl-libui-mac-login-logged-in.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-login.png](images/glimmer-dsl-libui-windows-login.png)
+![glimmer-dsl-libui-windows-login-logged-in.png](images/glimmer-dsl-libui-windows-login-logged-in.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-login.png](images/glimmer-dsl-libui-linux-login.png)
@@ -4990,6 +5189,11 @@ Mac
 ![glimmer-dsl-libui-mac-timer.png](images/glimmer-dsl-libui-mac-timer.png)
 ![glimmer-dsl-libui-mac-timer-in-progress.png](images/glimmer-dsl-libui-mac-timer-in-progress.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-timer.png](images/glimmer-dsl-libui-windows-timer.png)
+![glimmer-dsl-libui-windows-timer-in-progress.png](images/glimmer-dsl-libui-windows-timer-in-progress.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-timer.png](images/glimmer-dsl-libui-linux-timer.png)
@@ -5155,6 +5359,12 @@ Mac
 ![glimmer-dsl-libui-mac-color-the-circles-lost.png](images/glimmer-dsl-libui-mac-color-the-circles-lost.png)
 ![glimmer-dsl-libui-mac-color-the-circles-won.png](images/glimmer-dsl-libui-mac-color-the-circles-won.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-color-the-circles.png](images/glimmer-dsl-libui-windows-color-the-circles.png)
+![glimmer-dsl-libui-windows-color-the-circles-lost.png](images/glimmer-dsl-libui-windows-color-the-circles-lost.png)
+![glimmer-dsl-libui-windows-color-the-circles-won.png](images/glimmer-dsl-libui-windows-color-the-circles-won.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-color-the-circles.png](images/glimmer-dsl-libui-linux-color-the-circles.png)
@@ -5406,6 +5616,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-basic-draw-text.png](images/glimmer-dsl-libui-mac-basic-draw-text.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-basic-draw-text.png](images/glimmer-dsl-libui-windows-basic-draw-text.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-basic-draw-text.png](images/glimmer-dsl-libui-linux-basic-draw-text.png)
@@ -5689,6 +5903,11 @@ Mac
 ![glimmer-dsl-libui-mac-custom-draw-text.png](images/glimmer-dsl-libui-mac-custom-draw-text.png)
 ![glimmer-dsl-libui-mac-custom-draw-text-changed.png](images/glimmer-dsl-libui-mac-custom-draw-text-changed.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-custom-draw-text.png](images/glimmer-dsl-libui-windows-custom-draw-text.png)
+![glimmer-dsl-libui-windows-custom-draw-text-changed.png](images/glimmer-dsl-libui-windows-custom-draw-text-changed.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-custom-draw-text.png](images/glimmer-dsl-libui-linux-custom-draw-text.png)
@@ -5903,6 +6122,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-method-based-custom-keyword.png](images/glimmer-dsl-libui-mac-method-based-custom-keyword.png)
 
+Windows
+
+![glimmer-dsl-libui-windows-method-based-custom-keyword.png](images/glimmer-dsl-libui-windows-method-based-custom-keyword.png)
+
 Linux
 
 ![glimmer-dsl-libui-linux-method-based-custom-keyword.png](images/glimmer-dsl-libui-linux-method-based-custom-keyword.png)
@@ -6009,6 +6232,186 @@ window('Method-Based Custom Keyword') {
 }.show
 ```
 
+### Tetris
+
+[examples/tetris.rb](examples/tetris.rb)
+
+Run with this command from the root of the project if you cloned the project:
+
+```
+ruby -r './lib/glimmer-dsl-libui' examples/tetris.rb
+```
+
+Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
+
+```
+ruby -r glimmer-dsl-libui -e "require 'examples/tetris'"
+```
+
+Mac
+
+![glimmer-dsl-libui-mac-tetris.png](images/glimmer-dsl-libui-mac-tetris.png)
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+
+```ruby
+require 'glimmer-dsl-libui'
+
+require_relative 'tetris/model/game'
+
+class Tetris
+  include Glimmer
+  
+  BLOCK_SIZE = 25
+  BEVEL_CONSTANT = 20
+  COLOR_GRAY = {r: 192, g: 192, b: 192}
+    
+  attr_reader :game
+  
+  def initialize
+    @game = Model::Game.new
+    create_gui
+    register_observers
+  end
+  
+  def launch
+    @game.start!
+    @main_window.show
+  end
+  
+  def create_gui
+    @main_window = window('Glimmer Tetris', Model::Game::PLAYFIELD_WIDTH * BLOCK_SIZE, Model::Game::PLAYFIELD_HEIGHT * BLOCK_SIZE) {
+      playfield(playfield_width: Model::Game::PLAYFIELD_WIDTH, playfield_height: Model::Game::PLAYFIELD_HEIGHT, block_size: BLOCK_SIZE)
+    }
+  end
+  
+  def register_observers
+    Glimmer::DataBinding::Observer.proc do |game_over|
+      if game_over
+        show_game_over_dialog
+      else
+        start_moving_tetrominos_down
+      end
+    end.observe(@game, :game_over)
+    
+    Model::Game::PLAYFIELD_HEIGHT.times do |row|
+      Model::Game::PLAYFIELD_HEIGHT.times do |column|
+        Glimmer::DataBinding::Observer.proc do |new_color|
+          Glimmer::LibUI.queue_main do
+            color = Glimmer::LibUI.interpret_color(new_color)
+            block = @blocks[row][column]
+            block[:background_square].fill = color
+            block[:top_bevel_edge].fill = {r: color[:r] + 4*BEVEL_CONSTANT, g: color[:g] + 4*BEVEL_CONSTANT, b: color[:b] + 4*BEVEL_CONSTANT}
+            block[:right_bevel_edge].fill = {r: color[:r] - BEVEL_CONSTANT, g: color[:g] - BEVEL_CONSTANT, b: color[:b] - BEVEL_CONSTANT}
+            block[:bottom_bevel_edge].fill = {r: color[:r] - BEVEL_CONSTANT, g: color[:g] - BEVEL_CONSTANT, b: color[:b] - BEVEL_CONSTANT}
+            block[:left_bevel_edge].fill = {r: color[:r] - BEVEL_CONSTANT, g: color[:g] - BEVEL_CONSTANT, b: color[:b] - BEVEL_CONSTANT}
+            block[:border_square].stroke = new_color == Model::Block::COLOR_CLEAR ? COLOR_GRAY : color
+          end
+        end.observe(@game.playfield[row][column], :color)
+      end
+    end
+  end
+  
+  def playfield(playfield_width: , playfield_height: , block_size: )
+    @blocks = []
+    vertical_box {
+      padded false
+      
+      playfield_height.times.map do |row|
+        @blocks << []
+        horizontal_box {
+          padded false
+          
+          playfield_width.times.map do |column|
+            @blocks.last << block(row: row, column: column, block_size: block_size)
+          end
+        }
+      end
+    }
+  end
+  
+  def block(row: , column: , block_size: )
+    block = {}
+    bevel_pixel_size = 0.16 * block_size.to_f
+    color = Glimmer::LibUI.interpret_color(Model::Block::COLOR_CLEAR)
+    area {
+      block[:background_square] = path {
+        square(0, 0, block_size)
+        
+        fill color
+      }
+      block[:top_bevel_edge] = path {
+        polygon(0, 0, block_size, 0, block_size - bevel_pixel_size, bevel_pixel_size, bevel_pixel_size, bevel_pixel_size)
+  
+        fill r: color[:r] + 4*BEVEL_CONSTANT, g: color[:g] + 4*BEVEL_CONSTANT, b: color[:b] + 4*BEVEL_CONSTANT
+      }
+      block[:right_bevel_edge] = path {
+        polygon(block_size, 0, block_size - bevel_pixel_size, bevel_pixel_size, block_size - bevel_pixel_size, block_size - bevel_pixel_size, block_size, block_size)
+  
+        fill r: color[:r] - BEVEL_CONSTANT, g: color[:g] - BEVEL_CONSTANT, b: color[:b] - BEVEL_CONSTANT
+      }
+      block[:bottom_bevel_edge] = path {
+        polygon(block_size, block_size, 0, block_size, bevel_pixel_size, block_size - bevel_pixel_size, block_size - bevel_pixel_size, block_size - bevel_pixel_size)
+  
+        fill r: color[:r] - BEVEL_CONSTANT, g: color[:g] - BEVEL_CONSTANT, b: color[:b] - BEVEL_CONSTANT
+      }
+      block[:left_bevel_edge] = path {
+        polygon(0, 0, 0, block_size, bevel_pixel_size, block_size - bevel_pixel_size, bevel_pixel_size, bevel_pixel_size)
+  
+        fill r: color[:r] - BEVEL_CONSTANT, g: color[:g] - BEVEL_CONSTANT, b: color[:b] - BEVEL_CONSTANT
+      }
+      block[:border_square] = path {
+        square(0, 0, block_size)
+  
+        stroke COLOR_GRAY
+      }
+      
+      on_key_down do |key_event|
+        case key_event
+        in ext_key: :down
+          game.down!
+        in ext_key: :up
+          case game.up_arrow_action
+          when :instant_down
+            game.down!(instant: true)
+          when :rotate_right
+            game.rotate!(:right)
+          when :rotate_left
+            game.rotate!(:left)
+          end
+        in ext_key: :left
+          game.left!
+        in ext_key: :right
+          game.right!
+        in modifier: :shift
+          game.rotate!(:right)
+        in modifier: :control
+          game.rotate!(:left)
+        else
+          # Do Nothing
+        end
+      end
+    }
+    block
+  end
+  
+  def start_moving_tetrominos_down
+    Glimmer::LibUI.timer(@game.delay) do
+      @game.down! if !@game.game_over? && !@game.paused?
+    end
+  end
+  
+  def show_game_over_dialog
+    Glimmer::LibUI.queue_main do
+      msg_box('Game Over', "Score: #{@game.high_scores.first.score}\nLines: #{@game.high_scores.first.lines}\nLevel: #{@game.high_scores.first.level}")
+      @game.restart!
+    end
+  end
+end
+
+Tetris.new.launch
+```
+
 ## Applications
 
 Here are some applications built with [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui)
@@ -6029,38 +6432,30 @@ https://github.com/AndyObtiva/befunge98/tree/gui
 
 ![befunge98 gui screenshot](https://raw.githubusercontent.com/AndyObtiva/befunge98/master/gui/glimmer-dsl-libui/befunge98_gui_glimmer_dsl_libui/screenshots/befunge98_gui_glimmer_dsl_libui_example.png)
 
-## Contributing to glimmer-dsl-libui
+### i3off Gtk Ruby
 
--   Check out the latest master to make sure the feature hasn't been
-    implemented or the bug hasn't been fixed yet.
--   Check out the issue tracker to make sure someone already hasn't
-    requested it and/or contributed it.
--   Fork the project.
--   Start a feature/bugfix branch.
--   Commit and push until you are happy with your contribution.
--   Make sure to add tests for it. This is important so I don't break it
-    in a future version unintentionally.
--   Please try not to mess with the Rakefile, version, or history. If
-    you want to have your own version, or is otherwise necessary, that
-    is fine, but please isolate to its own commit so I can cherry-pick
-    around it.
+https://github.com/iraamaro/i3off-gtk-ruby
+
+## Process
+
+[Glimmer Process](https://github.com/AndyObtiva/glimmer/blob/master/PROCESS.md)
+
+## Resources
+
+- [libui C Library](https://github.com/andlabs/libui)
+- [LibUI Ruby Bindings](https://github.com/kojix2/LibUI)
+- [Code Master Blog](https://andymaleh.blogspot.com/search/label/LibUI)
 
 ## Help
 
 ### Issues
 
-You may submit [issues](https://github.com/AndyObtiva/glimmer/issues) on [GitHub](https://github.com/AndyObtiva/glimmer/issues).
-
-[Click here to submit an issue.](https://github.com/AndyObtiva/glimmer/issues)
+If you encounter [issues](https://github.com/AndyObtiva/glimmer-dsl-libui/issues) that are not reported, discover missing features that are not mentioned in [TODO.md](TODO.md), or think up better ways to use [libui](https://github.com/andlabs/libui) than what is possible with [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui), you may submit an [issue](https://github.com/AndyObtiva/glimmer-dsl-libui/issues/new) or [pull request](https://github.com/AndyObtiva/glimmer-dsl-libui/compare) on [GitHub](https://github.com).
 
 ### Chat
 
 If you need live help, try to [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-## Process
-
-[Glimmer Process](https://github.com/AndyObtiva/glimmer/blob/master/PROCESS.md)
-
 ## Planned Features and Feature Suggestions
 
 These features have been planned or suggested. You might see them in a future version of [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui). You are welcome to contribute more feature suggestions.
@@ -6071,6 +6466,22 @@ These features have been planned or suggested. You might see them in a future ve
 
 [CHANGELOG.md](CHANGELOG.md)
 
+## Contributing
+
+-   Check out the latest master to make sure the feature hasn't been
+    implemented or the bug hasn't been fixed yet.
+-   Check out the issue tracker to make sure someone already hasn't
+    requested it and/or contributed it.
+-   Fork the project.
+-   Start a feature/bugfix branch.
+-   Commit and push until you are happy with your contribution.
+-   Make sure to add tests for it. This is important so I don't break it
+    in a future version unintentionally.
+-   Please try not to mess with the Rakefile, version, or history. If
+    you want to have your own version, or is otherwise necessary, that
+    is fine, but please isolate to its own commit so I can cherry-pick
+    around it.
+
 ## Contributors
 
 * [Andy Maleh](https://github.com/AndyObtiva) (Founder)