-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
197 lines (189 loc) · 11.8 KB
/
Copy pathindex.html
File metadata and controls
197 lines (189 loc) · 11.8 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Super Mario 3 Redrawn</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
<meta property="og:title" content="Super Mario 3 Redrawn">
<meta property="og:site_name" content="Retro Redrawn">
<meta property="og:url" content="https://retroredrawn.com/">
<meta property="og:description" content="Super Mario 3 Redrawn is a collaborative art project by a group of passionate pixel artists from across the world.">
<meta property="og:type" content="website">
<meta property="og:image" content="img/website/smb3_thumb.png">
<link rel="icon" type="image/png" href="favicon.png">
<!--Google-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--PIXI-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.12/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-filters@4.2/dist/pixi-filters.js"></script>
<!--Retro Redrawn: CSS-->
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="player.css">
<link rel="stylesheet" href="options.css">
</head>
<body class="content">
<div id="app">
<canvas id="canvas"></canvas>
<div id="error"></div>
<div class="menu active" id="menu-bar">
<div class="menu__button" onclick="toggleMenu()"></div>
<div class="menu__inner">
<div class="menu__logo">
<a href="https://bsky.app/profile/retroredrawn.bsky.social" title="Visit our BlueSky!" target="_blank">
<img src="img/website/smb3_logo_text.png" alt="Super Mario 3 Redrawn" draggable="false" />
</a>
</div>
<div class="menu__actions">
<button onclick="changeTab(0)" class="menu__tab active">
Area List
</button>
<button onclick="changeTab(1)" class="menu__tab">
Options
</button>
<button onclick="changeTab(2)" class="menu__tab">
About
</button>
</div>
<div class="menu__content">
<div id="areaList" class="active">
<ul id="areas"></ul>
</div>
<div id="settings" class="options-container">
<div class="options-section">
<h3>Display Settings</h3>
<div class="option-row">
<label class="option-label" for="disableBlur">Disable Zoom Blur</label>
<div class="option-control">
<input class="option-checkbox" type="checkbox" id="disableBlur">
</div>
</div>
<div class="option-row">
<label class="option-label" for="areaBorderToggle">Hide Area Border</label>
<div class="option-control">
<input class="option-checkbox" type="checkbox" id="areaBorderToggle" oninput="onAreaBorderToggled(this.checked)">
</div>
</div>
<div class="option-row">
<label class="option-label" for="preferStatic">Disable GIF Animation</label>
<div class="option-control">
<input class="option-checkbox" type="checkbox" id="preferStatic" oninput="onPreferStaticToggled(this.checked)">
</div>
</div>
</div>
<div class="options-section">
<h3>Camera Controls</h3>
<div class="option-row">
<label class="option-label" for="cameraSpeed">Camera Speed</label>
<div class="option-control">
<input type="range" min="0.5" max="2" value="1" step="0.25" id="cameraSpeed" oninput="changeCameraSpeed(this.value)">
<small>1x</small>
</div>
</div>
<div class="option-row">
<label class="option-label" for="tourCameraSpeed">Tour Speed</label>
<div class="option-control">
<input type="range" min="0.5" max="2" value="1" step="0.25" id="tourCameraSpeed" oninput="changeTourCameraSpeed(this.value)">
<small>1x</small>
</div>
</div>
</div>
</div>
<div id="about">
<p>Super Mario 3 Redrawn is a collaborative art project by a group of passionate pixel artists from across the world.</p>
<p>The project is an artistic reimagining of Super Mario 3 with the same palette restrictions as the NES release but without its hardware limitations.</p>
<hr>
Check out more projects at...
<div class="rrlogo">
<a href="https://retroredrawn.com/"><img id="rrlogo_img" src="img/website/retro_redrawn_logo.png" alt = "Retro Redrawn Logo"></a>
</div>
<hr>
<p>Pan and zoom the map the same you would on sites like Google Maps.</p>
<p>Map requires WebGL compatible browsers - Chrome may require you <a href="https://www.howtogeek.com/412738/how-to-turn-hardware-acceleration-on-and-off-in-chrome/" target="_blank">enable hardware acceleration.</a></p>
<p>Check out the <a href="https://github.com/retro-redrawn/smb3_redrawn">Github Page</a> for bug reports, feature requests, and to browse the code!</p>
<hr>
<p><b>Credits</b></p>
<p>Project Organized by <a href="https://bsky.app/profile/dewdneym.bsky.social" target="_blank">@Dewdneym</a>, <a href="https://linktr.ee/blindeduif" target="_blank">@Blindeduif</a>, <a href="https://bsky.app/profile/vvvultures.bsky.social" target="_blank">@vvvultures</a>, and <a href="https://bsky.app/profile/foofarawr.bsky.social" target="_blank">@foofarawr</a></p>
<p>Gallery viewer tooling and maintenance by <a href="https://bsky.app/profile/vvvultures.bsky.social" target="_blank">@vvvultures</a></p>
<p>'Super Mario Bros 3 Atheltic Medley' BGM by <a href="https://bsky.app/profile/toribobs.bsky.social">@toribobs</a> and <a href="https://www.youtube.com/@pokerusproject">@PokerusProject</a></p>
<p>Based on the Retro Redrawn core project by <a href="https://bsky.app/profile/hyperjerk.bsky.social" target="_blank">@HyperJerk</a> and <a href="https://bsky.app/profile/vvvultures.bsky.social" target="_blank">@vvvultures</a></p>
<p>Any and all artists who contributed to this project!</p>
<p><b>Disclaimer</b></p>
<p>Retro Redrawn is non-profit gallery for a collaborative fan art project and is in no way affiliated with the original rights holders. This is a fan art project and not a functional game map. <p>Map requires WebGL compatible browsers - Chrome may require you <a href="https://www.howtogeek.com/412738/how-to-turn-hardware-acceleration-on-and-off-in-chrome/" target="_blank">enable hardware acceleration.</a></p>
</div>
<br>
</div>
<div class="map-toggle">
<span class="map-toggle-label">Redrawn</span>
<label class="switch">
<input type="checkbox" id="mapSelectRedrawn" onclick="toggleMapStyle()">
<span class="slider"></span>
</label>
<span class="map-toggle-label">Original</span>
<div class="tour">
<button id="tourButton" onclick="toggleTour()"><span class="material-icons">play_arrow</span></button>
</div>
</div>
<div class="bgm">
<div class="custom-player" data-player-num="0" data-autoplay="true">
<div class="player-controls">
<button class="control-btn" data-control="restart" title="Restart"><span class="material-icons">replay</span></button>
<button class="control-btn" data-control="play-pause" title="Play/Pause"><span class="material-icons">play_arrow</span></button>
<div class="progress-container">
<div class="progress-bar">
<div class="progress"></div>
</div>
<span class="time-display">0:00</span>
</div>
<button class="control-btn" data-control="next" title="Next"><span class="material-icons">skip_next</span></button>
</div>
<div class="track-info-container">
<div class="track-info-scroll">
<div class="track-info">
<span class="track-title"></span>
<span class="track-info-separator">by</span>
<span class="track-artist"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="artist_mobile area__info__inner">
<div class="area__info__img">
<a href="" target="_blank" title="">
<img src="" alt="">
</a>
</div>
<div class="area__info__name">
<a href="" target="_blank" title=""></a>
</div>
</div>
<div id="loading" class="active">
<div>
<img src="img/website/smb3_logo_text.png" alt="Super Mario 3 Redrawn" draggable="false" />
<p>Loading...</p>
<div class="loading-bar">
<div class="loading-bar__inner" style="width: auto;"></div>
</div>
</div>
</div>
</div>
</body>
<!--Retro Redrawn: JS-->
<!--Since we want to ensure the document is fully loaded, we run our scripts last.-->
<script src="areas.js"></script>
<script src="https://retro-redrawn.github.io/Retro-Redrawn-Data/ArtistData.js"></script>
<script src="https://retro-redrawn.github.io/Retro-Redrawn-Data/RedrawnArtistDataUtils.js"></script>
<script src="implementation.js"></script>
<!-- GIF decoding: omggif + lightweight player (used when browser doesn't expose animated frames to canvas) -->
<script src="https://cdn.jsdelivr.net/npm/omggif@1.0.10/omggif.min.js"></script>
<script src="vendor/gif-player-omggif.js"></script>
<script src="interactive.js"></script>
<script src="audio-player.js"></script>
<script src="maputils.js"></script>
<script src="interactive_overrides.js"></script>
</html>