-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgame.html
127 lines (109 loc) · 5.58 KB
/
game.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="game.js"> </script>
<script src="https://kit.fontawesome.com/7945e6ddb0.js" crossorigin="anonymous"></script>
<title> Text-based adventure </title>
</head>
<body>
<div class="container">
<!-- Top row -->
<div class="row mt-4">
<!-- Time slot -->
<div class="col-sm-3 mr-4">
   
<i class="fas fa-clock" style="font-size:35px"></i>
<h4>   <span id="time">6</span>:00 </h4>
</div>
<!-- status slot -->
<div class="col-sm-8 p-3">
<i class="fas fa-heart" style="font-size:25px" data-toggle="tooltip" title="Health">: <span id="health"> 10 </span> </i>
<i class="fas fa-hamburger" style="font-size:25px; margin:10px" data-toggle="tooltip" title="Food">: <span id="food">20</span> </i>
<i class="fas fa-tint" style="font-size:25px" data-toggle="tooltip" title="Water">: <span id="water">20</span> </i>
<i class="fas fa-smile" style="font-size:25px;" data-toggle="tooltip" title="Mood">: <span id="mood">20</span></i>
</div>
</div>
<!-- Middle row -->
<div class="row mt-4">
<!-- inventory slot -->
<div class="col-sm-3 mr-4 p-5">
<h4> Inventory </h4>
</br>
<i class="fas fa-tree" style="font-size:30px" data-toggle="tooltip" title="Wood">   <span id="wood">20</span></i>
</br>
</br>
<i class="fas fa-cogs" style="font-size:30px" data-toggle="tooltip" title="Components">   <span id="components"> 20 </span></i>
</br>
</br>
<i class="fas fa-hand-holding-water" style="font-size:31px" data-toggle="tooltip" title="Stored water">  <span id="Water_supply"> 0 </span></i>
</br>
</br>
<i class="fas fa-bread-slice" style="font-size:29px" data-toggle="tooltip" title="Raw Food">   <span id="raw_food"> 0 </span></i>
</div>
<!-- game text slot -->
<div class="col-sm-8">
<textarea id="gametext" rows="20" cols="65"></textarea>
</div>
</div>
<!-- Bottom row for buttons -->
<div class="row mt-4">
<!-- static crafting button -->
<div class="col-sm-3 mr-4">
<button id="craft" type="button" class="btn btn-outline-warning mr-5" style="width:150px" data-toggle="modal" data-target="#CraftingModal">Craft</button>
</div>
<!-- dynamic story buttons -->
<div class="col-sm-8 pl-5" id= "buttons">
<button id="scavenge_wood" type="button" class="btn btn-outline-secondary mr-5">Collect Wood</button>
<button id ="scavenge_components" type="button" class="btn btn-outline-secondary mr-5">Scavenge Components</button>
<button id="leave_shelter" type="button" class="btn btn-outline-secondary mr-5">Leave shelter</button>
<button style="display:none" id="go_back" type="button" class="btn btn-outline-secondary mr-5">Go back</button>
<button style="display:none" id="find_food" type="button" class="btn btn-outline-secondary mr-5">Search for food</button>
<button style="display:none" id="find_water" type="button" class="btn btn-outline-secondary mr-5">Search for water source</button>
<button style="display:none" id="explore_woods" type="button" class="btn btn-outline-secondary mr-5">Explore the woods</button>
<button style="display:none" id="sleep" type="button" class="btn btn-outline-secondary mr-5">Go to sleep</button>
<button style="display:none" id="hunt" type="button" class="btn btn-outline-secondary mr-5">Hunt</button>
<button style="display:none" id="plant_matter" type="button" class="btn btn-outline-secondary mr-5">Gather plant matter</button>
<button style="display:none" id="drink_river" type="button" class="btn btn-outline-secondary mr-5">Drink from the river</button>
<button style="display:none" id="collect_river" type="button" class="btn btn-outline-secondary mr-5">Fill barrel</button>
</div>
</div>
</div>
<!-- The Modal -->
<div class="modal fade" id="CraftingModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Crafting Menu</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
<div class="col-sm-3">
<img src="Images/fire.jpg" id="firebutton" width="100" height="50">
</div>
<div class="col-sm-3 ml-2">
<img src="Images/fire.jpg" width="100" height="50">
</div>
<div class="col-sm-3 ml-2">
<img src="Images/fire.jpg" width="100" height="50">
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>