Units wiki

2025-01-07 15:39:00 +03:00 · 2025-01-07 15:39:00 +03:00 · 27308c2c88
commit 27308c2c88
parent 4a5101fb6a
54 changed files with 797 additions and 12339 deletions
--- a/.env
+++ b/.env
@ -0,0 +1 @@
 REACT_APP_HOST_URL=http://localhost:8082
--- a/20
+++ b/20
@ -0,0 +1,20 @@
 # pull official base image
 FROM node:13.12.0-alpine
 # set working directory
 WORKDIR /app
 # add `/app/node_modules/.bin` to $PATH
 ENV PATH /app/node_modules/.bin:$PATH
 # install app dependencies
 COPY package.json ./
 RUN npm install --silent
 EXPOSE 3000
 # add app
 COPY . ./
 # start app
 CMD ["npm", "start"]
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,13 +1,18 @@
 {
-  "name": "crosspick-front",
+  "name": "dow-wiki-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@mui/icons-material": "^6.3.1",
    "@mui/material": "^6.3.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.28.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
--- a/public/images/ARM_Air.webp
+++ b/public/images/ARM_Air.webp
--- a/public/images/ARM_Bld_Hi.webp
+++ b/public/images/ARM_Bld_Hi.webp
--- a/public/images/ARM_Bld_Lo.webp
+++ b/public/images/ARM_Bld_Lo.webp
--- a/public/images/ARM_Bld_Mid.webp
+++ b/public/images/ARM_Bld_Mid.webp
--- a/public/images/ARM_Cmdr.webp
+++ b/public/images/ARM_Cmdr.webp
--- a/public/images/ARM_Hvy_Inf_Hi.webp
+++ b/public/images/ARM_Hvy_Inf_Hi.webp
--- a/public/images/ARM_Inf_Hi.webp
+++ b/public/images/ARM_Inf_Hi.webp
--- a/public/images/ARM_Inf_Lo.webp
+++ b/public/images/ARM_Inf_Lo.webp
--- a/public/images/ARM_Inf_Mid.webp
+++ b/public/images/ARM_Inf_Mid.webp
--- a/public/images/ARM_Morale.webp
+++ b/public/images/ARM_Morale.webp
--- a/public/images/ARM_Veh_Hi.webp
+++ b/public/images/ARM_Veh_Hi.webp
--- a/public/images/ARM_Veh_Lo.webp
+++ b/public/images/ARM_Veh_Lo.webp
--- a/public/images/ARM_Veh_Mid.webp
+++ b/public/images/ARM_Veh_Mid.webp
--- a/public/images/DETECT_NO.webp
+++ b/public/images/DETECT_NO.webp
--- a/public/images/DETECT_YES.webp
+++ b/public/images/DETECT_YES.webp
--- a/public/images/Health_icon.webp
+++ b/public/images/Health_icon.webp
--- a/public/images/Kills_icon.webp
+++ b/public/images/Kills_icon.webp
--- a/public/images/Resource_cap_infantry.gif
+++ b/public/images/Resource_cap_infantry.gif
--- a/public/images/Resource_cap_vehicle.gif
+++ b/public/images/Resource_cap_vehicle.gif
--- a/public/images/Resource_power.gif
+++ b/public/images/Resource_power.gif
--- a/public/images/Resource_requisition.gif
+++ b/public/images/Resource_requisition.gif
--- a/public/images/Time_icon.webp
+++ b/public/images/Time_icon.webp
--- a/public/index.html
+++ b/public/index.html
@ -28,6 +28,7 @@
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script type="text/babel" src="./index_bundle.js"></script>
    <div id="root"></div>
    <!--
      This HTML file is a template.
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/public/robots.txt
+++ b/public/robots.txt
@ -1,3 +0,0 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
 Disallow:
--- a/src/App.css
+++ b/src/App.css
@ -1,38 +0,0 @@
 .App {
  text-align: center;
 }
 .App-logo {
  height: 40vmin;
  pointer-events: none;
 }
@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
 }
 .App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
 }
 .App-link {
  color: #61dafb;
 }
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
 }
--- a/src/App.js
+++ b/src/App.js
@ -1,25 +0,0 @@
 import logo from './logo.svg';
 import './App.css';
 function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
 }
 export default App;
