3 files changed, 126 insertions, 5 deletions

diff --git a/front/src/Pages/RangedWeapon.tsx b/front/src/Pages/RangedWeapon.tsx
new file mode 100644
index 0000000..91471b2
--- /dev/null
+++ b/front/src/Pages/RangedWeapon.tsx
@@ -0,0 +1,85 @@
+import { useContext, useState } from "react";
+import { LanguageContext } from "../Locales/Context";
+import { BackendURL } from "../Config";
+import axios from "axios";
+import { RangedWeapon } from "../Models/RangedWeapon";
+import { Navigate, useParams } from "react-router";
+import { GetLocalizedString } from "../Locales/Locales";
+import "./Weapons.css"
+
+const RangedWeaponsURL = `${BackendURL}/weapons/ranged`;
+
+function RangedWeaponPage() {
+    const { id } = useParams();
+    const lang = useContext(LanguageContext);
+    const [weapon, setWeapon] = useState<RangedWeapon | null>(null);
+
+    useState(() => {
+        getWeapon(id).then(data => setWeapon(data));
+    });
+
+    if (weapon == null) {
+        return <h1> Not found </h1>; // <Navigate to="/404" replace />;
+    }
+
+    return (
+        <div className="WeaponPage">
+            <span> <h1> {weapon?.Name} </h1> </span>
+            <h2> { GetLocalizedString(weapon.WeaponType, lang) } </h2>
+            <table> 
+                <tbody>
+                    <tr> 
+                        <td> { GetLocalizedString("Accuracy", lang) } </td>
+                        <td> {weapon.Accuracy} </td>
+                    </tr>
+                    <tr>
+                        <td> { GetLocalizedString("Concealability", lang) } </td>
+                        <td> { GetLocalizedString(weapon.Concealability, lang) } </td>
+                    </tr>
+                    <tr>
+                        <td> { GetLocalizedString("Avaliability", lang) } </td>
+                        <td> { GetLocalizedString(weapon.Avaliability, lang) } </td>
+                    </tr>
+                    <tr>
+                        <td> { GetLocalizedString("Damage/Ammunition", lang) } </td>
+                        <td> {weapon.Damage}({weapon.Ammunition}) </td>
+                    </tr>
+                    <tr>
+                        <td> { GetLocalizedString("Number Of Shots", lang) } </td>
+                        <td> {weapon.NumberOfShots} </td>
+                    </tr>
+                    <tr>
+                        <td> { GetLocalizedString("Rate Of Fire", lang) } </td>
+                        <td> {weapon.RateOfFire} </td>
+                    </tr>
+                    <tr>
+                        <td> { GetLocalizedString("Reliability", lang) } </td>
+                        <td> { GetLocalizedString(weapon.Reliability, lang) } </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    );
+}
+
+async function getWeapon(id: string | undefined): Promise<RangedWeapon | null>  {
+    if (id == undefined) return null;
+    try {
+        const {data, status} = await axios.get<RangedWeapon>(
+            `${RangedWeaponsURL}/${id}`,
+            {
+                headers: { Accept: "application/json" }
+            }
+        );
+        
+        if (status != 200) return null; 
+
+        return data;
+
+    } catch (err) {
+        console.log(`Failed to get ranged weapon: ${err}`);
+        return null;
+    }
+}
+
+export default RangedWeaponPage;
diff --git a/front/src/Pages/Weapons.css b/front/src/Pages/Weapons.css
new file mode 100644
index 0000000..41d820c
--- /dev/null
+++ b/front/src/Pages/Weapons.css
@@ -0,0 +1,25 @@
+table {
+    border-collapse: collapse;
+    border: 1px solid black;
+    width: 60%;
+}
+
+tr {
+    border: 1px solid black;
+}
+
+td {
+    border: 1px solid black;
+    padding: 2px;
+    width: 30%;
+    font-family: "Rubik Dirt", system-ui;
+    color: var(--colorscheme-gray);
+}
+
+.WeaponPage {
+    flex-grow: 1;
+}
+
+.WeaponPage > span {
+    display: flex;
+}
diff --git a/front/src/Pages/Weapons.tsx b/front/src/Pages/Weapons.tsx
index f918232..4d8632c 100644
--- a/front/src/Pages/Weapons.tsx
+++ b/front/src/Pages/Weapons.tsx
@@ -3,6 +3,7 @@ import { useContext, useState } from "react";
 import { BackendURL } from "../Config";
 import { LanguageContext } from "../Locales/Context";
 import { GetLocalizedString } from "../Locales/Locales";
+import { AllowedLanguages } from "../Locales/Context";
 import { RangedWeapon } from "../Models/RangedWeapon";
 
 const RangedWeaponsURL = `${BackendURL}/weapons/ranged`;
@@ -21,12 +22,12 @@ function WeaponsIndex() {
             <h1> {GetLocalizedString("Weapons index", lang)} </h1>
         </span>
             <h2> {GetLocalizedString("Ranged weapons", lang)} </h2>
-            {generatedRangedWeaponsList(rangedWeapons)}
+            {generatedRangedWeaponsList(rangedWeapons, lang)}
         </div>
     );
 }
 
-function generatedRangedWeaponsList(rangedWeapons: RangedWeapon[] | null): any {
+function generatedRangedWeaponsList(rangedWeapons: RangedWeapon[] | null, language: AllowedLanguages): any {
     if (!rangedWeapons) {
         return (
             <div> </div>
@@ -47,8 +48,7 @@ function generatedRangedWeaponsList(rangedWeapons: RangedWeapon[] | null): any {
         const elements = categorized.get(x)?.map(w => {
             return (
             <tr key={w.Id}>
-                <td> {w.Name} </td>
-                <td> {w.WeaponType} </td>
+                <td> <a href={`/weapons/${w.Id}`}> {w.Name} </a> </td>
                 <td> {w.Accuracy} </td>
                 <td> {w.Concealability} </td>
                 <td> {w.Avaliability} </td>
@@ -63,15 +63,26 @@ function generatedRangedWeaponsList(rangedWeapons: RangedWeapon[] | null): any {
         return (
             <tbody key={x}>
                 <tr> 
-                    <td className="CategoryName"> {`${x}s`} </td> 
+                    <td colSpan={8} className="CategoryName"> {GetLocalizedString(`${x}s`, language)} </td> 
                 </tr>
                 {elements}
             </tbody>
         );
+
     });
 
     return (
         <table className="WeaponTable"> 
+        <colgroup>
+            <col width={"10%"} />
+            <col width={"2%"} />
+            <col width={"10%"} />
+            <col width={"10%"} />
+            <col width={"10%"} />
+            <col width={"2%"} />
+            <col width={"2%"} />
+            <col width={"10%"} />
+        </colgroup>
         {list} 
         </table>
     );