forked from ku-eecs-capstone/lab2
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
171 lines (161 loc) · 6.18 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<html>
<body style="text-align: center;">
<font size=4><div id="where"></div></font>
<img id="picture" src="">
<font size=3><div id="what"></div></font>
<font size=3><div id="inventory"></div></font>
<font size=3><div id="next"></div></font>
<font size=3><div id="otherUsers"></div></font>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function() {
io = io.connect();
$("#where").html("booting...");
var me = {};
/*
* SUMMARY: Initial get method to get all the information about myself.
* The server will create a cookie for me if the user does not have one.
*/
$.get("/me", function(res) {
me = res;
join_room(me.roomid);
populateOtherUsers();
populateMyInventory();
populateCampusLocation();
});
/*
* SUMMARY: Event sent from the server that means this room has change, and we should update.
*/
io.on('myroom', function(data){
$.get("/me", function(res){
me = res;
populateOtherUsers();
populateMyInventory();
populateCampusLocation();
});
});
/*
* SUMMARY: Will send an event to the server letting it know that this users is joining a room.
*/
function join_room(room_name){
io.emit('join-room', {'room': room_name, 'userid': me.userid});
}
/*
* SUMMARY: Will do all the dirty work to get the other users to display on the webpage.
* Will display identifer starting at 0 of each user and their items.
* Will also have buttons to steal their items.
*/
function populateOtherUsers(){
$("#otherUsers").html("");
$.get("/otherUsers", function(other_users){
for(var i in other_users){
div = $("<div></div>");
label = $("<label/>");
label.text("User: " + i + " ");
div.append(label);
var userItems = other_users[i].inventory;
if(userItems != undefined && userItems.length != 0){
for(var j in userItems) {
button2 = $("<button/>");
button2.text("Steal: " + userItems[j]);
(function(button, myid, otherid, item) {
button.click(function() {
$.ajax("/" + me.roomid + "/" + item + "/" + otherid + "/" + myid,
{ success : updateRoomEvent
, type : "DELETE"
}
);
});
})(button2, me.userid, other_users[i].userid, userItems[j]);
div.append(button2);
}
}
$("#otherUsers").append(div);
}
})
}
/*
* SUMMARY: Will do all the dirty work to populate this users' inventory.
* Will display buttons to be able to drop the items.
*/
function populateMyInventory(){
$.get("/my-inventory",function (data) {
if (data == undefined || data.length == 0) {
$("#inventory").html("You are not carrying anything");
}
else {
$("#inventory").html("You are carrying: ");
for(var i in data) {
var item = data[i];
$("#inventory").append(item);
button = $("<button/>");
button.text("Drop " + item);
(function(button,where,item) {
button.click(function() {
$.ajax("/drop/" + item,
{ success : updateRoomEvent
, type : "PUT"
}
);
});
})(button,where,item);
$("#inventory").append(button);
}
}
});
}
/*
* SUMMARY: Will handle all the dirty work to populate the campus' information
* Will handle changing the picture, text, and items on ground.
*/
function populateCampusLocation(){
$.get("/" + me.roomid, function (data) {
$("#where").html(data.text);
$("#picture").attr("src","images/" + data.where);
if (data.what == undefined || data.what.length == 0) {
$("#what").html("");
}
else {
$("#what").html("You can see: ");
for(var i in data.what) {
var item = data.what[i];
$("#what").append(item);
button = $("<button/>");
button.text("Take " + item);
(function(button,where,item) {
button.click(function() {
$.ajax("/" + me.roomid + "/" + item,
{ success : updateRoomEvent
, type : "DELETE"
}
);
});
})(button,where,item);
$("#what").append(button);
}
}
$("#next").html("");
for(var i in data.next) {
button = $("<button/>");
button.text("Go " + i);
(function(button,dest) {
button.click(function() {
join_room(dest);
});
})(button,data.next[i]);
$("#next").append(button);
}
});
}
/*
* SUMMARY: Whenever a button is click, this function will get called notifying the server that this room has changed.
* This will allow the server to send signals to all clients within this room to update the page.
*/
function updateRoomEvent(){
io.emit('room-change', {'room': me.roomid});
}
});
</script>
</body>
</html>