Add some ID Lists pages (Related to #21)

Author: Fernando-A-Rocha

assets/images/Bones/bone_ids.webp

@@ -1,3 +1,4 @@
 output/
 cache/
+images/
 __pycache__/

assets/images/Weather/0.png

@@ -0,0 +1,64 @@
+import os
+import requests
+import shutil
+from urllib.parse import urljoin, urlparse
+from bs4 import BeautifulSoup
+
+url = "https://wiki.multitheftauto.com/wiki/Weather"
+filter_str = "Weather_" # Filter for images that containing this string in src
+remove_prefix_str = '150px-Weather_'
+
+def download_filtered_images(download_folder="images"):
+    # Create folder if it doesn't exist or clear it if it does
+    if not os.path.exists(download_folder):
+        os.makedirs(download_folder)
+    else:
+        shutil.rmtree(download_folder)
+        os.makedirs(download_folder)
+
+
+    # Request the webpage content
+    response = requests.get(url)
+    response.raise_for_status()  # Raise error if request failed
+
+    # Parse HTML
+    soup = BeautifulSoup(response.text, "html.parser")
+
+    # Find all image tags
+    images = soup.find_all("img")
+
+    downloaded = 0
+    for img in images:
+        src = img.get("src")
+        if not src:
+            continue
+
+        # Check if filter string is in the image path (src)
+        if filter_str in src:
+            # Construct full URL if src is relative
+            img_url = urljoin(url, src)
+
+            # Extract image filename
+            filename = os.path.basename(urlparse(img_url).path)
+            if not filename:
+                filename = f"image_{downloaded}.jpg"
+
+            if filename.startswith(remove_prefix_str):
+                filename = filename[len(remove_prefix_str):]
+
+            # Download and save the image
+            try:
+                img_resp = requests.get(img_url)
+                img_resp.raise_for_status()
+                with open(os.path.join(download_folder, filename), "wb") as f:
+                    f.write(img_resp.content)
+                print(f"Downloaded: {filename}")
+                downloaded += 1
+            except Exception as e:
+                print(f"Failed to download {img_url}: {e}")
+
+    if downloaded == 0:
+        print("No images found matching the filter.")
+
+if __name__ == "__main__":
+    download_filtered_images()

assets/images/Weather/1.png

@@ -0,0 +1,97 @@
+---
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+
+import { getSeeAlsoLinksFromList } from '@src/utils/general';
+import SeeAlsoSection from '@src/components/SeeAlsoSection.astro';
+
+import { Code } from '@astrojs/starlight/components';
+
+import { Image } from 'astro:assets';
+import { getAssetImagePath } from '@src/utils/general';
+
+---
+<StarlightPage frontmatter={{
+    template: 'doc',
+    title: 'Bone IDs',
+    tableOfContents: false,
+}}>
+    <p>List of all ped <strong>Bone IDs</strong> that can be used with functions such as <a href="/reference/getElementBonePosition">getElementBonePosition</a>.</p>
+
+    <div class="bonesbox">
+        <ul>
+            <li>0: <strong>BONE_ROOT</strong></li>
+            <li>1: <strong>BONE_PELVIS1</strong></li>
+            <li>2: <strong>BONE_PELVIS</strong></li>
+            <li>3: <strong>BONE_SPINE1</strong></li>
+            <li>4: <strong>BONE_UPPERTORSO</strong></li>
+            <li>5: <strong>BONE_NECK</strong></li>
+            <li>6: <strong>BONE_HEAD2</strong></li>
+            <li>7: <strong>BONE_HEAD1</strong></li>
+            <li>8: <strong>BONE_HEAD</strong></li>
+            <li>21: <strong>BONE_RIGHTUPPERTORSO</strong></li>
+            <li>22: <strong>BONE_RIGHTSHOULDER</strong></li>
+            <li>23: <strong>BONE_RIGHTELBOW</strong></li>
+            <li>24: <strong>BONE_RIGHTWRIST</strong></li>
+            <li>25: <strong>BONE_RIGHTHAND</strong></li>
+            <li>26: <strong>BONE_RIGHTTHUMB</strong></li>
+            <li>31: <strong>BONE_LEFTUPPERTORSO</strong></li>
+            <li>32: <strong>BONE_LEFTSHOULDER</strong></li>
+            <li>33: <strong>BONE_LEFTELBOW</strong></li>
+            <li>34: <strong>BONE_LEFTWRIST</strong></li>
+            <li>35: <strong>BONE_LEFTHAND</strong></li>
+            <li>36: <strong>BONE_LEFTTHUMB</strong></li>
+            <li>41: <strong>BONE_LEFTHIP</strong></li>
+            <li>42: <strong>BONE_LEFTKNEE</strong></li>
+            <li>43: <strong>BONE_LEFTANKLE</strong></li>
+            <li>44: <strong>BONE_LEFTFOOT</strong></li>
+            <li>51: <strong>BONE_RIGHTHIP</strong></li>
+            <li>52: <strong>BONE_RIGHTKNEE</strong></li>
+            <li>53: <strong>BONE_RIGHTANKLE</strong></li>
+            <li>54: <strong>BONE_RIGHTFOOT</strong></li>
+            <li>201: <strong>BONE_BELLY</strong></li>
+            <li>301: <strong>BONE_RIGHTBREAST</strong></li>
+            <li>302: <strong>BONE_LEFTBREAST</strong></li>
+        </ul>
+
+        <Image class="bonesimage" src={getAssetImagePath("Bones/bone_ids.webp")} alt="Labeled Bone IDs" width="150"/>
+    </div>
+
+    <h4>Lua table of these Bone IDs:</h4>
+
+    <Code lang="lua" code=`
+local boneIDs = {
+    0, 1, 2, 3, 4, 5, 6, 7, 8, 21,
+    22, 23, 24, 25, 26, 31, 32, 33,
+    34, 35, 36, 41, 42, 43, 44, 51,
+    52, 53, 54, 201, 301, 302
+}
+    `/>
+
+    <SeeAlsoSection seeAlsoLinks={getSeeAlsoLinksFromList([
+        'reference:ID_Lists',
+    ])} currentId='' />
+</StarlightPage>
+
+<style>
+    .bonesbox {
+        margin-top: 2rem;
+        display: flex;
+        align-items: flex-start;
+        flex-direction: row;
+        gap: 2rem;
+    }
+    .bonesimage {
+        max-width: 100%;
+        height: auto;
+        object-fit: contain;
+    }
+
+    .bonesbox ul {
+        list-style-type: none;
+        padding: 0;
+    }
+
+    .bonesbox li {
+        margin-bottom: 0.5rem;
+    }
+</style>

assets/images/Weather/10.png

@@ -0,0 +1,169 @@
+---
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+import { getSeeAlsoLinksFromList } from '@src/utils/general';
+import SeeAlsoSection from '@src/components/SeeAlsoSection.astro';
+
+import NoteBox from '@src/components/NoteBox.astro';
+---
+<StarlightPage frontmatter={{
+    template: 'doc',
+    title: 'Vehicle Colors',
+    tableOfContents: false,
+}}>
+    <p>These are the <strong>Vehicle Color IDs</strong> that you can get with <a href="/reference/getVehicleColor">getVehicleColor</a> and set with <a href="/reference/setVehicleColor">setVehicleColor</a>.</p>
+    <NoteBox type='tip'>Vehicles in MTA can also have RGB (red, green, blue) colors set with that same function, going beyond the 127 predefined colors listed here.</NoteBox>
+
+    <div class="vctable">
+        <div style="background: #000000;">0</div>
+        <div style="background: #F5F5F5; color:black;">1</div>
+        <div style="background: #2A77A1;">2</div>
+        <div style="background: #840410;">3</div>
+        <div style="background: #263739;">4</div>
+        <div style="background: #86446E;">5</div>
+        <div style="background: #D78E10;">6</div>
+        <div style="background: #4C75B7;">7</div>
+        <div style="background: #BDBEC6;">8</div>
+        <div style="background: #5E7072;">9</div>
+        <div style="background: #46597A;">10</div>
+        <div style="background: #656A79;">11</div>
+        <div style="background: #5D7E8D;">12</div>
+        <div style="background: #58595A;">13</div>
+        <div style="background: #D6DAD6;">14</div>
+        <div style="background: #9CA1A3;">15</div>
+        <div style="background: #335F3F;">16</div>
+        <div style="background: #730E1A;">17</div>
+        <div style="background: #7B0A2A;">18</div>
+        <div style="background: #9F9D94;">19</div>
+        <div style="background: #3B4E78;">20</div>
+        <div style="background: #732E3E;">21</div>
+        <div style="background: #691E3B;">22</div>
+        <div style="background: #96918C;">23</div>
+        <div style="background: #515459;">24</div>
+        <div style="background: #3F3E45;">25</div>
+        <div style="background: #A5A9A7;">26</div>
+        <div style="background: #635C5A;">27</div>
+        <div style="background: #3D4A68;">28</div>
+        <div style="background: #979592;">29</div>
+        <div style="background: #421F21;">30</div>
+        <div style="background: #5F272B;">31</div>
+        <div style="background: #8494AB;">32</div>
+        <div style="background: #767B7C;">33</div>
+        <div style="background: #646464;">34</div>
+        <div style="background: #5A5752;">35</div>
+        <div style="background: #252527;">36</div>
+        <div style="background: #2D3A35;">37</div>
+        <div style="background: #93A396;">38</div>
+        <div style="background: #6D7A88;">39</div>
+        <div style="background: #221918;">40</div>
+        <div style="background: #6F675F;">41</div>
+        <div style="background: #7C1C2A;">42</div>
+        <div style="background: #5F0A15;">43</div>
+        <div style="background: #193826;">44</div>
+        <div style="background: #5D1B20;">45</div>
+        <div style="background: #9D9872;">46</div>
+        <div style="background: #7A7560;">47</div>
+        <div style="background: #989586;">48</div>
+        <div style="background: #ADB0B0;">49</div>
+        <div style="background: #848988;">50</div>
+        <div style="background: #304F45;">51</div>
+        <div style="background: #4D6268;">52</div>
+        <div style="background: #162248;">53</div>
+        <div style="background: #272F4B;">54</div>
+        <div style="background: #7D6256;">55</div>
+        <div style="background: #9EA4AB;">56</div>
+        <div style="background: #9C8D71;">57</div>
+        <div style="background: #6D1822;">58</div>
+        <div style="background: #4E6881;">59</div>
+        <div style="background: #9C9C98;">60</div>
+        <div style="background: #917347;">61</div>
+        <div style="background: #661C26;">62</div>
+        <div style="background: #949D9F;">63</div>
+        <div style="background: #A4A7A5;">64</div>
+        <div style="background: #8E8C46;">65</div>
+        <div style="background: #341A1E;">66</div>
+        <div style="background: #6A7A8C;">67</div>
+        <div style="background: #AAAD8E;">68</div>
+        <div style="background: #AB988F;">69</div>
+        <div style="background: #851F2E;">70</div>
+        <div style="background: #6F8297;">71</div>
+        <div style="background: #585853;">72</div>
+        <div style="background: #9AA790;">73</div>
+        <div style="background: #601A23;">74</div>
+        <div style="background: #20202C;">75</div>
+        <div style="background: #A4A096;">76</div>
+        <div style="background: #AA9D84;">77</div>
+        <div style="background: #78222B;">78</div>
+        <div style="background: #0E316D;">79</div>
+        <div style="background: #722A3F;">80</div>
+        <div style="background: #7B715E;">81</div>
+        <div style="background: #741D28;">82</div>
+        <div style="background: #1E2E32;">83</div>
+        <div style="background: #4D322F;">84</div>
+        <div style="background: #7C1B44;">85</div>
+        <div style="background: #2E5B20;">86</div>
+        <div style="background: #395A83;">87</div>
+        <div style="background: #6D2837;">88</div>
+        <div style="background: #A7A28F;">89</div>
+        <div style="background: #AFB1B1;">90</div>
+        <div style="background: #364155;">91</div>
+        <div style="background: #6D6C6E;">92</div>
+        <div style="background: #0F6A89;">93</div>
+        <div style="background: #204B6B;">94</div>
+        <div style="background: #2B3E57;">95</div>
+        <div style="background: #9B9F9D;">96</div>
+        <div style="background: #6C8495;">97</div>
+        <div style="background: #4D5D60;">98</div>
+        <div style="background: #AE9B7F;">99</div>
+        <div style="background: #406C8F;">100</div>
+        <div style="background: #1F253B;">101</div>
+        <div style="background: #AB9276;">102</div>
+        <div style="background: #134573;">103</div>
+        <div style="background: #96816C;">104</div>
+        <div style="background: #64686A;">105</div>
+        <div style="background: #105082;">106</div>
+        <div style="background: #A19983;">107</div>
+        <div style="background: #385694;">108</div>
+        <div style="background: #525661;">109</div>
+        <div style="background: #7F6956;">110</div>
+        <div style="background: #8C929A;">111</div>
+        <div style="background: #596E87;">112</div>
+        <div style="background: #473532;">113</div>
+        <div style="background: #44624F;">114</div>
+        <div style="background: #730A27;">115</div>
+        <div style="background: #223457;">116</div>
+        <div style="background: #640D1B;">117</div>
+        <div style="background: #A3ADC6;">118</div>
+        <div style="background: #695853;">119</div>
+        <div style="background: #9B8B80;">120</div>
+        <div style="background: #620B1C;">121</div>
+        <div style="background: #5B5D5E;">122</div>
+        <div style="background: #624428;">123</div>
+        <div style="background: #731827;">124</div>
+        <div style="background: #1B376D;">125</div>
+        <div style="background: #EC6AAE;">126</div>
+    </div>
+
+    <SeeAlsoSection seeAlsoLinks={getSeeAlsoLinksFromList([
+        'reference:ID_Lists',
+    ])} currentId='' />
+</StarlightPage>
+
+<style>
+    .vctable {
+        font-family: tahoma, arial, helvetica;
+        color: white;
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .vctable > div {
+        width: 50px;
+        height: 50px;
+        border: 1px solid black;
+        padding: 0;
+        margin: 0;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>