diff --git a/package-lock.json b/package-lock.json
index 8f89912..ab7bcbb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1268,6 +1268,15 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "@hypnosphi/create-react-context": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz",
+      "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==",
+      "requires": {
+        "gud": "^1.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -2538,6 +2547,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-bootstrap-range-slider": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@types/react-bootstrap-range-slider/-/react-bootstrap-range-slider-1.2.0.tgz",
+      "integrity": "sha512-gh5y6Fa0q1ujR1ONml1S2scnBsY+XWz6NbLphZuKVtVnzSZRQBIvi2gtZknQ+wWK2bs5TFCfaMIBm1OEwQo6mw==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-dom": {
       "version": "16.9.13",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.13.tgz",
@@ -7640,6 +7658,11 @@
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
       "optional": true
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "gzip-size": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
@@ -12046,6 +12069,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -13390,6 +13418,15 @@
         "warning": "^4.0.3"
       }
     },
+    "react-bootstrap-range-slider": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-bootstrap-range-slider/-/react-bootstrap-range-slider-2.0.2.tgz",
+      "integrity": "sha512-GptOpQjarlf6H2OfGsAqS1jOFFw8lsfQVLCWD6tgILspr2qZxzoiyUGLPDNfFFLy/ALhzGxlnVUrYjOe34UkhA==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -13576,6 +13613,20 @@
         "warning": "^4.0.3"
       }
     },
+    "react-popper": {
+      "version": "1.3.11",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz",
+      "integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "@hypnosphi/create-react-context": "^0.3.1",
+        "deep-equal": "^1.1.1",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.7",
+        "warning": "^4.0.2"
+      }
+    },
     "react-redux": {
       "version": "7.2.4",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz",
@@ -13671,6 +13722,39 @@
         "prop-types": "^15.6.2"
       }
     },
+    "reactstrap": {
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.9.0.tgz",
+      "integrity": "sha512-pmf33YjpNZk1IfrjqpWCUMq9hk6GzSnMWBAofTBNIRJQB1zQ0Au2kzv3lPUAFsBYgWEuI9iYa/xKXHaboSiMkQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "classnames": "^2.2.3",
+        "prop-types": "^15.5.8",
+        "react-popper": "^1.3.6",
+        "react-transition-group": "^2.3.1"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+          "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+          "requires": {
+            "@babel/runtime": "^7.1.2"
+          }
+        },
+        "react-transition-group": {
+          "version": "2.9.0",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+          "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+          "requires": {
+            "dom-helpers": "^3.4.0",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2",
+            "react-lifecycles-compat": "^3.0.4"
+          }
+        }
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -16034,6 +16118,11 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typed-styles": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+      "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
diff --git a/package.json b/package.json
index 2a7a787..9163060 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/public/index.html b/public/index.html
index 40ef2ce..e6350de 100644
--- a/public/index.html
+++ b/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.
diff --git a/src/App.tsx b/src/App.tsx
index 6984e46..4fe0a7a 100644
--- a/src/App.tsx
+++ b/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 />
diff --git a/src/cc.scss b/src/cc.scss
index 48d683d..c54725e 100644
--- a/src/cc.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/features/item/ArmorSlot.tsx b/src/features/item/ArmorSlot.tsx
index b52f961..24aae38 100644
--- a/src/features/item/ArmorSlot.tsx
+++ b/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>
+    );
 }
\ No newline at end of file
diff --git a/src/features/item/DamageCalculator.tsx b/src/features/item/DamageCalculator.tsx
index 8a8f301..cd8884a 100644
--- a/src/features/item/DamageCalculator.tsx
+++ b/src/features/item/DamageCalculator.tsx
@@ -1,26 +1,72 @@
 import { Col, Row } from "react-bootstrap";
 import { useAppSelector, useAppDispatch } from "../../app/hooks";
-import { selectEntity } from "./activeSlice";
-import { setType } from "./armor";
+import { selectDamage, selectEntity } from "./activeSlice";
+import { getSetEPF, setType } from "./armor";
 import { Entity } from "./entity";
 import { takeDamage } from "./maths";
