-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
286 lines (252 loc) · 13.1 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
<!DOCTYPE html>
<html ng-app="Felda" ng-controller="ctrl">
<head>
<meta charset="UTF-8">
<meta name="description" content="Nejzábavnější fyzikální simulace všech dob!">
<meta name="author" content="Jiří Zbytovský">
<title>Felda simulátor</title>
<!--LIBS-->
<script src="libs/angular.min.js" type="text/javascript"></script>
<!--DATA-->
<script src="app/data.js" type="text/javascript"></script>
<script src="app/leveldata.js" type="text/javascript"></script>
<script src="app/cars.js" type="text/javascript"></script>
<script src="app/userdata.js" type="text/javascript"></script>
<!--MAIN APP-->
<script src="app/misc.js" type="text/javascript"></script>
<script src="app/model.js" type="text/javascript"></script>
<script src="app/render.js" type="text/javascript"></script>
<script src="app/level.js" type="text/javascript"></script>
<script src="app/sounds.js" type="text/javascript"></script>
<!--ANGULAR APP-->
<script src="app/controller.js" type="text/javascript"></script>
<script src="app/directives.js" type="text/javascript"></script>
<script src="app/showroom.js" type="text/javascript"></script>
<!--CSS-->
<link rel="stylesheet" href="app/style.css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body ng-keydown="keyPress($event, true)" ng-keyup="keyPress($event, false)">
<!--TOOLTIP-->
<div id="tooltip" ng-show="CS.tooltip.visible" ng-style="CS.tooltip.style">
<span ng-repeat="l in CS.tooltip.message track by $index">{{l}}<br></span>
</div>
<!--POPUP-->
<div id="popup" ng-show="CS.popup" ng-style="style.popup" ng-class="{vanish: CS.popup.timeout && CS.popup.timeout < 400}" ng-switch="CS.popup.type">
<!--standard alert-->
<div ng-switch-when="alert">
<p ng-repeat="l in CS.popup.lines track by $index">{{l}}</p>
<p ng-if="CS.popup.okButton || CS.popup.button2">
<input type="button" ng-if="CS.popup.okButton" ng-click="CS.popup = false" value="OK" tooltip="Esc">
<input type="button" ng-if="CS.popup.button2" ng-click="CS.popup.button2.callback()" ng-value="CS.popup.button2.label">
</p>
</div>
<!--credits-->
<div ng-switch-when="credits">
<p><b>Credits</b></p>
<p>Felda Simulátor využívá framework <a href="https://angularjs.org/" target="_blank">AngularJS</a>.</p>
<p>Děkuji <a href="http://zby.cz/" target="_blank">Pavlu Zbytovskému</a> za naprogramování Reálné mapy,<br>
ta využívá <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> a <a href="https://leafletjs.com/" target="_blank">Leaflet</a>.</p>
<p><b>Disclaimer</b></p>
<p>
Jiří Zbytovský je autorem pouze samotného programu, zatímco názvy vozidel, jejich vzhled i použité obrázky mohou být intelektuálním vlastnictvím jiných subjektů.<br>
Tato aplikace není provozována pro zisk, má pouze zábavní a vzdělávací účel, kdyby si však vlastníci práv přáli odstranění určitých prvků, nechť kontaktují
<a href="mailto: [email protected]" target="_blank">autora</a>.
</p>
<p><input type="button" ng-click="CS.popup = false" value="Zavřít" tooltip="Esc"></p>
</div>
<!--confirm-->
<div ng-switch-when="confirm">
<p>{{CS.popup.text}}</p>
<p>
<input type="button" ng-click="sendConfirm(true)" value="OK" tooltip="Enter">
<input type="button" ng-click="sendConfirm(false)" value="Zrušit" tooltip="Esc">
</p>
</div>
<!--prompt with several fields-->
<div ng-switch-when="prompt">
<p ng-repeat="f in CS.popup.fields">{{f.label}} <input type="text" ng-model="f.value"><br></p>
<p><input type="button" ng-click="sendPrompt()" value="OK" tooltip="Enter"></p>
</div>
</div>
<div ng-switch="CS.tab">
<!-- MENU -->
<div ng-switch-when="menu">
<h1>Felda simulátor</h1>
<top-menu></top-menu>
<p ng-if="S">
<b>Běžící hra</b>:
{{levels[S.level.i].name}}, {{cars[S.car].name}} {{cars[S.car].engineName}} ({{cars[S.car].year}}), {{(S.d/1000).toFixed(1)}} km<br>
</p>
<div ng-if="!S">
<p>Vítejte ve Felda simulátoru - nejzábavnější fyzikální simulaci všech dob!<br>
V této hře můžete ovládat nejen toto známé lidové vozítko, ale nově i mnoho dalších.</p>
<p>Simulace je založená <i>převážně</i> na reálných datech a zahrnuje fyzikální model motoru, převodovky a spojky.<br>
Ty můžete ovládat a sledovat tak jízdní vlastnosti včetně spotřeby paliva, a nebo se prostě jen kochat pohledem na ubíhající krajinu!</p>
<p>Nově také byly přidány speciální levely, které vám poskytnou náročné výzvy,<br>
<span tooltip="Reálná mapa má občas svoje mouchy, tak mějte trpělivost...">a též <i>Reálná mapa</i>, kde bude načten výškový profil ze zadané trasy na mapě.</span></p>
<p>Je doporučeno hrát na počítači s klávesnicí, avšak lze se bez ní obejít, např. na tabletu <i>(viz Ovládání)</i></p>
<p><b>Hru spustťe tlačítkem Nová hra (výše)</b></p>
</div>
<h2>Ovládání <span ng-click="CS.showIntro = !CS.showIntro" class="fakeLink" style="font-size: 16px">{{CS.showIntro ? 'skrýt' : 'odkrýt'}}</span></h2>
<div ng-show="CS.showIntro">
<p>Pro ovládání jsou nejdůležitější pedály pro spojku a plyn, které lze posouvat myší a nebo tlačítky
<b>{{viewKey('cu')}}, {{viewKey('cd')}}, {{viewKey('gu')}}, {{viewKey('gd')}}</b> (popsáno přímo ve hře)
</p>
<p><b>Esc</b> pozastaví hru a otevře tuto obrazovku</p>
<p><b>Kolečko myši</b> přibližuje či oddaluje obraz</p>
<p><b>{{viewKey('brake')}}</b> aplikuje brzdu, která funguje zjednodušeně - plné sešlápnutí pedálu a bez prokluzu, kola jsou vždy přilnutá k vozovce</p>
<p>
<b>; 1 2 3 4 5 6</b> v řadě kláves nad písmeny zařadí neutrál či převod (pokud existuje)<br>
<b>0</b> až <b>6</b> na numerické klávesnici funguje stejně<br>
Avšak lze využít i myš, pokud v nastavení ovládání zapnete možnost <i>zobrazit řadící páku</i><br>
Zpátečka zde není, protože je nezajímavá
</p>
<p><b>{{viewKey('map')}}</b> při podržení otevře či zavře minimapku - náhled terénu</p>
<p><b>{{viewKey('nitro')}}</b> zdvojnásobí výkon motoru vstřikováním N<sub>2</sub>O - jen pro srandu ;-)</p>
<p>
<b>Pozn. 1:</b> simulátor obsahuje i zvukové efekty. Pokud by během hry zvuk nefungoval, <a class="fakeLink" ng-click="soundTroubleshoot()">viz zde</a><br>
<b>Pozn. 2:</b> doporučuji stisknout F11, abyste si hru mohli užít na celé obrazovce
</p>
</div>
</div>
<!-- NEW GAME -->
<div ng-switch-when="newgame">
<h1>Nová hra</h1>
<top-menu></top-menu>
<p ng-show="S">Pozn. stisknutím Enter zvolíte posledně zvolené možnosti.</p>
<span ng-if="CS.levelSelect !== false">Vybraný level: {{levels[CS.levelSelect].name}}</span>
<span ng-if="CS.carSelect !== false"><br>Vybraný automobil: {{cars[CS.carSelect].name}}</span>
<div ng-show="CS.levelSelect === false">
<h2>Vyberte level:</h2>
<ul>
<li ng-repeat="l in levels track by $index">
<a class="fakeLink" ng-click="chooseLevel($index)">{{l.name}}</a>
<i ng-if="l.sublevel"> (varianta levelu {{getSublevelParent(l.sublevel)}})</i><br>
<span style="padding-left: 30px">{{l.description}}</span><br>
</li>
</ul>
</div>
<div ng-show="CS.levelSelect !== false && CS.carSelect === false">
<h2>Vyberte automobil:</h2>
<ul>
<li ng-repeat="c in cars track by $index">
<span ng-if="isCarUnlocked($index)">
<a ng-click="chooseCar($index)" class="fakeLink">{{c.name}}</a> {{c.engineName}} ({{c.year}})
<a class="fakeLink" ng-click="enterShowroom($index)" tooltip="otevřít autosalón" style="cursor: help;">popis</a><br>
</span>
<span ng-if="!isCarUnlocked($index)" class="secretCarSelect">
bonusové auto <a class="fakeLink" ng-click="easterEgg()" style="cursor: help;">???</a>
</span>
</li>
</ul>
</div>
</div>
<!-- OPTIONS -->
<div ng-switch-when="options">
<!-- ?version to prevent annoying caching! Always update when html is changed :-( -->
<div ng-include="'app/ng/options.html?version=5'"></div>
</div>
<!-- CAR SHOWROOM -->
<div ng-switch-when="carShowroom">
<h1>Autosalón</h1>
<top-menu></top-menu>
<select ng-model="CS.showroomIndex" id="showroomSelectCar" ng-change="enterShowroom()">
<option ng-if="isCarUnlocked(opt.i)" ng-repeat="opt in optsShowroom" ng-value="opt.i">{{opt.txt}}</option>
</select><br>
<showroom></showroom>
</div>
<!-- GAME -->
<div ng-switch-when="game" id="game">
<div id="escapeButton" ng-click="escapeGame()" tooltip="Esc">✖️</div>
<div id="gameLevelTitle">{{levels[S.level.i].name}}, {{cars[S.car].name}} {{cars[S.car].engineName}} ({{cars[S.car].year}})</div>
<canvas id="map" width="800" height="400" ng-if="CS.enableGraphics" minimap></canvas>
<div id="stats" ng-include="'app/ng/stats.html?version=3'" ng-style="style.stats"></div>
<div id="advanced" ng-include="'app/ng/advanced.html?version=2'" ng-style="style.advanced" ng-if="CS.enableDetails && !S.tutorial"></div>
<div id="controls" ng-style="style.controls" ng-show="!S.disable.controls">
<div class="ctrlContainer">
Spojka<br>
<div class="pedalContainer">
<input type="range" style="width: 150px;" min="0" max="1" step="0.01" ng-model="getSetClutch" ng-model-options="{getterSetter: true}">
</div>
{{getKey('cu')}} ↑<br>
{{getKey('cd')}} ↓<br>
</div>
<div class="ctrlContainer">
Plyn<br>
<div class="pedalContainer">
<input type="range" style="width: 150px;" min="0" max="1" step="0.01" ng-model="getSetGas" ng-model-options="{getterSetter: true}">
</div>
{{getKey('gu')}} ↑<br>
{{getKey('gd')}} ↓<br>
</div>
<div class="ctrlContainer" style="text-align: left; width: 130px;">
<input type="button" value="START" class="mediumButton" style="width: 76px" onclick="M.start(); this.blur()">
<!--only when PID feedback loop enabled-->
<span ng-if="S && !S.disable.PID"><br>
<input type="button" value="tempomat" style="width: 76px; margin-bottom: 5px" tooltip="levý klik zapne, pravý vypne"
onclick="M.setPID(); this.blur()" oncontextmenu="M.remPID(); this.blur(); event.preventDefault()"><br>
<!--when PID currently running-->
<span ng-show="S.vTarget">
<span tooltip="nastavená hodnota tempomatu">→ {{st.calculateUnit(S.vTarget, CS.unitVel)}}</span><br>
<!--advanced PID details-->
<span ng-show="CS.enableDetails">
<span tooltip="plyn (člen proporcionální)">P {{S.PID[0].toPercent()}}</span><br>
<span tooltip="plyn (člen integrační)">I {{S.PID[1].toPercent()}}</span><br>
<span tooltip="plyn (člen derivační)">D {{S.PID[2].toPercent()}}</span><br>
</span>
<span tooltip="plyn (výsledný)">{{CS.enableDetails ? "∑ " : " "}}{{S.gas.toPercent()}}</span>
</span>
</span>
</div>
<div class="ctrlContainer" ng-show="CS.enableGearstick" style="padding-left: 20px">
<gearstick></gearstick>
</div>
<div id="warning">
<p ng-repeat="w in warnings" ng-if="w.f()">{{w.txt}}</p>
</div>
</div>
</div>
<!-- VERSION HISTORY -->
<div ng-switch-when="history">
<h1>Historie verzí</h1>
<top-menu></top-menu>
<p>
Na této stránce jsou shrnuty jen ty nejvýznamnější verze hry.<br>
Pokud vás zajímá zdrojový kód aplikace včetně jeho vývoje, navštivte GitHub <a href="https://github.com/Lemonexe/Felda" target="_blank">repozitář</a>
</p>
<table>
<tr ng-repeat="v in vHistory">
<td width="70">{{v.name}}</td><td width="130">{{v.date}}</td><td>{{v.desc}}</td>
</tr>
</table>
<p> </p>
<p><a class="fakeLink" ng-click="showChangelog = !showChangelog">{{showChangelog ? 'skrýt' : 'Co je nového?'}}</a></p>
<div ng-show="showChangelog">
Nejvýraznějších změn se hra dočkala v srpnu 2019, zde je jejich seznam:
<ul>
<li>UI kompletně přepracováno za pomoci frameworku AngularJS</li>
<li>Mapa (náhled terénu)</li>
<li>Tempomat</li>
<li>Autosalón</li>
<li>Zvuky vozidla i prostředí</li>
<li>Přidáno mnoho nových vozidel</li>
<li>Více obrázků v Alpách a na letišti, animované obrázky</li>
<li>Zoomování pomocí kolečka myši</li>
<li>Řazení umožněno i myší</li>
</ul>
</div>
</div>
</div>
<!-- REALWORLD MAP -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<div id="leafletMap" ng-style="leafletStyle()"></div>
<!-- FOOTER -->
<div class="footerDefense"></div>
<div id="footer" ng-show="['menu', 'history', 'newgame'].indexOf(CS.tab) > -1">
Vytvořil <a href="http://jira.zby.cz/" target='_blank'>Jiří Zbytovský</a> v letech 2017-2019 za použití <a class="fakeLink" ng-click="credits()">různých zdrojů</a>
</div>
<a id="githubLogo" href="https://github.com/Lemonexe/Felda" target="_blank" title="github"><img src="res/GitHub-Mark-32px.png"></a>
</body>
</html>