golicons
Version:
446 lines (374 loc) • 12.6 kB
HTML
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-89445274-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-89445274-3');
</script>
<title>golicons</title>
<link href="/lib/prism.css" rel="stylesheet" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<template id='example-template'>
<div><strong>Code:</strong></div>
<pre><code class='listing language-markup'></code></pre>
<div><strong>Result:</strong></div>
<iframe class='iframe' ></iframe>
</template>
<template class='example' id='example-1'><!--<!doctype html>
<html lang='en'>
<head>
<meta charset="utf-8">
</head>
<body>
<div class='goli goli-glider'></div>
<script src='https://cdn.jsdelivr.net/npm/golicons@0.6.0/dist/golicons.min.js'></script>
<script>
golicons.start();
</script>
</body>
</html>--></template>
<template class='example' id='example-2'><!--<!doctype html>
<html lang='en'>
<head>
<meta charset="utf-8">
<style>
.goli {
width: 64px;
height: 64px;
clip-path: circle(40px at center);
}
.goli-live {
fill: SteelBlue;
stroke: SteelBlue;
transition-duration: 0.25s;
}
.goli-dead {
fill: Tomato;
stroke: Tomato;
transition-duration: 0.25s;
}
</style>
</head>
<body>
<div class='goli goli-glider goli-start-delay-ms-500 goli-tick-ms-250'></div>
<script src='https://cdn.jsdelivr.net/npm/golicons@0.6.0/dist/golicons.min.js'></script>
<script>
golicons.start();
</script>
</body>
</html>--></template>
<template class='example' id='example-3'><!--<!doctype html>
<html lang='en'>
<head>
<meta charset="utf-8">
<style>
.goli {
width: 128px;
height: 93px;
}
</style>
</head>
<body>
<div class='goli goli-my-awesome-tumbler goli-tick-ms-200'></div>
<script src='https://cdn.jsdelivr.net/npm/golicons@0.6.0/dist/golicons.min.js'></script>
<script>
const patternStr = `
...........
..O.....O..
.O.O...O.O.
.O..O.O..O.
...O...O...
...OO.OO...
...........
...........
`;
golicons.registerPattern('my-awesome-tumbler', patternStr);
golicons.start();
</script>
</body>
</html>--></template>
<style>
body {
/*background-color: #eeeeee;*/
}
.heading {
font-size: 50px;
text-align: center;
}
#table-of-contents {
margin-top: 20px;
font-size: 30px;
font-weight: bold;
}
#table-of-contents ul {
margin-top: 0px;
}
.list-2nd-level {
font-size: 20px;
}
/*
#table-of-contents a {
color: #111;
}
*/
.table-of-contents__header {
font-size: 40px;
font-weight: bold;
}
.content {
margin: 0 auto;
font-family: Courier New, monospace;
max-width: 900px;
color: #111;
}
.content p {
font-size: 18px;
line-height: 1.5;
}
iframe {
width: 100%;
height: 256px;
}
.examples {
display: flex;
flex-direction: row;
justify-content: center;
}
#goliconator-container {
width: 100%;
background-color: #dedede;
}
#goliconator {
width: 50%;
margin: 0 auto;
}
.goli-goliconator .goli-dead {
/*stroke: none;*/
}
.examples .goli {
width: 48px;
height: 48px;
margin: 10px;
}
#top-example-1 .goli-live {
fill: #da7376;
stroke: #da7376;
}
#top-example-1 .goli-dead {
fill: #78bc92;
stroke: #78bc92;
}
#top-example-2 .goli-live {
fill: #e18546;
stroke: #e18546;
}
#top-example-2 .goli-dead {
fill: #2d2d2d;
stroke: #2d2d2d;
}
#top-example-3 .goli-live {
fill: #62c2c2;
stroke: #62c2c2;
}
#top-example-3 .goli-dead {
fill: #f1bf53;
stroke: #f1bf53;
}
#top-example-4 .goli-live {
fill: #2d2d2d;
stroke: #2d2d2d;
}
#top-example-4 .goli-dead {
fill: #da7376;
stroke: #da7376;
}
.api-classname {
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class='content'>
<!--
<h1 class='heading' >GOLicons</h1>
-->
<div id='goliconator-container'>
<div id='goliconator' class='goli goli-goliconator goli-tick-ms-1000 goli-start-delay-ms-2000'></div>
</div>
<p>
<strong>golicons</strong> are SVG icons which are animated with
JavaScript to simulate
<a target='_blank'
href='https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life'>
Conway's Game of Life.
</a>
The code is open source (MIT) and available
<a target='_blank'
href='https://github.com/anderspitman/golicons'>
on GitHub.
</a>
</p>
<div class='examples'>
<div id='top-example-1' class='goli goli-blinker goli-tick-ms-500'></div>
<div id='top-example-2' class='goli goli-glider goli-tick-ms-500'></div>
<div id='top-example-3' class='goli goli-toad goli-tick-ms-500'></div>
<div id='top-example-4' class='goli goli-beacon goli-tick-ms-500'></div>
</div>
<div id='table-of-contents'>
<div class='table-of-contents__header'>Table of Contents</div>
<ul>
<li><a href='/#quickstart'>Quickstart</a></li>
<li><a href='/#other-examples'>Other examples</a></li>
<li>
<a href='/#api'>API</a>
<ul class='list-2nd-level'>
<li><a href='/#api-style-classnames'>Styling Class Names</a></li>
<li><a href='/#api-settings-classnames'>Settings Class Names</a></li>
<li><a href='/#api-javascript'>JavaScript</a></li>
</ul>
</li>
</ul>
</div>
<h1 id='quickstart'>Quickstart</h1>
<p>
Getting started is a piece of cake:
</p>
<div id='example-1-container'></div>
<h1 id='other-examples'>Other examples</h1>
<p>
It's working, but the result is rather ugly and boring. You can style
the icons using standard SVG CSS. There are also options that can be
configured using CSS classes on the elements. All of these class names
(listed below) are considered part of golicon's public API and can be
expected to remain stable for each major version. Let's try to add a
little CSS and configure a couple other options to make it more
exciting:
</p>
<div id='example-2-container'></div>
<p>
That's a bit better. You can play with a CodePen of this example
<a href='https://codepen.io/anon/pen/mGgZXO' target='_blank'>here.</a>
Chances are that you'll also want to use some of your own patterns
</p>
<div id='example-3-container'></div>
<h1 id='api'>API</h1>
<p>
golicons is designed to required as little JavaScript as possible.
This is done both to keep things as declarative as possible, and to
hopefully make it more approachable to designers. To that end, most of
the options can be accessed by setting CSS class names on your
golicons. All of the classes begin with 'goli-' to help avoid
collisions.
</p>
<h2 id='api-style-classnames'>Style Class Names</h2>
<p>
The style class names are used to change the visual representation of
the golicons. You can standard CSS selectors on these classes to
affect things.
</p>
<div class='api-classname'>goli-live</div>
<p>
This is used to select the SVG elements used to represent cells that
are alive.
</p>
<div class='api-classname'>goli-dead</div>
<p>
This is used to select the SVG elements used to represent cells that
are dead.
</p>
<h2 id='api-settings-classnames'>Settings Class Names</h2>
<p>
Settings class names are used to configure how the golicons JavaScript
code will process the golicon.
</p>
<div class='api-classname'>goli</div>
<p>
This has two primary purposes. The first is to indicate to the
golicons JavaScript code that this element should be processed as a
golicon. Therefore everyone golicon needs to have this class. The
second is to serve as a selector for setting HTML CSS rules such as
width and height on your golicons.
</p>
<div class='api-classname'>goli-tick-ms-<Number></div>
<p>
This sets the tick period in milliseconds for the golicons. For
example, the value "goli-tick-ms-1000" will cause the golicon to tick
(proceed to the next frame). once per second, while a value of
"goli-tick-ms-50" will cause it to tick every 50 milliseconds.
</p>
<div class='api-classname'>goli-start-delay-ms-<Number></div>
<p>
This sets how long in milliseconds the simulation should wait before
starting.
</p>
<h2 id='api-javascript'>JavaScript</h2>
<p>
The JS API is minimal by design. However, at the very least you need
to use it to kick things off.
</p>
<div class='api-classname'>golicons.start()</div>
<p>
This function kicks everything off. It runs querySelector on the page
and grabs an elements that have the "goli" class and processes them
as golicons.
</p>
<div class='api-classname'>golicons.registerPattern(name, patternString)</div>
<p>
This function is for registering new patterns. The pattern string is
a series of newline-separated rows where "0" represents a dead cell
and "1" represents a live one.
</p>
</div>
<!--
<script src='https://cdn.jsdelivr.net/npm/golicons@0.6.0/dist/golicons.min.js'></script>
-->
<script src='/dist/golicons.min.js'></script>
<script>
// poor man's templating engine. This allows me to use the templates
// in <head> as the source for both the syntax highlighted snippets and
// the iframe. This was the examples will always be running the code
// that is shown.
const exampleTemplates = document.getElementsByClassName('example');
const template = document.getElementById('example-template');
for (const example of exampleTemplates) {
const templateClone = document.importNode(template.content, true);
const id = example.id;
const listing = templateClone.querySelector('.listing');
const iframe = templateClone.querySelector('.iframe');
listing.innerHTML = example.innerHTML;
const stripped = example.innerHTML.slice(4, example.innerHTML.length - 3);
iframe.srcdoc = stripped;
const container = document.getElementById(id + '-container');
container.appendChild(templateClone);
}
const goliconsPattern = `
........................................
.OOOO.OOOO.O....OOO.OOOO.OOOO.O..O.OOOO.
.O..O.O..O.O.....O..O..O.O..O.OO.O.O....
.O....O..O.O.....O..O....O..O.OO.O.OOO..
.O.OO.O..O.O.....O..O....O..O.O.OO....O.
.O..O.O..O.O.....O..O..O.O..O.O.OO....O.
.OOOO.OOOO.OOOO.OOO.OOOO.OOOO.O..O.OOOO.
........................................
`;
const numRows = 8;
const numCols = 40;
const aspectRatio = numCols / numRows;
console.log(aspectRatio);
const goliconatorEl = document.getElementById('goliconator');
const dim = goliconatorEl.getBoundingClientRect();
console.log(dim);
goliconatorEl.style.height = ((1 / aspectRatio) * dim.width) + 'px';
golicons.registerPattern('goliconator', goliconsPattern);
golicons.start();
</script>
<!-- syntax highlighting -->
<script src='/lib/prism.js'></script>
</body>
</html>