--- a/src/App.test.js
+++ b/src/App.test.js
@ -1,8 +0,0 @@
 import { render, screen } from '@testing-library/react';
 import App from './App';
 test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
 });
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,69 @@
 import './App.css';
 import React from "react";
 import {
    AppBar,
    Button,
    Container,
    createTheme,
    Grid2,
    IconButton,
    ThemeProvider,
    Toolbar,
    Typography
 } from "@mui/material";
 import {MyRoutes} from "./Routes";
 function App() {
  console.log(process.env);
    const steamLogin = (event: React.MouseEvent<HTMLButtonElement>) => {
        (document.getElementById('submit-steam-login') as HTMLFormElement).click()
    };
    const theme = createTheme({
        cssVariables: true,
    });
  return (
      <div>
          <AppBar position="static">
              <Toolbar>
                  <IconButton
                      size="large"
                      edge="start"
                      color="inherit"
                      aria-label="menu"
                      sx={{mr: 2}}
                  >
                  </IconButton>
                  <Typography variant="h6" component="div" sx={{flexGrow: 1}}>
                      Soulstorm wiki
                  </Typography>
                  <Button color="inherit" onClick={steamLogin}>
                      Log in through Steam
                  </Button>
              </Toolbar>
          </AppBar>
          <Container>
              <MyRoutes/>
          </Container>
          <form action="https://steamcommunity.com/openid/login" method="post">
              <input type="hidden" name="openid.identity"
                     value="http://specs.openid.net/auth/2.0/identifier_select"/>
              <input type="hidden" name="openid.claimed_id"
                     value="http://specs.openid.net/auth/2.0/identifier_select"/>
              <input type="hidden" name="openid.ns" value="http://specs.openid.net/auth/2.0"/>
              <input type="hidden" name="openid.mode" value="checkid_setup"/>
              <input type="hidden" name="openid.realm" value={process.env.REACT_APP_HOST_URL}/>
              <input type="hidden" name="openid.return_to"
                     value={process.env.REACT_APP_HOST_URL + "\\login"}/>
              <button id="submit-steam-login" type="submit" hidden={true}></button>
          </form>
      </div>
  );
 }
 export default App;
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@ -0,0 +1,17 @@
 import {Routes, Route, BrowserRouter} from "react-router-dom";
 import RacePage from "./pages/RacePage";
 import ModsPage from "./pages/ModsPage";
 import ModPage from "./pages/ModPage";
 export const MyRoutes = () => {
    return(
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<ModsPage/>}/>
                <Route path="/mod/:id" element={<ModPage/>}/>
                <Route path="/mod/:modId/race/:raceId" element={<RacePage/>}/>
            </Routes>
        </BrowserRouter>
    )
 }
--- a/src/classes/ArmorType.tsx
+++ b/src/classes/ArmorType.tsx
@ -0,0 +1,15 @@
 import React from "react";
 interface IArmorType{
    value: string
 }
 class ArmorType extends React.Component<IArmorType, any> {
    render() {
        return this.props.value;
    }
 }
 export default ArmorType;
--- a/src/classes/Item.js
+++ b/src/classes/Item.js
@ -0,0 +1,16 @@
 import React from 'react';
 export default class Item extends React.Component {
    render() {
        return (
            <div className="shopping-list">
                <h1>Shopping List for {this.props.name}</h1>
                <ul>
                    <li>Instagram</li>
                    <li>WhatsApp</li>
                    <li>Oculus</li>
                </ul>
            </div>
        );
    }
 }
--- a/src/classes/LobbyList.js
+++ b/src/classes/LobbyList.js
@ -0,0 +1,27 @@
 import React from 'react';
 export default class LobbyList extends React.Component {
    constructor(props){
        super(props);
        this.state = { messages : [] }
    }
    componentDidMount(){
        // this is an "echo" websocket service
        this.connection = new WebSocket('wss://echo.websocket.org');
        // listen to onmessage event
        this.connection.onmessage = evt => {
            // add the new message to state
            this.setState({
                messages : this.state.messages.concat([ evt.data ])
            })
        };
        // for testing purposes: sending to the echo service which will send it back back
        setInterval( _ => {
            this.connection.send( Math.random() )
        }, 2000 )
    }
    render() {
        // slice(-5) gives us the five most recent messages
        return <ul>{ this.state.messages.slice(-5).map( (msg, idx) => <li key={'msg-' + idx }>{ msg }</li> )}</ul>;
    }
 };
