📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
{
let view = html`
<section>
<header>
<!-- <h2>Canvas Quest</h2> -->
</header>
<main>
${panels}
</main>
<footer>
<a href="mailto:triptych@gmail.com">By Andrew Wooldridge</a>
${imageStore}
</footer>
</section>
`
yield view;
}
html`<hr/>`
md`## Components`
styles = {
yield html`
<style>
.sliding {
animation-name: bgslide;
animation-duration: 300s;
animation-iteration-count: infinite;
}
@keyframes bgslide {
from {
background-position: 0px 0px;
animation-timing-function: linear;
}
25% {
background-position: -1000px 1000px;
animation-timing-function: linear;
}
50% {
background-position: 0px 0px;
animation-timing-function: linear;
}
75% {
background-position: 1000px -1000px;
animation-timing-function: linear;
}
to {
background-position: 0px 0px;
animation-timing-function: linear;
}
}
.hovering {
animation-name: wiggle;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.throbbing {
animation-name: throb;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes wiggle {
from {
transform: rotate(0deg) ;
}
33%{
transform: rotate(10deg) ;
}
66% {
transform: rotate(-10deg) ;
}
to {
transform: rotate(0deg) ;
}
}
@keyframes throb {
from { transform: scale(1); }
33% { transform: scale(1.2); }
66% { transform: scale(1.2); }
to { transform: scale(1); }
}
.colorcycle {
animation-name: colorcycle;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@keyframes colorcycle {
0% { color: red;}
20% { color: green;}
40% { color: orange;}
60% { color: purple;}
80% { color: yellow;}
100% { color: blue; }
}
section {
height: 400px;
width: 320px;
margin: 0px auto;
overflow: hidden;
background-color: #000000;
background-image: url("${await FileAttachment("beachy.gif").url()}");
border: 1px solid #1f1f1f;
-moz-box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;
}
section ul {
display: block;
position: relative;
overflow: hidden;
height: 400px;
width: 320px;
}
section ul .panel {
position: absolute;
top:0px;
left: 0px;
height: 400px;
width: 320px;
overflow: hidden;
}
section ul li.hide{
left: -400px;
top: 0px;
}
#splash .menu {
padding-top: 100px;
text-align: center;
}
#splash {
xpadding-top: 100px;
background: url("${await FileAttachment("indian-summer.gif").url()}");
font-family: Verdana, Arial, sans-serif;
}
.poptxt {
text-shadow: 2px 2px 2px black;
font-size: .6em;
color: red;
font-family: 'VT323',serif;
}
#info, #saveload, #yerded, #storyline, #store {
background-color: rgba(0,0,085, .8);
font-size: 1em;
font-family: Verdana, Arial,sans-serfi;
color: #FFF;
text-shadow: 2px 2px 2px #000;
}
#store p {
padding-top: 30px;
padding-bottom: 20px;
}
#store ul {
padding-top: 24px;
}
#storyline .storywords {
height: 50%;
overflow: auto;
}
#storyline .storychar {
display: none;
}
#yerded p {
height: 50%;
padding: 10px;
}
#info .infotext, #saveload p {
padding-top: 20px;
padding-left: 6px;
padding-right: 6px;
}
#info .infotext {
height: 300px;
width: 300px;
overflow: auto;
text-align: left;
}
#info .infotext em {
font-weight: bold;
color: tan;
display: block;
}
#info .infotext p {
padding-bottom: 4px;
border-bottom: 2px solid #333333;
}
#saveload .actions div {
padding: 4px;
}
#stage .stagetitle{
display: none;
}
#stage.loading .stagetitle{
background-color: rgba(0,0,0,.5);
font-family: Verdana, Arial, sans-serif;
position: absolute;
top: 0px;
left: 0px;
width: 320px;
height: 400px;
display: block;
}
#stage.loading .stagetitle em {
text-align: center;
position: relative;
top: 50%;
xleft: 400px;
color: #008000;
font-size: 1.1em;
text-shadow: -1px -1px 1px #FFF, 1px 1px 1px #000;
}
main h1 {
font-family: 'IM Fell English', serif;
color:#3399CC;
text-shadow: 1px 1px #FFFFFF;
font-size: 3em;
padding-top: 100px;
}
</style>
`
}
panels = {
yield html`
<ul>
<li class="panel" id="splash">
<h1 class="colorcycle">Canvas Quest</h1>
<h2>Created by Andrew Wooldridge</h2>
<div class="menu">
<a class="awesome huge drkblue button" id="startgame">Start</a>
</div>
</li>
<li class="panel hide loading" id="stage">
<div class="stagetitle"><em>StageTitle</em></div>
<canvas id="screen" height="400" width="320">
You need a browser that supports canvas to play this.
</canvas>
</li>
<li class="panel hide" id="info">
info
</li>
<li class="panel hide" id="saveload">
<p>Continue or Start Anew your Quest!</p>
<div class="actions">
<div><a class="awesome huge blue button" id="newgame">New</a></div>
<div><a class="awesome huge orange button" id="loadgame">Load</a></div>
<div><a class="awesome huge red button" id="savegame">Save</a></div>
<div><a class="awesome huge purple button" id="quitgame">Quit</a></div>
</div>
</li>
<li class="panel hide" id="storyline">
storyline
</li>
<li class="panel hide" id="yerded">
yerded
</li>
<li class="panel hide" id="store">
store
</li>
</ul>
`
}
imageStore = {
yield html`
<style>
#imgstore{
display: none;
}
</style>
<div id="imgstore">
<img id="logo" src="${await FileAttachment("logo2.png").url()}" />
<img id="uniques" src="${await FileAttachment("dg_uniques32.png").url()}" />
<img id="dungeon" src="${await FileAttachment("dg_dungeon32.png").url()}" />
<img id="features" src="${await FileAttachment("dg_features.png").url()}" />
<img id="misc" src="${await FileAttachment("dg_misc.png").url()}" />
<img id="food" src="${await FileAttachment("dg_food32.png").url()}" />
<img id="edging2" src="${await FileAttachment("dg_edging232.gif").url()}" />
<img id="edging1" src="${await FileAttachment("dg_edging132.gif").url()}" />
<img id="monster1" src="${await FileAttachment("dg_monster132.png").url()}" />
<img id="monster2" src="${await FileAttachment("dg_monster232.png").url()}" />
<img id="monster3" src="${await FileAttachment("dg_monster332.png").url()}" />
<img id="monster4" src="${await FileAttachment("dg_monster432.png").url()}" />
<img id="monster5" src="${await FileAttachment("dg_monster532.png").url()}" />
<img id="monster6" src="${await FileAttachment("dg_monster632.png").url()}" />
<img id="monster7" src="${await FileAttachment("dg_monster732.png").url()}" />
<img id="grounds3" src="${await FileAttachment("dg_grounds32.gif").url()}" />
<img id="townactions" src="${await FileAttachment("townactions.png").url()}" />
<img id="extra1" src="${await FileAttachment("dg_extra132.gif").url()}" />
</div>`
}
md`## Credits
* beachy.gif and indian-summer.gif from [Dinpattern](http://dinpattern.com)
* PressStartK font from http://cooltext.com/Download-Font-Press+Start originally created by:
[codeman38 | cody@zone38.net | http://www.zone38.net/]
* RPG Tile images from http://pousse.rapiere.free.fr/tome/ Created by David E. Gervais
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
