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

<svg  viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path stroke-width="0" stroke="#fff" fill="#0B3736" d="M0 0h512v512H0z"></path><path fill="#DFDFE1" d="M255.063 21c-46.697 0-88.406 27.674-117.844 70.656-29.44 42.982-47.25 101.566-47.25 166.094 0 64.527 17.81 123.112 47.25 166.094 29.437 42.982 71.146 70.656 117.843 70.656 46.696 0 88.405-27.674 117.843-70.656 29.44-42.982 47.25-101.567 47.25-166.094 0-64.528-17.81-123.112-47.25-166.094C343.468 48.674 301.76 21 255.062 21zM396.28 200.344c3.365 18.28 5.19 37.527 5.19 57.406 0 18.535-1.594 36.522-4.533 53.688-37.91 12.904-87.436 20.812-141.656 20.812-54.45 0-104.125-8.235-142.186-21.313-2.884-17.014-4.438-34.833-4.438-53.187 0-19.868 1.827-39.103 5.188-57.375 37.903 14.565 87.35 23.25 141.47 23.25 54.136 0 103.183-8.707 140.967-23.28zM177.157 241c-15.137-.162-30.97 3.458-47.375 10.313 14.562 51.423 87.08 42.483 102.157 10.156-17.004-13.822-35.318-20.262-54.78-20.47zm155.75 0c-19.462.208-37.808 6.648-54.812 20.47 15.078 32.326 87.596 41.266 102.156-10.158-16.405-6.854-32.206-10.474-47.344-10.312z"></path></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