Skip to content

Commit 767bea5

Browse files
Fernando-A-RochaFernando-A-Rocha
committed
Vehicles.astro: Styling improvement
1 parent 527c01a commit 767bea5

File tree

1 file changed

+134
-102
lines changed

1 file changed

+134
-102
lines changed

‎web/src/pages/reference/ID_Lists/Vehicles.astro‎

Lines changed: 134 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { getAssetImagePath } from '@src/utils/general';
1212
import NoteBox from '@src/components/NoteBox.astro';
1313
1414
const vehicles = {
15-
"Aircrafts": {
15+
"Aircraft": {
1616
"Airplanes": [
1717
{ id: 592, name: "Andromada", modelName: "androm" },
1818
{ id: 577, name: "AT-400", modelName: "at400" },
@@ -276,97 +276,98 @@ const vehicles = {
276276
title: 'Vehicles',
277277
tableOfContents: false,
278278
}}>
279-
<p>This is a list of GTA:SA's vehicle ID numbers, as listed in the <code>vehicles.ide</code> game file.</p>
280-
<p>These vehicle ID numbers are used for several vehicle scripting functions.</p>
281-
<NoteBox type='tip'>Click on the model image to view the vehicle in 3D.</NoteBox>
279+
<p>This is a list of GTA:SA's vehicle ID numbers, as listed in the <code>vehicles.ide</code> game file.</p>
280+
<p>These vehicle ID numbers are used for several <a href="/reference/Scripting_Functions#Vehicle">vehicle scripting functions</a>.</p>
281+
<NoteBox type='tip'>Click on any model image to view the vehicle in 3D.</NoteBox>
282+
<NoteBox type='tip'>Use your browser's search function (<strong>Ctrl+F or Cmd+F</strong>) to quickly find a vehicle by name or ID.</NoteBox>
282283

283-
<h5>Table of Contents</h5>
284-
<ul>
285-
<span>Vehicles</span>
286-
<ul>
287-
{Object.keys(vehicles).map(category => (
288-
<li>
289-
<a href={`#${category}`}>{category}</a>
290-
<ul>
291-
{Object.keys(vehicles[category]).map(subcategory => (
292-
<>
293-
{subcategory !== 'Uncategorized' && (
294-
<li>
295-
<a href={`#${subcategory}`}>{subcategory}</a>
296-
</li>
297-
)}
298-
</>
299-
))}
300-
</ul>
301-
</li>
302-
))}
303-
</ul>
304-
<span>Lua tables</span>
305-
<ul>
306-
<li><a href="#lua-all">All valid vehicle IDs listed here</a></li>
307-
<li><a href="#lua-names">All vehicle names</a></li>
308-
<li><a href="#lua-model-names">All vehicle model names</a></li>
309-
<li><a href="#lua-no-lock">Vehicles that are not lockable</a></li>
310-
<li><a href="#lua-no-plate">Vehicles without number plates</a></li>
311-
<li><a href="#lua-3-colors">Vehicles that support up to three different colors</a></li>
312-
<li><a href="#lua-no-siren">Vehicles that don't support siren lights</a></li>
313-
<li><a href="#lua-no-engine">Vehicles without engines</a></li>
314-
<li><a href="#lua-2-doors">Vehicles with 2 physically enterable doors</a></li>
315-
<li><a href="#lua-4-doors">Vehicles with 4 physically enterable doors</a></li>
316-
</ul>
317-
</ul>
284+
<h5>Table of Contents</h5>
285+
<span>Vehicles:</span>
286+
<ul>
287+
{Object.keys(vehicles).map(category => (
288+
<li>
289+
<a href={`#${category}`}>{category}</a>
290+
<ul>
291+
{Object.keys(vehicles[category]).map(subcategory => (
292+
<>
293+
{subcategory !== 'Uncategorized' && (
294+
<li>
295+
<a href={`#${subcategory}`}>{subcategory}</a>
296+
</li>
297+
)}
298+
</>
299+
))}
300+
</ul>
301+
</li>
302+
))}
303+
</ul>
304+
<span>Lua tables:</span>
305+
<ul>
306+
<li><a href="#lua-all">All valid vehicle IDs listed here</a></li>
307+
<li><a href="#lua-names">All vehicle names</a></li>
308+
<li><a href="#lua-model-names">All vehicle model names</a></li>
309+
<li><a href="#lua-no-lock">Vehicles that are not lockable</a></li>
310+
<li><a href="#lua-no-plate">Vehicles without number plates</a></li>
311+
<li><a href="#lua-3-colors">Vehicles that support up to 3 different colors</a></li>
312+
<li><a href="#lua-no-siren">Vehicles that don't support siren lights</a></li>
313+
<li><a href="#lua-no-engine">Vehicles without engines</a></li>
314+
<li><a href="#lua-2-doors">Vehicles with 2 physically enterable doors</a></li>
315+
<li><a href="#lua-4-doors">Vehicles with 4 physically enterable doors</a></li>
316+
</ul>
318317

319-
<div class="vehicle-othercategory">
320-
<h3 class="vehicle-category-othertitle">Specification</h3>
321-
<div class="vehicle-list">
322-
<div class="vehicle-item">
323-
<div class="vehicle-title">Vehicle Name</div>
324-
<a target="_blank" href={`http://gta.rockstarvision.com/vehicleviewer/#sa`}>
325-
Preview Image
326-
</a>
327-
<div class="vehicle-details"><code>ID</code> <code>Model Name</code></div>
328-
</div>
318+
<div class="vehicle-othercategory">
319+
<h3 class="vehicle-category-othertitle">Specification</h3>
320+
<div class="vehicle-list">
321+
<div class="vehicle-item">
322+
<div class="vehicle-title">Vehicle Name</div>
323+
<a target="_blank" href={`http://gta.rockstarvision.com/vehicleviewer/#sa`}>
324+
Preview Image
325+
</a>
326+
<div class="vehicle-details"><code>ID</code> <code>Model Name</code></div>
329327
</div>
330-
331-
<p><strong>Vehicle Name</strong>: The friendly capitalized name of the vehicle model, which can be used in functions such as <a href="/reference/getVehicleName">getVehicleName</a>, <a href="/reference/getVehicleNameFromModel">getVehicleNameFromModel</a> and <a href="/reference/getVehicleModelFromName">getVehicleModelFromName</a>.</p>
332-
<p><strong>Preview Image</strong>: A small picture of the vehicle in-game, wrapped in a link to the Vehicle 3D Model viewer site.</p>
333-
<p><strong>ID</strong>: The numeric model identifier, which can be used in functions such as <a href="/reference/getVehicleNameFromModel">getVehicleNameFromModel</a>, <a href="/reference/getVehicleModelFromName">getVehicleModelFromName</a>, <a href="/reference/createVehicle">createVehicle</a>, <a href="/reference/setElementModel">setElementModel</a> and <a href="/reference/getElementModel">getElementModel</a>.</p>
334-
<p><strong>Model Name</strong>: The name of the vehicle model (<code>DFF</code> and <code>TXD</code> files in <code>gta3.img</code>), which is mainly useful for modding purposes (e.g. <code>glenshit</code>).</p>
335328
</div>
336329

337-
{Object.entries(vehicles).map(([category, subcategories]) => (
338-
<div class="vehicle-category" id={category}>
339-
<h3 class="vehicle-category-title">{category}</h3>
340-
{
341-
Object.entries(subcategories).map(([subcategory, vehiclesList]) => (
342-
<div class="vehicle-subcategory" id={subcategory}>
343-
{subcategory !== 'Uncategorized' && (
344-
<h4 class="vehicle-subcategory-title">{subcategory}</h4>
345-
)}
346-
<div class="vehicle-list">
347-
{vehiclesList.map(vehicle => (
348-
<div class="vehicle-item" id={vehicle.name}>
349-
<div class="vehicle-title">{vehicle.name}</div>
350-
<a target="_blank" href={`http://gta.rockstarvision.com/vehicleviewer/#sa/${vehicle.id}`}>
351-
<Image
352-
src={getAssetImagePath(`Vehicles/${vehicle.id}.png`)}
353-
alt={vehicle.name}
354-
class="vehicle-image"
355-
/>
356-
</a>
357-
<div class="vehicle-details"><code>{vehicle.id}</code> <code>{vehicle.modelName}</code></div>
358-
</div>
359-
))}
360-
</div>
361-
</div>
362-
))
363-
}
364-
</div>
365-
))}
330+
<p><strong>Vehicle Name</strong>: The friendly capitalized name of the vehicle model, which can be used in functions such as <a href="/reference/getVehicleName">getVehicleName</a>, <a href="/reference/getVehicleNameFromModel">getVehicleNameFromModel</a> and <a href="/reference/getVehicleModelFromName">getVehicleModelFromName</a>.</p>
331+
<p><strong>Preview Image</strong>: A small picture of the vehicle in-game, wrapped in a link to the Vehicle 3D Model viewer site.</p>
332+
<p><strong>ID</strong>: The numeric model identifier, which can be used in functions such as <a href="/reference/getVehicleNameFromModel">getVehicleNameFromModel</a>, <a href="/reference/getVehicleModelFromName">getVehicleModelFromName</a>, <a href="/reference/createVehicle">createVehicle</a>, <a href="/reference/setElementModel">setElementModel</a> and <a href="/reference/getElementModel">getElementModel</a>.</p>
333+
<p><strong>Model Name</strong>: The name of the vehicle model (<code>DFF</code> and <code>TXD</code> files in <code>gta3.img</code>), which is mainly useful for modding purposes (e.g. <code>glenshit</code>).</p>
334+
</div>
366335

367-
<section data-pagefind-ignore>
368-
<p id="lua-all">Lua table of all the valid vehicle IDs listed on this page:</p>
369-
<Code lang="lua" code={`
336+
{Object.entries(vehicles).map(([category, subcategories]) => (
337+
<div class="vehicle-category" id={category}>
338+
<h3 class="vehicle-category-title">{category}</h3>
339+
{
340+
Object.entries(subcategories).map(([subcategory, vehiclesList]) => (
341+
<div class="vehicle-subcategory" id={subcategory}>
342+
{subcategory !== 'Uncategorized' && (
343+
<h4 class="vehicle-subcategory-title">{subcategory}</h4>
344+
)}
345+
<div class="vehicle-list">
346+
{vehiclesList.map(vehicle => (
347+
<div class="vehicle-item" id={vehicle.name}>
348+
<div class="vehicle-title">{vehicle.name}</div>
349+
<a target="_blank" href={`http://gta.rockstarvision.com/vehicleviewer/#sa/${vehicle.id}`}>
350+
<Image
351+
src={getAssetImagePath(`Vehicles/${vehicle.id}.png`)}
352+
alt={vehicle.name}
353+
class="vehicle-image"
354+
/>
355+
</a>
356+
<div class="vehicle-details"><code>{vehicle.id}</code> <code>{vehicle.modelName}</code></div>
357+
</div>
358+
))}
359+
</div>
360+
</div>
361+
))
362+
}
363+
</div>
364+
))}
365+
366+
<section data-pagefind-ignore>
367+
368+
<details id="lua-all">
369+
<summary>Lua table of all the valid vehicle IDs listed on this page</summary>
370+
<Code lang="lua" code={`
370371
vehicleIds = {
371372
400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410, 411, 412, 413, 414, 415,
372373
416, 417, 418, 419, 420, 421, 422, 423, 424, 425, 426, 427, 428, 429, 430, 431, 432, 433,
@@ -381,8 +382,10 @@ vehicleIds = {
381382
578, 579, 580, 581, 582, 583, 584, 585, 586, 587, 588, 589, 590, 591, 592, 593, 594, 595,
382383
596, 597, 598, 599, 600, 601, 602, 603, 604, 605, 606, 607, 608, 609, 610, 611
383384
}`}/>
385+
</details>
384386

