Squib Examples: From SSE presentation

.gitignore

*.png
!part*_expected.png

01_hello.rb

require 'squib'

Squib::Deck.new cards: 1 do
  background color: 'pink'
  rect
  text str: 'Draw two cards.'
  save_png prefix: 'part1_', dir: '.'
end

02_options.rb

require 'squib'

Squib::Deck.new cards: 1 do
  background color: '#252322'
  rect fill_color: '#0B3736',
       x: 38, y: 38, width: 750, height: 1050, radius: 38
  text str: 'Robot Golem', font: 'True Crimes, Sans 72',
       align: :center, x: 75, width: :deck, color: '#DFDFE1', y: 90
  svg file: 'auto-repair.svg', x: 75, y: 75, width: 100, height: :scale
  svg file: 'robot-golem.svg', x: 75, y: 300, width: 675, height: :scale
  text str: 'Draw two cards', font: 'Serif 36',
       align: :center, width: :deck, color: '#DFDFE1', y: 1000
  save_png prefix: 'part2_', dir: '.'
end

03_layout.rb

require 'squib'

Squib::Deck.new cards: 1, layout: 'part3_layout.yml' do
  background color: '#252322'
  rect layout: 'backdrop'
  text str: 'Robot Golem', layout: 'title'
  svg layout: 'drone'
  svg file: 'robot-golem.svg', layout: 'art'
  text str: 'Draw two cards.', layout: 'power'
  save_png prefix: 'part3_', dir: '.'
end

04_arrays.rb

require 'squib'

Squib::Deck.new cards: 2, layout: 'part3_layout.yml' do
  background color: '#252322'
  rect layout: 'backdrop'
  text str: ['Robot Golem', 'Ninja'],
       layout: 'title'
  svg layout: ['drone', 'human']
  svg file: ['robot-golem.svg','ninja-mask.svg'],
      layout: 'art'
  text str: ['Draw two cards',
             'Use the power of another player'],
       layout: 'power'
  save_png prefix: 'part4_', dir: '.'
end

05_excel.rb

require 'squib'

Squib::Deck.new cards: 4, layout: 'part3_layout.yml' do
  background color: '#252322'
  rect layout: 'backdrop'
  data = xlsx file: 'data.xlsx'
  text str: data['name'], layout: 'title'
  svg layout: data['class']
  svg file: data['art'], layout: 'art'
  text str: data['power'], layout: 'power'
  save_png prefix: 'part5_', dir: '.'
  hand file: 'part5_hand.png', dir: '.', trim_radius: 38
  showcase file: 'part5_showcase.png', dir: '.'
end

auto-repair.svg

crawling.svg

data.xlsx

humans.svg

ninja-mask.svg

part1_00_expected.png

part2_00_expected.png

part3_00_expected.png

part3_layout.yml

backdrop:
    fill_color: '#0B3736'
    x: 38
    y: 38
    radius: 38
    width: 750
    height: 1050
title:
    font: 'True Crimes, Sans 72'
    align: center
    color: '#DFDFE1'
    x: 75
    y: 90
    width: 825
drone:
    file: auto-repair.svg
    x: 75
    y: 75
    width: 100
    height: 100
human:
    extends: drone
    file: humans.svg
art:
    x: 75
    y: 300
    width: 675
    height: 675
power:
    font: 'Serif 36'
    align: center
    width: 825
    color: '#DFDFE1'
    y: 1000

part4_00_expected.png

part4_01_expected.png

part5_00_expected.png

part5_01_expected.png

part5_02_expected.png

part5_03_expected.png

part5_hand_expected.png

part5_showcase_expected.png

pirate-skull.svg

robot-golem.svg