8 files changed, 154 insertions, 6 deletions
diff --git a/front/src/App.css b/front/src/App.css
index 5cbbeb8..dcfa013 100644
--- a/front/src/App.css
+++ b/front/src/App.css
@@ -13,7 +13,7 @@
     padding-left: 10px;
 }
 
-.AppContents > div > h1 {
+.AppContents > div > h1, .AppContents > div > span > h1 {
     background-color: var(--colorscheme-black);
     color: var(--colorscheme-white);
     padding-left: 10px;
diff --git a/front/src/Config.ts b/front/src/Config.ts
new file mode 100644
index 0000000..78f4e0d
--- /dev/null
+++ b/front/src/Config.ts
@@ -0,0 +1 @@
+export const BackendURL = "http://localhost:6969";
diff --git a/front/src/Emelents/Elements.css b/front/src/Emelents/Elements.css
index 1f4d60f..31f0fd2 100644
--- a/front/src/Emelents/Elements.css
+++ b/front/src/Emelents/Elements.css
@@ -65,6 +65,10 @@
     display: flex;
 }
 
+.ContentsList > li > span {
+    display: flex;
+}
+
 .ContentsList > li > span > span {
     flex-grow: 1;
     font-family: "Rubik Dirt", system-ui;
@@ -88,3 +92,30 @@
     font-size: 15px;
     font-family: "Rubik Dirt", system-ui;
 }
+
+.WeaponsDiv {
+    flex-grow: 1;
+}
+
+.WeaponsDiv > span {
+    display: flex;
+}
+
+.WeaponTable {
+    width: 100%;
+}
+
+.WeaponTable > tbody > tr > td {
+  font-family: "Wix Madefor Text", sans-serif;
+}
+
+.WeaponTable, .WeaponTable > tbody, .WeaponTable > tbody > tr > td, .WeaponTable > tbody > tr {
+    border: 0px solid red;
+    border-collapse: collapse;
+}
+
+.CategoryName {
+    padding-top: 10px;
+    font-family: "Rubik Dirt", system-ui !important;
+    font-size: 20px;
+}
diff --git a/front/src/Fonts.css b/front/src/Fonts.css
index c3b986b..c7f3bb6 100644
--- a/front/src/Fonts.css
+++ b/front/src/Fonts.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Rubik+Dirt&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Rubik+Dirt&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap');
 
 h1, h2 {
     font-family: "Rubik Dirt", system-ui;
diff --git a/front/src/Locales/ru_RU.ts b/front/src/Locales/ru_RU.ts
index 6c804b9..39c45d0 100644
--- a/front/src/Locales/ru_RU.ts
+++ b/front/src/Locales/ru_RU.ts
@@ -9,6 +9,7 @@ lang.LocalizedStrings = new Map<string, string>([
     ["classes list", "Список классов"],
     ["weapons", "Оружие"],
     ["weapons index", "Список вооружения"],
+    ["ranged weapons", "Дальнобойное оружие"],
 ]);
 
 export default lang;
diff --git a/front/src/Models/RangedWeapon.ts b/front/src/Models/RangedWeapon.ts
new file mode 100644
index 0000000..2bc9995
--- /dev/null
+++ b/front/src/Models/RangedWeapon.ts
@@ -0,0 +1,31 @@
+export type RangedWeapon = {
+    Id: string,
+    Name: string,
+
+    WeaponType: string,
+    Accuracy: number,
+    Concealability: string,
+    Avaliability: string,
+    Damage: string,
+    Ammunition: string,
+    NumberOfShots: number,
+    RateOfFire: number,
+    Reliability: string,
+
+    CreatedAt: number,
+    UpdatedAt: number,
+};
+
+export type RangedWeaponRequest = {
+    Id: string,
+    Name: string,
+    WeaponType: string,
+    Accuracy: number,
+    Concealability: string,
+    Avaliability: string,
+    Damage: string,
+    Ammunition: string,
+    NumberOfShots: number,
+    RateOfFire: number,
+    Reliability: string,
+};
diff --git a/front/src/Pages/Weapons.tsx b/front/src/Pages/Weapons.tsx
index d16762c..f918232 100644
--- a/front/src/Pages/Weapons.tsx
+++ b/front/src/Pages/Weapons.tsx
@@ -1,18 +1,101 @@
-import { useContext } from "react";
+import axios from "axios";
+import { useContext, useState } from "react";
+import { BackendURL } from "../Config";
 import { LanguageContext } from "../Locales/Context";
 import { GetLocalizedString } from "../Locales/Locales";
+import { RangedWeapon } from "../Models/RangedWeapon";
+
+const RangedWeaponsURL = `${BackendURL}/weapons/ranged`;
 
 function WeaponsIndex() {
-    var lang = useContext(LanguageContext);
+    const lang = useContext(LanguageContext);
+    const [rangedWeapons, setRangedWeapons] = useState<RangedWeapon[] | null>(null);
+
+    useState(() => {
+        getRangedWeapons().then(data => setRangedWeapons(data));
+    });
 
     return (
-        <div>
+        <div className="WeaponsDiv">
+        <span>
             <h1> {GetLocalizedString("Weapons index", lang)} </h1>
+        </span>
+            <h2> {GetLocalizedString("Ranged weapons", lang)} </h2>
+            {generatedRangedWeaponsList(rangedWeapons)}
         </div>
     );
 }
 
-function WeaponsType() {
+function generatedRangedWeaponsList(rangedWeapons: RangedWeapon[] | null): any {
+    if (!rangedWeapons) {
+        return (
+            <div> </div>
+        );
+    }
+
+    const categorized = new Map<string, RangedWeapon[]>();
+
+    rangedWeapons.forEach(el => {
+        if (!categorized.has(el.WeaponType)) {
+            categorized.set(el.WeaponType, new Array<RangedWeapon>());
+        }
+        categorized.get(el.WeaponType)?.push(el);
+    });
+
+    const keys = Array.from(categorized.keys());
+    const list = keys.map(x => {
+        const elements = categorized.get(x)?.map(w => {
+            return (
+            <tr key={w.Id}>
+                <td> {w.Name} </td>
+                <td> {w.WeaponType} </td>
+                <td> {w.Accuracy} </td>
+                <td> {w.Concealability} </td>
+                <td> {w.Avaliability} </td>
+                <td> {w.Damage}({w.Ammunition}) </td>
+                <td> {w.NumberOfShots} </td>
+                <td> {w.RateOfFire} </td>
+                <td> {w.Reliability} </td>
+            </tr>
+            )
+        });
+
+        return (
+            <tbody key={x}>
+                <tr> 
+                    <td className="CategoryName"> {`${x}s`} </td> 
+                </tr>
+                {elements}
+            </tbody>
+        );
+    });
+
+    return (
+        <table className="WeaponTable"> 
+        {list} 
+        </table>
+    );
+}
+
+async function getRangedWeapons(): Promise<RangedWeapon[]> { 
+    try {
+        const {data, status} = await axios.get<RangedWeapon[]>(
+            RangedWeaponsURL,
+            {
+                headers: { Accept: "application/json" }
+            }
+        );
+        
+        if (status != 200) {
+            return new Array<RangedWeapon>();
+        }
+
+        return data;
+
+    } catch (err) {
+        console.log(`Failed to get ranged weapons: ${err}`);
+        return new Array<RangedWeapon>();
+    }
 }
 
 export default WeaponsIndex;
diff --git a/front/src/index.css b/front/src/index.css
index 4e7932e..0193f3b 100644
--- a/front/src/index.css
+++ b/front/src/index.css
@@ -3,6 +3,7 @@
     --colorscheme-blue: #00F0FF;
     --colorscheme-white: #FAFAFA;
     --colorscheme-gray: #3C3C3C;
+    --colorscheme-light-gray: #909090F0;
 }
 
 * {