syndicate-lang
/
syndicate-2017
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

crazy mikes eve example

This commit is contained in:
Sam Caldwell 2017-03-23 14:22:41 -04:00
parent d4f95d3a7b
commit c15b75ecae
3 changed files with 221 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
js/examples/eve/crazy-mikes/index.html Normal file
View File

@ -0,0 +1,70 @@
<!doctype html>
<html>
<head>
<title>Crazy Mike's</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script>
<script src="../../../third-party/jquery-2.2.0.min.js"></script>
<script src="../../../dist/syndicatecompiler.js"></script>
<script src="../../../dist/syndicate.js"></script>
<script type="text/syndicate-js" src="index.js"></script>
</head>
<body>
<div class="app-wrapper">
<div class="hero-image"></div>
<div class="nav-bar" id="nav-bar">
<template id="nav-bar-btn">
<div id="nav-btn-{{order}}" class="nav-btn">{{name}}</div>
</template>
</div>
<div id="page-contents">
<template id="home-contents">
<p>
Located on the scenic Pulaski Highway in East Baltimore,
Crazy Mike's has the region's best selection of used electronics,
and our prices are INSANE!
</p>
<p>
Hours: Tue-Sat 2pm-4am
</p>
<p>
Contact: (410) 768-7000, Ask for Mike
</p>
</template>
<template id="computers-contents">
<p>Need to compute things? We can help.</p>
<div class="computer pic"></div>
<p>
One of our many fine products, this War Operations Plan Response
supercomputer was repossessed from the US Dept. of Defense in 1984.
Comes with classic games such as chess, checkers, backgammon, poker,
tic-tac-toe, and Global Thermonuclear War, though it has been known
not to play. Open box, comes as-is. Strict no return policy.
</p>
</template>
<template id="televisions-contents">
<p>This is where the TVs live - get you one!</p>
<div class="tv pic"></div>
<p>
Forget the internet, this baby is the real series of tubes. Perfect
for your LaserDisc collection.
</p>
</template>
<template id="stereos-contents">
<p>The hottest audio equipment in town!</p>
<div class="radio pic"></div>
<p>
New stock arriving daily, priced to move.
</p>
</template>
</div>
</div>
<hr>
<div>
<pre id="ds-state"></pre>
</div>
</body>
</html>

73
js/examples/eve/crazy-mikes/index.js Normal file
View File

@ -0,0 +1,73 @@
assertion type page(name, order);
assertion type currentPage(name);
function spawnNavBar(defaultPage) {
spawn {
field this.currentPage = defaultPage;
assert currentPage(this.currentPage);
on message Syndicate.UI.globalEvent('.nav-btn', 'click', $e) {
// INVARIANT: the text content of each nav bar button is the page name
this.currentPage = e.originalTarget.textContent;
}
}
}
// It seems conceivable that a transition between pages (currentPage changing)
// could see a 'glitch' where both the previous and the next page are asserting
// '#page-contents'.
//
// This does not seem to manifest with the current scheduling. There's also the
// possiblity that it *is* happening and my feeble human perception cannot
// detect it. Or, perhaps, there is something I am missing and there is some
// reason the glitch does not happen.
function spawnPage(pg) {
spawn {
this.ui = new Syndicate.UI.Anchor();
this.ctx = this.ui.context(pg.name);
assert this.ctx.html('#nav-bar', Mustache.render($('#nav-bar-btn').html(), {name: pg.name}), pg.order);
during currentPage(pg.name) {
assert this.ui.html('#page-contents', pg.contents);
}
}
}
var homePage = {
name: "Home",
order: 1,
contents: Mustache.render($('#home-contents').html())
};
var computersPage = {
name: "Computers",
order: 2,
contents: Mustache.render($('#computers-contents').html())
};
var televisionsPage = {
name: "Televisions",
order: 3,
contents: Mustache.render($('#televisions-contents').html())
};
var stereosPage = {
name: "Stereos",
order: 4,
contents: Mustache.render($('#stereos-contents').html())
};
var pages = [homePage, computersPage, televisionsPage, stereosPage];
var defaultPage = homePage.name;
$(document).ready(function () {
ground dataspace G {
Syndicate.UI.spawnUIDriver();
spawnNavBar(defaultPage);
pages.forEach(spawnPage);
}
// debugging
G.dataspace.setOnStateChange(function (mux, patch) {
$("#ds-state").text(Syndicate.prettyTrie(mux.routingTable));
});
});

78
js/examples/eve/crazy-mikes/style.css Normal file
View File

@ -0,0 +1,78 @@
.app-wrapper {
display: flex;
flex-direction: column;
/* position: absolute; */
align-self: center;
width: 432px;
height: 768px;
overflow-y: auto;
background: #fff;
}
.hero-image {
height: 300px;
background-image: url(http://i.imgur.com/L8suaDZ.jpg);
background-size: cover;
}
.nav-bar {
display: flex;
flex-direction: row;
width: 100%;
height: 50px;
align-items: center;
}
.nav-btn {
flex: 1;
text-align: center;
background: #404040;
line-height: 50px;
color: #fff;
user-select: none;
cursor: pointer;
}
.main-page {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
background: ;
}
.main-page h1 {
margin: 10px 0px;
font-size: 26px;
}
.main-page p {
margin: 5px 25px;
font-size: 16px;
text-align: center;
}
.pic {
margin: 20px 0px;
}
.computer {
height: 150px;
width: 320px;
background: url(http://i.imgur.com/2EbQYGA.jpg) center no-repeat;
background-size: cover;
}
.tv {
height: 250px;
width: 320px;
background: url(http://i.imgur.com/0kD08WU.jpg) center no-repeat;
background-size: cover;
}
.radio {
height: 250px;
width: 320px;
background: url(http://i.imgur.com/rs1NW31.jpg) center no-repeat;
background-size: cover;
}