Merge pull request #2 from lawwrr/demo

Bugfixes on test, added demo page
thenextweb · Feb 8, 2017 · c79771d · c79771d
2 parents d158583 + 4c5e066
commit c79771d
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # constellation
-Draws cute moving canvas constellations.
+Draws cute moving canvas constellations. [See it in action here!](https://lawwrr.github.io/constellation/)
 
 <p align="center">
   <img src="http://i.imgur.com/gLCMGoi.png">

diff --git a/docs/css.css b/docs/css.css
@@ -0,0 +1,60 @@
+@import url('https://fonts.googleapis.com/css?family=Pangolin');
+
+* {
+	margin: 0;
+	padding: 0;
+	-webkit-font-smoothing: antialiased;
+}
+body {
+	background: #000;
+	font-family: 'Pangolin', cursive;
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	bottom:0;
+	left:0;
+	right:0;
+}
+canvas {
+	background: linear-gradient(to bottom right,#450068,#2f0068);
+}
+.ct {
+	color: #fff;
+	position: fixed;
+	height: 4em;
+	width: 20em;
+	text-align: center;
+	margin: auto;
+	top: 0;
+	bottom:0;
+	left:0;
+	right:0;
+}
+
+.ct h1 {
+	font-size: 2rem;
+}
+
+.ct p {
+	font-size: .75rem;
+	opacity: .75;
+}
+
+.ct a {
+	display: inline-block;
+	color: #450068;
+	padding: .5em 1em;
+	border-radius: 99999em;
+	background: #fff;
+	font-size: 1rem;
+	margin-top: 2em;
+	text-decoration: none;
+	text-transform: uppercase;
+}
+
+.ct a:hover {
+	box-shadow: inset 0 0 0 2px #fff;
+	background: none;
+	color: #fff;
+}
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>Constellation</title>
+		<link rel="stylesheet" href="css.css" />
+		<script src="https://github.com/lawwrr/constellation/releases/download/v1.0.0/constellation.min.js"></script>
+	</head>
+	<body>
+		<div class="ct">
+			<h1>Constellation</h1>
+			<p>(cute animated constellations)</p>
+			<a href="https://github.com/lawwrr/constellation">Grab it!</a>
+		</div>
+		<canvas></canvas>
+		<script>
+			var constellationInstance = window.constellation({
+				size:[window.innerWidth,window.innerHeight],
+				canvas: document.querySelector('canvas'),
+				nodeSize: 2,
+				nodePadding: 1,
+				padding: [-100,-100],
+				nodesTotal: 100,
+				shipsTotal: 400,
+				fuzzyness: 100,
+				style: {
+					starColor: '#fff',
+					lineColor: 'rgba(255,255,255,.5)',
+					lineSize: .5,
+					starPadding: 0,
+					starSize: 2
+				}
+			});
+		</script>
+	</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "constelation-canvas",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "draws cute moving canvas constellations",
 
   "main": "src/app.js",

diff --git a/test/index.html b/test/index.html
@@ -4,7 +4,6 @@
 		<meta charset="utf-8">
 		<title>Constellation</title>
 		<link rel="stylesheet" href="css.css" />
-		<script src="../dist/constellation.js"></script>
 		<script src="../node_modules/mocha/mocha.js"></script>
 		<script>mocha.setup('bdd');</script>
 		<script src="test.js"></script>