From c99fc297e8b66273d6210bed0812efab399ba13b Mon Sep 17 00:00:00 2001 From: physcik Date: Thu, 23 Apr 2026 14:15:52 +0500 Subject: Weapons index --- front/src/App.css | 2 +- front/src/Config.ts | 1 + front/src/Emelents/Elements.css | 31 ++++++++++++++ front/src/Fonts.css | 2 +- front/src/Locales/ru_RU.ts | 1 + front/src/Models/RangedWeapon.ts | 31 ++++++++++++++ front/src/Pages/Weapons.tsx | 91 ++++++++++++++++++++++++++++++++++++++-- front/src/index.css | 1 + 8 files changed, 154 insertions(+), 6 deletions(-) create mode 100644 front/src/Config.ts create mode 100644 front/src/Models/RangedWeapon.ts (limited to 'front/src') 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([ ["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(null); + + useState(() => { + getRangedWeapons().then(data => setRangedWeapons(data)); + }); return ( -
+
+

{GetLocalizedString("Weapons index", lang)}

+ +

{GetLocalizedString("Ranged weapons", lang)}

+ {generatedRangedWeaponsList(rangedWeapons)}
); } -function WeaponsType() { +function generatedRangedWeaponsList(rangedWeapons: RangedWeapon[] | null): any { + if (!rangedWeapons) { + return ( +
+ ); + } + + const categorized = new Map(); + + rangedWeapons.forEach(el => { + if (!categorized.has(el.WeaponType)) { + categorized.set(el.WeaponType, new Array()); + } + 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 ( + + {w.Name} + {w.WeaponType} + {w.Accuracy} + {w.Concealability} + {w.Avaliability} + {w.Damage}({w.Ammunition}) + {w.NumberOfShots} + {w.RateOfFire} + {w.Reliability} + + ) + }); + + return ( + + + {`${x}s`} + + {elements} + + ); + }); + + return ( + + {list} +
+ ); +} + +async function getRangedWeapons(): Promise { + try { + const {data, status} = await axios.get( + RangedWeaponsURL, + { + headers: { Accept: "application/json" } + } + ); + + if (status != 200) { + return new Array(); + } + + return data; + + } catch (err) { + console.log(`Failed to get ranged weapons: ${err}`); + return new Array(); + } } 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; } * { -- cgit v1.3