DEV Community

Cover image for Quarto Game, Custom Shapes, and Canvas Shape DSL Tutorial
Andy Maleh
Andy Maleh

Posted on • Edited on

Quarto Game, Custom Shapes, and Canvas Shape DSL Tutorial

#ruby #desktop #gui #gamedev

At a Christmas party I attended a couple of weeks ago, I discovered a classic board game called Quarto. In fact, the host of the party who's worked for a major gaming company in the past asked me if I knew how to build it as a computer application. I discounted myself as a non-game-developer who only builds business applications, but then followed that by saying that if it is only a 2D game, it was simple to build. So, the challenge was on!!!

Quarto Board Game

Here is the classic Quarto black board version that the party attendees played with during Christmas:

Classic Quarto

I built Quarto as a computer game in 4-5 days using Glimmer DSL for SWT!

Quarto Computer Game

Here is a video demo of Glimmer Quarto:

The key features in Glimmer DSL for SWT that helped me complete it very quickly are Custom Shape support (e.g. building cylinder and cube Custom Shapes and reusing to model Quarto piece Custom Shape) and the effortless Canvas Drag and Drop (e.g. designating one Custom Shape as a drag source and another as a drop target with on_drop listener). I also used affine Transforms to tilt the board by 45 degrees from a standard grid.

The top-level Quarto code is included below, followed by the code of the Quarto piece, cylinder, and cube Custom Shapes, followed by a link to the rest of the code, and then finally a quick tutorial for the Glimmer DSL for SWT Canvas Shape DSL.

Quarto

# From: https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_SAMPLES.md#quarto

# Top-level Quarto board GUI code that visually maps to real GUI
shell(:shell_trim, (:double_buffered unless OS.mac?)) {
  text 'Glimmer Quarto'
  minimum_size BOARD_DIAMETER + AREA_MARGIN + PIECES_AREA_WIDTH + SHELL_MARGIN*2 + (OS.linux? ? 52 : (OS.windows? ? 16 : 0)), BOARD_DIAMETER + 24 + SHELL_MARGIN*2 + (OS.linux? ? 96 : (OS.windows? ? 32 : 0))
  maximum_size BOARD_DIAMETER + AREA_MARGIN + PIECES_AREA_WIDTH + SHELL_MARGIN*2 + (OS.linux? ? 52 : (OS.windows? ? 16 : 0)), BOARD_DIAMETER + 24 + SHELL_MARGIN*2 + (OS.linux? ? 96 : (OS.windows? ? 32 : 0))
  background COLOR_WOOD

  quarto_menu_bar

  @board = board(game: @game, location_x: SHELL_MARGIN, location_y: SHELL_MARGIN)

  @available_pieces_area = available_pieces_area(game: @game, location_x: SHELL_MARGIN + BOARD_DIAMETER + AREA_MARGIN, location_y: SHELL_MARGIN)
  @selected_piece_area = selected_piece_area(game: @game, location_x: SHELL_MARGIN + BOARD_DIAMETER + AREA_MARGIN, location_y: SHELL_MARGIN + AVAILABLE_PIECES_AREA_HEIGHT + AREA_MARGIN)
}
Enter fullscreen mode Exit fullscreen mode

Piece

# From: https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_SAMPLES.md#quarto

require_relative 'cylinder'
require_relative 'cube'

class Quarto
  module View
    class Piece
      include Glimmer::UI::CustomShape

      SIZE_SHORT = 28
      SIZE_TALL = 48
      BASIC_SHAPE_WIDTH = 48
      BASIC_SHAPE_HEIGHT = 28
      LINE_THICKNESS = 2

      options :game, :model, :location_x, :location_y

      before_body do
        @background_color = model.light? ? COLOR_LIGHT_WOOD : COLOR_DARK_WOOD
        @size = model.short? ? SIZE_SHORT : SIZE_TALL
        @shape_location_x = 0
        @shape_location_y = model.short? ? 20 : 0
      end

      body {
        shape(location_x, location_y) {
          if model.is_a?(Model::Piece::Cylinder)
            cylinder(location_x: @shape_location_x, location_y: @shape_location_y, cylinder_height: @size, oval_width: BASIC_SHAPE_WIDTH, oval_height: BASIC_SHAPE_HEIGHT, pitted: model.pitted?, background_color: @background_color, line_thickness: LINE_THICKNESS)
          else
            cube(location_x: @shape_location_x, location_y: @shape_location_y, cube_height: @size, rectangle_width: BASIC_SHAPE_WIDTH, rectangle_height: BASIC_SHAPE_HEIGHT, pitted: model.pitted?, background_color: @background_color, line_thickness: LINE_THICKNESS)
          end
        }
      }
    end
  end
