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

<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="M241.406 21l-15.22 34.75c-7.864.478-15.703 1.472-23.467 2.97l-23.282-30.064-25.094 8.532-.125 38.25c-10.63 5.464-20.817 12.07-30.44 19.78L88.313 79.25 70.156 98.563 88.312 133c-5.852 8.346-10.925 17.072-15.218 26.094l-38.938 1.062-7.906 25.28 31.438 23.158c-1.505 9.38-2.24 18.858-2.282 28.344L20.5 254.625l3.656 26.25 38.313 7.5c2.284 7.982 5.107 15.826 8.5 23.5L45.72 343.22l14.093 22.436 39.25-9.187c2.47 2.895 5.037 5.757 7.718 8.53 5.643 5.835 11.565 11.206 17.72 16.125l-7.625 39.313 22.938 13.25 29.968-26.094c8.606 3.462 17.435 6.23 26.407 8.312l9.782 38.406 26.405 2.157 15.875-36.22c10.97-.66 21.904-2.3 32.656-4.938l25.22 29.22 24.593-9.844-.72-14.813-57.406-43.53c-16.712 4.225-34.042 5.356-51.063 3.436-31.754-3.58-62.27-17.92-86.218-42.686-54.738-56.614-53.173-146.67 3.438-201.406 27.42-26.513 62.69-39.963 98-40.344 37.59-.406 75.214 13.996 103.438 43.187 45.935 47.512 52.196 118.985 19.562 173.095l31.97 24.25c3.997-6.28 7.594-12.75 10.75-19.375l38.655-1.063 7.906-25.28-31.217-23c1.513-9.457 2.262-19.035 2.28-28.594l34.688-17.625-3.655-26.25-38.28-7.5c-3.196-10.993-7.444-21.762-12.75-32.125l22.81-31.594-15.25-21.657-37.56 10.906c-.472-.5-.93-1.007-1.408-1.5-5.998-6.205-12.33-11.89-18.937-17.064l7.188-37.125L334 43.78l-28.5 24.814c-9.226-3.713-18.702-6.603-28.313-8.75l-9.343-36.688L241.406 21zM183.25 174.5c-10.344.118-20.597 2.658-30 7.28l45.22 34.314c13.676 10.376 17.555 30.095 7.06 43.937-10.498 13.85-30.656 15.932-44.53 5.408l-45.188-34.282c-4.627 24.793 4.135 51.063 25.594 67.344 19.245 14.597 43.944 17.33 65.22 9.688l4.78-1.72 4.03 3.063 135.19 102.564 4.03 3.062-.344 5.063c-1.637 22.55 7.59 45.61 26.844 60.217 21.46 16.28 49.145 17.63 71.78 6.5l-45.186-34.28c-13.874-10.526-17.282-30.506-6.78-44.344 10.5-13.84 30.537-15.405 44.217-5.032l45.188 34.283c4.616-24.784-4.11-51.067-25.563-67.344-19.313-14.658-43.817-17.562-64.968-10.033l-4.75 1.688-4.03-3.063-135.19-102.562-4.03-3.063.344-5.03c1.55-22.387-7.85-45.194-27.157-59.845-12.544-9.516-27.222-13.978-41.78-13.812zm43.563 90.25l163.875 124.344L379.406 404 215.5 279.625l11.313-14.875z"></path></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