--- a/src/classes/TimerExample.js
+++ b/src/classes/TimerExample.js
@ -0,0 +1,54 @@
 import React from 'react';
 import Item from "./Item";
 export class TimerExample extends React.Component {
    constructor(props) {
        super(props);
        // Don't call this.setState() here!
        this.state = { elapsed: 10 };
        this.tick = this.tick.bind(this);
        console.log(this.props);
    }
    componentDidMount() {
        // componentDidMount вызывается react'ом, когда компонент
        // был отрисован на странице. Мы можем установить интервал здесь:
        console.log(this.props);
        this.timer = setInterval(this.tick, 50);
    }
    componentWillUnmount() {
        // Этот метод вызывается сразу после того, как компонент удален
        // со страницы и уничтожен. Мы можем удалить интервал здесь:
        clearInterval(this.timer);
    }
    tick() {
        // Эта функция вызывается каждые 50мс. Она обновляет
        // счетчик затраченного времени. Вызов setState заставляет компонент перерисовываться
        console.log(this.state);
        this.setState({elapsed: new Date() - this.props.start});
    }
    render() {
        let elapsed = Math.round(this.state.elapsed / 100);
        // Это даст нам число с одной цифрой после запятой dot (xx.x):
        let seconds = (elapsed / 10).toFixed(1);
        // Хоть мы и возвращаем целый <p> элемент, react разумно обновит
        // только измененные части, содержащие переменную seconds.
        return <p>This example was started <b>{seconds} seconds</b> ago.</p>;
    }
 };
--- a/src/classes/User.tsx
+++ b/src/classes/User.tsx
@ -0,0 +1,38 @@
 import React, {useState} from "react";
 import {UserUrl} from "../core/api";
 interface IUser {
    name?: string;
    avatarUrl?: string;
 }
 export default function User() {
    const [user, setUser] = useState<IUser>({
        name: "---",
        avatarUrl: ""
    });
    fetch(UserUrl)
        .then(res => res.json())
        .then(
            (data) => {
                console.log(data);
                setUser({name: data.name, avatarUrl: data.avatarUrl});
            },
            (error) => {
                console.log("error");
            }
        );
     return (
     <span>
         Welcome {user.name} -
         <span> </span><img width="50" height="50" src={user.avatarUrl}/>
     </span>
    )
 }
--- a/src/core/api.js
+++ b/src/core/api.js
@ -0,0 +1,6 @@
 export const UserUrl = process.env.REACT_APP_HOST_URL + '/api/v1/user';
 export const AvailableMods = process.env.REACT_APP_HOST_URL + '/api/v1/mods';
 export const AvailableRacesPart = process.env.REACT_APP_HOST_URL + '/api/v1/races';
 export const AvailableUnits = process.env.REACT_APP_HOST_URL + '/api/v1/units';
 export const IconUrl = process.env.REACT_APP_HOST_URL + '/api/v1/grapics/icon/';
--- a/src/core/withrouter.js
+++ b/src/core/withrouter.js
@ -0,0 +1,8 @@
 import { useParams } from 'react-router-dom';
 export function withRouter(Children) {
    return (props) => {
        const match = { params: useParams() };
        return <Children {...props} match={match} />
    }
 }
--- a/src/css/Unit.css
+++ b/src/css/Unit.css
@ -0,0 +1,21 @@
 .unitIcon{
    width: 64px;
 }
 .unitHeader{
    margin-left: 15px;
 }
 .horizontalElements{
    display: flex;
 }
 .stats-icon{
    width: 16px;
    height: 16px;
 }
 #filtered-units{
    margin-top: 10px;
 }
--- a/src/index.js
+++ b/src/index.js
@ -1,17 +0,0 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
 );
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
--- a/src/index.tsx
+++ b/src/index.tsx
@ -0,0 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
 );
