6 files changed, 177 insertions, 9 deletions
diff --git a/front/src/App.tsx b/front/src/App.tsx
index 9bfb323..2f69086 100644
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -10,6 +10,7 @@ import { useState } from 'react';
 import { ReadCurrentLocale, SaveCurrentLocale } from './Locales/Locales';
 import LegalNote from './Emelents/LegalNote';
 import WeaponsIndex from './Pages/Weapons';
+import RangedWeaponPage from './Pages/RangedWeapon';
 
 const router = createBrowserRouter([
     {
@@ -24,6 +25,10 @@ const router = createBrowserRouter([
         path: "/weapons",
         element: (<WeaponsIndex />),
     },
+    {
+        path: "/weapons/:id",
+        element: (<RangedWeaponPage />),
+    },
 ]);
 
 function App() {
diff --git a/front/src/Emelents/Elements.css b/front/src/Emelents/Elements.css
index 31f0fd2..6f23c13 100644
--- a/front/src/Emelents/Elements.css
+++ b/front/src/Emelents/Elements.css
@@ -103,19 +103,29 @@
 
 .WeaponTable {
     width: 100%;
+    table-layout: fixed;
 }
 
-.WeaponTable > tbody > tr > td {
-  font-family: "Wix Madefor Text", sans-serif;
+.WeaponTable > tbody > tr > td > a {
+  font-family: "Wix Madefor Text", sans-serif; 
 }
 
 .WeaponTable, .WeaponTable > tbody, .WeaponTable > tbody > tr > td, .WeaponTable > tbody > tr {
-    border: 0px solid red;
     border-collapse: collapse;
+    border: 0px solid red;
+}
+
+.WeaponTable > tbody > tr > td {
+  font-family: "Wix Madefor Text", sans-serif; 
+  border-left: 1px solid var(--colorscheme-light-gray); 
+}
+
+.WeaponTable > tbody > tr > td:nth-child(1) {
+  border-left: 0px solid var(--colorscheme-light-gray); 
 }
 
 .CategoryName {
     padding-top: 10px;
-    font-family: "Rubik Dirt", system-ui !important;
+    font-family: "Rubik Dirt", system-ui !important; 
     font-size: 20px;
 }
diff --git a/front/src/Locales/ru_RU.ts b/front/src/Locales/ru_RU.ts
index 39c45d0..9a69130 100644
--- a/front/src/Locales/ru_RU.ts
+++ b/front/src/Locales/ru_RU.ts
@@ -10,6 +10,38 @@ lang.LocalizedStrings = new Map<string, string>([
     ["weapons", "Оружие"],
     ["weapons index", "Список вооружения"],
     ["ranged weapons", "Дальнобойное оружие"],
+
+    ["heavy pistols", "Тяжёлые пистолеты"],
+    ["medium pistols", "Средние пистолеты"],
+
+    ["heavy pistol", "Тяжёлый пистолет"],
+    ["medium pistol", "Средний пистолет"],
+
+    ["accuracy", "Точность"],
+    ["concealability", "Возможность скрыть"],
+    ["avaliability", "Доступность"],
+    ["damage/ammunition", "Урон/Аммуниция"],
+    ["number of shots", "Количество выстрелов"],
+    ["rate of fire", "Скорострельность"],
+    ["reliability", "Надёжность"],
+
+    // Concealabilities
+    ["pocket", "Карман"],
+    ["jacket", "Куртка"],
+    ["long", "Длинный плащ"],
+    ["Nothing", "Невозможно спрятать"],
+
+    // Avaliabilities
+    ["excellent", "Отличная"],
+    ["common", "Обычная"],
+    ["poor", "Малая"],
+    ["rare", "Редкая"],
+
+    // Relicabilities
+    ["very reliable", "Очень надёжное"],
+    ["standard", "Обычное"],
+    ["unreliable", "Ненадёжное"],
+
 ]);
 
 export default lang;
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>
     );