+import * as d from './damageTypes';
+import { Damage } from "./damage";
+import { round } from "./Utils";
+import React, { useState } from "react";
+
+import 'bootstrap/dist/css/bootstrap.css'; // or include from a CDN
+import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
+import RangeSlider from 'react-bootstrap-range-slider';
+import { DamageGraph } from "./DamageGraph";
+
+
+interface DamageInputType {
+    
+}
+export function DamageInput(props: DamageInputType) {
+    const [value, setValue] = useState(0);
+    return (
+        <RangeSlider
+            value={value}
+            onChange={(e : React.ChangeEvent<HTMLInputElement>) => setValue(parseInt(e.target.value))}
+        />
+    )
+}
 
 interface DamageCalculatorType {
     
 }
 export function DamageCalculator(props : DamageCalculatorType) {
     const entity : Entity = useAppSelector(selectEntity);
+    const damage : Damage = useAppSelector(selectDamage);
     const dispatch = useAppDispatch();
     return (
-        <Row>
+        <div className="container-top">
+            <Row noGutters className="">
             <Col>
-                <h3></h3>
-                <ul>
-                    <li>{takeDamage({amount: 25, type: "melee"}, entity)}</li>
-                    <li>{takeDamage({amount: 25, type: "fall"}, entity)}</li>
-                </ul>
+            <h3 className="text-left bottom-border p-1">Damage Calculations</h3>
             </Col>
-
-        </Row>
+            </Row>
+            <Row className="damage-display-container container-bottom">
+                <DamageDisplay dmg={{amount: damage.amount, type: d.MELEE}}></DamageDisplay>
+                <DamageDisplay dmg={{amount: damage.amount, type: d.FALL}}></DamageDisplay>
+                <DamageDisplay dmg={{amount: damage.amount, type: d.EXPLOSION}}></DamageDisplay>
+                <DamageDisplay dmg={{amount: damage.amount, type: d.FIRE}}></DamageDisplay>
+                <DamageDisplay dmg={{amount: damage.amount, type: d.PROJECTILE}}></DamageDisplay>
+                <DamageDisplay dmg={{amount: damage.amount, type: d.MAGIC}}></DamageDisplay>
+            </Row>
+            <Row>
+                <DamageGraph />
+            </Row>
+        </div>
+    );
+}
+interface DamageDisplayType {
+    dmg: Damage
+}
+export function DamageDisplay(props: DamageDisplayType) {
+    const entity : Entity = useAppSelector(selectEntity);
+    return (
+        <Col>
+            <h4>{props.dmg.type}</h4>
+            <h6>Resistance {round(100- ((takeDamage(props.dmg, entity))*100 / props.dmg.amount))}%</h6>
+            <h6>{round(takeDamage(props.dmg, entity))}</h6>
+            <h6>EPF {getSetEPF(entity.armor, props.dmg.type)}</h6>
+        </Col>
     );
 }