--- a/src/pages/ModPage.tsx
+++ b/src/pages/ModPage.tsx
@ -0,0 +1,54 @@
 import {AvailableMods, AvailableRacesPart} from "../core/api";
 import React, {useEffect, useRef, useState} from "react";
 import {NavLink, useLocation, useParams} from "react-router-dom";
 import {withRouter} from "../core/withrouter";
 import {IMod} from "../types/Imod";
 import {Irace} from "../types/Irace";
 interface ModPageState {
    mod: IMod,
    races: Irace[],
    modId: Number,
 }
 class ModPage extends React.Component<any, ModPageState> {
    constructor(props: any) {
        super(props);
        console.log(this.props.match.params.id);
        this.setState({
            modId : this.props.match.params.id
        });
    }
    async componentDidMount() {
        const responseMod = await fetch(AvailableMods + "/" + this.props.match.params.id);
        const modData: IMod = await responseMod.json();
        console.log(modData);
        this.setState({
            mod : modData
        });
        const response = await fetch(AvailableRacesPart  + "/mod/" + this.props.match.params.id);
        const racesData: Irace[] = await response.json();
        this.setState({
            races : racesData
        });
    }
    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>)}
            </div>;
        } else {
            return "";
        }
    }
 }
 export default withRouter(ModPage);
--- a/src/pages/ModsPage.tsx
+++ b/src/pages/ModsPage.tsx
@ -0,0 +1,67 @@
 import {AvailableMods} from "../core/api";
 import React, {useEffect, useState} from "react";
 import {NavLink} from "react-router-dom";
 import {IMod} from "../types/Imod";
 function Mods (mods: IMod[]) {
    let mapWithModVersions: Map<String, IMod[]> = new Map();
    mods.forEach( mod => {
        const versionList = mapWithModVersions.get(mod.name)
      if(versionList == null){
          mapWithModVersions.set(mod.name, new Array(mod))
      } else {
          versionList.push(mod)
      }
    })
    function Mod (modName: String) {
        let sameMods = mapWithModVersions.get(modName) ?? []
        return(
            <div>
                <h1>{modName}</h1>
                {sameMods.map(mod => <ul><NavLink state={mod.id} to= {"/mod/" + mod.id} >{mod.version}</NavLink></ul>)}
            </div>
        )
    }
    mapWithModVersions.keys()
    return(
        [...mapWithModVersions.keys()].map(m => Mod(m))
    )
 }
 interface ModsPageState {
    mods: IMod[]
 }
 class ModsPage extends React.Component<any, ModsPageState> {
    constructor({props}: { props: any }) {
        super(props);
        this.state = {
            mods: []
        }
    }
    async componentDidMount() {
        const response = await fetch(AvailableMods);
        const data: IMod[] = await response.json();
        console.log(data);
        this.setState({
            mods : data
        });
    }
    render() {
        return <div>{Mods(this.state.mods)}</div>;
    }
 }
 export default ModsPage
