From b044c0354c46eadb9f4c66565779e9cb5ce92699 Mon Sep 17 00:00:00 2001 From: physcik Date: Thu, 23 Apr 2026 19:51:43 +0500 Subject: Weapons page --- front/src/App.tsx | 5 +++ front/src/Emelents/Elements.css | 18 +++++++-- front/src/Locales/ru_RU.ts | 32 +++++++++++++++ front/src/Pages/RangedWeapon.tsx | 85 ++++++++++++++++++++++++++++++++++++++++ front/src/Pages/Weapons.css | 25 ++++++++++++ front/src/Pages/Weapons.tsx | 21 +++++++--- 6 files changed, 177 insertions(+), 9 deletions(-) create mode 100644 front/src/Pages/RangedWeapon.tsx create mode 100644 front/src/Pages/Weapons.css 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: (), }, + { + path: "/weapons/:id", + element: (), + }, ]); 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([ ["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(null); + + useState(() => { + getWeapon(id).then(data => setWeapon(data)); + }); + + if (weapon == null) { + return

Not found

; // ; + } + + return ( +
+

{weapon?.Name}

+

{ GetLocalizedString(weapon.WeaponType, lang) }

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{ GetLocalizedString("Accuracy", lang) } {weapon.Accuracy}
{ GetLocalizedString("Concealability", lang) } { GetLocalizedString(weapon.Concealability, lang) }
{ GetLocalizedString("Avaliability", lang) } { GetLocalizedString(weapon.Avaliability, lang) }
{ GetLocalizedString("Damage/Ammunition", lang) } {weapon.Damage}({weapon.Ammunition})
{ GetLocalizedString("Number Of Shots", lang) } {weapon.NumberOfShots}
{ GetLocalizedString("Rate Of Fire", lang) } {weapon.RateOfFire}
{ GetLocalizedString("Reliability", lang) } { GetLocalizedString(weapon.Reliability, lang) }
+
+ ); +} + +async function getWeapon(id: string | undefined): Promise { + if (id == undefined) return null; + try { + const {data, status} = await axios.get( + `${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() {

{GetLocalizedString("Weapons index", lang)}

{GetLocalizedString("Ranged weapons", lang)}

- {generatedRangedWeaponsList(rangedWeapons)} + {generatedRangedWeaponsList(rangedWeapons, lang)} ); } -function generatedRangedWeaponsList(rangedWeapons: RangedWeapon[] | null): any { +function generatedRangedWeaponsList(rangedWeapons: RangedWeapon[] | null, language: AllowedLanguages): any { if (!rangedWeapons) { return (
@@ -47,8 +48,7 @@ function generatedRangedWeaponsList(rangedWeapons: RangedWeapon[] | null): any { const elements = categorized.get(x)?.map(w => { return ( - {w.Name} - {w.WeaponType} + {w.Name} {w.Accuracy} {w.Concealability} {w.Avaliability} @@ -63,15 +63,26 @@ function generatedRangedWeaponsList(rangedWeapons: RangedWeapon[] | null): any { return ( - {`${x}s`} + {GetLocalizedString(`${x}s`, language)} {elements} ); + }); return ( + + + + + + + + + + {list}
); -- cgit v1.3