SkyrimAlchemyJS/index.html at main · codeSourc3/SkyrimAlchemyJS · 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
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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SkyrimAlchemyJS: Skyrim Alchemy Calculator</title>
    <meta name="title" content="SkyrimAlchemyJS: Skyrim Alchemy Calculator">
    <meta name="description" content="Skyrim Special Edition potion calculator web app.">
    <meta name="keywords" content="skyrim alchemy, skyrim alchemy calculator, skyrim alchemy potion calculator">
    <meta name="author" content="Enzo M.">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://codesourc3.github.io/SkyrimAlchemyJS/">
    <meta property="og:title" content="SkyrimAlchemyJS: Skyrim Alchemy Calculator">
    <meta property="og:description" content="Skyrim Special Edition potion calculator web app.">
    <meta property="og:image"
        content="https://codesourc3.github.io/SkyrimAlchemyJS/images/alchemyjs-social-media-image.png">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://codesourc3.github.io/SkyrimAlchemyJS/">
    <meta name="twitter:title" content="SkyrimAlchemyJS: Skyrim Alchemy Calculator">
    <meta name="twitter:description" content="Skyrim Special Edition potion calculator web app.">
    <meta name="twitter:image"
        content="https://codesourc3.github.io/SkyrimAlchemyJS/images/alchemyjs-social-media-image.png">
    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
    <link rel="icon" href="/images/maskable_icon_x48.png" sizes="48x48" type="image/png">
    <link rel="apple-touch-icon" href="/images/maskable_icon_x192.png">
    <meta name="theme-color" content="#90ee90">
</head>