end
Enter fullscreen mode Exit fullscreen mode

Cylinder

# From: https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_SAMPLES.md#quarto

class Quarto
  module View
    class Cylinder
      include Glimmer::UI::CustomShape

      DEFAULT_SIZE = 28

      options :location_x, :location_y, :oval_width, :oval_height, :cylinder_height, :pitted, :background_color, :line_thickness
      alias pitted? pitted

      before_body do
        self.location_x ||= 0
        self.location_y ||= 0
        self.oval_width ||= oval_height || cylinder_height || DEFAULT_SIZE
        self.oval_height ||= oval_width || cylinder_height || DEFAULT_SIZE
        self.cylinder_height ||= oval_width || oval_height || DEFAULT_SIZE
        self.line_thickness ||= 1
      end

      body {
        shape(location_x, location_y) {
          oval(0, cylinder_height, oval_width, oval_height) {
            background background_color

            oval { # draws with foreground :black and has max size within parent by default
              line_width line_thickness
            }
          }
          rectangle(0, oval_height / 2.0, oval_width, cylinder_height) {
            background background_color
          }
          polyline(0, oval_height / 2.0 + cylinder_height, 0, oval_height / 2.0, oval_width, oval_height / 2.0, oval_width, oval_height / 2.0 + cylinder_height) {
            line_width line_thickness
          }
          oval(0, 0, oval_width, oval_height) {
            background background_color

            oval { # draws with foreground :black and has max size within parent by default
              line_width line_thickness
            }
          }
          if pitted?
            oval(oval_width / 4.0, oval_height / 4.0, oval_width / 2.0, oval_height / 2.0) {
              background :black
            }
          end
        }
      }
    end
  end
end
Enter fullscreen mode Exit fullscreen mode

Cube

# From: https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_SAMPLES.md#quarto

class Quarto
  module View
    class Cube
      include Glimmer::UI::CustomShape

      DEFAULT_SIZE = 28

      options :location_x, :location_y, :rectangle_width, :rectangle_height, :cube_height, :pitted, :background_color, :line_thickness
      alias pitted? pitted

      before_body do
        self.location_x ||= 0
        self.location_y ||= 0
        self.rectangle_width ||= rectangle_height || cube_height || DEFAULT_SIZE
        self.rectangle_height ||= rectangle_width || cube_height || DEFAULT_SIZE
        self.cube_height ||= rectangle_width || rectangle_height || DEFAULT_SIZE
        self.line_thickness ||= 1
      end

      body {
        shape(location_x, location_y) {
          polygon(0, cube_height + rectangle_height / 2.0, rectangle_width / 2.0, cube_height, rectangle_width, cube_height + rectangle_height / 2.0, rectangle_width / 2.0, cube_height + rectangle_height) {
            background background_color
          }
          polygon(0, cube_height + rectangle_height / 2.0, rectangle_width / 2.0, cube_height, rectangle_width, cube_height + rectangle_height / 2.0, rectangle_width / 2.0, cube_height + rectangle_height) {
            line_width line_thickness
          }
          rectangle(0, rectangle_height / 2.0, rectangle_width, cube_height) {
            background background_color
          }
          polyline(0, rectangle_height / 2.0 + cube_height, 0, rectangle_height / 2.0, rectangle_width, rectangle_height / 2.0, rectangle_width, rectangle_height / 2.0 + cube_height) {
            line_width line_thickness
          }
          polygon(0, rectangle_height / 2.0, rectangle_width / 2.0, 0, rectangle_width, rectangle_height / 2.0, rectangle_width / 2.0, rectangle_height) {
            background background_color
          }
          polygon(0, rectangle_height / 2.0, rectangle_width / 2.0, 0, rectangle_width, rectangle_height / 2.0, rectangle_width / 2.0, rectangle_height) {
            line_width line_thickness
          }
          line(rectangle_width / 2.0, cube_height + rectangle_height, rectangle_width / 2.0, rectangle_height) {
            line_width line_thickness
          }
          if pitted?
            oval(rectangle_width / 4.0, rectangle_height / 4.0, rectangle_width / 2.0, rectangle_height / 2.0) {
              background :black
            }
          end
        }
      }
    end
  end
