Added the actual calculator

package.json

@@ -19,9 +19,11 @@
     "nomar": "^1.1.0",
     "react": "^17.0.2",
     "react-bootstrap": "^1.6.1",
+    "react-bootstrap-range-slider": "^2.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",
     "react-scripts": "4.0.3",
+    "reactstrap": "^8.9.0",
     "typescript": "^4.1.6"
   },
   "scripts": {
@@ -44,5 +46,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react-bootstrap-range-slider": "^1.2.0"
   }
 }

public/index.html

@@ -17,6 +17,8 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
 
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.

src/App.tsx

@@ -4,7 +4,7 @@ import { Counter } from './features/counter/Counter';
 import './App.css';
 import './cc.scss';
 import { Active } from './features/item/Active';
-import { ArmorSlot } from './features/item/ArmorSlot';
+import { ArmorContainer, ArmorSlot } from './features/item/ArmorSlot';
 import { Col, Container, Nav, Navbar, Row } from 'react-bootstrap';
 import { DamageCalculator } from './features/item/DamageCalculator';
 
@@ -19,10 +19,7 @@ function App() {
         </Navbar>
         <Row>
         <Col sm={12} md={12} lg={12} xl={5}>
-          <ArmorSlot slot={0}/>
-          <ArmorSlot slot={1}/>
-          <ArmorSlot slot={2}/>
-          <ArmorSlot slot={3}/>
+          <ArmorContainer />
         </Col>
         <Col sm={12} md={12} lg={12} xl={7}>
           <DamageCalculator />

src/cc.scss

@@ -1,19 +1,62 @@
+$fg-1: rgb(28,28,28);
 
+button.btn-primary {
+    margin: 10px;
+}
+.btn-group {
+    margin: 5px;
+    border-color: $fg-1;
+    border: 1px solid $fg-1;
+    border-radius: 5px;
+    button {
+        padding: 5px;
+        color: $fg-1;
+        background-color: transparent;
+        border-color: transparent;
+        margin: 0px;
+    }
+}
 
-
+.container-fluid.main-container {
+    padding: 0px;
+    overflow-x: hidden;
+}
+.min-width-1 {
+    min-width: 5em;
+}
 .bottom-border {
     border-bottom: 1px solid rgb(128,128,128)
 }
-.armor-container-top {
+.container-top {
     margin-top: 20px;
     margin-left: 20px;
     margin-right: 20px;
 }
-.armor-container-bottom {
+.container-bottom {
+    margin-top: 10px;
     margin-bottom: 20px;
     margin-left: 20px;
     margin-right: 20px;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 .text-left {
     text-align: left;
+}
+
+.damage-display-container {
+    margin: 20px;
+}
+
+.collapse-btn.btn {
+    @extend .vc, .text-left;
+    width: 100%;
+}
+.graph {
+    width: 100%;
+}
+
+
+.vc {
+    vertical-align: middle;
 }

src/features/item/ArmorSlot.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Button, Col, Form, Row } from "react-bootstrap";
 import { useAppSelector, useAppDispatch } from "../../app/hooks";
 import { selectEntity, setType } from "../item/activeSlice";
-import { MATERIAL_ARRAY, PIECE_ARRAY } from "./armor";
+import { armor_data, getTough, MATERIAL_ARRAY, PIECE_ARRAY } from "./armor";
 import { EnchantContainer } from "./EnchantContainer";
 import { Entity } from "./entity";
 
@@ -13,23 +13,24 @@ export function ArmorSlot(props : ArmorSlotType) {
     const entity : Entity = useAppSelector(selectEntity);
     const dispatch = useAppDispatch();
     const onMaterialChange = (e : React.ChangeEvent<HTMLInputElement>) => {
-        dispatch(setType({type: e.target.value, slot: props.slot}));
+        dispatch(setType({type: e.target.value.split(" ")[2], slot: props.slot}));
     }
     return (
         <React.Fragment>
-        <Row noGutters className="armor-container-top">
+        <Row noGutters className="">
             <Col>
                 <h3 className="text-left bottom-border p-1">{PIECE_ARRAY[props.slot]}</h3>
             </Col>
         </Row>
-        <Row className="armor-container-bottom">
-            <Col sm={3}>
-
+        <Row className="container-bottom">
+            <Col sm={3} className="min-width-1">
             <Form>
             <Form.Group as={Row} controlId="armorSelect.ControlSelect1">
                 <Form.Control as="select" onChange={(e : React.ChangeEvent<HTMLInputElement>) => onMaterialChange(e)}> {
                     MATERIAL_ARRAY[props.slot].map( (item) => {
-                        return (<option>{item}</option>);
+                        return (
+                        <option>{armor_data.get(item)![props.slot]} {getTough(item)} {item}
+                        </option>);
                     } )
                 }
                 </Form.Control>
@@ -54,4 +55,14 @@ export function ArmorSlot(props : ArmorSlotType) {
         </Row>
         </React.Fragment>
     )
+}
+export function ArmorContainer() {
+    return (
+        <div className="container-top">
+          <ArmorSlot slot={0}/>
+          <ArmorSlot slot={1}/>
+          <ArmorSlot slot={2}/>
+          <ArmorSlot slot={3}/>
+        </div>
+    );
 }