forked from Hyphen-ated/lttp-tracker
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (122 loc) · 8.7 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
<html lang="en">
<head>
<title>LttP Item Tracker</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<script src="script/shared.js"></script>
<script src="script/items.js"></script>
<script src="script/chests.js"></script>
<script src="script/entrance.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id='layoutdiv'>
<div id='itemdiv' class='itemdiv'>
<tracker-table v-if="displayVueMap" :item-rows="itemRows" :tracker-data="trackerData" :tracker-options="trackerOptions"></tracker-table>
</div>
<div id='mapdiv' class='mapdiv'>
</div>
</div>
<div width='100%' id="caption">
</div>
<!-- Setting panel-->
<button id='settingsbutton' type='button' onclick='showSettings(this)'>🔧</button>
<fieldset id='settings' class='settings'>
<legend>Settings</legend>
<fieldset>
<legend>Item Tracker</legend>
<button type="button" onclick="EditMode()">Edit Mode</button>
<br>
Size<input type="range" name='itemdivsize' value='100' max='200' min='1' onchange="setZoom('itemdiv', this)">
<span id='itemdivsize'>100%</span><br>
<fieldset>
<legend>Dungeon Display</legend>
<input type="checkbox" name="showchest" checked='checked' onchange="showChest(this)">Chests
<input type="checkbox" name="showcrystal" checked='checked' onchange="showCrystal(this)">Prizes
<input type="checkbox" name="showmedallion" checked='checked' onchange="showMedallion(this)">Medals<br>
<input type="checkbox" name="showbigkeys" checked="checked" onchange="showbigkeys(this)">Big Keys
<input type="checkbox" name="showsmallkeys" checked="checked" onchange="showsmallkeys(this)">Small Keys<br>
<input type="checkbox" name="showlabel" checked='checked' onchange="showLabel(this)">Dungeon Labels
</fieldset>
</fieldset>
<fieldset>
<legend>Map Tracker</legend>
<input type="checkbox" name="showmap" checked='checked' onchange="showTracker('mapdiv', this)">Enabled
<input type="checkbox" name="entrance" checked='checked' onchange="showEntrance('mapdiv', this)">Entrance<br>
Size<input type="range" name='mapdivsize' value='100' max='200' min='1' onchange="setZoom('mapdiv', this)">
<span id='mapdivsize'>100%</span><br>
Position:
<input type='radio' name='mapposition' value='Below' checked='checked' onclick="setOrder(true)">Below
<input type='radio' name='mapposition' value='Side' onclick="setOrder(false)">Side<br>
Orientation:
<input type='radio' name='maporientation' value='Horizontal' checked='checked' onclick="setMapOrientation(false)">Horizontal
<input type='radio' name='maporientation' value='Verical' onclick="setMapOrientation(true)">Vertical<br>
<fieldset>
<legend>Logic Options</legend>
<input type='checkbox' name='openmode' checked='' onchange='setOpenMode(this)'>Open Mode<br>
<input type='radio' name='maplogic' value='glitchless' checked='checked' onclick='setLogic("glitchless")'>Glitchless<br>
<input type='radio' name='maplogic' value='owGlitches' onclick='setLogic("owGlitches")'>Overworld Glitches<br>
<input type='radio' name='maplogic' value='majorGlitches' onclick='setLogic("majorGlitches")'>Major Glitches
</fieldset>
<fieldset>
<legend>Chest Legend</legend>
<table border="0" cellspacing="0">
<tr>
<th class="available">Available</th>
<th class="glitchavailable">Glitch Available</th>
</tr>
<tr>
<th class="possible">Possible</th>
<th class="glitchpossible">Glitch Possible</th>
</tr>
<tr>
<th class="agahnim">Agahnim Defeated</th>
<th class="glitchagahnim">Glitch Agahnim</th>
</tr>
<tr>
<th class="unavailable">Unavailable</th>
<th class="opened">Opened</th>
</tr>
</table>
</fieldset>
</fieldset>
<footer id="credits">Lttp Rando Tracker - <a href="https://www.twitch.tv/hyphen_ated">hyphen</a>'s version
(major credits: <a href="https://twitter.com/pickfifteen">pickfifteen</a>, <a href="https://www.twitch.tv/crossproduct">crossproduct</a>, <a href="https://www.twitch.tv/testrunner">testrunner</a>, <a href="https://www.twitch.tv/marcmagus">marcmagus</a>)
</footer>
</fieldset>
<table id='itemconfig' class='itemconfig' style='display:none'></table>
<script type="text/x-template" id="tracker-table">
<div class="vueTrackerTable" :style="{ backgroundColor: 'black'}">
<div v-for="(itemRow, itemRowIndex) in itemRows" :key="itemRowIndex">
<div :style="{ width: (maxRowLength - itemRow.length) * 32 + 'px', display:'inline-block' }" class="rowSpacer"></div>
<tracker-cell v-for="(item, itemColumnIndex) in itemRow" :itemName="item" :itemValue="itemFor(item)"
:column-index="itemColumnIndex" :row-index="itemRowIndex"
:tracker-data="trackerData" :tracker-options="trackerOptions" :key="itemColumnIndex + '-' + itemRowIndex"></tracker-cell>
<button v-if="trackerOptions && trackerOptions.editmode" @click.prevent.stop="removeItem(itemRowIndex)"
:style="{backgroundColor: 'red', color: 'white', verticalAlign: 'top', marginTop: '20px'}">-</button>
<button v-if="trackerOptions && trackerOptions.editmode" @click.prevent.stop="addItem(itemRowIndex)"
:style="{backgroundColor: 'green', color: 'white', verticalAlign: 'top', marginTop: '20px'}">+</button>
</div>
<button v-if="trackerOptions && trackerOptions.editmode" @click.prevent.stop="addRow">Add row</button>
</div>
</script>
<script type="text/x-template" id="tracker-cell">
<div :style="{ height: '64px', width: '64px', display:'inline-block', backgroundImage: backgroundImage, position: 'relative' }"
:class="isActive ? 'true' : 'false'" @click.stop="clickCellForward" @contextmenu.prevent.stop="clickCellBack">
<span v-if="dungeonLabel" class="corner" :style="{ display: 'block', position: 'absolute'}">{{ dungeonLabel }}</span>
<span v-if="textCounter !== null" class="textCounter">{{ textCounter }}</span>
<span v-if="chestImage" @click.stop="clickChestBack" @contextmenu.prevent.stop="clickChestForward" :style="{ display: 'block', position: 'absolute', height: '32px', width: '32px', top: '32px', backgroundImage: chestImage }"></span>
<span v-if="bigKeyImage" @click.stop="clickBigKey" @contextmenu.prevent.stop="clickBigKey" :style="{ display: 'block', position: 'absolute', height: '32px', width: '16px', top: '32px', backgroundImage: bigKeyImage }"></span>
<span v-if="smallKeyImage" @click.stop="clickSmallKeyForward" @contextmenu.prevent.stop="clickSmallKeyBack" :style="{ display: 'block', position: 'absolute', height: '32px', width: '16px', top: '32px', left: '16px', backgroundImage: smallKeyImage }"></span>
<span v-if="prizeImage" @click.stop="clickPrizeForward" @contextmenu.prevent.stop="clickPrizeBack" :style="{ display: 'block', position: 'absolute', height: '32px', width: '32px', top: '32px', left: '32px', backgroundImage: prizeImage }"></span>
<span v-if="medallionImage" @click.stop="clickMedallionForward" @contextmenu.prevent.stop="clickMedallionBack" :style="{ display: 'block', position: 'absolute', height: '32px', width: '32px', left: '32px', backgroundImage: medallionImage }"></span>
</div>
</script>
<script src="script/main.js"></script>
<script>
init(initTracker);
</script>
</body>
</html>