end
Enter fullscreen mode Exit fullscreen mode

Rest of the Quarto code:

Views:

https://github.com/AndyObtiva/glimmer-dsl-swt/tree/master/samples/elaborate/quarto/view

Models:

https://github.com/AndyObtiva/glimmer-dsl-swt/tree/master/samples/elaborate/quarto/model

Now, let us get into the Canvas Shape DSL tutorial.

Canvas Shape DSL Tutorial

Below are examples of using the Canvas Shape DSL in Glimmer DSL for SWT.

Example of line (you may copy/paste in girb):

require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    line(30, 30, 170, 170) {
      foreground :red
      line_width 3
    }
  }
}.open
Enter fullscreen mode Exit fullscreen mode

Canvas Shape DSL Line

Example of rectangle (you may copy/paste in girb):

require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    rectangle(30, 50, 140, 100) {
      background :yellow
    }

    rectangle(30, 50, 140, 100) {
      foreground :red
      line_width 3
    }
  }
}.open
Enter fullscreen mode Exit fullscreen mode

Canvas Shape DSL Rectangle

Example of rectangle with round corners having 60 degree angles by default (you may copy/paste in girb):

require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    rectangle(30, 50, 140, 100, round: true) {
      background :yellow
    }

    rectangle(30, 50, 140, 100, round: true) {
      foreground :red
      line_width 3
    }
  }
}.open
Enter fullscreen mode Exit fullscreen mode

Canvas Shape DSL Rectangle Round

Example of rectangle with round corners having different horizontal and vertical angles (you may copy/paste in girb):

require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    rectangle(30, 50, 140, 100, 40, 80) {
      background :yellow
    }

    rectangle(30, 50, 140, 100, 40, 80) {
      foreground :red
      line_width 3
    }
  }
}.open
Enter fullscreen mode Exit fullscreen mode

Canvas Shape DSL Rectangle Round Angles

Example of oval (you may copy/paste in girb):

require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    oval(30, 50, 140, 100) {
      background :yellow
    }

    oval(30, 50, 140, 100) {
      foreground :red
      line_width 3
    }
  }
}.open
Enter fullscreen mode Exit fullscreen mode

Canvas Shape DSL Oval

Example of arc (you may copy/paste in girb):

require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    arc(30, 30, 140, 140, 0, 270) {
      background :yellow
    }

    arc(30, 30, 140, 140, 0, 270) {
      foreground :red
      line_width 3
    }
  }
}.open
Enter fullscreen mode Exit fullscreen mode

Canvas Shape DSL Arc

Example of polyline (you may copy/paste in girb):

require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    polyline(30, 50, 50, 170, 70, 120, 90, 150, 110, 30, 130, 100, 150, 50, 170, 135) {
      foreground :red
      line_width 3
    }
  }
}.open
Enter fullscreen mode Exit fullscreen mode

Canvas Shape DSL Polyline

Example of polygon (you may copy/paste in girb):

require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    polygon(30, 90, 80, 20, 130, 40, 170, 90, 130, 140, 80, 170, 40, 160) {
      background :yellow
    }

    polygon(30, 90, 80, 20, 130, 40, 170, 90, 130, 140, 80, 170, 40, 160) {
      foreground :red
      line_width 3
    }
  }
}.open
Enter fullscreen mode Exit fullscreen mode

Canvas Shape DSL Polygon

Example of text (you may copy/paste in girb):

