Make your own Print & Play card game using SVG and JavaScript

Make your own Print & Play card game using
SVG and JavaScript Kevin Hakanson 5 April 2014

Abstract Want to leverage your creaDvity, love of board
games, and web plaGorm experience to do something diﬀerent? Turn your imaginaDon into a Print & Play card game using only a modern web browser, color printer and text editor. This session will use the Scalable Vector Graphics (SVG) image format and JavaScript programming language to make a deck of cards for a simple game. CreaDng a few cards in graphics soSware like Inkscape is one thing, but what about 50 or 100 cards? What happens when you need to update them all? That’s the value of generaDng your SVG using JavaScript. We will start with a blank screen, adding color and graphics elements like lines, shapes, text and images. Learn about container elements and deﬁning content for re-‐use. Understand how units in the SVG coordinate system can transform our on-‐screen creaDon into an 8.5 by 11 inch printed page (or PDF). SVG examples will be both in their naDve XML format and created from JavaScript using Snap.svg, an open source library from Adobe designed for modern web browsers. You will leave this session with a basic knowledge of SVG concepts, how to programmaDcally generate SVG using JavaScript, and how to make your SVG creaDon printer friendly.

TL;DR •  Print & Play Card Game – Scalable
Vector Graphics (SVG) – JavaScript – Snap.svg – 8.5 by 11 PrinDng

Kevin Hakanson @hakanson #tccc16 [email protected] +KevinHakanson
hep://stackoverﬂow.com/users/22514/kevin-‐hakanson heps://github.com/hakanson

Bio Kevin Hakanson is an applicaDon architect for
Thomson Reuters where he is focused on highly scalable web applicaDons, especially the JavaScript and security aspects. His background includes both .NET and Java, but he is most nostalgic about Lotus Notes. He has been developing professionally since 1994 and holds a Master’s degree in SoSware Engineering. When not staring at a computer screen, he is probably staring at another screen, either watching TV or playing video games with his family.

Fluxx Blanxx •  Add your own zany ideas
•  Each pack contains one of each of the ﬁve card types •  Cards are "halfway-‐blank" with standard-‐issue text and the stripe of color •  Just grab your trusty permanent marker and customize the fun! hep://store.looneylabs.com/Fluxx-‐Blanxx

Print & Play •  “Print & Play games are
those which are oSen free to any player who wishes to print them oﬀ themselves. Many are available on the Internet.” –  hep://boardgamegeek.com/boardgamecategory/1120/print-‐play •  Print & Play games Boardgamegeek wiki entry: –  hep://boardgamegeek.com/wiki/page/Print_and_Play_Games

Azure Fluxx •  Version of Fluxx based in the
Window Azure “universe”: – SoSware Development – MicrosoS Products – Web Technologies

Fair Use? •  Fluxx Copyright Looney Labs • 
Same card types •  Same basic gameplay and rules wording •  Similar, but not exact, colors and artwork •  Diﬀerent fonts •  Diﬀerent physical card size and deck count

Azure Fluxx Cards

Goals and Keepers •  Goals –  Old School
–  New School –  Single Page App –  Polyglot –  Web PlaGorm –  Tool Master –  .NET PlaGorm –  Entry Level –  Mistaken IdenDty –  Selectors –  Transpile –  Odd Couple –  Double MVC –  Intellisense –  Edge.js –  UI Bootstrap •  Keepers

Scalable Vector Graphics (SVG) •  Text-‐based graphics language that
describes images with vector shapes, text, and embedded raster graphics. •  SVG ﬁles provide resoluDon independent, high resoluDon dots per inch (HiDPI) graphics on the web, in print, and on mobile devices in a compact format. hep://www.adobe.com/devnet/svg.html

SVG EssenDals “This insighGul book takes you through the
ins and outs of SVG, from the basics to more complicated features.” hep://commons.oreilly.com/wiki/index.php/SVG_EssenDals

SVG Primer “The book aeempts to discuss SVG in
broader terms, but at the same Dme to illustrate how one can write JavaScript programs that use and manipulate SVG.” hep://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html