\ No newline at end of file
diff --git a/src/features/item/DamageGraph.tsx b/src/features/item/DamageGraph.tsx
new file mode 100644
index 0000000..5d3789f
--- /dev/null
+++ b/src/features/item/DamageGraph.tsx
@@ -0,0 +1,174 @@
+import { timeStamp } from "console";
+import functionPlot from "function-plot";
+import { useEffect, useLayoutEffect, useState } from "react";
+import { Button, ButtonGroup, Col, Collapse, Row } from "react-bootstrap";
+import { useAppSelector } from "../../app/hooks";
+import { selectDamage, selectEntity } from "./activeSlice";
+import { Damage } from "./damage";
+import { Entity } from "./entity";
+import Icon from "./Icons";
+import { damageEquation } from "./maths";
+
+//https://stackoverflow.com/questions/19014250/rerender-view-on-browser-resize-with-react
+function useWindowSize() {
+    const [size, setSize] = useState([0, 0]);
+    useLayoutEffect(() => {
+      function updateSize() {
+        setSize([window.innerWidth, window.innerHeight]);
+      }
+      window.addEventListener('resize', updateSize);
+      updateSize();
+      return () => window.removeEventListener('resize', updateSize);
+    }, []);
+    return size;
+}
+interface CollapsableGraphType {
+    fn: string,
+    widthReference: string,
+    target: string,
+    title: string,
+    xAxis: {domain: number[], label: string},
+    yAxis: {domain: number[], label: string}
+}
+export function CollapsableGraph(props: CollapsableGraphType) {
+    const [width, height] = useWindowSize();
+    const [toggle, setToggle] = useState(true);
+
+    const refresh = () => {
+        //This function is not called for some reason.
+        //Cannot be called from inside useEffect.
+        functionPlot({
+            target: "#" + props.target,
+            title: props.title,
+            height: 350,
+            width: document.getElementById(props.widthReference)!.clientWidth,
+            yAxis: { domain: props.yAxis.domain, label: props.yAxis.label },
+            xAxis: { domain: props.xAxis.domain, label: props.xAxis.label },
+            grid: true,
+            data: [
+              {
+                fn: props.fn
+              }
+            ]
+        });
+    }
+    useEffect(refresh);
+    return (
+        <Row>
+                <Button 
+                    className="collapse-btn"
+                    onClick={ () => {setToggle(!toggle); refresh()} }
+                >
+                    {
+                        toggle ? 
+                        <Icon val="expand_less"/> :
+                        <Icon val="expand_more"/>
+                    }
+                    { props.title }
+                </Button>
+                <Collapse in={toggle}>
+                    <div id={props.target} className="graph"></div>
+                </Collapse>
+        </Row>
+    );
+}
+export function DamageGraph() {
+    const entity : Entity = useAppSelector(selectEntity);
+    const damage : Damage = useAppSelector(selectDamage);
+    /*
+    const [width, height] = useWindowSize();
+    const [toggle, setToggle] = useState(true);
+    const [togglePercent, setTogglePercent] = useState(true);
+
+    const refresh = () => {
+        //This function is not called for some reason.
+        //Cannot be called from inside useEffect.
+        functionPlot({
+            target: "#graphPane",
+            title: damage.type + " Damage Curve",
+            height: 350,
+            width: document.getElementById('wrapper')!.clientWidth,
+            yAxis: { domain: [0, 20], label: "Damage after reduction" },
+            xAxis: { domain: [0, 40], label: "Damage before reduction" },
+            grid: true,
+            data: [
+              {
+                fn: damageEquation(damage, entity)
+              }
+            ]
+        });
+        functionPlot({
+            target: "#percentGraphPane",
+            title: damage.type + " % Damage Reduction",
+            height: 350,
+            width: document.getElementById('wrapper')!.clientWidth,
+            yAxis: { domain: [0, 100], label: "% Damage Mitigated" },
+            xAxis: { domain: [0, 40], label: "Damage" },
+            grid: true,
+            data: [
+              {
+                fn: "100 - 100* ((" + damageEquation(damage, entity) + ")/x)"
+              }
+            ]
+        });
+    }
+    
+    useEffect(refresh);
+    */
+    return (
+        <Col id="wrapper">
+        {/*damageEquation(damage,entity)*/}
+            <CollapsableGraph 
+                fn={damageEquation(damage, entity)}
+                widthReference="wrapper"
+                target="graphPane"
+                title={damage.type + " Damage Curve"}
+                xAxis={ { domain: [0,40], label: "Damage before reduction"} }
+                yAxis={ {domain: [0, 20], label: "Damage after reduction"} }
+            />
+            <CollapsableGraph 
+                fn={"100 - 100* ((" + damageEquation(damage, entity) + ")/x)"}
+                widthReference="wrapper"
+                target="percentGraphPane"
+                title={damage.type + " % Damage Curve"}
+                xAxis={ { domain: [0,40], label: "Damage"} }
+                yAxis={ {domain: [0, 100], label: "% Damage Mitigated"} }
+            />
+            {/*
+            <Row>
+                <Button 
+                    className="collapse-btn"
+                    onClick={ () => {setToggle(!toggle); refresh()} }
+                >
+                    {
+                        toggle ? 
+                        <Icon val="expand_less"/> :
+                        <Icon val="expand_more"/>
+                    }
+                    Damage Curve
+                </Button>
+                <Collapse in={toggle}>
+                    <div id="graphPane" className="graph"></div>
+                </Collapse>
+            </Row>
+
+            <Row>
+                <Button 
+                    className="collapse-btn"
+                    onClick={ () => {setTogglePercent(!togglePercent); refresh()} }
+                >
+                    {
+                        togglePercent ? 
+                        <Icon val="expand_less"/> :
+                        <Icon val="expand_more"/>
+                    }
+                    % Damage Curve
+                </Button>
+                <Collapse in={togglePercent}>
+                    <div id="percentGraphPane" className="graph"></div>
+                </Collapse>
+            </Row>
+                */}
+        </Col>
+    );
+}
diff --git a/src/features/item/Icons.tsx b/src/features/item/Icons.tsx
new file mode 100644
index 0000000..728b77b
--- /dev/null
+++ b/src/features/item/Icons.tsx
@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import { Button, Modal } from "react-bootstrap";
+import { Placement } from "react-bootstrap/esm/Overlay";
+import { Tooltip } from "reactstrap";
+
+export default function Icon(props : {val: string}) {
+    return (
+        <i className="material-icons vc">{props.val}</i>
+    );
+}
+
+interface InputModalType {
+  prompt: string,
+  onSubmit: (val : string) => void
+}
+interface InputModalState {
+  show: boolean,
+  input: string
+}
+//Use this later
+//<InputModal prompt="Type something" onSubmit={ (val) => alert(val)} />
+export class InputModal extends React.Component<InputModalType, InputModalState> {
+  constructor(props: InputModalType) {
+    super(props);
+
+    this.state = {
+      show: true,
+      input: ""
+    }
+
+    this.hide = this.hide.bind(this);
+  }
+  hide() {
+    this.setState({show: false, input: ""})
+  }
+  render() { return (
+    <Modal
+      onHide={() => this.hide()}
+      show={this.state.show}
+      size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+    >
+      <Modal.Header closeButton>
+        <Modal.Title id="contained-modal-title-vcenter">
+          {this.props.prompt}
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <input className="form-control dark-input" type="text" 
+        onChange={ (e) => this.setState({input: e.target.value})} />
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onClick={(e) => {
+            this.props.onSubmit(this.state.input);
+            this.hide();
+          }}>Submit</Button>
+      </Modal.Footer>
+    </Modal>
+  );
+  }
+}
+
+export function Tip(props : {target: string, val: string, pos: Placement}) {
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+
+  const toggle = () => setTooltipOpen(!tooltipOpen);
+
+  return (
+    <Tooltip placement={props.pos} isOpen={tooltipOpen} target={props.target} toggle={toggle}>
+      {props.val}
+    </Tooltip>
+  );
+}
\ No newline at end of file
diff --git a/src/features/item/Utils.ts b/src/features/item/Utils.ts
index 36ff51f..cecc517 100644
--- a/src/features/item/Utils.ts
+++ b/src/features/item/Utils.ts
@@ -4,4 +4,7 @@ export function range(from: number, to: number) {
         arr.push(i);
     }
     return arr;
