-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsteamtube.html
230 lines (228 loc) · 10.1 KB
/
steamtube.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
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
<!DOCTYPE html>
<!--
License: GPLv3
Written By:
Logan C.
Inspired By / Replicating:
https://www.wonder-tonic.com/steamtube/
With help from:
Logan C.'s Dad
The good people of Stack Overflow.
w3schools.com
The Caret text editor
Microsoft Visual Studio Code
Pop-Tarts.
Mio-Water.
The JPEXS Flash .swf decomplier.
The GIMP.
The Desmos Graphing Calculator.
-->
<html>
<head>
<meta charset="utf-8"/>
<title>Steam-Powered YouTube</title>
<link rel="stylesheet" href="style.css" />
<link rel="icon" type="image/png" href="../favicon.png"/>
<!-- Thank you https://www.filamentgroup.com/lab/load-css-simpler/ !-->
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<!-- These are here for social media to grab the title and thumbnail. -->
<meta property="og:title" content="Steam-Powered YouTube">
<meta property="og:url" content="https://www.bahjeez.com/logan/steamtube/steamtube.html">
<meta property="og:image" content="https://www.bahjeez.com/logan/steamtube/assets/Steam Powered Youtube.jpg">
</head>
<body style="display: none;">
<div id="topbar">
<a href="../home.html">Go Back Home.</a>
</div>
<div style="flex-direction: column; width: 100%; align-items: center">
<img src="assets/header.jpg" style="width: 900px; height: 96px" />
<p style="margin: 2px 2px 2px 20px; font-family: 'Union Agrochem'; font-size: 20px; color: white;">
Recreated By: Logan C.
</p>
</div>
<noscript>
<style>
body {
overflow: hidden;
}
</style>
<div style="position: absolute; width: 100vw; height: 100vh; background-color: black; z-index: 101;">
<p style="font-family:'Union Agrochem'; color: white; font-size: 50px;">
Sorry, but without Javascript enabled, you can't play this game.
</p>
</div>
</noscript>
<div style="display: flex; width: 100%; user-select: none; overflow: hidden;">
<div class="mainContainer">
<div>
<input type="text" id="videoUrl" />
<img id="loadButton" src="assets/littleButton.png" />
</div>
<div class="videoContainer">
<img id="screenOverlay" src="assets/screen-overlay.png" style="opacity: 0.8; z-index: 4; width: 422px; height: 230px; left: -216px; top: -114px; position: absolute;"/>
<div id="turnCrankToPlay" class="video">
<p id="turnCrankToPlayText">LOADING...<div id="loadingCursorContainer"><div id="loadingCursor"></div></div></p>
</div>
<img src="assets/noise.gif" class="video" id="noise" />
<div id="player" class="video"></div>
</div>
<div>
<div class="dial" id="audioDial"></div>
<div class="dial" id="videoDial"></div>
</div>
<div
style="margin-top: 20px;">
<div id="audioQualityControl" class="qualityControl">
<img src="assets/qualityControlWheel.png"/>
</div>
<img src="assets/bigButton.png" id="pressureVent" draggable="false" />
<div id="pressureDial" class="dial"></div>
<div id="statusLights">
<img id="overheatLight" src="assets/noOverheat.png" />
<img id="peakQualityLight" src="assets/notPeakQuality.png" />
<div
style="flex-direction: row; align-items: center; margin: 0;">
<div id="bestTimeDiv" style="background-image: url('assets/notBestTime.png')">
<p id="bestTimeText" class="smalltext">0:00</p>
</div>
<div style="background-image: url('assets/bestTimeRecord.png')">
<p id="bestTimeRecord" class="smalltext">0:00</p>
</div>
</div>
<p style="font-family: 'Union Agrochem'; color: #6d0601; position: relative; left: 40px; font-size: 20px; margin-top: 5px;">
Best Time
</p>
</div>
<div id="videoQualityControl" class="qualityControl">
<img src="assets/qualityControlWheel.png" />
</div>
</div>
</div>
</div>
<div
style="flex-direction: column; width: 100%; align-items: center; color: white;">
<div>
<div style="flex-direction: column; margin: 0;">
<p class="smalltext" id="difficultyLevel" style="font-family: 'Union Agrochem'">
Please choose your difficulty level.<br>Current dificulty level is 6.
</p>
<div>
<input id="difficultySlider" type="range" min="1" max="12" value="6" oninput="setDifficulty('true')"/>
</div>
</div>
<div style="flex-direction: column;">
<p class="smalltext" id="volumeLevel" style="font-family: 'Union Agrochem'">
Please choose your volume level.<br>Current volume level is 100.
</p>
<div>
<input id="volumeSlider" type="range" min="0" max="100" value="100" oninput="setVolume('true')"/>
</div>
</div>
<div style="flex-direction: column;">
<p class="smalltext" id="volumeLevel" style="font-family: 'Union Agrochem'">
Enable or disable looping.
</p>
<div>
<input id="loopCheckbox" type="checkbox" oninput="setLoop('true')"/>
</div>
</div>
</div>
<p class="subheading">HOW TO PLAY:</p>
<p class="smalltext">
Choose a video. Enter the URL of any YouTube video (except those that
prevent embedding) and click Load.<br><br>
Turn the audio and video cranks to make the video play. The higher the
gauges go, the better the quality. Get the needles into the green areas
for peak quality. See how long you can maintain peak quality.<br><br>
Watch the pressure gauge. You have to click Vent before it maxes out.<br><br>
Originally Created by:
<a href="http://wondertonic.tumblr.com/">Wonder-Tonic</a><br><br>
Recreated in HTML and Javascript by:
<a href="https://www.bahjeez.com/logan">Logan C.</a>
</p>
<p class="subheading">A brief history of this page.</p>
<p class="smalltext">
On March 19, 2010 a freelance copywriter and creative director named
<a href="https://www.mikelacher.com/">Mark Lacher</a> released on his
site Wonder-Tonic a game entitled "Steam-Powered Youtube." For 3 years,
many people enjoyed this game, but it went under my radar until 2013,
when it was
<a href="https://www.youtube.com/watch?v=Zux_GebV374">featured in an episode of <i>DONG</i></a>
(standing for [things you can] Do Online Now, Guys). That video brought
to my attention, and I enjoyed it.<br><br>
However, the game was made in Flash, and as we all know, in 2021, Adobe
killed Flash, and with it died this game, until now. This page contains
the best recreation of the old Steam-Powered Youtube I can create.<br><br>
Please check out and support the continuing work of this game's original
developer, at his site
<a href="https://www.mikelacher.com/">here.</a> However, before you do
that, please, take a moment to enjoy this game, brought back from beyond
the grave, just for you!<br><br>
Also, if you're interested, you can check out the source code for this
game <a href="https://github.com/TheMiningTeamYT/SteamTube">here!</a>
</p>
<p class="smalltext">
Credit for the warning bell sound: <br><a href="https://www.youtube.com/watch?v=9CMOkeXBTV4">Sześcian https://www.youtube.com/watch?v=9CMOkeXBTV4</a><br>
License for <a href="https://github.com/bestiejs/platform.js">platform.js</a>: <br><a href="https://github.com/bestiejs/platform.js/blob/master/LICENSE">The MIT License.</a><br>
Thank you so much developers of platform.js!
</p>
</div>
<audio id="recordSound" src="assets/HissSound.mp3" preload="auto" loop="true"></audio>
<audio id="ventingSound" src="assets/SteamSound.mp3" preload="auto"></audio>
<audio id="tickingSound" src="assets/TickSound.mp3" preload="auto" loop="true"></audio>
<audio id="warningSound" src="assets/warning.mp3" preload="auto"></audio>
<!-- Credit to the platform.js team!-->
<script src="platform.js"></script>
<!-- Thank you Zach Denton of https://noisehack.com/generate-noise-web-audio-api/ !-->
<script src="noise.js"></script>
<script src="main.js"></script>
<!-- Thanks J. Voigt of https://bl.ocks.org/joyrexus/7207044 ! -->
<script src="rotate.js"></script>
<script defer src="https://player.twitch.tv/js/embed/v1.js"></script>
<script>
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
tag.defer = true;
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
if (mobile === true) {
player = new YT.Player("player", {
height: "260",
width: "450",
videoId: "Zux_GebV374",
playerVars: {
playsinline: 1,
controls: 1,
autoplay: 0,
loop: 0,
playlist: "Zux_GebV374",
},
events: {
onReady: onYTPlayerReady,
},
});
} else {
player = new YT.Player("player", {
height: "260",
width: "450",
videoId: "Zux_GebV374",
playerVars: {
playsinline: 1,
controls: 0,
autoplay: 0,
loop: 0,
playlist: "Zux_GebV374",
},
events: {
onReady: onYTPlayerReady
},
});
}
}
function onYTPlayerReady() {
playerReady = true;
}
</script>
</body>
</html>