385-
<p id="lua-names">Lua table of all vehicle names:</p>
387+
<details id="lua-names">
388+
<summary>Lua table of all vehicle names</summary>
386389
<Code lang="lua" code={`
387390
-- (when indexing just do a <vehicle model id you want the name of> - 399 to get the name)
388391
vehicleNames = {
@@ -406,49 +409,63 @@ vehicleNames = {
406409
"Picador", "S.W.A.T.", "Alpha", "Phoenix", "Glendale Damaged", "Sadler Damaged", "Baggage Trailer (covered)",
407410
"Baggage Trailer (Uncovered)", "Trailer (Stairs)", "Boxville Mission", "Farm Trailer", "Street Clean Trailer"
408411
}`}/>
412+
</details>
409413

410-
<p id="lua-model-names">Lua table of all vehicle model names:</p>
414+
<details id="lua-model-names">
415+
<summary>Lua table of all vehicle model names</summary>
411416
<Code lang="lua" code={`
412417
-- (when indexing just do a <vehicle model id you want the name of> - 399 to get the model name)
413418
vehicleModelNames {
414419
"landstal", "bravura", "buffalo", "linerun", "peren", "sentinel", "dumper", "firetruk", "trash", "stretch", "manana", "infernus", "voodoo", "pony", "mule", "cheetah", "ambulan", "leviathn", "moonbeam", "esperant", "taxi", "washing", "bobcat", "mrwhoop", "bfinject", "hunter", "premier", "enforcer", "securica", "banshee", "predator", "bus", "rhino", "barracks", "hotknife", "artict1", "previon", "coach", "cabbie", "stallion", "rumpo", "rcbandit", "romero", "packer", "monster", "admiral", "squalo", "seaspar", "pizzaboy", "tram", "artict2", "turismo", "speeder", "reefer", "tropic", "flatbed", "yankee", "caddy", "solair", "topfun", "skimmer", "pcj600", "faggio", "freeway", "rcbaron", "rcraider", "glendale", "oceanic", "sanchez", "sparrow", "patriot", "quad", "coastg", "dinghy", "hermes", "sabre", "rustler", "zr350", "walton", "regina", "comet", "bmx", "burrito", "camper", "marquis", "baggage", "dozer", "maverick", "vcnmav", "rancher", "fbiranch", "virgo", "greenwoo", "jetmax", "hotring", "sandking", "blistac", "polmav", "boxville", "benson", "mesa", "rcgoblin", "hotrina", "hotrinb", "bloodra", "rnchlure", "supergt", "elegant", "journey", "bike", "mtbike", "beagle", "cropdust", "stunt", "petro", "rdtrain", "nebula", "majestic", "buccanee", "shamal", "hydra", "fcr900", "nrg500", "copbike", "cement", "towtruck", "fortune", "cadrona", "fbitruck", "willard", "forklift", "tractor", "combine", "feltzer", "remingtn", "slamvan", "blade", "freight", "streak", "vortex", "vincent", "bullet", "clover", "sadler", "firela", "hustler", "intruder", "primo", "cargobob", "tampa", "sunrise", "merit", "utility", "nevada", "yosemite", "windsor", "monstera", "monsterb", "uranus", "jester", "sultan", "stratum", "elegy", "raindanc", "rctiger", "flash", "tahoma", "savanna", "bandito", "freiflat", "streakc", "kart", "mower", "duneride", "sweeper", "broadway", "tornado", "at400", "dft30", "huntley", "stafford", "bf400", "newsvan", "tug", "petrotr", "emperor", "wayfarer", "euros", "hotdog", "club", "freibox", "artict3", "androm", "dodo", "rccam", "launch", "copcarla", "copcarsf", "copcarvg", "copcarru", "picador", "swatvan", "alpha", "phoenix", "glenshit", "sadlshit", "bagboxa", "bagboxb", "tugstair", "boxburg", "farmtr1", "utiltr1"
415420
}`}/>
421+
</details>
416422

