Listing 19.13 - The Crypt with templates
JS Bin
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Crypt</title>
</head>
<body>
<h1>The Crypt</h1>
<div id="views">
<div id="place"></div>
<div id="player"></div>
</div>
<div id="messages"></div>
<div id="controls">
<input type="text" id="txtCommand">
<button id="btnCommand">Make it so</button>
</div>
<!-- Templates -->
<script type="text/x-template" id="itemTemplate">
<li>{{item}}</li>
</script>
<script type="text/x-template" id="playerTemplate">
<h3>{{name}}</h3>
<p>{{health}}</p>
<ol id="playerItems"></ol>
</script>
<script type="text/x-template" id="placeTemplate">
<h3>{{title}}</h3>
<p>{{description}}</p>
<div class="placePanel">
<h4>Items</h4>
<ol id="placeItems"></ol>
</div>
<div class="placePanel">
<h4>Exits</h4>
<ol id="placeExits"></ol>
</div>
</script>
<script type="text/x-template" id="messageTemplate">
<p>*** {{message}} ***</p>
</script>
<!-- Modules -->
<!-- gpwj.templates -->
<script src="http://output.jsbin.com/pugase.js"></script>
<!-- Place constructor -->
<script src="http://output.jsbin.com/vuwave.js"></script>
<!-- Player constructor -->
<script src="http://output.jsbin.com/nonari.js"></script>
<!-- player view -->
<script src="http://output.jsbin.com/suyona.js"></script>
<!-- place view -->
<script src="http://output.jsbin.com/yoquna.js"></script>
<!-- message view -->
<script src="http://output.jsbin.com/jojeyo.js"></script>
<!-- map data -->
<script src="http://output.jsbin.com/hozefe.js"></script>
<!-- map builder -->
<script src="http://output.jsbin.com/paqihi.js"></script>
<!-- game controller -->
<script src="http://output.jsbin.com/yeqicu.js"></script>
<!-- Web Page Controls -->
<script src="http://output.jsbin.com/qedubi.js"></script>
</body>
</html>
