lab2/index.html at master · GMSteuart/lab2 · GitHub

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
<html>
<head>
    <!-- Twitter Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- Custom styles for this template -->
    <link href="http://view-source:getbootstrap.com/examples/cover/cover.css" rel="stylesheet">

    <title>Adventure Game</title>
</head>
<body>
<div class="site-wrapper container">

    <div class="site-wrapper-inner">

        <div class="cover-container">

            <div class="masthead clearfix">
                <div class="inner">
                    <h3 class="masthead-brand">Adventure Game</h3>
                </div>
            </div>

            <div class="inner cover">

                <h1 class="cover-heading" id="name">Cover your page.</h1>
                <img id="img" src="">
                    <hr>
                <div class="btn-group" id="items"></div>

                <font size=3><div id="name"></div></font>
                <font size=3><div id="inventory"></div></font>
                <hr>
                <font size=3><div id="next" class="btn-group"></div></font>
                <hr>
            </div>

            <form action="/users/logout">
                <input type="submit" value="Logout" class="btn btn-default">
            </form>

            <footer class="footer">
                <div class="inner">
                    <p>Created in EECS 581</p>
                </div>
            </footer>

        </div>

    </div>

</div>


<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
    $(function() {
        $("#name").html("booting...");

        var directions = ['north', 'east', 'south', 'west'];

        function refresh() {
            // get user location and items
            $.get('/users', function (user) {

                // get location information
                $.get("/location/" + user.location_id, function (location) {

                    // update the name text
                    $("#name").html(location.name);

                    // update the image
                    $("#img").attr("src","/img/" + location.img);

                    // Output items
                    $("#items").html("");
                    for(var i in user.items) {
                        var item = user.items[i];

                        // Check put
                        if(item.location_id == 0) {
                            button = $("<button class='btn btn-default'/>");
                            button.text("Drop " + item.name);
                            (function(button, user_item_id, location_id, item_id) {
                                button.click(function() {
                                    $.ajax("/inventory/" + user_item_id + "/" + location_id + "/" + item_id,{
                                        success : refresh,
                                        type : "PUT"
                                    });
                                    refresh();
                                });
                            })(button, item.id, location.id, item.item_id);
                            $("#items").append(button);

                        // Check take (only if item is at current location)
                        } else if(item.location_id == location.id) {
                            button = $("<button class='btn btn-default'/>");
                            button.text("Take " + item.name);
                            (function(button, user_item_id) {
                                button.click(function() {
                                    $.ajax("/inventory/" + user_item_id,{
                                        success : refresh,
                                        type : "DELETE"
                                    });
                                    refresh();
                                });
                            })(button, item.id);
                            $("#items").append(button);
                        }
                    }

                    // Empty out the next buttons
                    $("#next").html("");

                    // Create the direction buttons
                    for(var i in directions) {
                        if(location[directions[i]]) {
                            button = $("<button class='btn btn-default'/>");
                            button.text("Go " + directions[i]);
                            (function(button,dest) {
                                button.click(function() {
                                    $.ajax("/location/" + dest, {
                                        success : refresh,
                                        type : "POST"
                                    });
                                    refresh();
                                });
                            })(button,location[directions[i]]);
                            $("#next").append(button);
                        }
                    }
                });
            });
        }

        refresh();

    });
</script>

<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</body>
</html>