-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathsettings.html
173 lines (163 loc) · 11.7 KB
/
settings.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
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
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/png" href="./favicon.ico"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<link rel="stylesheet" type="text/css" href="css/guide.css"/>
<script src="https://valarnin.github.io/oblivion-save-reader/dist/bundle.savefile.js" defer></script>
<script src="https://valarnin.github.io/oblivion-save-reader/dist/bundle.record.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings — Interactive Oblivion Checklist</title>
</head>
<body>
<!-- begin topbar-->
<div id="topbar" class="topbar">
<nav id="topbarNav" class="topbarNav">
<div class="topbarSection icon leftBorder">
<a href="https://prclive.run/"><img src="./images/prcbanner.png" style="width: 90px;"></a>
<div class="topbarSublist">
<a href="https://www.twitch.tv/prclive" class="topbarSection">Twitch</a>
<a href="https://www.youtube.com/c/prclive" class="topbarSection">YouTube</a>
<a href="https://discord.gg/eudsps7" class="topbarSection">Discord</a>
<a href="https://github.com/MichaelEbert/OblivionProgressTracker" class="topbarSection">GitHub</a>
<a href="https://twitter.com/_prclive" class="topbarSection">Twitter</a>
</div>
</div>
<div class="topbarSection">
<a href="./speedrun-guide.html">Guide</a>
<div class="topbarSublist">
<a href="./speedrun-guide.html">Speedrun Guide</a>
<a href="./casual.html">Casual Guide</a>
<a href="./speedrun-archive.html">Archive</a>
</div>
</div>
<a href="./checklist.html" class="topbarSection">Checklist</a>
<div class="topbarSection">
<a href="./map.html">Map</a>
<div class="topbarSublist">
<a href="./nirnroute.html">Nirnroute</a>
</div>
</div>
<div class="topbarSection">
<a href="https://prclive.run/wiki/Oblivion:Tools/Resources">Wiki/Tools</a>
<div class="topbarSublist">
<a href="https://prclive.run/wiki/Main_Page">Wiki</a>
<a href="./tools/tools.html">Tools</a>
<a href="https://prclive.run/wiki/Oblivion:Glitches/Tech">Glitches</a>
<a href="https://prclive.run/wiki/Oblivion:Tools/Resources">Tools/Resources Directory</a>
</div>
</div>
<a href="./settings.html" class="topbarSection icon" style="font-size: 0.85em;" title="Settings">⚙️</a>
<div class="topbarSection"><span class="totalProgressPercent">0</span>%</div>
</nav>
</div>
<!-- end topbar-->
<article class="mainPanel">
<h1>Settings</h1>
<div class="section">
<div class="sectionTitle">Sharing</div>
<div class="collapsibleContent">
<h3>Share Code</h3>
<p><i>You can share your progress with other people in real time, so anything you check off will appear on their spectator view! This is highly recommended for streamers so their viewers can follow their progress easily.</i></p>
<div class="sharingUI">
<p><b>Share: </b><button id="shareProgressButton" onclick="sharingjs.uploadCurrentSave()">Share Progress*</button><input type="text" id="myShareUrl" size="60" readonly="true"/><button onclick="settingsjs.copytoClipboard()" class="clipboardButton">📋</button><span id="shareUrlCopy"></span></p>
<p><b>Spectate: </b><input type="text" id="remoteShareCode"/><button id="clearRemoteButton">Clear</button><span style="font-size: 0.75em;"> — Clicking on someone else's Share URL or entering a 6 letter code and pressing enter on this box will place your in Spectator Mode.</span>
</div>
<i>Spectating Notes
<ul>
<li>When you are in Spectator Mode, a Spectating banner will appear at the top of the page.</li>
<li>You cannot change the progress on the guide while spectating. Click the "X" on the spectating banner to close Spectating Mode, returning you to your personal progress and allowing you to change checklist values again.</li>
<li>To view someone else's progress in one window and still be able to track your own progress at the same time,
use an incognito window to open their spectating link. Perfect for racing against someone!</li>
</ul></i>
<h3>Stream Widget</h3>
<p><i>Generate a Stream Widget browser source to use in software like OBS!</i></p>
<p><b>This feature only works with a share code since the OBS browser is not linked to your normal browser.</b> <i>If you want to view the tracker outside of your stream software, copy/paste the code <b>into an incognito window</b> since this feature activates spectator mode for the browser it loads into.</i></p>
<div>
Share Code: <input type="text" value="" id="popoutShareCode" maxlength="6" size="3"/>
Width: <input type="number" value="460" id="browserSourceWidth"/>
Height: <input type="number" value="330" id="browserSourceHeight"/>
Columns:
<select id="browserSourceColumns" disabled>
<option value="2">Two Columns</option>
<option value="1">Single Column</option>
</select>
</div>
<br/>
<button onclick="popoutjs.initBrowserSource()">Generate Stream Widget</button><input type="text" id="browserSourceUrl" size="70" readonly="true"/><button onclick="popoutjs.copyBrowserSourceToClipboard()" class="clipboardButton">📋</button><span id="browserSourceCopyConfirm"></span>
<ol>
<li>Adjust the above settings to fit your desired stream layout, then click the "Generate Stream Widget" button.</li>
<li>In OBS (or similar software), add a new Browser Source (not a window capture).</li>
<li>In the settings for the OBS browser source, copy/paste the generated URL into the URL field, and set the width/height to match the settings you specified above.</li>
</ol>
</div>
<p style="font-size: small">* By creating a share URL, you agree that your progress, progress URL, IP address, and time uploaded may be stored on a server.<br>To remove your data, please send an email to <a href="mailto:[email protected]?subject=remove my data">[email protected]</a> with the subject "remove my data" and your share key (can be found below) in the body.</p>
</div>
<div class="section">
<div class="sectionTitle">Preferences</div>
<div class="collapsibleContent">
<div class="category">
<div class="categoryTitle">Guide</div>
<!--When you add a setting here, also add it in userdata.mjs so it will be populated for new users.-->
<label><input type="checkbox" id="classnameCheck" class="autosetting"/>Show [Quest], [Book], etc. tags for interactive terms</label> — <b>Advanced players should turn this setting off to improve guide readability.</b><br/>
<label><select name="iframeCheck" id="iframeCheck" class="autoTextSetting">
<option value="auto" title="Recommended. Shows/hides the Info Box based on the width of the browser window, opening links in the Info Box if it is visible, or in a new tab if it is not.">Auto</option>
<option value="on" title="The Info Box is always on screen and links always open inside the Info Box.">Always On</option>
<option value="off" title="Disables the Info Box entirely, opening links in another tab.">Always Off</option>
<option value="window" title="Disables the Info Box, opening links in another window. This is useful if you want to cast links to a second monitor while keeping the guide on the original one.">Other Window</option>
</select> Info Box Sizing/Link Behavior</label> — <i>Hover over each option in the drop down menu for an explanation of what it does.</i><br/>
<label><input type="number" id="iframeMinWidth" class="autoTextSetting"/> Minimum browser width to show Info Box to the right of the guide.</label> <i>(Only works if above setting is Auto.)</i>
<!--<label><input type="text" id="iframeWidth" class="autoTextSetting"/> Width of the Info Box to the right of the guide.</label><br/>-->
</div>
<div class="category">
<div class="categoryTitle">Map</div>
<p><i>These map settings can also be found on the map page by clicking the "Show Settings" button.</i></p>
<label><input name="aaa" type="checkbox" id="mapShowPrediscovered" class="autosetting">Show prediscovered locations</label> — <i>These are locations that are "discovered" from the start of the game that do not count towards your progress.</i><br/>
<label><input type="checkbox" id="mapShowDistanceCheck" class="autosetting">Show distance between locations</label> — <i>This is mostly useful for estimating fast travel times while routing.</i><br/>
<label><input type="checkbox" id="mapShowFormId" class="autosetting">Show formIDs on map</label> — <i>This is mostly useful for debugging and routing.</i><br/>
<label><input type="checkbox" id="mapShowNonGates" class="autosetting">Show non-gate locations</label> — <i>Useful for figuring out what gate you missed</i><br/>
</div>
<div class="category">
<div class="categoryTitle">Advanced Sharing</div>
<div><em>These settings are for advanced users and can stop sharing from working if improperly configured.</em></div>
</br>
<button id="copyDataLocalButton" disabled>Copy Spectator Progress to Local Progress</button> — <i>Overwrites your local data with the data of the person you are currently spectating.</i><br/>
<label><input type="checkbox" id="autoUploadCheck" class="autosetting"/>Auto Update Shared Progress</label> — <i>If you have a Share URL, this setting automatically pushes your new changes to spectators. You will generally want to leave this on.</i><br/>
<label><input type="checkbox" id="spectateAutoRefresh" class="autosetting"/>Auto Refresh Spectating</label> — <i>If you are Spectating, this setting automatically updates your screen to show new changes as the player updates their progress. You will generally want to leave this on.</i><br/>
<label><input type="number" id="spectateAutoRefreshInterval" class="autoTextSetting"/>Auto Refresh Interval (sec)</label> — <i>If you are Spectating, this is the number of seconds between updates to your view of the player's progress.</i><br/>
<button id="copyShareKeyButton">Copy Share Key to Clipboard</button> — <i>Your Share Key is an internal key separate from the public 6 letter code you send to others. This key may be requested by devs if trying to debug/recover data related to your Share URL.</i><br/>
<label>Share Server Path: <input type="text" id="serverUrl" size="60" class="autoTextSetting"/></label><button onclick="settingsjs.restoreServerPath()">Restore Default Path</button> — <i>If you want to save your data to another server instead of ours, you can change that here.</i><br/>
</div>
</div>
</div>
<div class="section">
<div class="sectionTitle">Import/Export Progress</div>
<div class="collapsibleContent">
<p><i>This import/export feature is <b>not</b> for Oblivion save (.ess) files. It is for this website's progress (.save) files. Currently the primary reason to backup your interactive guide to a .save file is to make sure you don't lose your Save File numbers for Load Warping. If you do not need to recover this information, dragging your most recent .ess file onto the Checklist page is a more convenient way of restoring your progress.</i></p>
<button id="resetbutton" onclick="userdatajs.resetProgress(true)">Reset Progress</button><br/>
<button id="exportProgressButton" onclick="settingsjs.exportProgress()">Export Guide .save File</button><br/>
Import Guide Progress (.save) from File: <label><input type="file" id="fileinput"/></label><br/>
</div>
</div>
</article>
<script type="module">
import * as settingsjs from './js/settings.mjs'
import * as sharingjs from './js/sharing.mjs'
import * as userdatajs from './js/userdata.mjs'
import * as popoutjs from './js/popout.mjs'
import {loadCookie} from './js/userdata.mjs'
(function(){
if(loadCookie("debug") == true){
window.debug = true;
}
settingsjs.init();
window.settingsjs = settingsjs;
window.sharingjs = sharingjs;
window.userdatajs = userdatajs;
window.popoutjs = popoutjs;
popoutjs.setPopoutShareCode()
}).call(window);
</script>
<script src="collapsible.js"></script>
</body>
</html>