417-
<p id="lua-no-lock">Lua table of vehicles that are not lockable:</p>
423+
<details id="lua-no-lock">
424+
<summary>Lua table of vehicles that are not lockable</summary>
418425
<Code lang="lua" code={`
419426
nonLockableVehicles = {
420427
594, 606, 607, 611, 584, 608, 435, 450, 591, 539, 441, 464, 501, 465, 564, 472, 473, 493, 595, 484, 430, 453, 452, 446, 454, 581, 509, 481,
421428
462, 521, 463, 510, 522, 461, 448, 468, 586, 425, 520
422429
}`}/>
430+
</details>
423431

424-
<p id="lua-no-plate">Lua table of vehicles without number plates:</p>
432+
<details id="lua-no-plate">
433+
<summary>Lua table of vehicles that do not have number plates</summary>
425434
<Code lang="lua" code={`
426435
noNumberPlates = {
427436
592, 553, 577, 488, 511, 497, 548, 563, 512, 476, 593, 447, 425, 519, 520, 460, 417, 469, 487, 513, 509, 481, 510, 472, 473, 493, 595, 484,
428437
430, 453, 452, 446, 454
429438
}`}/>
439+
</details>
430440

431-
<p id="lua-3-colors">Lua table of vehicles that support up to three different colors:</p>
441+
<details id="lua-3-colors">
442+
<summary>Lua table of vehicles that support up to 3 different colors</summary>
432443
<Code lang="lua" code={`
433444
maxColorVehicles = {
434445
483, 524, 446
435446
}`}/>
447+
</details>
436448

