intial commit

css/app.css

@@ -0,0 +1,50 @@
+/* CSS Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+@font-face {
+    font-family: apex;
+    src: url("../font/Apex-Regular.ttf");
+}
+
+body {
+    font-family: 'apex', sans-serif;
+}
+
+/* Category Container styles */
+.category-container {
+    width: 30%;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+/* Legend Mosaic styles */
+.legend-item {
+    text-align: center;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    background-color: #f9f9f9;
+    margin-bottom: 10px;
+    width: 100px;
+    height: 150px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  
+  .legend-item img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 50%;
+  }
+  
+  .legend-item p {
+    margin: 0;
+    font-weight: bold;
+  }

data/legends.json

@@ -0,0 +1,186 @@
+legends = [
+    {
+        "name": "wraith",
+        "type": "skirmisher",
+        "challenges": [
+            "Win a match without taking damage",
+            "Eliminate 5 enemies in a single match"
+        ],
+        "loadouts": [],
+        "image": "img/legends/Wraith_Legend_Card.png"
+    },
+    {
+        "name": "bangalore",
+        "type": "assault",
+        "challenges": [
+            "Survive for 10 minutes without dealing damage",
+            "Revive 3 teammates in a single match"
+        ],
+        "loadouts": [],
+        "image": "img/legends/Bangalore_Legend_Card.png"
+    },
+    {
+        "name": "bloodhound",
+        "type": "recon",
+        "challenges": [
+            "Scan 10 enemy tracks",
+            "Deal damage with Beast of the Hunt active"
+        ],
+        "loadouts": [],
+        "image": "img/legends/Bloodhound_Legend_Card.png"
+    },
+    {
+        "name": "ash",
+        "image": "img/legends/Ash_Legend_Card.png",
+        "type": "assault",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "ballistic",
+        "image": "img/legends/Ballistic_Legend_Card.png",
+        "type": "assault",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "catalyst",
+        "image": "img/legends/Catalyst_Legend_Card.png",
+        "type": "controller",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "caustic",
+        "image": "img/legends/Caustic_Legend_Card.png",
+        "type": "controller",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "conduit",
+        "image": "img/legends/Conduit_Legend_Card.png",
+        "type": "support",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "crypto",
+        "image": "img/legends/Crypto_Legend_Card.png",
+        "type": "recon",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "fuse",
+        "image": "img/legends/Fuse_Legend_Card.png",
+        "type": "assault",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "gibraltar",
+        "image": "img/legends/Gibraltar_Legend_Card.png",
+        "type": "support",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "horizon",
+        "image": "img/legends/Horizon_Legend_Card.png",
+        "type": "skirmisher",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "lifeline",
+        "image": "img/legends/Lifeline_Legend_Card.png",
+        "type": "support",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "loba",
+        "image": "img/legends/Loba_Legend_Card.png",
+        "type": "support",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "mad Maggie",
+        "image": "img/legends/Mad_Maggie_Legend_Card.png",
+        "type": "assault",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "mirage",
+        "image": "img/legends/Mirage_Legend_Card.png",
+        "type": "support",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "newcastle",
+        "image": "img/legends/Newcastle_Legend_Card.png",
+        "type": "support",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "octane",
+        "image": "img/legends/Octane_Legend_Card.png",
+        "type": "skirmisher",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "pathfinder",
+        "image": "img/legends/Pathfinder_Legend_Card.png",
+        "type": "skirmisher",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "rampart",
+        "image": "img/legends/Rampart_Legend_Card.png",
+        "type": "controller",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "revenant",
+        "image": "img/legends/Revenant_Legend_Card.png",
+        "type": "skirmisher",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "seer",
+        "image": "img/legends/Seer_Legend_Card.png",
+        "type": "recon",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "valkyrie",
+        "image": "img/legends/Valkyrie_Legend_Card.png",
+        "type": "skirmisher",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "vantage",
+        "image": "img/legends/Vantage_Legend_Card.png",
+        "type": "recon",
+        "challenges": [],
+        "loadouts": []
+    },
+    {
+        "name": "wattson",
+        "image": "img/legends/Wattson_Legend_Card.png",
+        "type": "controller",
+        "challenges": [],
+        "loadouts": []
+    }
+]

data/loadouts.json

@@ -0,0 +1,47 @@
+loadouts = [
+    {
+        "name": "R-99",
+        "type": "light",
+        "challenges": [
+            "Get 5 kills in a single match with the R-99",
+            "Deal 500 damage with the R-99 in a match"
+        ],
+        "image": "r99_image_url.jpg"
+    },
+    {
+        "name": "Peacekeeper",
+        "type": "shotgun",
+        "challenges": [
+            "Eliminate 3 enemies with a single Peacekeeper shot",
+            "Deal 1000 damage with the Peacekeeper in a match"
+        ],
+        "image": "peacekeeper_image_url.jpg"
+    },
+    {
+        "name": "R-301",
+        "type": "light",
+        "challenges": [
+            "Get 10 headshot kills with the R-301",
+            "Deal 750 damage with the R-301 in a match"
+        ],
+        "image": "r301_image_url.jpg"
+    },
+    {
+        "name": "EVA-8 Auto",
+        "type": "shotgun",
+        "challenges": [
+            "Eliminate an enemy with a single EVA-8 shot",
+            "Deal 800 damage with the EVA-8 in a match"
+        ],
+        "image": "eva8_image_url.jpg"
+    },
+    {
+        "name": "Wingman",
+        "type": "drop_only",
+        "challenges": [
+            "Get 5 kills with the Wingman in a match",
+            "Deal 500 damage with the Wingman in a match"
+        ],
+        "image": "wingman_image_url.jpg"
+    }
+]

img/icons/Assault_Class.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 135.46666 135.46667"
+   version="1.1"
+   id="svg2977"
+   sodipodi:docname="Assault_Class2.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview2979"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="px"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="1.0998546"
+     inkscape:cx="127.74416"
+     inkscape:cy="361.41141"
+     inkscape:window-width="2560"
+     inkscape:window-height="1387"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer3" />
+  <defs
+     id="defs2974" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Layer 2"
+     style="display:inline">
+    <g
+       id="g18664"
+       transform="matrix(0.85714291,0,0,0.85714291,22.901142,143.77153)">
+      <g
+         id="g1520"
+         transform="translate(316.39848,-125.93567)">
+        <path
+           id="path978"
+           style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.999999px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           d="m -1150.1049,-56.663033 c -12.0228,13.596328 -28.6896,39.109405 -30.8502,117.547799 v 0.210937 h 62.6524 v -0.210937 c -5.5592,-80.275912 -18.5459,-97.706254 -31.8022,-117.547799 z m -30.8502,146.372017 v 1.177735 48.119141 l -19.25,40.2207 v 202.91797 h 50.5762 50.5762 V 179.22656 l -19.25,-40.2207 V 90.886719 89.708984 Z"
+           transform="scale(0.26458333)"
+           sodipodi:nodetypes="cccccccccccccccccc" />
+      </g>
+      <path
+         id="path978-7"
+         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 92.3826,-141.05372 c -4.33734,7.49887 -8.74146,14.12244 -8.28839,31.22714 v 0 l 16.57678,0.0558 v -0.0558 c -1.25239,-19.52767 -4.67085,-25.26075 -8.28839,-31.22714 z m -8.28839,38.85355 v 0.31161 12.731523 l -5.09323,10.641727 v 53.68871 h 13.38162 13.38162 v -53.68871 l -5.09323,-10.641727 v -12.731523 -0.31161 z"
+         sodipodi:nodetypes="cccccccccccccccccc" />
+      <path
+         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.332744px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 42.79343,-117.36579 v 0.40665 15.2341 l -6.17278,12.863178 V -16.39364 H 52.8386 69.05655 v -72.245564 l -6.17278,-13.085836 v -15.2341 -0.40665 z"
+         id="path1700"
+         sodipodi:nodetypes="cccccccccccc" />
+      <path
+         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.314957px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 52.66321,-161.02883 c -4.03102,6.05819 -8.632,12.24947 -10.04518,36.06912 v 0.0653 h 20.09035 v -0.0653 c -1.18094,-25.40302 -5.92086,-31.0957 -10.04517,-36.06912 z"
+         id="path978-3"
+         sodipodi:nodetypes="cccccc" />
+    </g>
+  </g>
+</svg>

img/icons/Controller_Class.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 135.46666 135.46667"
+   version="1.1"
+   id="svg2977"
+   sodipodi:docname="Controller_Class2.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview2979"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="px"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="1.0998546"
+     inkscape:cx="127.74416"
+     inkscape:cy="361.41141"
+     inkscape:window-width="2560"
+     inkscape:window-height="1387"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer4" />
+  <defs
+     id="defs2974" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer4"
+     inkscape:label="Layer"
+     style="display:inline">
+    <g
+       id="g18642"
+       transform="matrix(0.85714291,0,0,0.85714291,83.737131,2.9770421)">
+      <g
+         id="g20379">
+        <path
+           style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           d="m -77.220552,36.552291 -3.624842,-5.332028 c -18.394561,25.726573 -20.439216,68.363334 14.078423,100.039817 l 4.490128,-4.14519 C -84.580931,108.3755 -98.674845,72.456199 -77.220552,36.552291 Z"
+           id="path9948"
+           sodipodi:nodetypes="ccccc" />
+        <path
+           id="path12832-1"
+           style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.205972;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:356.895;paint-order:markers fill stroke;stop-color:#000000"
+           d="m 2.6051378,126.97794 c -12.7751678,6.84575 -27.8471308,7.32242 -40.9176038,-0.0105 l -13.533858,9.27237 v 0 c 20.125005,12.37356 47.9186319,12.76143 67.993891,0.20408 z"
+           sodipodi:nodetypes="cccccc" />
+        <path
+           style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           d="m 40.023426,36.552291 3.624842,-5.332028 C 62.042829,56.946836 64.087479,99.583597 29.569845,131.26008 l -4.490128,-4.14519 C 47.383805,108.3755 61.477719,72.456199 40.023426,36.552291 Z"
+           id="path9948-0"
+           sodipodi:nodetypes="ccccc" />
+        <path
+           id="path12832"
+           style="display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.205972;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:356.895;paint-order:markers fill stroke;stop-color:#000000"
+           d="M -18.620917,26.387708 -42.939845,5.7905164 -43.030275,59.58775 -38.377329,65.237532 -18.808001,87.270238 1.1241352,65.424429 5.6127501,59.774818 5.5217991,5.7135185 Z m 40.370146,3.956347 v 28.448394 c 2.149635,8.32784 8.041529,19.32841 -6.407878,41.767471 H 4.0552184 c -5.01156449,7.12963 -13.2993065,11.78949 -22.6761354,11.78946 -9.458301,3e-5 -17.807826,-4.74181 -22.805326,-11.97652 H -52.758884 C -67.20829,77.933791 -61.315879,66.933221 -59.166246,58.605378 V 30.507353 c -11.551327,10.823091 -18.771922,26.212959 -18.771981,43.291413 6.9e-5,20.488452 10.38796,38.550794 26.183934,49.207844 3.652446,-2.5153 8.188463,-5.79022 12.10882,-8.5788 6.31952,3.89946 13.598784,5.96506 21.024556,5.96604 7.659474,-0.008 15.1558571,-2.21334 21.6002321,-6.3531 l 12.4958779,8.21862 0.08113,0.0599 C 31.228149,111.64332 40.696324,94.191556 40.696393,73.798766 40.696335,56.63419 33.402659,41.175332 21.749229,30.344055 Z"
+           sodipodi:nodetypes="ccccccccccccccccccccccccccc" />
+      </g>
+    </g>
+  </g>
+</svg>

img/icons/Recon_Class.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 135.46666 135.46667"
+   version="1.1"
+   id="svg2977"
+   sodipodi:docname="Recon_Class2.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview2979"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="px"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="1.0998546"
+     inkscape:cx="127.74416"
+     inkscape:cy="361.41141"
+     inkscape:window-width="2560"
+     inkscape:window-height="1387"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer6" />
+  <defs
+     id="defs2974" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer6"
+     inkscape:label="Layer"
+     style="display:inline">
+    <g
+       id="g18672"
+       transform="matrix(0.85714291,0,0,0.85714291,410.10403,35.09606)">
+      <path
+         id="path3126"
+         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.999999px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m -1512.0781,-90.865234 c -43.8336,0.208744 -87.5599,10.047741 -127.586,29.416015 l -0.498,-0.152343 0.1113,0.34375 15.6504,48.474609 122.5899,379.697263 -32.8711,-175.07422 c 81.672,-16.51755 122.296,41.61378 129.8945,83.3086 -23.8507,33.47126 -46.5886,67.45534 -68.4141,101.86133 l 250.9473,-247.58008 c -46.899,-148.046278 -168.7635,-220.87144 -289.8242,-220.294924 z m -153.7149,43.763672 c -58.8031,36.337963 -106.9383,95.220228 -131.2851,176.347652 l 250.4941,249.44727 c -21.8788,-36.22932 -44.4294,-69.9379 -67.125,-101.65625 4.0047,-20.37951 7.7962,-40.76502 30.9707,-60.55469 l -5.4746,-12.13867 c -18.1878,16.12304 -31.3529,34.91156 -35.9277,58.25781 -12.0406,-16.47686 -24.0975,-32.41014 -36.0996,-47.84179 5.0988,-28.62254 1.2896,-52.92593 44.7734,-100.15039 l -7.7363,-24.517583 c -27.6751,20.337393 -46.8837,53.294093 -58.9414,96.910153 -20.1493,-25.14866 -39.999,-49.01118 -59.1719,-71.8789 23.5096,-49.230142 54.8183,-85.847591 90.209,-111.2363312 z m 156.6407,5.736328 c 98.8975,0.352799 194.8974,59.650582 231.1894,156.992184 -21.1791,23.77034 -41.4967,47.93985 -61.0957,72.43946 -1.6897,-21.88837 -9.5565,-35.52513 -18.8516,-52.7461 l -18.5136,17.16602 c 7.926,16.45253 16.451,36.37955 17.1406,61.30078 -12.44,16.11629 -24.5806,32.37027 -36.4414,48.75391 -25.0459,-82.14836 -101.2016,-93.41174 -141.2598,-82.9629 l -19.0312,-101.357417 c 27.1172,-9.508166 56.0562,-10.121446 86.6855,-2.482422 l 20.1973,-18.007812 c -30.5883,-7.543203 -56.428,-19.683318 -111.4102,-3.613281 l -16.1836,-86.197266 c 21.4613,-6.108658 43.4055,-9.155928 65.2383,-9.283203 0.7791,-0.0045 1.5572,-0.0047 2.336,-0.002 z"
+         transform="scale(0.26458333)" />
+      <rect
+         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0649999;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:356.895;paint-order:markers fill stroke;stop-color:#000000"
+         id="rect4606"
+         width="13.715713"
+         height="13.715713"
+         x="-251.46091"
+         y="273.39023"
+         transform="rotate(45)" />
+    </g>
+  </g>
+</svg>

img/icons/Skirmisher_Class.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 135.46666 135.46667"
+   version="1.1"
+   id="svg2977"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   sodipodi:docname="Skirmisher_Class2.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview2979"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="px"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="1.0998546"
+     inkscape:cx="127.74416"
+     inkscape:cy="361.41141"
+     inkscape:window-width="2560"
+     inkscape:window-height="1387"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2974" />
+  <g
+     inkscape:label="Layer"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="path8381"
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.226785px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 67.733331,6.7558751 42.797088,33.135223 v 8.499155 L 60.837625,30.168411 54.583746,78.196931 29.166468,56.62837 56.668224,108.10429 28.513128,74.983837 8.5276402,66.025802 67.733331,128.71078 126.93903,66.025802 106.95354,74.983837 78.798437,108.10429 106.3002,56.62837 80.882923,78.196931 74.629037,30.168411 92.669575,41.634378 v -8.499155 z" />
+  </g>
+</svg>

img/icons/Support_Class.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 135.46666 135.46667"
+   version="1.1"
+   id="svg2977"
+   sodipodi:docname="Assault_Class2.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview2979"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="px"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="1.0998546"
+     inkscape:cx="127.74416"
+     inkscape:cy="361.41141"
+     inkscape:window-width="2560"
+     inkscape:window-height="1387"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer5" />
+  <defs
+     id="defs2974" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer5"
+     inkscape:label="Layer"
+     style="display:inline">
+    <g
+       id="g18676"
+       transform="matrix(0.85714291,0,0,0.85714291,530.34521,28.76007)">
+      <path
+         id="path5992"
+         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.857142px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="M 256 31.171875 L 62.082031 106.67969 C 57.989945 402.38182 197.57611 446.20538 256 480.82812 C 314.42389 446.20538 454.01005 402.38182 449.91797 106.67969 L 256 31.171875 z M 256 57.337891 L 425.69336 123.41406 C 425.17916 355.50979 309.10326 424.52235 256 452.8418 C 202.89674 424.52236 86.820841 355.50979 86.306641 123.41406 L 256 57.337891 z M 256 89.816406 L 119.65039 144.80469 C 122.73456 351.31691 228.63066 411.67617 256 420.52734 C 283.36934 411.67617 389.26544 351.31691 392.34961 144.80469 L 256 89.816406 z M 226.95508 158.73438 L 284.81055 158.73438 L 284.81055 221.52148 L 344.86914 221.52148 L 344.86914 278.0918 L 284.81055 278.0918 L 284.81055 340.66406 L 226.95508 340.66406 L 226.95508 278.0918 L 165.39648 278.0918 L 165.39648 221.52148 L 226.95508 221.52148 L 226.95508 158.73438 z "
+         class="invertable"
+         transform="matrix(0.30868053,0,0,0.30868053,-618.73604,-33.553413)" />
+    </g>
+  </g>
+</svg>

index.html

@@ -0,0 +1,16 @@
+<html>
+    <head>
+        <title>ApexLottery</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="./css/app.css">
+    </head>
+    <body>
+        <h1>Apex Lottery</h1>
+        <header></header>
+
+        
+
+        <script src="./js/app.js" type="text/javascript"></script>
+    </body>
+</html>

js/app.js

@@ -0,0 +1,75 @@
+
+const loadJSONP = (url) => {
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = url;
+        script.addEventListener('load', () => resolve());
+        script.addEventListener('error', () => reject(new Error(`Error loading script from ${url}`)));
+        document.body.appendChild(script);
+    });
+};
+
+function capitalize(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+let App = {
+    config: {
+        data_legends_path: "./data/legends.json",
+        data_loadout_path: "./data/loadouts.json",
+        base_legends: [],
+        base_loadouts: [],
+    },
+    run: async () => {
+        console.log("ApexLottery is being loaded");
+
+        try {
+            await Promise.all([
+                loadJSONP(App.config.data_legends_path).then(() => {
+                    App.config.base_legends = legends;
+                    console.log("Loaded legends", App.config.base_legends);
+                }),
+                loadJSONP(App.config.data_loadout_path).then(() => {
+                    App.config.base_loadouts = loadouts;
+                    console.log("Loaded loadouts", App.config.base_loadouts);
+                })
+            ]);
+        } catch (error) {
+            console.error("Error loading JSONP:", error);
+            return;
+        }
+
+        // Create containers for each legend category
+        const categories = Array.from(new Set(App.config.base_legends.map(legend => legend.type)));
+        categories.forEach(category => {
+            const categoryContainer = document.createElement('div');
+            categoryContainer.className = 'category-container';
+            categoryContainer.id = category.toLowerCase(); // Using the lowercase type as the container ID
+
+            document.body.appendChild(categoryContainer);
+        });
+
+        // Append legend items to the appropriate category container
+        App.config.base_legends.forEach(legend => {
+            const categoryContainer = document.getElementById(legend.type.toLowerCase());
+            if (categoryContainer) {
+                const legendElement = document.createElement('div');
+                legendElement.className = 'legend-item';
+
+                const legendImage = document.createElement('img');
+                legendImage.src = legend.image; // Assuming each legend object has an 'image' property
+                legendElement.appendChild(legendImage);
+
+                const legendName = document.createElement('p');
+                legendName.textContent = legend.name;
+                legendElement.appendChild(legendName);
+
+                categoryContainer.appendChild(legendElement);
+            }
+        });
+    }
+}
+
+
+window.addEventListener('load', App.run)
+

notes.md

@@ -0,0 +1,9 @@
+# Apex Random
+
+```bash
+ls -1 | jq -R -n '[inputs | {name: capture("(?<name>.*)_Legend_Card.png").name | ascii_downcase, image:  ("img/legends/" + .), type: "", challenges: [], loadouts: []}]'
+
+
+```
+
+Enchainer une game Conduit avec une game Gibralatar