--- a/src/pages/RacePage.tsx
+++ b/src/pages/RacePage.tsx
@ -0,0 +1,252 @@
 import {AvailableMods, AvailableRacesPart, AvailableUnits, IconUrl} from "../core/api";
 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 '../css/Unit.css'
 import {
    Accordion, AccordionDetails,
    AccordionSummary,
    Button,
    ButtonGroup, Grid2, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
    ToggleButton,
    ToggleButtonClassKey,
    ToggleButtonGroup, Typography
 } from "@mui/material";
 import {ArrowDropDown} from "@mui/icons-material";
 import ArmorType from "../classes/ArmorType";
 import Item from "../classes/Item";
 interface RacePageState {
    mod: IMod,
    modId: Number,
    race: Irace,
    units: IUnitResponse,
 }
 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>
        <img style={{verticalAlign: "top"}} src="/images/ARM_Morale.webp"/>&nbsp;{unit.moraleMax}
        +{unit.moraleRegeneration}/s
        {unit.moraleDeathPenalty > 0 && <span> <img style={{verticalAlign: "top"}} src="/images/Kills_icon.webp"/> -{unit.moraleDeathPenalty}</span>}
    </span> : "-"
    const detect = unit.detectRadius > 0 ? <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                            src="/images/DETECT_YES.webp"/> {unit.detectRadius}</span> :
        <span>&nbsp;<img style={{verticalAlign: "top"}}
                         src="/images/DETECT_NO.webp"/></span>
    return (
        <Accordion>
            <AccordionSummary
                expandIcon={<ArrowDropDown/>}
                aria-controls="panel1-content"
                id={unit.filename}
            >
                <img className="unitIcon" src={IconUrl + unit.icon.replaceAll('\\', '/')}/>
                <h2> {unit.name}</h2>
                {unit.detectRadius > 0 && <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                           src="/images/DETECT_YES.webp"/></span>}
            </AccordionSummary>
            <AccordionDetails>
                <Grid2 container spacing={2}>
                    <Grid2 size={4}>
                        <TableContainer component={Paper}>
                            <Table size="small" aria-label="a dense table">
                                <TableBody id="unit-stats-table">
                                    <TableRow
                                        sx={{'&:last-child td, &:last-child th': {border: 0}}}
                                    >
                                        <TableCell component="th" scope="row">cost</TableCell>
                                        <TableCell component="th" scope="row">
                                            {unit.buildCostRequisition > 0 && <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                                                               src="/images/Resource_requisition.gif"/>&nbsp;
                                                {unit.buildCostRequisition}</span>}
                                            {unit.buildCostPower > 0 && <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                                                         src="/images/Resource_power.gif"/>&nbsp;
                                                {unit.buildCostPower}</span>}
                                            {unit.capInfantry > 0 && <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                                                      src="/images/Resource_cap_infantry.gif"/>&nbsp;
                                                {unit.capInfantry}</span>}
                                            {unit.capSupport > 0 && <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                                                     src="/images/Resource_cap_vehicle.gif"/>&nbsp;
                                                {unit.capSupport}</span>}
                                        </TableCell>
                                    </TableRow>
                                    <TableRow
                                        sx={{'&:last-child td, &:last-child th': {border: 0}}}
                                    >
                                        <TableCell component="th" scope="row">armor type</TableCell>
                                        <TableCell component="th" scope="row">
                                            <ArmorType value={unit.armorType.name}/>
                                        </TableCell>
                                    </TableRow>
                                    <TableRow
                                        sx={{'&:last-child td, &:last-child th': {border: 0}}}
                                    >
                                        <TableCell component="th" scope="row">health</TableCell>
                                        <TableCell component="th" scope="row">
                                    <span><img style={{verticalAlign: "top"}}
                                               src="/images/Health_icon.webp"/>&nbsp;
                                        {unit.health} {unit.healthRegeneration > 0 &&
                                            <span>+{unit.healthRegeneration}/s</span>} </span>
                                        </TableCell>
                                    </TableRow>
                                    <TableRow
                                        sx={{'&:last-child td, &:last-child th': {border: 0}}}
                                    >
                                        <TableCell component="th" scope="row">move speed</TableCell>
                                        <TableCell component="th" scope="row">
                                            {unit.moveSpeed}
                                        </TableCell>
                                    </TableRow>
                                    <TableRow
                                        sx={{'&:last-child td, &:last-child th': {border: 0}}}
                                    >
                                        <TableCell component="th" scope="row">morale</TableCell>
                                        <TableCell component="th" scope="row">
                                            {morale}
                                        </TableCell>
                                    </TableRow>
                                    <TableRow
                                        sx={{'&:last-child td, &:last-child th': {border: 0}}}
                                    >
                                        <TableCell component="th" scope="row">detect</TableCell>
                                        <TableCell component="th" scope="row">
                                            {detect}
                                        </TableCell>
                                    </TableRow>
                                </TableBody>
                            </Table>
                        </TableContainer>
                    </Grid2>
                    <Grid2 size={8}>
                        <div style={{whiteSpace: "pre-wrap"}} >
                            {unit.description}
                        </div>
                    </Grid2>
                </Grid2>
                <i>{unit.filename}</i>
            </AccordionDetails>
        </Accordion>)
 }
 interface UnitsState {
    selectedUnits: String | null,
 }
 class Units extends React.Component<IUnitResponse, UnitsState> {
    constructor(props: any) {
        super(props);
        this.state = ({
            selectedUnits: 'infantry'
        });
    }
    handleChange = (e: React.MouseEvent,  newUnitType: String | null) => {
        this.setState({
            selectedUnits: newUnitType
        });
        {this.props.units.map(unit => Unit(unit))}
    }
    render () {
        let unitsToRender: IUnit[] = [];
        if(this.state.selectedUnits === 'infantry'){
            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 {
            unitsToRender = this.props.units.filter(unit => unit.capSupport == 0 && unit.capInfantry == 0)
        }
        if (this.state) {
            return (<div>
                <ToggleButtonGroup
                    color="primary"
                    exclusive
                    onChange={this.handleChange}
                    value={this.state.selectedUnits}
                    aria-label="Platform"
                >
                    <ToggleButton value="infantry">Infantry</ToggleButton>
                    <ToggleButton value="tech">Tech</ToggleButton>
                    <ToggleButton value="support">Support</ToggleButton>
                </ToggleButtonGroup>
                <div id = 'filtered-units'>
                    {unitsToRender.map(unit => Unit(unit))}
                </div>
            </div>)
        } else {
            return "";
        }
    }
 }
 class RacePage extends React.Component<any, RacePageState> {
    constructor(props: any) {
        super(props);
        console.log(this.props.match.params.id);
        this.setState({
            modId: this.props.match.params.id
        });
    }
    async componentDidMount() {
        const responseMod = await fetch(AvailableMods + "/" + this.props.match.params.modId);
        const modData: IMod = await responseMod.json();
        this.setState({
            mod: modData
        });
        const response = await fetch(AvailableRacesPart  + "/" + this.props.match.params.raceId);
        const racesData: Irace = await response.json();
        this.setState({
            race : racesData
        });
        const unitsResponse = await fetch(AvailableUnits  + "/" + this.state.mod.id + "/" + this.props.match.params.raceId);
        const unitsData: IUnitResponse = await unitsResponse.json();
        console.log(unitsData);
        this.setState({
            units : unitsData
        });
    }
    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>
                <Units race={this.state.race.name} units={this.state.units.units}/>
            </div>;
        } else {
            return "";
        }
    }
 }
 export default withRouter(RacePage);
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
@ -1,13 +0,0 @@
 const reportWebVitals = onPerfEntry => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
 };
 export default reportWebVitals;