+}
+export function round(num : number) {
+    return Math.round((num + Number.EPSILON) * 100) / 100;
 }
\ No newline at end of file
diff --git a/src/features/item/activeSlice.spec.ts b/src/features/item/activeSlice.spec.ts
new file mode 100644
index 0000000..2a49926
--- /dev/null
+++ b/src/features/item/activeSlice.spec.ts
@@ -0,0 +1,34 @@
+import * as a from './armor';
+import * as e from './enchants';
+import * as d from './damageTypes'
+import { takeDamage } from './maths';
+
+describe('counter reducer', () => {
+    const player = {
+        armor: [
+          a.make(a.NETHERITE, a.HELMET, [{key: "fire protection", value: 3}]),
+          a.make(a.NETHERITE, a.CHESTPLATE, [{key: "blast protection", value: 2}]),
+          a.make(a.NETHERITE, a.LEGGINGS, [{key: "projectile protection", value: 1}]),
+          a.make(a.NETHERITE, a.BOOTS, [e.copy(e.PROTECTION), e.copy(e.FEATHER_FALLING),
+            e.copy(e.BLAST_PROTECTION), e.copy(e.PROJECTILE_PROTECTION), e.copy(e.FIRE_PROTECTION)])
+        ], 
+        effects: [], 
+        family: 'player' 
+    }
+    it('should return the correct damage dealt with feather falling', () => {
+        //epf: 16
+      expect(takeDamage({amount: 25, type: d.FALL}, player)).toBeCloseTo(9);
+    });
+    it('should return the correct damage dealt with melee', () => {
+        //epf: 4
+      expect(takeDamage({amount: 25, type: d.MELEE}, player)).toBeCloseTo(8.4);
+    });
+    it('should return the correct damage dealt with fire', () => {
+        //epf: 10
+        expect(takeDamage({amount: 25, type: d.FIRE}, player)).toBeCloseTo(7);
+      });
+    it('should return the correct damage dealt with explosions', () => {
+        //epf: 16
+        expect(takeDamage({amount: 25, type: d.EXPLOSION}, player)).toBeCloseTo(3.6);
+    });
+});
\ No newline at end of file
diff --git a/src/features/item/activeSlice.ts b/src/features/item/activeSlice.ts
index 83fc474..1650e22 100644
--- a/src/features/item/activeSlice.ts
+++ b/src/features/item/activeSlice.ts
@@ -3,22 +3,29 @@ import { stringify } from "querystring";
 import { RootState } from "../../app/store";
 import * as a from "./armor";
 import * as e from "./enchants";
