-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathbrowser.html
81 lines (71 loc) · 2.7 KB
/
browser.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
<html>
<head>
<title>n0minal's Interior Browser Tool</title>
<link rel="stylesheet" href="./fonts/RobotoCondensed-Light.css">
<link rel="stylesheet" href="./browser.css">
</head>
<body>
<div id="app-ibrowser">
<div class="wrapper">
<div class="header">
<h1 class="brand">Interior Browser Tool</h1>
<button class="btn-close" @click="close()">close (X)</button>
</div>
<div class="accordion" v-for="key in keys">
<div class="accordion-header" v-if="!active_key.length || active_key === key">
<span>{{key}}</span>
<button class="btn-expand" @click="expand(key)">{{ active_key === key ? "< BACK" : "OPEN >"}}</button>
</div>
<div class="accordion-body" v-if="active_key === key">
<ul>
<li v-for="i in interiors">
<span>{{i.name}}</span>
<button class="btn-enter" @click="join(i)">ENTER</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="./vue.min.js"></script>
<script type="text/javascript" src="./interiors.js"></script>
<script>
let ibrowser = new Vue({
el: "#app-ibrowser",
data: {
keys: [],
interiors: [],
active_key: ""
},
created: function () {
groups.map((group) => {
Object.keys(group).forEach((key) => {
this.keys.push(key);
});
})
},
methods: {
expand(key) {
if(this.active_key === key) return this.active_key = "";
groups.map((group) => {
Object.keys(group).forEach((g) => {
if(key === g) {
this.interiors.pop();
this.interiors = group[key];
}
});
});
return this.active_key = key;
},
join(interior) {
console.log(`Entering in interior: ${JSON.stringify(interior)}`);
mp.trigger('enterInterior', JSON.stringify(interior));
},
close() {
mp.trigger('closeBrowser');
}
}
});
</script>
</body>
</html>