--- a/src/types/IArmorType.ts
+++ b/src/types/IArmorType.ts
@ -0,0 +1,4 @@
 export interface IArmorType {
    id: string
    name: string
 }
--- a/src/types/IUnit.tsx
+++ b/src/types/IUnit.tsx
@ -0,0 +1,71 @@
 import {Irace} from "./Irace";
 import {IArmorType} from "./IArmorType";
 export interface IUnitResponse {
    race: string
    units: IUnit[]
 }
 export interface IUnit {
    id: number
    race: Irace
    armorType: IArmorType
    armorType2?: IArmorType
    name: string
    filename: string
    description: string
    buildCostRequisition: number
    buildCostPower: number
    capInfantry: number
    capSupport: number
    squadStartSize: number
    squadMaxSize: number
    squadLimit?: number
    health: number
    healthRegeneration: number
    moraleDeathPenalty: number
    moraleMax?: number
    moraleBroken?: number
    moraleRegeneration?: number
    mass: number
    upTime: number
    moveSpeed: number
    sightRadius: number
    detectRadius: number
    reinforceCostRequisition?: number
    reinforceCostPower?: number
    reinforceTime?: number
    icon: string
    modId: number
    weapons: WeaponHardpoint[]
 }
 export interface WeaponHardpoint {
    weapon: Weapon
    hardpoint: number
 }
 export interface Weapon {
    id: number
    name: string
    costRequisition: number
    costPower: number
    costTimeSeconds: number
    accuracy: number
    reloadTime: number
    setupTime: number
    accuracyReductionMoving: number
    minDamage: number
    maxDamage: number
    moraleDamage: number
    modId: number
    weaponPiercings: WeaponPiercing[]
 }
 export interface WeaponPiercing {
    id: number
    armorType: IArmorType
    piercingValue: number
 }
--- a/src/types/Imod.tsx
+++ b/src/types/Imod.tsx
@ -0,0 +1,7 @@
 export interface IMod {
    id: number;
    name: string;
    version: string;
    technicalName: string;
    isBeta: boolean;
 }
--- a/src/types/Irace.tsx
+++ b/src/types/Irace.tsx
@ -0,0 +1,4 @@
 export interface Irace {
    id: string;
    name: string;
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,26 @@
 {
  "compilerOptions": {
    "target": "ES6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
 }