+import * as d from "./damageTypes";
 import { Entity } from "./entity";
+import { Damage } from "./damage";
 
 export interface matchState {
     entity: Entity
+    damage: Damage
 }
 const initialState : matchState = {
     entity: {
         armor: [
-          a.make(a.NETHERITE, a.HELMET, [{key: "fire protection", value: 3}]),
-          a.make(a.NETHERITE, a.CHESTPLATE, []),
-          a.make(a.NETHERITE, a.LEGGINGS, []),
-          a.make(a.NETHERITE, a.BOOTS, [e.copy(e.PROTECTION), e.copy(e.FEATHER_FALLING),
-            e.copy(e.BLAST_PROTECTION), e.copy(e.PROJECTILE_PROTECTION), e.copy(e.FIRE_PROTECTION)])
-        ], 
+            a.make(a.NETHERITE, a.HELMET, [{key: "fire protection", value: 3}]),
+            a.make(a.NETHERITE, a.CHESTPLATE, [{key: "blast protection", value: 2}, e.copy(e.PROJECTILE_PROTECTION)]),
+            a.make(a.NETHERITE, a.LEGGINGS, [{key: "projectile protection", value: 1}]),
+            a.make(a.NETHERITE, a.BOOTS, [e.copy(e.PROTECTION), e.copy(e.FEATHER_FALLING),
+              e.copy(e.BLAST_PROTECTION), e.copy(e.PROJECTILE_PROTECTION), e.copy(e.FIRE_PROTECTION)])
+          ], 
         effects: [], 
         family: 'player' 
+    },
+    damage: {
+        amount: 18,
+        type: d.MELEE
     }
 }
 export const activeSlice = createSlice( {
@@ -40,6 +47,12 @@ export const activeSlice = createSlice( {
         removeEnchant: (state, action: PayloadAction<{name: string, slot: number}>) => {
             e.removeEnchant(state.entity.armor[action.payload.slot].enchantments, 
                 action.payload.name);
+        },
+        setDamageType: (state, action: PayloadAction<string>) => {
+            state.damage.type = action.payload;
+        },
+        setDamage: (state, action: PayloadAction<number>) => {
+            state.damage.amount = action.payload;
         }
     }
 });
@@ -49,5 +62,6 @@ export const {setType, setEnchant, removeEnchant} = activeSlice.actions;
 // the state. Selectors can also be defined inline where they're used instead of
 // in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`
 export const selectEntity = (state: RootState) => state.active.entity;
+export const selectDamage = (state: RootState) => state.active.damage;
 
 export default activeSlice.reducer;
\ No newline at end of file
diff --git a/src/features/item/armor.ts b/src/features/item/armor.ts
index 543d3ed..0d1e2d4 100644
--- a/src/features/item/armor.ts
+++ b/src/features/item/armor.ts
@@ -74,13 +74,8 @@ export function getValid(piece : string) {
 }
 export function preset(a: Armor, type: string, piece: string) {
     a.name = type + " " + piece;
-    let tough = 0;
-    if (type === DIAMOND) {
-        tough = 2;
-    }
-    if (type === NETHERITE) {
-        tough = 3;
-    }
+    let tough = getTough(type);
+    
     if (piece === HELMET) {
         a.armor = armor_data.get(type)![0];
     }
@@ -98,6 +93,15 @@ export function preset(a: Armor, type: string, piece: string) {
 export function setType(a: Armor, type: string) {
     preset(a, type, a.piece);
 }
+export function getTough(type: string) {
+    if (type === DIAMOND) {
+        return 2;
+    }
+    if (type === NETHERITE) {
+        return 3;
+    }
+    return 0;
+}
 
 export function getEPF(a : Armor, type : string) : number {
     let val = 0;
diff --git a/src/features/item/damageTypes.ts b/src/features/item/damageTypes.ts
index 3410dd5..5cf5669 100644
--- a/src/features/item/damageTypes.ts
+++ b/src/features/item/damageTypes.ts
@@ -1,8 +1,8 @@
-export const FIRE = 'fire';
-export const MELEE = 'melee';
-export const FALL = 'fall';
-export const EXPLOSION = 'explosion';
-export const PROJECTILE = 'projectile';
-export const MAGIC = 'magic';
+export const FIRE = 'Fire';
+export const MELEE = 'Melee';
+export const FALL = 'Fall';
+export const EXPLOSION = 'Explosion';
+export const PROJECTILE = 'Projectile';
+export const MAGIC = 'Magic';
 
 export const DAMAGE_ARRAY = [FIRE, MELEE, FALL, EXPLOSION, PROJECTILE, MAGIC];
\ No newline at end of file
diff --git a/src/features/item/maths.ts b/src/features/item/maths.ts
index f63d133..b25a5f9 100644
--- a/src/features/item/maths.ts
+++ b/src/features/item/maths.ts
@@ -48,6 +48,7 @@ export function takeDamage(dmg : Damage, target : Entity) {
     let type = dmg.type;
     console.log("Damage type: " + type);
     console.log("Raw damage: " + atk);
+    //HEY ATK IS AT THE FRONT!
     let afterArmor = atk * armorFactor(atk, type, target.armor);
     console.log("After armor: " + afterArmor);
     let afterEPF = afterArmor * EPFFactor(type, target.armor);
@@ -55,4 +56,11 @@ export function takeDamage(dmg : Damage, target : Entity) {
     let afterResistance = afterEPF * resistanceFactor(getEffectLevel(target.effects, e.RESISTANCE) || 0);
     return afterResistance;
 }
-
+export function damageEquation(dmg: Damage, target : Entity) : string {
+    let EPF = EPFFactor(dmg.type, target.armor);
+    let res = resistanceFactor(getEffectLevel(target.effects, e.RESISTANCE) || 0);
+    let def = getSetArmor(target.armor);
+    let tough = getSetToughness(target.armor);
+    return "x * (1 - min(20, max( " + def + "/5, " + def + "- (4*x / (" + tough + "+8)) ))/25) * " 
+    + EPF + " * " + res;
+}