-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
298 lines (288 loc) · 17 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
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
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WWDGXLW');</script>
<!-- End Google Tag Manager -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-X7W2CCYMWY"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-X7W2CCYMWY');
</script>
<link rel="stylesheet" href="css.css">
<link rel="shortcut icon" href="favicon1.ico">
<title>idle file</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Idle File is a work in progress game where the goal is to try and create the biggest file you can.">
<link href="https://fonts.googleapis.com/css2?family=Arvo&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap" rel="stylesheet">
<noscript>Sorry, but you cannot play this game because you either have JavaScript disabled or your browser dosen't support JavaScript.</noscript>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WWDGXLW"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- hi this is a game made by wiichicken please dont steal my code even though nobody will see this and my code sucks anyways -->
<!-- Bar shown when scrolled down -->
<div id="topbar">
<a id="ontopsize" style="float: left;">0 bytes</a>
<a id="ontopsps" style="float: left; font-size: small; vertical-align: middle;">0 bytes per second</a>
<a id="ontoptypebutton" style="color: black; -moz-user-select: none; -webkit-user-select: none; user-select: none;" onclick="oneByte()">Type</a>
<a id="ontopspc" style="float: right; font-size: small; vertical-align: middle; display: none; color: black;">0 bytes per click</a>
</div>
<!-- Information displayed at the top of the screen -->
<div id="scorebox">
<p id="bpcounter">0 bytes per click</p>
<p id="score">0 bytes</p>
<p id="bpscounter">0 bytes per second</p>
</div>
<!-- Alert bar (not currently in use) -->
<div class="alertbar" id="thealertbar">
<p id="alertbartext">sub to me im ayden williams gamer spread the word</p>
</div>
<div id="topmenu">
<!-- navigation menu (desktop) -->
<div id="desktopnav" style="padding-top: 10px;">
<button class="tablink" id="stanav" onclick="openStatsPage()">Stats</button>
<button class="tablink" id="setnav" onclick="openPage('settings')">Settings</button>
</div>
<!-- type button -->
<button id="singlebytebutton" onclick="oneByte()">Type</button>
</div>
<hr>
<!-- This page should show up if there was an error loading the CSS of the page. -->
<div id="missingcss" class="tabcontent">
<hr>
<h1 style="text-align: center; background-color: rgb(255, 63, 63);">Error: Missing CSS</h1>
<p>The CSS of this page is missing. Please click on the button below to refresh the page to try and fix this issue.</p>
<button style="background-color: cyan;" onclick="window.location.reload()">Reload Page</button>
<p>More info: The CSS (Custom Style Sheets) of this page appear to be missing. Usually when this happens this also means that the Javascript of the page is missing. Not having the CSS for the game makes the game ugly and really hard to play. Not having the JavaScript makes the game unplayable. This specific error means that the CSS could not be found. This error usually happens when there is an error, or when you refresh the page a lot of times in a short period. Try clicking on the "Reload Page" button to fix this issue.</p>
</div>
<!-- This page should show if an error occurs when loading the games pages. -->
<div id="errorpage" class="tabcontent">
<hr>
<h1 style="text-align: center; background-color: rgb(255, 63, 63);">Error</h1>
<p>you are seeing this message because i suck at coding and can't add proper error handling. happens to the best of us. anyways, something went wrong. you can try clicking on that "Attempt to fix" button, but it probably won't work. if it doesn't, just refresh the page.</p>
<button style="margin: 0 auto;" onclick="openPage('tutorial')">Attempt to Fix (Broken)</button>
<button onclick="window.location.reload()">Refresh Page</button>
<p>More info: This error can occur sometimes when the game is refreshed and then immediately canceled. This can also happen due to glitches in code or CSS. You can try to fix this glitch by clicking on the "Attempt to Fix" button. If clicking on the button fails to fix the issue, you can try to refresh the page.</p>
<hr>
</div>
<!-- loading page -->
<div class="tabcontent" id="loaderpage">
<h2>Loading</h2>
<div class="loader" id="firstloader"></div>
</div>
<!-- shop -->
<div id="upspage" class="tabcontent">
<!-- Automatic Upgrades -->
<div id="autoupgrades" class="shopcolumn">
<h2 style="margin: 3px;">Automatic Upgrades</h2>
<p style="text-align: center; margin: 3px;">These upgrades increase your file size automatically</p>
<!-- keypresser -->
<button id="keypresser" class="upgradebutton" style="display: inline;" onclick="upgradeSPS()">Keypresser (15 bytes, +1 byte per second)</button>
<!-- cat -->
<button id="catbuy" class="upgradebutton" onclick="buyCat()">Cat (150 bytes, 5+ bytes per second)</button>
<button id="lockedcat" class="lockedup">locked</button>
<!-- key holder -->
<button id="holdbuy" class="upgradebutton" onclick="buyHold()">Key Holder (1 KB, +30 bytes per second)</button>
<button id="lockedhold" class="lockedup">locked</button>
<!-- word macro -->
<button id="macrobuy" class="upgradebutton" onclick="buyWordMacro()">Word Macro (50 KB, +250 bytes per second)</button>
<button id="lockedmacro" class="lockedup">locked</button>
<!-- collab document -->
<button id="collabuy" class="upgradebutton" onclick="buyCollab()">Collab Document (1 MB, +5 KB per second)</button>
<button id="lockedcollab" class="lockedup">locked</button>
</div>
<!-- Clicking Upgrades -->
<div id="clickupgrades" class="shopcolumn">
<h2 id="clickuphead" style="margin: 3px;">Clicking Upgrades</h2>
<p style="text-align: center; margin: 3px;" id="clickuptext">These upgrades increase your file size even more per click</p>
<!-- extra finger -->
<button id="fingerpurchase" class="upgradebutton" onclick="buyFinger()">Extra Finger (250 bytes, +1 byte per click)</button>
<button id="lockedfinger" class="lockedup">locked</button>
<!-- extra keyboard -->
<button id="keyboardpurchase" class="upgradebutton" onclick="buyKeyboard()">Extra Keyboard (10 KB, +40 bytes per click)</button>
<button id="lockedkeyboard" class="lockedup">locked</button>
<!-- macro button -->
<button id="macrobutpurchase" class="upgradebutton" onclick="buyMacroButton()">Macro Button (150 KB, +500 bytes per click)</button>
<button id="lockedmacrobut" class="lockedup">locked</button>
<!-- copy paste -->
<button id="copypastepurchase" class="upgradebutton" onclick="buyCopyPaste()">Copy Paste (10 MB, +30 KB per click)</button>
<button id="lockedcopypaste" class="lockedup">locked</button>
</div>
<!-- More Upgrades -->
<div id="moreupgrades" class="shopcolumn">
<h2 style="margin: 3px;">More Upgrades</h2>
<p class= style="text-align: center; margin: 3px;">special upgrades that do all sorts of wacky stuff</p>
<div>
<h3 class="specialtitle">ai</h3>
<p class="levelcaption" id="ailevel">not unlocked</p>
<p class="specialdescription" id="aiuptext">increases your bytes per second by 1 every second</p>
<button class="specialupgrade" id="aiupgradebutton" onclick="buyBadAi()">600 seconds remaining!</button>
</div>
<div>
<h3 class="specialtitle">machine</h3>
<p class="levelcaption" id="machinelevel">not unlocked</p>
<p class="specialdescription" id="selfsustext">increases your bytes per second by 1 every second</p>
<button class="specialupgrade" id="selfsusmachine" onclick="buySelfSustainedMachine()">1500 clicks remaining!</button>
</div>
<div>
<h3 class="specialtitle">cursor</h3>
<p class="levelcaption" id="machinelevel">not unlocked</p>
<p class="specialdescription" id="plastictext">clicking gains 1% of your bytes per second</p>
<button class="specialupgrade" id="purchaseplasticursor" onclick="buyPlasticCursor()">1000 bps remaining!</button>
</div>
</div>
</div>
<!-- settings -->
<div id="settings" class="tabcontent">
<div class="smallmenu">
<div class="arrow" style="transform: rotateZ(140deg); display: inline-block;" onclick="openPage('upspage')"></div>
<p style="display: inline;">settings</p>
</div>
<hr>
<h2>Settings</h2>
<p style="text-align: center;">Customize your game experience</p>
<hr>
<div id="savedatabuttons">
<h3 style="display: inline;">Save Data</h3>
<span class="explabel">Experimental</span>
<p style="background-color: rgb(255, 153, 153); color: black; padding: 10px 10px; border-radius: 5px;">Warning: This feature has not been fully implemented. It may not work as expected, and not everything may be saved. Clearing your browser cookies will remove this data, so be careful!</p>
<div class="tooltip">
<button id="savebutton" onclick="saveGame(1)">Save (WIP)</button>
<span class="tooltiptext">Any previous game data will be overwritten.</span>
</div>
<p class="explaintext">Any previous game data will be overwritten.</p>
<div class="tooltip">
<button id="loadbutton" onclick="loadGame()">LOAD (WIP)</button>
<span class="tooltiptext">Your current save data will be overwritten.</span>
</div>
<p class="explaintext">Your current save data will be overwritten.</p>
<div class="tooltip">
<button id="toglal" style="background-color: red;" onclick="toggleAutoLoad()">Enable Auto Load</button>
<span class="tooltiptext">Automatically loads game data from cookies when opened.</span>
</div>
<p class="explaintext">Automatically loads game data from cookies when opened.</p>
<div class="tooltip">
<button id="togas" style="background-color: red;" onclick="toggleAutoSave()">Enable Auto Save</button>
<span class="tooltiptext">Automatically saves your game every minute</span>
</div>
<p class="explaintext">Automatically saves your game every minute</p>
<p id="lastsavedtext">Not saved yet</p>
</div>
<h3>Appearance</h3>
<button id="darkmodebutton" onclick="toggleDarkMode()">Enable Dark Mode</button>
<div class="tooltip">
<button id="doroundisplay" onclick="modeToggle('roundmaindisp')" style="background-color: greenyellow; color: black">Disable Score Rounding</button>
<span class="tooltiptext">Toggles rounding all byte counts.</span>
</div>
<p class="explaintext">Toggles rounding all byte counts.</p>
<div class="tooltip">
<button id="iscoremonospaced" style="background-color: red;" onclick="toggleMonospaceFont()">Enable Monospaced Font</button>
<span class="tooltiptext">Uses a monospaced font to reduce motion.</span>
</div>
<p class="explaintext">Uses a monospaced font to reduce motion.</p>
<div class="tooltip">
<button id="showbpcbut" style="background-color: red;" onclick="toggleBytesPerClick()">Enable Bytes Per Click Counter</button>
<span class="tooltiptext">Shows bytes per click under bytes per second. This has no effect on larger screens</span>
</div>
<p class="explaintext">Shows bytes per click under bytes per second. This has no effect on larger screens.</p>
<div class="tooltip">
<button id="togglealbarbut" style="background-color: greenyellow; color: black;" onclick="toggleAlertBar()">hide alert bar</button>
<span class="tooltiptext">shows the scrolling alert bar at the top of the screen</span>
</div>
<p class="explaintext">shows the scrolling alert bar at the top of the screen</p>
<h3>Other</h3>
<button id="defaultOpen" onclick="openPage('tutorial')" style="background-color: cyan; color: black;">View tutorial</button>
<button id="expphase1" onclick="confirmExper()">Enable Experimental Features</button>
<div id="experimentsconfirm">
<p style="background-color: rgb(255, 106, 106); color: black; padding: 10px 10px; border-radius: 8px;">Warning! These features are experimental! They may not be fully ready, and could possibly have glitches in them. If you would like to test them, click below.</p>
<p style="display: inline;">All experimental features are marked with an experimental tag that looks like this:</p>
<span class="explabel">Experimental</span>
<p>Would you like to enable experimental features?</p>
<button id="enbexpfeats" onclick="enableExpFeats()">Enable</button>
<button onclick="cancelExper()">Cancel</button>
</div>
</div>
<!-- Tutorial -->
<div id="tutorial" class="tabcontent">
<div class="smallmenu">
<div class="arrow" style="transform: rotateZ(140deg); display: inline-block;" onclick="openPage('upspage')"></div>
<p style="display: inline;">tutorial</p>
</div>
<hr>
<h2 id="welcometext" style="text-rendering: optimizeSpeed;">Welcome to Idle File!</h2>
<p id="clickonbuttontext" style="text-align: center;">Click on the large "Type" button to get bytes.</p>
<p id="howtospendtext" style="text-align: center;">You can spend your bytes on upgrades to help you earn bytes faster.</p>
<p id="viewupgradestext" style="text-align: center;">You can view different upgrade types by using the menus.</p>
<p id="changesettingstext" style="text-align: center;">Change your settings in the settings menu to customize your experience.</p>
<p id="viewtutorialagaintext" style="text-align: center;">You can view this tutorial again from the settings menu.</p>
<p id="havefuntext" style="text-align: center;">Have fun playing!</p>
</div>
<!-- Statistics -->
<div id="statistics" class="tabcontent">
<div class="smallmenu">
<div class="arrow" style="transform: rotateZ(140deg); display: inline-block;" onclick="openPage('upspage')"></div>
<p style="display: inline;">statistics</p>
</div>
<hr>
<h2>Statistics</h2>
<p style="text-align: center;">View your gameplay statistics</p>
<hr>
<p>All statistics are updated when this page is opened.</p>
<p id="timeplayedcounter">Time played: 0 seconds</p>
<h3>Clicking</h3>
<p id="clickcountstat">Total clicks: 0</p>
<p id="sizeperclickstat">Size per click: 0 bytes</p>
<p id="sizefromclicking">Size from clicking: 0 bytes</p>
<h3>Upgrades</h3>
<p id="upgradesboughtcount">Upgrades bought: 0</p>
<p id="autoupgradesboughtcount">Automatic upgrades bought: 0</p>
<p id="clickingupgradesboughtcount">Clicking upgrades bought: 0</p>
<p id="spentonupscount">Spent on upgrades: 0 bytes</p>
<p id="spentonautoupscount">Spent on automatic upgrades: 0 bytes</p>
<p id="spentonclickupscount">Spent on click upgrades: 0 bytes</p>
<hr>
<!-- awards -->
<h2>Awards</h2>
<p style="text-align: center;">View your award collection</p>
<hr>
<div class="awardcard">
<h3 class="paddedtext" id="clickerawardtitle">Clicker: Level 0</h3>
<p class="paddedtext" id="clickerawardtext">Click 100 times</p>
<div class="awardBarProgress">
<div class="awardBar" id="clickrewardbar"></div>
</div>
</div>
<div class="awardcard">
<h3 class="paddedtext" id="factoryawardtitle">Factory: Level 0</h3>
<p class="paddedtext" id="factoryawardtext">Reach 1 byte per second.</p>
<div class="awardBarProgress">
<div class="awardBar" id="factoryawardbar"></div>
</div>
</div>
</div>
<!-- Cookies Message -->
<div class="cookiesmessage" id="cookiespopup">
<div class="cookiesmessage-header">COOKIES WOOO!</div>
<span class="closecookiesmessage" onclick="closeCookiesPopup()">x</span>
<div class="cookiesmessage-container">
<p>this uses cookies i guess.</p>
</div>
</div>
<!-- snackbar -->
<div id="snackbar">Message</div>
<script src="java.js"></script>
</body>
</html>