require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    text(" This is \n rendered text ", 30, 50) {
      background :yellow
      foreground :red
      font height: 25, style: :italic

      rectangle { # automatically scales to match text extent
        foreground :red
        line_width 3
      }
    }
  }
}.open
Enter fullscreen mode Exit fullscreen mode

Canvas Shape DSL Text

Example of image (you may copy/paste in girb):

require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 512, 542

  canvas {
    background :white

    image(File.expand_path('icons/scaffold_app.png', __dir__), 0, 5)
  }
}.open
Enter fullscreen mode Exit fullscreen mode

Canvas Shape DSL Image

Example of image pre-built with a smaller height (you may copy/paste in girb):

require 'glimmer-dsl-swt'

include Glimmer

@image_object = image(File.expand_path('icons/scaffold_app.png', __dir__), height: 200)

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 230

  canvas {
    background :white

    image(@image_object, 0, 5)
  }
}.open
Enter fullscreen mode Exit fullscreen mode

Canvas Shape DSL Image

Example of setting background_pattern attribute to a horizontal gradient (you may copy/paste in girb):

require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    oval(30, 30, 140, 140) {
      background_pattern 0, 0, 200, 0, rgb(255, 255, 0), rgb(255, 0, 0)
    }
  }
}.open
Enter fullscreen mode Exit fullscreen mode

Canvas Shape DSL Oval Background Pattern Gradient

Example of setting foreground_pattern attribute to a vertical gradient (you may copy/paste in girb):

require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    oval(30, 30, 140, 140) {
      foreground_pattern 0, 0, 0, 200, :blue, :green
      line_width 10
    }
  }
}.open
Enter fullscreen mode Exit fullscreen mode

Canvas Shape DSL Oval Foreground Pattern Gradient

Example of setting line_style attribute to :dashdot (you may copy/paste in girb):

require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    oval(30, 50, 140, 100) {
      background :yellow
    }

    oval(30, 50, 140, 100) {
      foreground :red
      line_width 3
      line_style :dashdot
    }
  }
}.open
Enter fullscreen mode Exit fullscreen mode

Canvas Shape DSL Oval

Example of setting line_width attribute to 10, line_join attribute to :miter (default) and line_cap attribute to :flat (default) (you may copy/paste in girb):

require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    polyline(30, 50, 50, 170, 70, 120, 90, 150, 110, 30, 130, 100, 150, 50, 170, 135) {
      foreground :red
      line_width 10
      line_join :miter
      line_cap :flat
    }
  }
}.open
Enter fullscreen mode Exit fullscreen mode

Canvas Shape DSL Polyline Line Join Miter Line Cap Flat

Example of setting line_width attribute to 10, line_join attribute to :round and line_cap attribute to :round (you may copy/paste in girb):

require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    polyline(30, 50, 50, 170, 70, 120, 90, 150, 110, 30, 130, 100, 150, 50, 170, 135) {
      foreground :red
      line_width 10
      line_join :round
      line_cap :round
    }
  }
}.open
Enter fullscreen mode Exit fullscreen mode

Canvas Shape DSL Polyline Line Join Round Line Cap Round

Example of setting line_width attribute to 10, line_join attribute to :bevel and line_cap attribute to :square (you may copy/paste in girb):

require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    polyline(30, 50, 50, 170, 70, 120, 90, 150, 110, 30, 130, 100, 150, 50, 170, 135) {
      foreground :red
      line_width 10
      line_join :bevel
      line_cap :square
    }
  }
}.open
Enter fullscreen mode Exit fullscreen mode

Canvas Shape DSL Polyline Line Join Miter Line Cap Flat

Happy Glimmering!

Top comments (0)

Read next

jetthoughts-dev profile image

Ruby on Rails 8: Simplifying Sharding with New Methods

JetThoughts Dev -

sonianand11 profile image

Writing Clean Code in Ruby on Rails Applications 🧼💻

Anand Soni -

baweaver profile image

Let's Read - Eloquent Ruby - Ch 22

Brandon Weaver -

baweaver profile image

Let's Read - Eloquent Ruby - Ch 21

Brandon Weaver -