From c99fc297e8b66273d6210bed0812efab399ba13b Mon Sep 17 00:00:00 2001 From: physcik Date: Thu, 23 Apr 2026 14:15:52 +0500 Subject: Weapons index --- front/package-lock.json | 37 ++++++++++++++++ front/package.json | 1 + 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 + 10 files changed, 192 insertions(+), 6 deletions(-) create mode 100644 front/src/Config.ts create mode 100644 front/src/Models/RangedWeapon.ts (limited to 'front') diff --git a/front/package-lock.json b/front/package-lock.json index fe858e6..6943f13 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -16,6 +16,7 @@ "@types/node": "^16.18.126", "@types/react": "^19.2.14", "@types/react-dom": "^19.2.3", + "axios": "^1.15.2", "react": "^19.2.5", "react-dom": "^19.2.5", "react-router": "^7.14.0", @@ -4834,6 +4835,33 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.15.2.tgz", + "integrity": "sha512-wLrXxPtcrPTsNlJmKjkPnNPK2Ihe0hn0wGSaTEiHRPxwjvJwT3hKmXF4dpqxmPO9SoNb2FsYXj/xEo0gHN+D5A==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.15.11", + "form-data": "^4.0.5", + "proxy-from-env": "^2.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz", + "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==", + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "es-set-tostringtag": "^2.1.0", + "hasown": "^2.0.2", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz", @@ -13508,6 +13536,15 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz", + "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==", + "license": "MIT", + "engines": { + "node": ">=10" + } + }, "node_modules/psl": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz", diff --git a/front/package.json b/front/package.json index b705d58..234d168 100644 --- a/front/package.json +++ b/front/package.json @@ -11,6 +11,7 @@ "@types/node": "^16.18.126", "@types/react": "^19.2.14", "@types/react-dom": "^19.2.3", + "axios": "^1.15.2", "react": "^19.2.5", "react-dom": "^19.2.5", "react-router": "^7.14.0", 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