glimmer-dsl-libui 0.2.18 → 0.2.22

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.18
+# [<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.22
 ## 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)
@@ -218,9 +218,10 @@ NOTE: [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) is fe
 Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interested in:
 - [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (JRuby Desktop Development GUI Framework)
 - [glimmer-dsl-opal](https://github.com/AndyObtiva/glimmer-dsl-opal): Glimmer DSL for Opal (Pure Ruby Web GUI and Auto-Webifier of Desktop Apps)
+- [glimmer-dsl-tk](https://github.com/AndyObtiva/glimmer-dsl-tk): Glimmer DSL for Tk (MRI Ruby Desktop Development GUI Library)
+- [glimmer-dsl-gtk](https://github.com/AndyObtiva/glimmer-dsl-gtk): Ruby-GNOME Desktop Development GUI Library
 - [glimmer-dsl-xml](https://github.com/AndyObtiva/glimmer-dsl-xml): Glimmer DSL for XML (& HTML)
 - [glimmer-dsl-css](https://github.com/AndyObtiva/glimmer-dsl-css): Glimmer DSL for CSS
-- [glimmer-dsl-tk](https://github.com/AndyObtiva/glimmer-dsl-tk): Glimmer DSL for Tk (MRI Ruby Desktop Development GUI Library)
 
 ## Table of Contents
 
@@ -278,6 +279,8 @@ 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)
+    - [Snake](#snake)
   - [Applications](#applications)
     - [Manga2PDF](#manga2pdf)
     - [Befunge98 GUI](#befunge98-gui)
@@ -370,7 +373,7 @@ gem install glimmer-dsl-libui
 Or install via Bundler `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-libui', '~> 0.2.18'
+gem 'glimmer-dsl-libui', '~> 0.2.22'
 ```
 
 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.
@@ -446,7 +449,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
@@ -456,6 +459,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`
@@ -478,7 +482,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`
@@ -497,6 +501,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
@@ -510,7 +515,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)
@@ -543,6 +548,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
@@ -871,7 +905,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.
 
@@ -1088,8 +1122,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
 
@@ -1189,7 +1223,7 @@ class MetaExample
   
   def run_example(example)
     Thread.new do
-      command = "ruby -r #{glimmer_dsl_libui_file} #{example} 2>&1"
+      command = "#{RbConfig.ruby} -r #{glimmer_dsl_libui_file} #{example} 2>&1"
       result = ''
       IO.popen(command) do |f|
         sleep(0.0001) # yield to main thread
@@ -6234,6 +6268,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:
@@ -6252,6 +6288,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
@@ -6266,40 +6306,55 @@ class Tetris
   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|
           Glimmer::LibUI.queue_main do
             color = Glimmer::LibUI.interpret_color(new_color)
-            block = @blocks[row][column]
+            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}
@@ -6310,27 +6365,135 @@ class Tetris
         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: )
-    @blocks = []
+  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 << []
+        blocks << []
         horizontal_box {
           padded false
           
           playfield_width.times.map do |column|
-            @blocks.last << block(row: row, column: column, block_size: block_size)
+            blocks.last << block(row: row, column: column, block_size: block_size)
           end
         }
       end
+      
+      extra_content&.call
     }
+    blocks
   end
   
-  def block(row: , column: , block_size: )
+  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)
@@ -6369,32 +6532,89 @@ class Tetris
       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 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
+  
   def start_moving_tetrominos_down
     Glimmer::LibUI.timer(@game.delay) do
       @game.down! if !@game.game_over? && !@game.paused?
@@ -6403,15 +6623,269 @@ class Tetris
   
   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}")
+      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
+```
+
+### Snake
+
+Snake provides an example of building a desktop application [test-first](/spec/examples/snake/model/game_spec.rb) following the MVP ([Model](/examples/snake/model/game.rb) / [View](/examples/snake.rb) / [Presenter](/examples/snake/presenter/grid.rb)) architectural pattern.
+
+[examples/snake.rb](examples/snake.rb)
+
+Run with this command from the root of the project if you cloned the project:
+
+```
+ruby -r './lib/glimmer-dsl-libui' examples/snake.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/snake'"
+```
+
+Mac
+
+![glimmer-dsl-libui-mac-snake.png](images/glimmer-dsl-libui-mac-snake.png)
+
+![glimmer-dsl-libui-mac-snake-game-over.png](images/glimmer-dsl-libui-mac-snake-game-over.png)
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+
+```ruby
+require 'glimmer-dsl-libui'
+require 'glimmer/data_binding/observer'
+
+require_relative 'snake/presenter/grid'
+
+class Snake
+  CELL_SIZE = 15
+  SNAKE_MOVE_DELAY = 0.1
+  include Glimmer
+  
+  def initialize
+    @game = Model::Game.new
+    @grid = Presenter::Grid.new(@game)
+    @game.start
+    create_gui
+    register_observers
+  end
+  
+  def launch
+    @main_window.show
+  end
+  
+  def register_observers
+    @game.height.times do |row|
+      @game.width.times do |column|
+        Glimmer::DataBinding::Observer.proc do |new_color|
+          @cell_grid[row][column].fill = new_color
+        end.observe(@grid.cells[row][column], :color)
+      end
+    end
+    
+    Glimmer::DataBinding::Observer.proc do |game_over|
+      Glimmer::LibUI.queue_main do
+        if game_over
+          msg_box('Game Over!', "Score: #{@game.score}")
+          @game.start
+        end
+      end
+    end.observe(@game, :over)
+    
+    Glimmer::LibUI.timer(SNAKE_MOVE_DELAY) do
+      unless @game.over?
+        @game.snake.move
+        @main_window.title = "Glimmer Snake (Score: #{@game.score})"
+      end
+    end
+  end
+  
+  def create_gui
+    @cell_grid = []
+    @main_window = window('Glimmer Snake', @game.width * CELL_SIZE, @game.height * CELL_SIZE) {
+      resizable false
+      
+      vertical_box {
+        padded false
+        
+        @game.height.times do |row|
+          @cell_grid << []
+          horizontal_box {
+            padded false
+            
+            @game.width.times do |column|
+              area {
+                @cell_grid.last << path {
+                  square(0, 0, CELL_SIZE)
+                  
+                  fill Presenter::Cell::COLOR_CLEAR
+                }
+                
+                on_key_up do |area_key_event|
+                  orientation_and_key = [@game.snake.head.orientation, area_key_event[:ext_key]]
+                  case orientation_and_key
+                  in [:north, :right] | [:east, :down] | [:south, :left] | [:west, :up]
+                    @game.snake.turn_right
+                  in [:north, :left] | [:west, :down] | [:south, :right] | [:east, :up]
+                    @game.snake.turn_left
+                  else
+                    # No Op
+                  end
+                end
+              }
+            end
+          }
+        end
+      }
+    }
+  end
+end
+
+Snake.new.launch
+```
+
 ## Applications
 
 Here are some applications built with [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui)
@@ -6442,9 +6916,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