-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
146 lines (140 loc) · 7.47 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#A08C4A">
<title>Path of Exile - Blight Helper</title>
<meta name="description" content="A helper for Path of Exile's Blight League.">
<meta property="og:title" content="Path of Exile - Blight Helper">
<meta property="og:description" content="A helper for Path of Exile's Blight League.">
<meta property="og:image" content="https://blight.raelys.com/img/oils/golden_oil.png">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
</head>
<body>
<div class="container-fluid" id="app">
<div class="row mt-3">
<div class="col-12 col-lg-5 col-xl-4 offset-xl-1">
<div class="d-flex flex-column align-items-center">
<div class="anointing px-3 py-2">
<h1 class="text-center">{{ _.capitalize(type) }} Anointing</h1>
<div class="d-flex justify-content-center my-3">
<img v-on:click="setType('amulet')" src="img/amulet.png" alt="Anoint Amulet" class="type-select"
:class="type === 'amulet' ? '' : 'faded'">
<img v-on:click="setType('ring')" src="img/ring.png" alt="Anoint Ring" class="type-select"
:class="type === 'ring' ? '' : 'faded'">
<img v-on:click="setType('map')" src="img/map.png" alt="Anoint Map" class="type-select"
:class="type === 'map' ? '' : 'faded'">
<img v-on:click="setType('ravaged')" src="img/ravaged.png" alt="Anoint Ravaged Map" class="type-select"
:class="type === 'ravaged' ? '' : 'faded'">
</div>
<div class="d-flex flex-wrap justify-content-center oil-select">
<div v-for="(oil, i) in combo" class="boxed">
<img v-on:click="removeOil(i)" :src="oil.image" :alt="oil.name" :title="oil.name"
data-toggle="tooltip" class="oil">
</div>
<div v-for="n in (maxOils - combo.length)" class="boxed"></div>
</div>
</div>
<div class="anointment mt-3 p-3 w-100">
<div v-if="anointment !== undefined">
<div>
<h3 class="name">
<img v-if="type === 'ring'":src="anointment.image" class="icon">
{{ isMapType() ? 'Blighted Map Modifiers' : anointment.name }}
</h3>
<p v-html="anointment.description" class="description mb-0"></p>
</div>
</div>
</div>
<div class="d-flex flex-wrap justify-content-center mx-xl-5">
<div v-for="oil in usableOils" class="boxed">
<img v-on:click="addOil(oil)" :src="oil.image" :alt="oil.name" class="oil"
:title="`<b>${oil.name}</b><br>Drop Level: ${oil.level}`" data-toggle="tooltip" data-html="true">
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-5 offset-lg-1 col-xl-6 mt-4 mt-lg-0 mx-auto">
<div class="d-flex align-items-center mb-2">
<input type="text" name="search" v-model="search" placeholder="Search by name or description..." class="flex-grow-1">
<button type="button" class="btn btn-sm ml-4" v-on:click="reset()">Reset All</button>
</div>
<p class="text-center mb-0">
Input your oils below to see which anointments are available (vendor recipe included.)
<br><i>Note: Prismatic Oil cannot actually be obtained by vendor recipe.</i>
</p>
<div class="my-oils d-flex flex-wrap justify-content-center">
<div v-for="(oil, i) in oils" class="d-flex flex-column align-items-center mt-2">
<label :for="`oil-${i}`">
<img :src="oil.image" :alt="oil.name" :title="oil.name" data-toggle="tooltip">
</label>
<input type="number" name="`oil-${i}`" min="0" max="999" :id="`oil-${i}`" v-model="myOils[i]"
onClick="this.select()">
</div>
</div>
<div class="tower-select d-flex flex-wrap justify-content-center" :class="type === 'ring' ? '' : 'hidden'">
<div v-for="group in _.chunk(towers, 3)">
<img v-for="tower in group" v-on:click="search = tower.name" :src="tower.image" class="icon"
:title="`<b>${tower.name}</b><br>${tower.description}`" data-toggle="tooltip" data-html="true">
</div>
</div>
<div class="table-data mt-3" :class="type === 'ring' ? 'short' : ''">
<anointments-table :anointments="anointments" :type="type" :search="search" :my-oils="myOils">
</div>
</div>
</div>
</div>
</body>
<footer>
<span>Created by Raelys (v3.25) — </span>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="20">
<rect width="30" height="20" fill="#005BBB"/>
<rect width="30" height="10" y="10" fill="#FFD500"/>
</svg>
<span>Слава Україні</span>
</div>
<a href="https://github.com/mattantonelli/poe-blight" target="_blank">
<img src="img/github.png" alt="https://github.com/mattantonelli/poe-blight" class="github">
</a>
</footer>
</html>
<script type="text/x-template" id="anointments-table">
<table class="table table-bordered table-sm mb-0">
<thead>
<tr>
<th scope="col" v-on:click="sortBy('name')" v-html="sortHeader('Name')"></th>
<th scope="col" v-on:click="sortBy('description')" v-html="sortHeader('Description')"></th>
<th scope="col" v-if="!isMapType()">Oils</th>
</tr>
</thead>
<tbody>
<tr v-for="anointment in searchResults">
<td class="name">
<div class="d-flex align-items-center h-100">
<img v-if="type !== 'amulet'" :src="anointment.image" class="icon mr-2">
<a href="#" @click.prevent="setCombo(anointment)">{{ anointment.name }}</a>
</div>
</td>
<td class="description" v-html="formatDescription(anointment)"></td>
<td class="oils" v-if="!isMapType()">
<img v-for="oil in anointment.combo" :src="oil.image" :alt="oil.name" :title="oil.name" data-toggle="tooltip">
</td>
</tr>
</tbody>
</table>
</script>
<script src="js/app.js"></script>