slidersolverplus/index.html at main · yentlprojects/slidersolverplus · 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
<!DOCTYPE html>

<html>
<head>
	<title>SlideSolver</title>
	<link rel="icon" href="./images/icon.png" type="image/x-icon"/>
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0"/>
	<link rel="stylesheet" type="text/css" href="https://runeapps.org/runeappslib.css">
	<link rel="stylesheet" type="text/css" href="https://runeapps.org/nis/nis.css"/>
	<link rel="stylesheet" type="text/css" href="https://runeapps.org/nis/alt1-currentskin/skinstyle.css">
	<script type="text/javascript" src="https://runeapps.org/runeappslib.js"></script>
	<script type="text/javascript" src="https://runeapps.org/alt1lib.js"></script>
	<script type="text/javascript" src="https://runeapps.org/imagedetect.js"></script>
	<script type="text/javascript" src="./scripts.js"></script>
	<style type="text/css">
		input[type="radio"]{vertical-align:bottom;}
		input[type="color"] {vertical-align: middle;background:none;}
		.maptile{position:absolute; background-position:center; border:1px solid rgba(186,194,221,0.5); width:47px; height:47px; text-align:center; transition:left 0.3s, top 0.2s}
		.maptile.complete{border:none; width:49px; height:49px;}
		.button{position:absolute; width:calc(50% - 24px - 4px); -webkit-user-select:none; margin:7px 2px;}

		#controls{background:url('./images/background.png'); position:absolute; bottom:0px; height:68px; width:100%;}
		#border{overflow:hidden;}
		#settingsdiv{position:absolute; bottom:64px; left:50%; margin-left:-105px; width:190px; display:none; padding:5px; max-height: calc(100% - 40px); overflow-y: auto; z-index:1;}
		#listoutput{position:absolute; left:50%; margin-left:-117px; width:217px; top:23px; bottom:75px; display:none; padding:5px; overflow-y:auto;}
			.listoutputstep{display:inline-block; width:50px;}
		#settingsbutton{position:absolute; top:5px; right:3px; background-image:url('./images/settingsbutton.png');}

		body:not(.alt1) #importbutton{display:none;}
		body.alt1 #shufflebutton{display:none;}
	</style>
</head>
<body class="nis" onload="ss.start(); ss.startpaste(); a1lib.identifyUrl('appconfig.json');">
	<div id="maproot" style="position:absolute; top:0px; left:0px;"></div>
	<div id="listoutput" class="nisborder"></div>
	<div id="settingsdiv" class="nisborder">
		<div>Output type</div>
		<div><label><input type="radio" name="outputtype" onchange="ss.setouttype('overlay');" id="outtype-overlay" />In-game overlay (alt1 only)</label></div>
		<div><label><input type="radio" name="outputtype" onchange="ss.setouttype('overlay2');" id="outtype-overlay2" />In-game overlay 2 (alt1 only)</label></div>
		<div><label><input type="radio" name="outputtype" onchange="ss.setouttype('voice');" id="outtype-voice"/>Voice guide</label></div>
		<div><label><input type="radio" name="outputtype" onchange="ss.setouttype('list');" id="outtype-list"/>Instruction list</label></div>
		<br/>
		<div>Overlay color <input type="color" id="overlaycolor" value="#ffffff" oninput="ss.setoverlaycolor(this);"/></div>
		<br/>
		<div><label><input type="checkbox" onchange="ss.setflipinstructions(this.checked);" id="flipinstructions" />Flip directions (arrow keys)</label></div>
		<div><label><input type="checkbox" onchange="ss.setAutostart(this.checked);" id="slideautostart" />Autostart after reading clue</label></div>
		<br/>
		<div id="volumedisplay" class="slidetitle">Volume: 100%</div>
		<div class="slidebar" onmousedown="startbarslide(event,this,ss.setvolume); return false;"><div class="slidenode" id="volumeslidenode"></div></div>
		<div id="speeddisplay" class="slidetitle">Move interval: 1.2sec</div>
		<div class="slidebar" onmousedown="startbarslide(event,this,ss.setspeed); return false;"><div class="slidenode" id="speedslidenode"></div></div>
	</div>
	<div id="controls">
		<div id="seperator" class="nisseperator"></div>
		<div id="settingsbutton" class="nissmallimagebutton" onclick="ss.togglesettings();"></div>
		<div id="slidestatus" style="top:7px; font-size:15px; left:10px; color:#ccc; position:absolute;">No solution</div>
		<div id="slidestartbutton" class="button nisbutton" style="top:25px; left:50%;" onclick="ss.stopsolve(); ss.togglesolution();">Guide</div>
		<div id="shufflebutton" class="button nisbutton" style="top:25px; left:0px;" onclick="ss.toggleanimate(false); ss.shuffle(round(Math.random()*20)+110);">Shuffle</div>
		<div id="importbutton" class="button nisbutton" style="top:25px; left:0px;" onclick="ss.imageimported(a1lib.bindfullrs());">Import</div>
	</div>
	<audio id="soundel" style="display:none;">
		<source src="./sounds/sound2.mp3" type="audio/mpeg">
		<source src="./sounds/sound2.ogg" type="audio/ogg">
	</audio>
</body>
</html>