Snap.svg “the JavaScript SVG library for the modern
web” “makes working with your SVG assets as easy as jQuery makes working with the DOM” hep://snapsvg.io/

The svg Element •  <svg> is both root element
and used to nest standalone SVG fragments •  Each standalone fragment has its own viewPort and coordinate system

Grouping and Reusing “The <use> (reuse) and <g>
(or group) tags bear similarity to the variables and objects encountered in programming languages.” hep://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#operaDons

The g Element •  Gathers child elements into a
group •  Uses id aeribute to give a unique name •  Can have <title> and <desc> •  Styles apply to child elements •  Can nest groups within one another

<g> XML Example <g id="plus"
opacity=".4" stroke="black" stroke-‐width="0.1"> <path d="M -‐3 0 H 3 M 0 -‐3 V 3" /> </g>

The defs Element •  Puxng grouped objects inside of
<defs> tells SVG to deﬁne them without displaying them •  SVG recommendaDon is to put all objects intended for re-‐use inside <defs>

<defs> JavaScript Example var plus = svg.g( svg.path("M
-‐3 0 H 3 M 0 -‐3 V 3") ); plus.attr({id:"plus", opacity:"0.4", stroke:"black", "stroke-‐width":"0.1"}); plus.toDefs();

The symbol Element •  <symbol> element provides another way
of grouping elements •  Never displayed, so don't have to enclose it in <defs> but customary to do so •  <symbol> can specify viewBox and preserveAspectRatio aeributes

The use Element •  “copy-‐and-‐paste” of a deﬁned group
•  Specify with an xlink:href aeribute •  Specify the x and y locaDon for the group's (0, 0) point

Chrome Print Dialog

<use> XML Example <g id="pluscolumn">
<use xlink:href="#plus" y="7.7" /> <use xlink:href="#plus" y="95.7" /> <use xlink:href="#plus" y="183.7" /> <use xlink:href="#plus" y="271.7" /> </g> <g id="pluses"> <use xlink:href="#pluscolumn" x="12.7" /> <use xlink:href="#pluscolumn" x="76.2" /> <use xlink:href="#pluscolumn" x="139.7" /> <use xlink:href="#pluscolumn" x="203.2" /> </g>

<use> JavaScript Example // width: 63.5, height: 88
var xstops = [12.7, 76.2, 139.7, 203.2]; var ystops = [7.7, 95.7, 183.7, 271.7]; pages.forEach(function (page) { ystops.forEach(function (y) { xstops.forEach(function (x) { var p = plus.use().attr({ x: x, y: y }); page.append(p); }); }); });

Why 63.5 x 88 mm ?

Paper Cueer

The rect Element •  Specify x-‐ and y-‐coordinates of
the upper leS corner, width, and height –  x, y, width and height aeributes •  Interior is ﬁlled with a ﬁll color (default black) •  Outline is drawn with strokes (default none) <rect x="0" y="0" width="10" height="10" fill="black"/>

The circle Element •  Specify center x-‐coordinate, center y-‐
coordinate, and radius –  cx, cy, and r aeributes •  Interior is ﬁlled with a ﬁll color (default black) •  Outline is drawn with strokes (default none) <circle cx="5" cy="5" r="3.5" fill="white" stroke-‐width="0" />

The ellipse Element •  Like <circle>, specify center x-‐coordinate,
center y-‐coordinate •  Also needs an x-‐radius and a y-‐radius – aeributes for these radii are named rx and ry <ellipse cx="4" cy="4" rx="0.25" ry="0.5" />

The line Element •  Specify the x-‐ and y-‐coordinates
of the line's endpoints –  x1, y1, x2 and x2 aeributes

The path Element •  Draws the outline of any
arbitrary shape by specifying a series of connected lines, arcs, and curves •  Must begin with a moveto command •  Followed by one or more lineto commands •  Arc draws a secDon of an ellipse that connects two points <path fill="none" stroke-‐linecap="round" d="M 3.5 6.75 a 1.5,1.5 0 1 1 3 0" />

Fluxx Card Types

stroke="black" fill="black" stroke-‐width=".5"> <circle cx="5" cy="5" r="3.5" fill="white" stroke-‐width="0" /> <ellipse cx="4" cy="4" rx="0.25" ry="0.5" /> <ellipse cx="6" cy="4" rx="0.25" ry="0.5" /> <path fill="none" stroke-‐linecap="round" d="M 3.5 6.75 a 1.5,1.5 0 1 1 3 0" /> </g>

stroke="black" fill="black" stroke-‐width=".5"> <circle cx="5" cy="5" r="3.5" fill="white" stroke-‐width="0" /> <ellipse cx="4" cy="4" rx="0.25" ry="0.5" /> <ellipse cx="6" cy="4" rx="0.25" ry="0.5" /> <path fill="none" stroke-‐linecap="round" d="M 3.5 6.75 C 4 5 6 6 6.5 7" /> </g>

svg.rect(0, 0, 10, 10); var frown = svg.g()
.attr({ id: "frown", stroke: "black", fill: "black", "stroke-‐width": 0.5 }); frown.append(svg.circle(5, 5, 3.5) .attr({ fill: "white", "stroke-‐width": 0 })); frown.append(svg.ellipse(4, 4, 0.25, 0.5)); frown.append(svg.ellipse(6, 4, 0.25, 0.5)); frown.append(svg.path("M 3.5 6.75 C 4 5 6 6 6.5 7") .attr({ fill: "none", "stroke-‐linecap": "round" }));

The transform Aeribute •  matrix(<a> <b> <c> <d> <e>
<f>) •  translate(<x> [<y>]) •  scale(<x> [<y>]) •  rotate(<a> [<x> <y>]) •  skewX(<a>) •  skewY(<a>) heps://developer.mozilla.org/en-‐US/docs/Web/SVG/Aeribute/transform

How-‐To Make a Keeper <symbol>

How-‐To Make a Keeper <symbol> <text>

<rect>

The text Element •  <text> requires only two aeributes,
x and y •  Default style is to have a ﬁll color of black and no outline •  font-‐family, font-‐size, font-‐weight, font-‐style, text-‐decoraDon, word-‐spacing, leeer-‐spacing •  “SVG performs no automaDc line breaking or word wrapping” hep://www.w3.org/TR/SVG11/text.html#IntroducDon

<text> XML Example <g text-‐anchor="start"
font-‐size="3.5" letter-‐spacing="-‐0.05"> <text x="15" y="18">To play this card, place it face</text> <text x="15" y="22.375">up on the table in front of you.</text> </g>

The image Element •  <image> element includes an enDre
SVG or raster ﬁle (JPEG or PNG) •  x, y, width, and height aeributes <image xlink:href="images/JavaScript-‐logo.png" preserveAspectRatio="meet" x="22" y="48" width="30" height="30" />

<image> XML Example <image xlink:href="images/JavaScript-‐logo.png"
x="22" y="48" width="30" height="30" preserveAspectRatio ="meet" />

<image> JavaScript Example s.image(
"images/JavaScript-‐logo.png", 22, 48, 30, 30) .attr({ "preserveAspectRatio":"meet" })

xmlns:xlink="http://www.w3.org/1999/xlink" font-‐family="sans-‐serif"> <defs> <rect id="sidebar" x="3" y="3" width="10" height="82" /> <!-‐-‐ ... -‐-‐> </defs> <!-‐-‐ ... -‐-‐> </svg>

xmlns:xlink="http://www.w3.org/1999/xlink" font-‐family="sans-‐serif"> <defs> <rect id="sidebar" x="3" y="3" width="10" height="82" /> <rect id="hr" x="15" y="33" width="45.5" height="2" fill="black" /> <!-‐-‐ ... -‐-‐> </defs> <!-‐-‐ ... -‐-‐> </svg>

xmlns:xlink="http://www.w3.org/1999/xlink" font-‐family="sans-‐serif"> <defs> <rect id="sidebar" x="3" y="3" width="10" height="82" /> <rect id="hr" x="15" y="33" width="45.5" height="2" fill="black" /> <symbol id="check" stroke="black" stroke-‐width="1"> <polyline points="5,8,6,11,11,5" fill="none" stroke-‐linejoin="round" stroke-‐linecap="round" /> </symbol> <!-‐-‐ ... -‐-‐> </defs> <!-‐-‐ ... -‐-‐> </svg>

Chrome Print Dialog

SVG 1.1 Text Each <text> element causes a single
string of text to be rendered. SVG performs no automaDc line breaking or word wrapping hep://www.w3.org/TR/SVG11/text.html#IntroducDon

SVG Tiny 1.2 •  The <textArea> element allows
simplisDc wrapping of text content •  The <tbreak> element is an empty element that forcibly breaks the current line of text •  The line-‐increment property provides limited control over the size of each line

SVG 1.2 •  Scalable Vector Graphics (SVG) Full 1.2
SpeciﬁcaDon – W3C Working DraS 13 April 2005 hep://www.w3.org/TR/SVG12/ •  “The next draS of SVG 1.2 Full will structured as a superset of the SVG 1.2 Tiny language” •  “At this Dme the refactored SVG 1.2 Full speciﬁcaDon is not ready for publicaDon.”

snapdeck.textArea = function (s, x, y, width, textToWrap, attr) {
if (!textToWrap) return; attr = SnapDeck.defaultAttr(attr, { "text-‐anchor": "start", "font-‐size": 3.5, "letter-‐spacing": -‐.05, "line-‐spacing": 0, "paragraph-‐ spacing": 0 }); var fontSize = attr["font-‐size"]; width = width * (fontSize / 3); var yDelta = (fontSize * 1.25) + attr["line-‐spacing"]; var tmpSvg, tmpRoot = deck.svg.g().attr(attr).toDefs(); var g = s.g().attr(attr); var line = "", tmpLine = "", linecount = 0; var texts = textToWrap.split("\n"); texts.forEach(function (text) { var words = text.split(" "); words.forEach(function (word) { if (line) { tmpLine = line + " " + word; tmpSvg = tmpRoot.text(0, 0, tmpLine); if (tmpSvg.node.getBoundingClientRect().width > width) { g.text(x, y, line); y = y + yDelta; linecount++; line = tmpLine = word; } else { line = line + " " + word; } tmpSvg.remove(); } else { line = word; } }); g.text(x, y, line); y = y + yDelta + attr["paragraph-‐spacing"]; linecount++; line = tmpLine = ""; }); tmpRoot.remove(); return g; };

Chrome Zoom 100% 150% 200%

snap.deck.js (function(window) { function
Deck(cardCount) { // ... this.svg = Snap("8.5in", (pageCount * 11) + "in") .attr({ id: "SnapDeck", style: "display: block;" }); this.pages = []; this.cards = []; // ... } snapdeck.deck = function (cards) { return new Deck(cards); }; window.SnapDeck = snapdeck; })(window);

Len Peralta’s Geek A Week

@hakanson Card •  Mimic look from the Geek
A Week series •  InformaDon and images from Twieer biography •  “More cool” than a business card

var s = Snap("460", "640")
.attr({ "viewBox": "0 0 63.5 88", "font-‐family":"sans-‐serif" }); SnapDeck.pinwheel(s, 31.75, 44, 55, 120, "firebrick", "maroon");

Pinwheel •  120 rays •  ﬁrebrick • 
maroon

Unit Circle

snapdeck.pinwheel = function (s, cx, cy, cr, count, background, foreground)
{ var c = s.circle(cx, cy, cr); c.attr({ "stroke-‐width": 0, "fill": background }); var deg = 360 / count; var offset = -‐deg / 2; for (var i = 0; i < count / 2; i++) { var start = "M " + cx + " " + cy; var rad = (2 * i * deg + offset) * (Math.PI / 180); var x = cx + (Math.cos(rad) * cr); var y = cy + (Math.sin(rad) * cr); var first = " L " + x + " " + y; rad = (2 * i * deg + deg + offset) * (Math.PI / 180); x = cx + (Math.cos(rad) * cr); y = cy + (Math.sin(rad) * cr); var second = " A " + cx + " " + cy + " 0 0 1 " + x + " " + y; s.path(start + first + second + " Z").attr({ "fill": foreground }); } return s; };

var s = Snap("460", "640")
.attr({ "viewBox": "0 0 63.5 88", "font-‐family":"sans-‐serif" }); SnapDeck.pinwheel(s, 31.75, 44, 55, 120, "firebrick", "maroon"); s.rect(3, 3, 57.5, 75, 0.5, 0.5) .attr({ "fill": "red" });

s.rect(56, 1.25, 6, 5.5, 0.5, 0.5) .attr({ "fill": "red"
}); s.rect(56.5, 2, 5, 4.25, 0.25, 0.25) .attr({ "fill": "black", "opacity": 0.85 }); s.rect(56.5, 1.75, 4.75, 4.25, 0.25, 0.25) .attr({ "fill": "yellow", "opacity": 0.9 }); s.text(59, 5, "#1").attr({ "text-‐anchor": "middle", "font-‐size": 3.5, "fill": "black", "font-‐weight": "bold" });

}); s.rect(56.5, 2, 5, 4.25, 0.25, 0.25) .attr({ "fill": "black", "opacity": 0.85 }); s.rect(56.5, 1.75, 4.75, 4.25, 0.25, 0.25) .attr({ "fill": "yellow", "opacity": 0.9 }); s.text(59, 5, "#1").attr({ "text-‐anchor": "middle", "font-‐size": 3.5, "fill": "black", "font-‐weight": "bold" }); s.image("images/Twitter_logo_blue.png", 6, 71, 14, 14);

}); s.rect(56.5, 2, 5, 4.25, 0.25, 0.25) .attr({ "fill": "black", "opacity": 0.85 }); s.rect(56.5, 1.75, 4.75, 4.25, 0.25, 0.25) .attr({ "fill": "yellow", "opacity": 0.9 }); s.text(59, 5, "#1").attr({ "text-‐anchor": "middle", "font-‐size": 3.5, "fill": "black", "font-‐weight": "bold" }); s.image("images/Twitter_logo_blue.png", 6, 71, 14, 14); s.text(60, 82, "Kevin Hakanson").attr({ "text-‐anchor": "end", "font-‐size": 4.5, "fill": "white", "font-‐weight": "bold" }); s.text(60, 86, "@hakanson") .attr({ "text-‐anchor": "end", "font-‐size": 3.5, "fill": "white" });

s.rect(11.5, 7.5, 40, 40, 0.5, 0.5) .attr({ "fill": "white"
}); s.image("images/hakanson.png", 12, 8, 39, 39);

}); s.image("images/hakanson.png", 12, 8, 39, 39); var bioAttr = { "text-‐anchor": "middle", "font-‐size": 2.75, "fill": "white" }; s.text(31.75, 52, "Software Architect at Thomson Reuters.") .attr(bioAttr); s.text(31.75, 56, "WestlawNext. Web Platform. JavaScript.") .attr(bioAttr); s.text(31.75, 60, "Agile Software Development.").attr(bioAttr); s.text(31.75, 64, "Information Security. Speaker.").attr(bioAttr); s.text(31.75, 68, "Creator @LicPlateZone").attr(bioAttr);

}); s.image("images/hakanson.png", 12, 8, 39, 39); var bioAttr = { "text-‐anchor": "middle", "font-‐size": 2.75, "fill": "white" }; s.text(31.75, 52, "Software Architect at Thomson Reuters.") .attr(bioAttr); s.text(31.75, 56, "WestlawNext. Web Platform. JavaScript.") .attr(bioAttr); s.text(31.75, 60, "Agile Software Development.").attr(bioAttr); s.text(31.75, 64, "Information Security. Speaker.").attr(bioAttr); s.text(31.75, 68, "Creator @LicPlateZone").attr(bioAttr); s.text(56, 74, "http://about.me/kevin.hakanson") .attr({ "font-‐size": 2.5, "text-‐anchor": "end", "fill": "lightskyblue" });

Evil Twins?

QuesDons?

Make your own Print & Play card game using SVG ...

Make your own Print & Play card game using SVG and JavaScript

More Decks by Kevin Hakanson

Other Decks in Technology

Featured

Transcript