diff options
| author | group1 <f16_group1@pbridge.adm.cs.cmu.edu> | 2016-10-09 14:45:03 -0400 |
|---|---|---|
| committer | group1 <f16_group1@pbridge.adm.cs.cmu.edu> | 2016-10-09 14:45:03 -0400 |
| commit | dfe1127addf7e31acd63e87db0a5d5e35628ea67 (patch) | |
| tree | 101526e338590ba0980ff1809a8338cd12b50b4e /webapp/app/templates/index.html | |
| parent | dd7dd93d9e1ee2e0095f0fa403a499b69aa289a8 (diff) | |
| download | bridge-dfe1127addf7e31acd63e87db0a5d5e35628ea67.tar.zst | |
Add twinkle
Diffstat (limited to 'webapp/app/templates/index.html')
| -rw-r--r-- | webapp/app/templates/index.html | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/webapp/app/templates/index.html b/webapp/app/templates/index.html new file mode 100644 index 0000000..b0d9bb3 --- /dev/null +++ b/webapp/app/templates/index.html @@ -0,0 +1,55 @@ +<html> + <head> + <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script> + <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script> + + <script> + var SPAWN_URL = "/spawn"; + + function creature(name, socket) { + var self = this; + self.name = name; + self.socket = socket; + + self.render = function($parent) { + var $a = $('<a>'); + $a.text(self.name); + $a.click(self.click.bind(self)); + + var $li = $('<li>'); + $li.append($a); + $parent.append($li); + }; + + self.click = function() { + self.socket.emit('spawn', {name:self.name}); + } + } + + $(document).ready(function() { + var namespace = '/spawn'; + var socket = io.connect('http://' + document.domain + ':' + location.port + namespace); + + socket.on('connect', function() { + console.log('connected!'); + }); + + socket.on('new creature', function(msg) { + console.log('new!'); + var c = new creature(msg.name, socket); + c.render($('#creatures')); + }); + + socket.on('disconnect', function() { + console.log('disconnected'); + }); + }); + + </script> + <title>{{ title }}</title> + </head> + <body> + <h1>Ocean Fun Times</h1> + <ul id="creatures"></ul> + </body> +</html> |