<body class="grid-container">
    <header class="center-text">
        <h1>Skyrim Alchemy Calculator</h1>
    </header>
    <main>
        <dialog id="toast-new-version">
            <form method="dialog">
                <header>
                    <h4>An update is available!</h4>
                </header>
                <main>
                    <p>Click confirm to update and reload.</p>
                    <p>Any unsaved progress will be lost.</p>
                </main>
                <footer>
                    <menu>
                        <button id="new-version-cancel" type="button" value="cancel">Cancel</button>
                        <button id="new-version-confirm" type="submit" value="refresh">Refresh</button>
                    </menu>
                </footer>
            </form>
        </dialog>
        <dialog id="toast-offline-ready">
            <form method="dialog">
                <header>
                    <h4>Ready to work offline</h4>
                </header>
                <footer>
                    <menu>
                        <button type="submit" value='ok'>OK</button>
                    </menu>
                </footer>
            </form>
        </dialog>
        <!-- Search by ingredients, search by effect,
            filters out ingredients based off of said conditions -->
        <div id="selection-mediator">
            <article>
                <h2>Find Ingredients</h2>
                <form id="ingredient-filter" aria-controls="ingredient-list query-interpretation hit-count">
                    <h3>Filters</h3>
                    <fieldset>
                        <legend id="aria-by-effect">By Effect</legend>

                        <div class="form-group">
                            <label for="by-effect">Effect: </label>
                            <select id="by-effect" name="by-effect" aria-labelledby="aria-by-effect">
                                <option value="All" selected>All</option>
                                <option value="Cure Disease">Cure Disease</option>
                                <option value="Damage Health">Damage Health</option>
                                <option value="Damage Magicka">Damage Magicka</option>
                                <option value="Damage Magicka Regen">Damage Magicka Regen</option>
                                <option value="Damage Stamina">Damage Stamina</option>
                                <option value="Damage Stamina Regen">Damage Stamina Regen</option>
                                <option value="Fear">Fear</option>
                                <option value="Fortify Alteration">Fortify Alteration</option>
                                <option value="Fortify Barter">Fortify Barter</option>
                                <option value="Fortify Block">Fortify Block</option>
                                <option value="Fortify Carry Weight">Fortify Carry Weight</option>
                                <option value="Fortify Conjuration">Fortify Conjuration</option>
                                <option value="Fortify Destruction">Fortify Destruction</option>
                                <option value="Fortify Enchanting">Fortify Enchanting</option>
                                <option value="Fortify Health">Fortify Health</option>
                                <option value="Fortify Heavy Armor">Fortify Heavy Armor</option>
                                <option value="Fortify Illusion">Fortify Illusion</option>
                                <option value="Fortify Illusion Armor">Fortify Illusion Armor</option>
                                <option value="Fortify Lockpicking">Fortify Lockpicking</option>
                                <option value="Fortify Magicka">Fortify Magicka</option>
                                <option value="Fortify Marksman">Fortify Marksman</option>
                                <option value="Fortify One-handed">Fortify One-handed</option>
                                <option value="Fortify Pickpocket">Fortify Pickpocket</option>
                                <option value="Fortify Restoration">Fortify Restoration</option>
                                <option value="Fortify Smithing">Fortify Smithing</option>
                                <option value="Fortify Sneak">Fortify Sneak</option>
                                <option value="Fortify Stamina">Fortify Stamina</option>
                                <option value="Fortify Two-handed">Fortify Two-handed</option>
                                <option value="Frenzy">Frenzy</option>
                                <option value="Invisibility">Invisibility</option>
                                <option value="Lingering Damage Health">Lingering Damage Health</option>
                                <option value="Lingering Damage Magicka">Lingering Damage Magicka</option>
                                <option value="Lingering Damage Stamina">Lingering Damage Stamina</option>
                                <option value="Paralysis">Paralysis</option>
                                <option value="Ravage Health">Ravage Health</option>
                                <option value="Ravage Magicka">Ravage Magicka</option>
                                <option value="Ravage Stamina">Ravage Stamina</option>
                                <option value="Regenerate Health">Regenerate Health</option>
                                <option value="Regenerate Magicka">Regenerate Magicka</option>
                                <option value="Regenerate Stamina">Regenerate Stamina</option>
                                <option value="Resist Fire">Resist Fire</option>
                                <option value="Resist Frost">Resist Frost</option>
                                <option value="Resist Magic">Resist Magic</option>
                                <option value="Resist Poison">Resist Poison</option>
                                <option value="Resist Shock">Resist Shock</option>
                                <option value="Restore Health">Restore Health</option>
                                <option value="Restore Magicka">Restore Magicka</option>
                                <option value="Restore Stamina">Restore Stamina</option>
                                <option value="Slow">Slow</option>
                                <option value="Waterbreathing">Waterbreathing</option>
                                <option value="Weakness to Fire">Weakness to Fire</option>
                                <option value="Weakness to Frost">Weakness to Frost</option>
                                <option value="Weakness to Magic">Weakness to Magic</option>
                                <option value="Weakness to Poison">Weakness to Poison</option>
                                <option value="Weakness to Shock">Weakness to Shock</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="effect-sort-order">Order: </label>
                            <select name="effect-sort-order" id="effect-sort-order">
                                <option value="asc" selected>Asc</option>
                                <option value="desc">Desc</option>
                            </select>
                        </div>

                    </fieldset>
                    <fieldset>
                        <legend>By DLC</legend>

                        <div class="form-group">
                            <input type="checkbox" name="installed-dlc" id="dragonborn-dlc" value="Dragonborn" checked
                                aria-checked="true">
                            <label for="dragonborn-dlc">Dragonborn</label>
                        </div>

                        <div class="form-group">
                            <input type="checkbox" name="installed-dlc" id="dawnguard-dlc" value="Dawnguard" checked
                                aria-checked="true">
                            <label for="dawnguard-dlc">Dawnguard</label>
                        </div>

                        <div class="form-group">
                            <input type="checkbox" name="installed-dlc" id="hearthfire-dlc" value="Hearthfire" checked
                                aria-checked="true">
                            <label for="hearthfire-dlc">Hearthfire</label>
                        </div>
                    </fieldset>
                    <div class="form-controls">
                        <button class="cta-button" type="submit">Apply Filter</button>
                        <button type="reset">Reset Filter</button>
                    </div>
                </form>
                <dl>
                    <dt>Query Interpretation: </dt>
                    <dd><output class="search-stats" id="query-interpretation">Showing ingredients sharing "All", sorted by
                            asc, and part of Vanilla, Dragonborn, Dawnguard, and Healthfire</output></dd>
                    <dt>Number of Results: </dt>
                    <dd><output class="search-stats" id="hit-count"></output></dd>
                </dl>
                <section>
                    <h3>Possible Ingredients</h3>
                    <ol id="ingredient-list" aria-label="Ingredient List" aria-multiselectable="true" aria-sort="ascending"
                    role="listbox" tabindex="0" aria-controls="chosen-ingredients" aria-invalid="false" aria-errormessage="maxSelectionReachedErrMsg">
                    <!-- Filled on DOMContentLoaded -->
                    </ol>
                    <span id="maxSelectionReachedErrMsg" class="errormessage" role="alert">Error: You can only select up to 3 ingredients.</span>
                </section>
            </article>
            <!-- Could sort filtered ingredients by name, gold cost, etc. -->
            <section>
                <h2>Chosen Ingredients</h2>
                <ul id="chosen-ingredients">
                    <!-- Filled on user select -->
                </ul>
            </section>
        </div>
        <article>
            <h2>Mixing</h2>
            <form id="brew-potion" class="formgrid">

                <div class="form-group">
                    <label for="skill-level">Alchemy Skill: </label>
                    <input type="number" name="skill-level" id="skill-level" min="15" value="15" max="100">
                </div>

                <div class="form-group">
                    <label for="alchemist-perk">Alchemist: </label>
                    <select name="alchemist-perk" id="alchemist-perk">
                        <option value="0" selected>0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="physician-perk">Physician: </label>
                    <input type="checkbox" name="physician-perk" id="physician-perk">
                </div>

                <div class="form-group">
                    <label for="benefactor-perk">Benefactor: </label>
                    <input type="checkbox" name="benefactor-perk" id="benefactor-perk">
                </div>

                <div class="form-group">
                    <label for="poisoner-perk">Poisoner: </label>
                    <input type="checkbox" name="poisoner-perk" id="poisoner-perk">
                </div>

                <div class="form-group">
                    <label for="fortify-alchemy">Fortify Alchemy: </label>
                    <input type="number" name="fortify-alchemy" id="fortify-alchemy" min="0" value="0">
                </div>


                <div class="form-controls">
                    <button class="cta-button" type="submit">Mix</button>
                    <button type="reset">Reset Perks</button>
                </div>
            </form>
            <section>
                <h3>Results</h3>
                <!-- Should display possible potions from the 2-3 ingredients
                    selected. Potions with 3 ingredient potions being appended first,
                 then each successful 2-ingredient potion after that.
                -->
                <ol id="possible-potions" class="center-text">
                    <li>
                        <p>Choose two to three ingredients.</p>
                    </li>
                </ol>
            </section>
        </article>
    </main>
    <footer class="center-text">
        <p>Created by Enzo M.</p>
        <p>Link to <a href="https://github.com/codeSourc3/SkyrimAlchemyJS">Github</a></p>
    </footer>
    <script type="module" src="./scripts/main.js">
    </script>
</body>

</html>