Wiki full

src/pages/ModPage.tsx

@@ -4,6 +4,8 @@ import {NavLink, useLocation, useParams} from "react-router-dom";
 import {withRouter} from "../core/withrouter";
 import {IMod} from "../types/Imod";
 import {Irace} from "../types/Irace";
+import {Button} from "@mui/material";
+import {ArrowBack} from "@mui/icons-material";
 
 
 interface ModPageState {
@@ -42,8 +44,14 @@ class ModPage extends React.Component<any, ModPageState> {
 
     render() {
         if(this.state != null && this.state.races != null ){
-            return <div><h1>{this.state.mod.name} ({this.state.mod.version})</h1>
-                {this.state.races.map(race => <ul><NavLink state={race.id} to= {"/mod/" + this.state.mod.id + "/race/" + race.id} >{race.name}</NavLink></ul>)}
+
+            return <div>
+                <a href="/"><Button id="back-button" variant="contained"
+                                          startIcon={<ArrowBack/>}> Back</Button></a>
+                <h1>{this.state.mod.name} ({this.state.mod.version})</h1>
+                {this.state.races.map(race => <ul><NavLink state={race.id}
+                                                           to={"/mod/" + this.state.mod.id + "/race/" + race.id}>{race.name}</NavLink>
+                </ul>)}
             </div>;
         } else {
             return "";

src/pages/ModsPage.tsx

@@ -29,9 +29,6 @@ function Mods (mods: IMod[]) {
         )
     }
 
-    mapWithModVersions.keys()
-
-
     return(
         [...mapWithModVersions.keys()].map(m => Mod(m))
     )

src/pages/RacePage.tsx

@@ -3,20 +3,33 @@ import React, {useState} from "react";
 import {withRouter} from "../core/withrouter";
 import {IMod} from "../types/Imod";
 import {Irace} from "../types/Irace";
-import {IUnit, IUnitResponse} from "../types/IUnit";
+import {IUnit, IUnitResponse, IWeapon} from "../types/IUnit";
 import '../css/Unit.css'
 import {
-    Accordion, AccordionDetails,
+    Accordion,
+    AccordionDetails,
     AccordionSummary,
     Button,
-    ButtonGroup, Grid2, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
+    ButtonGroup,
+    Grid2,
+    List,
+    ListItem,
+    ListSubheader,
+    Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
     ToggleButton,
     ToggleButtonClassKey,
-    ToggleButtonGroup, Typography
+    ToggleButtonGroup,
+    Typography
 } from "@mui/material";
-import {ArrowDropDown} from "@mui/icons-material";
+import {ArrowBack, ArrowDropDown} from "@mui/icons-material";
 import ArmorType from "../classes/ArmorType";
-import Item from "../classes/Item";
+import Weapon from "../classes/Weapon";
 
 interface RacePageState {
     mod: IMod,
@@ -26,12 +39,6 @@ interface RacePageState {
 }
 
 
-
-function humanReadableUnitName(unit: string) {
-    const firstUpper = String(unit).charAt(0).toUpperCase() + String(unit).slice(1);
-    return firstUpper.replaceAll('_', ' ').replace('.rgd', '');
-}
-
 function Unit (unit: IUnit) {
 
     const morale = (unit.moraleMax !== null) ? <span>
@@ -46,6 +53,31 @@ function Unit (unit: IUnit) {
         <span>&nbsp;<img style={{verticalAlign: "top"}}
                          src="/images/DETECT_NO.webp"/></span>
 
+        let mapWithUnitWeapons: Map<number, IWeapon[]> = new Map();
+
+        unit.weapons.forEach( weapon => {
+            const weaponList = mapWithUnitWeapons.get(weapon.hardpoint)
+            if(weaponList == null){
+                mapWithUnitWeapons.set(weapon.hardpoint, new Array(weapon.weapon))
+            } else {
+                weaponList.push(weapon.weapon)
+            }
+        })
+
+    function WeaponSlot (hardpoint: number) {
+        let weaponThisSlot = mapWithUnitWeapons.get(hardpoint) ?? []
+
+        let header = "Weapon slot " + hardpoint
+
+        return(
+            <div>
+                <h3>{header}</h3>
+                {weaponThisSlot.map(weapon => <div><Weapon weapon={weapon}/>
+                </div>)}
+            </div>
+        )
+    }
+
 
     return (
         <Accordion>
@@ -90,7 +122,7 @@ function Unit (unit: IUnit) {
                                     >
                                         <TableCell component="th" scope="row">armor type</TableCell>
                                         <TableCell component="th" scope="row">
-                                            <ArmorType value={unit.armorType.name}/>
+                                            <ArmorType name={unit.armorType.name} withName={true}/>
                                         </TableCell>
                                     </TableRow>
                                     <TableRow
@@ -137,6 +169,11 @@ function Unit (unit: IUnit) {
                             {unit.description}
                         </div>
                     </Grid2>
+                    <Grid2 size={12}>
+                        {[...mapWithUnitWeapons.keys()].sort(function(a, b) {
+                            return a - b;
+                        }).map(h => WeaponSlot(h))}
+                    </Grid2>
                 </Grid2>
                 <i>{unit.filename}</i>
             </AccordionDetails>
@@ -162,7 +199,6 @@ class Units extends React.Component<IUnitResponse, UnitsState> {
         this.setState({
             selectedUnits: newUnitType
         });
-        {this.props.units.map(unit => Unit(unit))}
     }
 
     render () {
@@ -173,8 +209,10 @@ class Units extends React.Component<IUnitResponse, UnitsState> {
             unitsToRender = this.props.units.filter(unit => unit.capInfantry > 0)
         } else if (this.state.selectedUnits === 'tech'){
             unitsToRender = this.props.units.filter(unit => unit.capSupport > 0)
-        } else {
+        } else if (this.state.selectedUnits === 'support'){
             unitsToRender = this.props.units.filter(unit => unit.capSupport == 0 && unit.capInfantry == 0)
+        } else {
+            unitsToRender = this.props.units
         }
 
 
@@ -239,12 +277,18 @@ class RacePage extends React.Component<any, RacePageState> {
     }
 
     render() {
+
+
+
         if(this.state != null && this.state.units != null ){
-            return <div><h1>{this.state.mod.name} ({this.state.mod.version}) - {this.state.race.name}</h1>
+            const backRef = "/mod/" + this.state.mod.id
+
+            return <div><a href={backRef}><Button id="back-button" variant="contained" startIcon={<ArrowBack/>}> Back</Button></a>
+                <h1>{this.state.mod.name} ({this.state.mod.version}) - {this.state.race.name}</h1>
                 <Units race={this.state.race.name} units={this.state.units.units}/>
             </div>;
         } else {
-            return "";
+            return "loading...";
         }
     }
 }