437-
<p id="lua-no-siren">Lua table of vehicles that doesn't support siren lights:</p>
449+
<details id="lua-no-siren">
450+
<summary>Lua table of vehicles that do not support siren lights</summary>
438451
<Code lang="lua" code={`
439452
noSirenLights = {
440453
400, 401, 402, 403, 404, 405, 406, 417, 420, 423, 425, 430, 432, 433, 435, 438, 441, 446, 447, 448, 452, 453, 454, 460, 461, 462, 463, 464,
441454
465, 468, 469, 472, 473, 476, 481, 484, 487, 488, 493, 497, 501, 509, 510, 511, 512, 513, 519, 520, 521, 522, 523, 528, 537, 538, 539, 544,
442455
548, 553, 563, 564, 569, 570, 577, 581, 586, 590, 592, 593, 595, 600, 601, 602, 603, 604, 605, 606, 607, 608, 610, 611
443456
}`}/>
457+
</details>
444458

445-
<p id="lua-no-engine">Lua table of vehicles without engines:</p>
459+
<details id="lua-no-engine">
460+
<summary>Lua table of vehicles that do not have engines</summary>
446461
<Code lang="lua" code={`
447462
noEngineVehicles = { -- such as bicycles and trailers
448463
481, 509, 510, 606, 607, 608, 610, 611, 435, 450, 584, 591, 590, 569, 570, 594
449464
}`}/>
465+
</details>
450466

