glimmer-dsl-libui 0.2.17 → 0.2.21

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.17
+# [<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.21
 ## 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)
@@ -112,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}]
@@ -148,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
       }
     }
@@ -285,6 +278,7 @@ Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interes
     - [Custom Draw Text](#custom-draw-text)
     - [Method-Based Custom Keyword](#method-based-custom-keyword)
     - [Tetris](#tetris)
+    - [Tic Tac Toe](#tic-tac-toe)
   - [Applications](#applications)
     - [Manga2PDF](#manga2pdf)
     - [Befunge98 GUI](#befunge98-gui)
@@ -377,7 +371,7 @@ gem install glimmer-dsl-libui
 Or install via Bundler `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-libui', '~> 0.2.17'
+gem 'glimmer-dsl-libui', '~> 0.2.21'
 ```
 
 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.
@@ -453,7 +447,7 @@ These are all the supported keywords. Note that some keywords do not represent c
 Keyword(Args) | Properties | Listeners
 ------------- | ---------- | ---------
 `about_menu_item` | None | `on_clicked`
-`area` | None | `on_draw(area_draw_params)`, `on_mouse_event(area_mouse_event)`, `on_mouse_down(area_mouse_event)`, `on_mouse_up(area_mouse_event)`, `on_mouse_drag_started(area_mouse_event)`, `on_mouse_dragged(area_mouse_event)`, `on_mouse_dropped(area_mouse_event)`, `on_mouse_entered`, `on_mouse_exited`, `on_key_event(area_key_event)`, `on_key_down(area_key_event)`, `on_key_up(area_key_event)`
+`area` | `auto_draw_enabled` | `on_draw(area_draw_params)`, `on_mouse_event(area_mouse_event)`, `on_mouse_down(area_mouse_event)`, `on_mouse_up(area_mouse_event)`, `on_mouse_drag_started(area_mouse_event)`, `on_mouse_dragged(area_mouse_event)`, `on_mouse_dropped(area_mouse_event)`, `on_mouse_entered`, `on_mouse_exited`, `on_key_event(area_key_event)`, `on_key_down(area_key_event)`, `on_key_up(area_key_event)`
 `arc(x_center as Numeric, y_center as Numeric, radius as Numeric, start_angle as Numeric, sweep as Numeric, is_negative as Boolean)` | `x_center` (`Numeric`), `y_center` (`Numeric`), `radius` (`Numeric`), `start_angle` (`Numeric`), `sweep` (`Numeric`), `is_negative` (Boolean) | None
 `background_color_column(name as String)` | None | None
 `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)` | `c1_x` (`Numeric`), `c1_y` (`Numeric`), `c2_x` (`Numeric`), `c2_y` (`Numeric`), `end_x` (`Numeric`), `end_y` (`Numeric`) | None
@@ -463,6 +457,7 @@ Keyword(Args) | Properties | Listeners
 `checkbox_column(name as String)` | `editable` (Boolean) | None
 `checkbox_text_column(name as String)` | `editable` (Boolean), `editable_checkbox` (Boolean), `editable_text` (Boolean) | None
 `checkbox_text_color_column(name as String)` | `editable` (Boolean), `editable_checkbox` (Boolean), `editable_text` (Boolean) | None
+`check_menu_item(text as String)` | `checked` (Boolean) | `on_clicked`
 `combobox` | `items` (`Array` of `String`), `selected` (`Integer`) | `on_selected`
 `color_button` | `color` (Array of `red` as `Float`, `green` as `Float`, `blue` as `Float`, `alpha` as `Float`), `red` as `Float`, `green` as `Float`, `blue` as `Float`, `alpha` as `Float` | `on_changed`
 `date_picker` | `time` (`Hash` of keys: `sec` as `Integer`, `min` as `Integer`, `hour` as `Integer`, `mday` as `Integer`, `mon` as `Integer`, `year` as `Integer`, `wday` as `Integer`, `yday` as `Integer`, `dst` as Boolean) | `on_changed`
@@ -485,7 +480,7 @@ Keyword(Args) | Properties | Listeners
 `line(x as Numeric, y as Numeric)` | `x` (`Numeric`), `y` (`Numeric`) | None
 `matrix(m11 = nil as Numeric, m12 = nil as Numeric, m21 = nil as Numeric, m22 = nil as Numeric, m31 = nil as Numeric, m32 = nil as Numeric)` | `m11` (`Numeric`), `m12` (`Numeric`), `m21` (`Numeric`), `m22` (`Numeric`), `m31` (`Numeric`), `m32` (`Numeric`) | None
 `menu(text as String)` | None | None
-`menu_item(text as String)` | `checked` (Boolean) | `on_clicked`
+`menu_item(text as String)` | None | `on_clicked`
 `message_box` (alias for `msg_box`; see for arguments) | None | None
 `message_box_error` (alias for `msg_box_error`; see for arguments) | None | None
 `multiline_entry` | `read_only` (Boolean), `text` (`String`) | `on_changed`
@@ -494,6 +489,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
@@ -501,6 +499,7 @@ Keyword(Args) | Properties | Listeners
 `radio_buttons` | `selected` (`Integer`) | `on_selected`
 `rectangle(x as Numeric, y as Numeric, width as Numeric, height as Numeric)` |  `x` (`Numeric`), `y` (`Numeric`), `width` (`Numeric`), `height` (`Numeric`) | None
 `search_entry` | `read_only` (Boolean), `text` (`String`) | `on_changed`
+`separator_menu_item` | None | None
 `slider(min as Numeric, max as Numeric)` | `value` (`Numeric`) | `on_changed`
 `spinbox(min as Numeric, max as Numeric)` | `value` (`Numeric`) | `on_changed`
 `square(x as Numeric, y as Numeric, length as Numeric)` | `x` (`Numeric`), `y` (`Numeric`), `length` (`Numeric`) | None
@@ -514,7 +513,7 @@ Keyword(Args) | Properties | Listeners
 `time_picker` | `time` (`Hash` of keys: `sec` as `Integer`, `min` as `Integer`, `hour` as `Integer`) | `on_changed`
 `vertical_box` | `padded` (Boolean) | None
 `vertical_separator` | None | None
-`window(title as String, width as Integer, height as Integer, has_menubar as Boolean)` | `borderless` (Boolean), `content_size` (width `Numeric`, height `Numeric`), `fullscreen` (Boolean), `margined` (Boolean), `title` (`String`) | `on_closing`, `on_content_size_changed`, `on_destroy`
+`window(title as String, width as Integer, height as Integer, has_menubar as Boolean)` | `borderless` (Boolean), `content_size` (width `Numeric`, height `Numeric`), `fullscreen` (Boolean), `margined` (Boolean), `title` (`String`), `resizable` (Boolean) | `on_closing`, `on_content_size_changed`, `on_destroy`
 
 ### Common Control Properties
 - `enabled` (Boolean)
@@ -547,6 +546,35 @@ All operations that could normally be called on `LibUI` can also be called on `G
 - `Glimmer::LibUI::queue_main(&block)`: queues an operation to be run on the main event loop at the earliest opportunity possible
 - `Glimmer::LibUI::timer(time_in_seconds=0.1, repeat: true, &block)`: calls block after time_in_seconds has elapsed, repeating indefinitely unless repeat is `false` or an `Integer` for finite number of repeats. Block can return `false` or `true` to override next repetition.
 
+There are additional useful `Glimmer::LibUI` operations that are not found in `LibUI`, which mostly help if you would like to do advanced lower level [LibUI](https://github.com/kojix2/LibUI) programming:
+- `Glimmer::LibUI::integer_to_boolean(int, allow_nil: true)`
+- `Glimmer::LibUI::boolean_to_integer(int, allow_nil: true)`
+- `Glimmer::LibUI::degrees_to_radians(degrees)`
+- `Glimmer::LibUI::interpret_color(value)`: interprets a color in any form like `String`, `Symbol`, or hex into an rgb `Hash`
+- `Glimmer::LibUI::hex_to_rgb(value)`: converts a hex color to an rgb `Hash`
+- `Glimmer::LibUI::enum_names`: provides all possible enum names to use with `Glimmer::LibUI::enum_symbols(enum_name)`
+- `Glimmer::LibUI::enum_symbols(enum_name)`: returns all possible values for an enum. `enum_name` can be:
+  - `:draw_brush_type`: `[:solid, :linear_gradient, :radial_gradient, :image]`
+  - `:draw_line_cap`: `[:flat, :round, :square]`
+  - `:draw_line_join`: `[:miter, :round, :bevel]`
+  - `:draw_fill_mode`: `[:winding, :alternate]`
+  - `:attribute_type`: attributes for attributed `string`s: `[:family, :size, weight, :italic, :stretch, :color, :background, :underline, :underline_color, :features]`
+  - `:text_weight`: `[:minimum, :thin, :ultra_light, :light, :book, :normal, :medium, :semi_bold, :bold, :ultra_bold, :heavy, :ultra_heavy, :maximum]`
+  - `:text_italic`: `[:normal, :oblique, :italic]`
+  - `:text_stretch`: `[:ultra_condensed, :extra_condensed, :condensed, :semi_condensed, :normal, :semi_expanded, :expanded, :extra_expanded, :ultra_expanded]`
+  - `:underline`: `[:none, :single, :double, :suggestion, :color_custom, :color_spelling, :color_grammar, :color_auxiliary]`
+  - `:underline_color`: `[:custom, :spelling, :grammar, :auxiliary]`
+  - `:draw_text_align`: `[:left, :center, :right]`
+  - `:modifier`: `[:ctrl, :alt, :shift, :super]`
+  - `:ext_key`: `[:escape, :insert, :delete, :home, :end, :page_up, :page_down, :up, :down, :left, :right, :f1, :f2, :f3, :f4, :f5, :f6, :f7, :f8, :f9, :f10, :f11, :f12, :n0, :n1, :n2, :n3, :n4, :n5, :n6, :n7, :n8, :n9, :n_dot, :n_enter, :n_add, :n_subtract, :n_multiply, :n_divide]`
+  - `:at`: for inserting `grid` controls: `[:leading, :top, :trailing, :bottom]`
+  - `:align`: `[:fill, :start, :center, :end]`
+  - `:table_value_type`: `[:string, :image, :int, :color]`
+  - `:table_model_column`: `[:never_editable, :always_editable]`
+- `Glimmer::LibUI::enum_symbol_to_value(enum_name, enum_symbol, default_symbol: nil, default_index: 0)`
+- `Glimmer::LibUI::enum_value_to_symbol(enum_name, enum_value)`
+- `Glimmer::LibUI::x11_colors`: returns all [X11 colors](https://en.wikipedia.org/wiki/X11_color_names): `[:alice_blue, :antique_white, :aqua, :aquamarine, :azure, :beige, :bisque, :rebecca_purple, :becca_purple, :blanched_almond, :blue, :blue_violet, :brown, :burly_wood, :burlywood, :cadet_blue, :carnation, :cayenne, :chartreuse, :chocolate, :coral, :cornflower_blue, :cornsilk, :crimson, :cyan, :dark_blue, :dark_cyan, :dark_golden_rod, :dark_goldenrod, :dark_gray, :dark_grey, :dark_green, :dark_khaki, :dark_magenta, :dark_olive_green, :darkolive_green, :dark_orange, :dark_orchid, :dark_red, :dark_salmon, :darksalmon, :dark_sea_green, :dark_slate_blue, :dark_slate_gray, :dark_slate_grey, :dark_turquoise, :dark_violet, :darkorange, :deep_pink, :deep_sky_blue, :dim_gray, :dim_grey, :dodger_blue, :feldspar, :fire_brick, :firebrick, :floral_white, :forest_green, :fuchsia, :gainsboro, :ghost_white, :gold, :golden_rod, :goldenrod, :gray, :grey, :gray10, :grey10, :gray20, :grey20, :gray30, :grey30, :gray40, :grey40, :gray50, :grey50, :gray60, :grey60, :gray70, :grey70, :gray80, :grey80, :gray90, :grey90, :green, :green_yellow, :honey_dew, :honeydew, :hot_pink, :indian_red, :indigo, :ivory, :khaki, :lavender, :lavender_blush, :lawn_green, :lemon_chiffon, :light_blue, :light_coral, :light_cyan, :light_golden_rod_yellow, :light_goldenrod_yellow, :light_gray, :light_grey, :light_green, :light_pink, :light_salmon, :lightsalmon, :light_sea_green, :light_sky_blue, :light_slate_blue, :light_slate_gray, :light_slate_grey, :light_steel_blue, :lightsteel_blue, :light_yellow, :lime, :lime_green, :linen, :magenta, :maroon, :medium_aqua_marine, :medium_aquamarine, :medium_blue, :medium_orchid, :medium_purple, :medium_sea_green, :medium_slate_blue, :medium_spring_green, :medium_turquoise, :medium_violet_red, :midnight_blue, :mint_cream, :misty_rose, :moccasin, :navajo_white, :navy, :old_lace, :olive, :olive_drab, :olivedrab, :orange, :orange_red, :orchid, :pale_golden_rod, :pale_goldenrod, :pale_green, :pale_turquoise, :pale_violet_red, :papaya_whip, :peach_puff, :peachpuff, :peru, :pink, :plum, :powder_blue, :purple, :red, :rosy_brown, :royal_blue, :saddle_brown, :salmon, :sandy_brown, :sea_green, :sea_shell, :seashell, :sienna, :silver, :sky_blue, :slate_blue, :slate_gray, :slate_grey, :snow, :spring_green, :steel_blue, :tan, :teal, :thistle, :tomato, :turquoise, :violet, :violet_red, :wheat, :white_smoke, :yellow, :yellow_green, :metallic, :white, :black, :gray_scale, :grey_scale]`
+
 ### Extra Dialogs
 
 - `open_file(window as Glimmer::LibUI::WindowProxy = ControlProxy::main_window_proxy)`: returns selected file (`String`) or `nil` if cancelled
@@ -745,6 +773,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.
@@ -799,6 +830,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.
@@ -866,7 +903,7 @@ Note that `area`, `path`, and nested shapes are all truly declarative, meaning t
 
 `fill` and `stroke` accept [X11](https://en.wikipedia.org/wiki/X11_color_names) color `Symbol`s/`String`s like `:skyblue` and `'sandybrown'` or 6-number hex or 3-number hex-shorthand (as `Integer` or `String` with or without `0x` prefix)
 
-Available [X11](https://en.wikipedia.org/wiki/X11_color_names) colors can be obtained through `Glimmer::LibUI.x11_colors` method.
+Available [X11 colors](https://en.wikipedia.org/wiki/X11_color_names) can be obtained through `Glimmer::LibUI.x11_colors` method.
 
 Check [Basic Transform](#basic-transform) example for use of [X11](https://en.wikipedia.org/wiki/X11_color_names) colors.
 
@@ -1083,8 +1120,8 @@ window('Method-Based Custom Keyword') {
 
 To learn more about the [LibUI](https://github.com/kojix2/LibUI) API exposed through [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui):
 - Check out [LibUI ffi.rb](https://github.com/kojix2/LibUI/blob/main/lib/libui/ffi.rb)
-- Check out the [libui C headers](https://github.com/andlabs/libui/blob/master/ui.h)
-- Check out the [Go UI (Golang LibUI) documentation](https://pkg.go.dev/github.com/andlabs/ui) for an alternative well-documented [libui](https://github.com/andlabs/libui) reference.
+- Check out the [libui C Headers](https://github.com/andlabs/libui/blob/master/ui.h)
+- Check out the [Go UI (Golang LibUI) API Documentation](https://pkg.go.dev/github.com/andlabs/ui) for an alternative well-documented [libui](https://github.com/andlabs/libui) reference.
 
 ## Packaging
 
@@ -4059,31 +4096,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}]
@@ -4095,9 +4125,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
       }
     }
@@ -4246,18 +4276,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
@@ -4278,12 +4332,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'
@@ -4354,42 +4408,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}]
@@ -4401,9 +4448,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
         }
       }
@@ -4518,10 +4565,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
       }
@@ -4554,18 +4601,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
@@ -4586,12 +4657,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'
@@ -4908,20 +4979,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 {
@@ -6202,6 +6266,8 @@ window('Method-Based Custom Keyword') {
 
 ### Tetris
 
+Glimmer Tetris utilizes many small areas to represent Tetromino blocks because this ensures smaller redraws per tetromino block color change, thus achieving higher performance than redrawing one large area on every little change.
+
 [examples/tetris.rb](examples/tetris.rb)
 
 Run with this command from the root of the project if you cloned the project:
@@ -6220,6 +6286,10 @@ Mac
 
 ![glimmer-dsl-libui-mac-tetris.png](images/glimmer-dsl-libui-mac-tetris.png)
 
+![glimmer-dsl-libui-mac-tetris-game-over.png](images/glimmer-dsl-libui-mac-tetris-game-over.png)
+
+![glimmer-dsl-libui-mac-tetris-high-scores.png](images/glimmer-dsl-libui-mac-tetris-high-scores.png)
+
 New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
 
 ```ruby
@@ -6232,85 +6302,314 @@ class Tetris
   
   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
+    create_gui
+    register_observers
     @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)
+    menu_bar
+    
+    @main_window = window('Glimmer Tetris') {
+      content_size Model::Game::PLAYFIELD_WIDTH * BLOCK_SIZE, Model::Game::PLAYFIELD_HEIGHT * BLOCK_SIZE + 98
+      resizable false
+      
+      vertical_box {
+        label { # filler
+          stretchy false
+        }
+        
+        score_board(block_size: BLOCK_SIZE) {
+          stretchy false
+        }
+        
+        @playfield_blocks = 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
+        @pause_menu_item.enabled = false
         show_game_over_dialog
       else
+        @pause_menu_item.enabled = true
         start_moving_tetrominos_down
       end
     end.observe(@game, :game_over)
     
     Model::Game::PLAYFIELD_HEIGHT.times do |row|
-      Model::Game::PLAYFIELD_HEIGHT.times do |column|
+      Model::Game::PLAYFIELD_WIDTH.times do |column|
         Glimmer::DataBinding::Observer.proc do |new_color|
-          @blocks[row][column].fill = new_color
+          Glimmer::LibUI.queue_main do
+            color = Glimmer::LibUI.interpret_color(new_color)
+            block = @playfield_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
+    
+    Model::Game::PREVIEW_PLAYFIELD_HEIGHT.times do |row|
+      Model::Game::PREVIEW_PLAYFIELD_WIDTH.times do |column|
+        Glimmer::DataBinding::Observer.proc do |new_color|
+          Glimmer::LibUI.queue_main do
+            color = Glimmer::LibUI.interpret_color(new_color)
+            block = @preview_playfield_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.preview_playfield[row][column], :color)
+      end
+    end
+
+    Glimmer::DataBinding::Observer.proc do |new_score|
+      Glimmer::LibUI.queue_main do
+        @score_label.text = new_score.to_s
+      end
+    end.observe(@game, :score)
+
+    Glimmer::DataBinding::Observer.proc do |new_lines|
+      Glimmer::LibUI.queue_main do
+        @lines_label.text = new_lines.to_s
+      end
+    end.observe(@game, :lines)
+
+    Glimmer::DataBinding::Observer.proc do |new_level|
+      Glimmer::LibUI.queue_main do
+        @level_label.text = new_level.to_s
+      end
+    end.observe(@game, :level)
   end
   
-  def playfield(playfield_width: , playfield_height: , block_size: )
-    area {
-      @blocks = playfield_height.times.map do |row|
-        playfield_width.times.map do |column|
-          block(row: row, column: column, block_size: block_size)
+  def menu_bar
+    menu('Game') {
+      @pause_menu_item = check_menu_item('Pause') {
+        enabled false
+        
+        on_clicked do
+          @game.paused = @pause_menu_item.checked?
+        end
+      }
+      menu_item('Restart') {
+        on_clicked do
+          @game.restart!
+        end
+      }
+      separator_menu_item
+      menu_item('Exit') {
+        on_clicked do
+          exit(0)
+        end
+      }
+      quit_menu_item if OS.mac?
+    }
+    
+    menu('View') {
+      menu_item('Show High Scores') {
+        on_clicked do
+          show_high_scores
+        end
+      }
+      menu_item('Clear High Scores') {
+        on_clicked {
+          @game.clear_high_scores!
+        }
+      }
+    }
+
+    menu('Options') {
+      radio_menu_item('Instant Down on Up Arrow') {
+        on_clicked do
+          @game.instant_down_on_up = true
+        end
+      }
+      radio_menu_item('Rotate Right on Up Arrow') {
+        on_clicked do
+          @game.rotate_right_on_up = true
+        end
+      }
+      radio_menu_item('Rotate Left on Up Arrow') {
+        on_clicked do
+          @game.rotate_left_on_up = true
+        end
+      }
+    }
+
+    menu('Help') {
+      if OS.mac?
+        about_menu_item {
+          on_clicked do
+            show_about_dialog
+          end
+        }
+      end
+      menu_item('About') {
+        on_clicked do
+          show_about_dialog
         end
+      }
+    }
+  end
+  
+  def playfield(playfield_width: , playfield_height: , block_size: , &extra_content)
+    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
       
+      extra_content&.call
+    }
+    blocks
+  end
+  
+  def block(row: , column: , block_size: , &extra_content)
+    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!
+          @game.down!
+        in key: ' '
+          @game.down!(instant: true)
         in ext_key: :up
-          case game.up_arrow_action
+          case @game.up_arrow_action
           when :instant_down
-            game.down!(instant: true)
+            @game.down!(instant: true)
           when :rotate_right
-            game.rotate!(:right)
+            @game.rotate!(:right)
           when :rotate_left
-            game.rotate!(:left)
+            @game.rotate!(:left)
           end
         in ext_key: :left
-          game.left!
+          @game.left!
         in ext_key: :right
-          game.right!
+          @game.right!
         in modifier: :shift
-          game.rotate!(:right)
+          @game.rotate!(:right)
         in modifier: :control
-          game.rotate!(:left)
+          @game.rotate!(:left)
         else
           # Do Nothing
         end
       end
+      
+      extra_content&.call
     }
+    block
   end
   
-  def block(row: , column: , block_size: )
-    path {
-      square(column * block_size, row * block_size, block_size)
-      
-      fill Model::Block::COLOR_CLEAR
+  def score_board(block_size: , &extra_content)
+    vertical_box {
+      horizontal_box {
+        label # filler
+        @preview_playfield_blocks = playfield(playfield_width: Model::Game::PREVIEW_PLAYFIELD_WIDTH, playfield_height: Model::Game::PREVIEW_PLAYFIELD_HEIGHT, block_size: block_size)
+        label # filler
+      }
+
+      horizontal_box {
+        label # filler
+        grid {
+          stretchy false
+          
+          label('Score') {
+            left 0
+            top 0
+            halign :fill
+          }
+          @score_label = label {
+            left 0
+            top 1
+            halign :center
+          }
+    
+          label('Lines') {
+            left 1
+            top 0
+            halign :fill
+          }
+          @lines_label = label {
+            left 1
+            top 1
+            halign :center
+          }
+    
+          label('Level') {
+            left 2
+            top 0
+            halign :fill
+          }
+          @level_label = label {
+            left 2
+            top 1
+            halign :center
+          }
+        }
+        label # filler
+      }
+    
+      extra_content&.call
     }
   end
   
@@ -6321,13 +6620,151 @@ class Tetris
   end
   
   def show_game_over_dialog
-    msg_box('Game Over', "Score: #{@game.high_scores.first.score}")
+    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
+  
+  def show_high_scores
+    Glimmer::LibUI.queue_main do
+      if @game.high_scores.empty?
+        high_scores_string = "No games have been scored yet."
+      else
+        high_scores_string = @game.high_scores.map do |high_score|
+          "#{high_score.name} | Score: #{high_score.score} | Lines: #{high_score.lines} | Level: #{high_score.level}"
+        end.join("\n")
+      end
+      msg_box('High Scores', high_scores_string)
+    end
+  end
+  
+  def show_about_dialog
+    Glimmer::LibUI.queue_main do
+      msg_box('About', 'Glimmer Tetris - Glimmer DSL for LibUI Example - Copyright (c) 2021 Andy Maleh')
+    end
   end
 end
 
 Tetris.new.launch
 ```
 
+### Tic Tac Toe
+
+[examples/tic_tac_toe.rb](examples/tic_tac_toe.rb)
+
+Run with this command from the root of the project if you cloned the project:
+
+```
+ruby -r './lib/glimmer-dsl-libui' examples/tic_tac_toe.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/tic_tac_toe'"
+```
+
+Mac
+
+![glimmer-dsl-libui-mac-tic-tac-toe.png](images/glimmer-dsl-libui-mac-tic-tac-toe.png)
+
+![glimmer-dsl-libui-mac-tic-tac-toe-player-o-wins.png](images/glimmer-dsl-libui-mac-tic-tac-toe-player-o-wins.png)
+
+![glimmer-dsl-libui-mac-tic-tac-toe-player-x-wins.png](images/glimmer-dsl-libui-mac-tic-tac-toe-player-x-wins.png)
+
+![glimmer-dsl-libui-mac-tic-tac-toe-draw.png](images/glimmer-dsl-libui-mac-tic-tac-toe-draw.png)
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+
+```ruby
+require 'glimmer-dsl-libui'
+
+require_relative "tic_tac_toe/board"
+
+class TicTacToe
+  include Glimmer
+
+  def initialize
+    @tic_tac_toe_board = Board.new
+  end
+  
+  def launch
+    create_gui
+    register_observers
+    @main_window.show
+  end
+  
+  def register_observers
+    Glimmer::DataBinding::Observer.proc do |game_status|
+      display_win_message if game_status == Board::WIN
+      display_draw_message if game_status == Board::DRAW
+    end.observe(@tic_tac_toe_board, :game_status)
+    
+    3.times.map do |row|
+      3.times.map do |column|
+        Glimmer::DataBinding::Observer.proc do |sign|
+          @cells[row][column].string = sign
+        end.observe(@tic_tac_toe_board[row + 1, column + 1], :sign) # board model is 1-based
+      end
+    end
+  end
+
+  def create_gui
+    @main_window = window('Tic-Tac-Toe', 180, 180) {
+      resizable false
+      
+      @cells = []
+      vertical_box {
+        padded false
+        
+        3.times.map do |row|
+          @cells << []
+          horizontal_box {
+            padded false
+            
+            3.times.map do |column|
+              area {
+                path {
+                  square(0, 0, 60)
+                  
+                  stroke :black, thickness: 2
+                }
+                text(23, 19) {
+                  @cells[row] << string('') {
+                    font family: 'Arial', size: 20
+                  }
+                }
+                on_mouse_up do
+                  @tic_tac_toe_board.mark(row + 1, column + 1) # board model is 1-based
+                end
+              }
+            end
+          }
+        end
+      }
+    }
+  end
+
+  def display_win_message
+    display_game_over_message("Player #{@tic_tac_toe_board.winning_sign} has won!")
+  end
+
+  def display_draw_message
+    display_game_over_message("Draw!")
+  end
+
+  def display_game_over_message(message_text)
+    Glimmer::LibUI.queue_main do
+      msg_box('Game Over', message_text)
+      @tic_tac_toe_board.reset!
+    end
+  end
+end
+
+TicTacToe.new.launch
+```
+
 ## Applications
 
 Here are some applications built with [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui)
@@ -6358,9 +6795,10 @@ https://github.com/iraamaro/i3off-gtk-ruby
 
 ## 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)
+- [LibUI Ruby Bindings](https://github.com/kojix2/LibUI)
+- [libui C Library](https://github.com/andlabs/libui)
+- [Go UI (Golang LibUI) API Documentation](https://pkg.go.dev/github.com/andlabs/ui)
 
 ## Help