451-
<p id="lua-2-doors">Lua table of vehicles with 2 physically enterable doors:</p>
467+
<details id="lua-2-doors">
468+
<summary>Lua table of vehicles with 2 physically enterable doors</summary>
452469
<Code lang="lua" code={`
453470
twoDoorVehicles = { -- boats and bikes not included
454471
592, 577, 511, 512, 593, 460, 548, 417, 488, 563, 447, 469,
@@ -464,8 +481,10 @@ twoDoorVehicles = { -- boats and bikes not included
464481
538, 537,
465482
424, 504, 483, 508, 500, 444, 556, 557, 495,
466483
}`}/>
484+
</details>
467485

468-
<p id="lua-4-doors">Lua table of vehicles with 4 physically enterable doors:</p>
486+
<details id="lua-4-doors">
487+
<summary>Lua table of vehicles with 4 physically enterable doors</summary>
469488
<Code lang="lua" code={`
470489
fourDoorVehicles = { -- boats and bikes not included
471490
487, 497,
@@ -478,13 +497,15 @@ fourDoorVehicles = { -- boats and bikes not included
478497
567,
479498
561, 560,
480499
}`}/>
481-
</section>
500+
</details>
501+
502+
</section>
482503

483-
<SeeAlsoSection seeAlsoLinks={getSeeAlsoLinksFromList([
484-
'reference:ID_Lists',
485-
'reference:vehicle',
486-
'external:Web Vehicle 3D Model Viewer:http://gta.rockstarvision.com/vehicleviewer/#sa'
487-
])} currentId='' />
504+
<SeeAlsoSection seeAlsoLinks={getSeeAlsoLinksFromList([
505+
'reference:ID_Lists',
506+
'reference:vehicle',
507+
'external:Web Vehicle 3D Model Viewer:http://gta.rockstarvision.com/vehicleviewer/#sa'
508+
])} currentId='' />
488509
</StarlightPage>
489510

490511
<style>
@@ -512,14 +533,25 @@ fourDoorVehicles = { -- boats and bikes not included
512533
align-items: flex-start;
513534
text-align: center;
514535
}
536+
@media (max-width: 600px) {
537+
.vehicle-list {
538+
justify-content: center;
539+
}
540+
.vehicle-category-title,
541+
.vehicle-othercategory-title,
542+
.vehicle-subcategory-title {
543+
text-align: center;
544+
}
545+
}
515546
.vehicle-subcategory-title {
516547
border-bottom: 1px solid var(--color-mta-orange);
517548
}
518549
.vehicle-item {
519550
padding: 0.2rem;
520551
margin: 0;
521552
border: 1px solid var(--sl-color-gray-4);
522-
width: 150px;
553+
width: 140px;
554+
font-size: 0.9rem;
523555
}
524556
.vehicle-item .vehicle-title {
525557
margin-bottom: 1rem;

0 commit comments

Comments
 (0)