Polishing, simulator fully functional

QxBytes · Jul 5, 2021 · a8b7298 · a8b7298
1 parent 9d5ec63
commit a8b7298
Show file tree

Hide file tree

Showing 19 changed files with 323 additions and 106 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -38,12 +38,12 @@ function App() {
           </Col>
         </Row>
         <Row className="">
-          <Col sm={12} md={12} lg={4} className="overflow-scroll h-100vh">
+          <Col sm={12} md={12} lg={4} className="overflow-scroll h-95vh">
           <DndProvider backend={HTML5Backend}>
             <DragContainer />
           </DndProvider>
           </Col>
-          <Col sm={12} md={12} lg={8} className="overflow-scroll h-100vh">
+          <Col sm={12} md={12} lg={8} className="overflow-scroll h-95vh">
             <Simulator />
           </Col>
         </Row>

diff --git a/src/cc.scss b/src/cc.scss
@@ -76,6 +76,10 @@ button.btn-primary {
     text-align: center;
 }
 
+.type-display {
+    max-width: 10rem;
+}
+
 .damage-display-container {
     margin: 20px;
     background-color: rgb(240,240,240);
@@ -112,8 +116,8 @@ button.btn-primary {
 }
 
 
-.h-100vh {
-    height: 100vh;
+.h-95vh {
+    height: 95vh;
 }
 .overflow-scroll {
     overflow-x: hidden;

diff --git a/src/features/item/DamageCalculator.tsx b/src/features/item/DamageCalculator.tsx
@@ -10,10 +10,9 @@ import RangeSlider from 'react-bootstrap-range-slider';
 import { DamageGraph } from "./DamageGraph";
 import NumericInput from 'react-numeric-input';
 
-import heart from './images/half_heart_lg.png';
 import { DamageSummaryTable } from "./DamageSummary";
 import { WeaponEditor } from "../weapon/WeaponEditor";
-import { Collapseable } from "./Parts";
+import { Collapseable, HalfHeart } from "./Parts";
 import EditInPlace from "./EditInPlace";
 import { baseDamageType } from "./damageTypes";
 import Icon from "./Icons";
@@ -47,7 +46,7 @@ export function DamageCalculator(props : DamageCalculatorType) {
             </Row>
             <Row>
                 <Col>
-                <Image className="m-1" src={heart} width={18} height={18}></Image>
+                <HalfHeart />
                 <div className="vc d-inline-block">
                     <NumericInput  min={1} max={10000} step={1} 
                     precision={2} value={damage.amount}

diff --git a/src/features/item/Parts.tsx b/src/features/item/Parts.tsx
@@ -1,7 +1,19 @@
 import React, { useState } from "react";
-import { Button, Col, Collapse, Dropdown, DropdownButton } from "react-bootstrap";
+import { Button, Col, Collapse, Dropdown, DropdownButton, Image } from "react-bootstrap";
 import Icon from "./Icons";
 
+import no_heart from './images/no_heart.png';
+import half_heart from './images/half_heart.png';
+import full_heart from './images/full_heart.png';
+
+import half_heart_lg from './images/half_heart_lg.png';
+
+import no_armor from './images/no_armor.png';
+import half_armor from './images/half_armor.png';
+import full_armor from './images/full_armor.png';
+import { Tooltip } from "reactstrap";
+import { Placement } from "react-bootstrap/esm/Overlay";
+
 export interface DropInputType {
     selected: string,
     inputs: string[],
@@ -27,7 +39,7 @@ export function DropInput(props: DropInputType) {
 export interface CollapseableType {
     handleCollapse?: (open?: boolean) => void,
     inner?: React.ReactNode,
-    title?: string,
+    title?: React.ReactNode,
     options?: React.ReactNode,
     className?: string
 }
@@ -66,4 +78,66 @@ export function Collapseable(props: CollapseableType) {
             </Collapse>
         </React.Fragment>
     );
+}
+export function HalfHeart() {
+    return (
+        <Image className="m-1" src={half_heart_lg} width={18} height={18}></Image>
+    );
+}
+export function HealthBar(props: {health: number}) {
+    return <DynamicBar 
+        value={props.health + .49999999}
+        full={full_heart}
+        half={half_heart}
+    />
+}
+export function ArmorBar(props: {armor: number}) {
+    return <DynamicBar 
+        value={props.armor}
+        max={20}
+        full={full_armor}
+        half={half_armor}
+        empty={no_armor}
+    />
+}
+export function ToughnessBar(props: {toughness: number}) {
+    return <DynamicBar 
+        value={props.toughness}
+        max={12}
+        full={full_armor}
+        half={half_armor}
+        empty={no_armor}
+    />
+}
+interface DynamicBarType {
+    value: number,
+    max?: number,
+    full: string,
+    half: string,
+    empty?: string
+}
+export function DynamicBar(props: DynamicBarType) {
+    let val = Math.round(props.value);
+    let full = Math.floor(val / 2);
+    let half = val % 2 === 1;
+    let elements = [];
+    for (let i = 0 ; i < full ; i++) {
+        elements.push(
+            <Image src={props.full} />
+        )
+    }
+    if (half) {
+        elements.push(
+            <Image src={props.half} />
+        )
+    }
+    if (props.max && props.empty) {
+        let left = Math.floor((props.max - val)/2);
+        for (let i = 0 ; i < left ; i++) {
+            elements.push(
+                <Image src={props.empty} />
+            );
+        }
+    }
+    return <span>{elements}</span>;
 }
diff --git a/src/features/item/SetupContainer.tsx b/src/features/item/SetupContainer.tsx
@@ -4,10 +4,11 @@ import { Row, Col, ButtonGroup, Button } from "react-bootstrap";
 import { useSelector } from "react-redux";
 import { useAppDispatch } from "../../app/hooks";
 import { addSetup, removeSetup, selectEntity } from "./activeSlice";
-import { Entity, getDefaultSetup, maxSetups, summary } from "./entity";
+import { getSetArmor, getSetToughness } from "./armor";
+import { Entity, getDefaultSetup, maxHealth, maxSetups, summary } from "./entity";
 import { EntityContainer } from "./EntityContainer";
 import Icon from "./Icons";
-import { Collapseable } from "./Parts";
+import { ArmorBar, Collapseable, HealthBar, ToughnessBar } from "./Parts";
 import { getPresetColor } from "./Utils";
 
 const _ = require('lodash');
@@ -37,9 +38,19 @@ export function SetupContainer() {
                                 }
                         >
                             <Collapseable inner={<EntityContainer entity={index}/>}
-                                title={summary(item)}
+                                title={
+                                    <>
+                                    <span>{" " + summary(item) + " "}</span>
+                                    <ArmorBar armor={getSetArmor(item.armor)} />
+                                    <span> | </span>
+                                    <ToughnessBar toughness={getSetToughness(item.armor)} />
+                                    <span> | </span>
+                                    <HealthBar health={maxHealth(item)} />
+                                    </>
+                                }
                                 options={
                                     <React.Fragment>
+
                                     <ButtonGroup>
                                             {!maxSetups(entities) ?
                                         <Button onClick={() => 
@@ -52,7 +63,7 @@ export function SetupContainer() {
                                         }
                                         {entities.length > 1 ?
                                         <Button onClick={() => dispatch(removeSetup(index))}>
-                                            <Icon val="close" />
+                                            <Icon val="delete_outline" />
                                         </Button> : ""
                                         }
 

diff --git a/src/features/item/Utils.ts b/src/features/item/Utils.ts
@@ -1,4 +1,5 @@
 import functionPlot from "function-plot";
+import { bound } from "./maths";
 
 var Color = require('color');
 export function range(from: number, to: number) {
@@ -12,7 +13,14 @@ export function round(num : number) {
     return Math.round((num + Number.EPSILON) * 100) / 100;
 }
 export function getColor(max: number, value: number) {
-    return Color.hsl(180*(value/max),70,70);
+    return Color.hsl(180*(bound(value/max,0,1)),70,70);
+}
+export function getDeltaColor(max: number, value: number) {
+    if (value > 0) {
+        return Color.rgb(255 - (-value/max*255), 255, 255 - (-value/max*255));
+    } else {
+        return Color.rgb(255, 255 - (-value/max*255), 255 - (-value/max*255));
+    }
 }
 export function getPresetColor(index: number) {
     return functionPlot.globals.COLORS[index];

diff --git a/src/features/item/activeSlice.ts b/src/features/item/activeSlice.ts
@@ -6,7 +6,7 @@ import * as e from "./enchants";
 import * as d from "./damageTypes";
 import * as f from "./effects";
 import { Entity, MAX_SETUPS, removeSetup as removeEntity } from "./entity";
-import { Damage, DamageItem } from "./damage";
+import { Damage, DamageItem, find } from "./damage";
 import { defaultWeapon, Weapon } from "../weapon/weapon";
 
 export interface matchState {
@@ -53,7 +53,8 @@ const initialState : matchState = {
                 ticks: 10
             },
             id: 0,
-            visible: true
+            visible: true,
+            times: 1
         },
         {
             dmg: {
@@ -62,7 +63,8 @@ const initialState : matchState = {
                 ticks: 10
             },
             id: 1,
-            visible: true
+            visible: true,
+            times: 1
         },
         {
             dmg: {
@@ -71,7 +73,8 @@ const initialState : matchState = {
                 ticks: 10
             },
             id: 2,
-            visible: true
+            visible: true,
+            times: 1
         },
     ],
     id: 99
@@ -118,10 +121,13 @@ export const activeSlice = createSlice( {
             state.damage.ticks = action.payload;
         },
         toggleDamage: (state, action: PayloadAction<number>) => {
-            for (let i = 0 ; i < state.damages.length ; i++) {
-                if (state.damages[i].id === action.payload) {
-                    state.damages[i].visible = !state.damages[i].visible;
-                }
+            find(state.damages, action.payload).visible = !find(state.damages, action.payload).visible;
+        },
+        addDamageTimes: (state, action: PayloadAction<{id: number, change: number}>) => {
+            let p = action.payload;
+            find(state.damages, p.id).times += p.change;
+            if (find(state.damages, p.id).times < 0) {
+                find(state.damages, p.id).times = 0;
             }
         },
         removeSetup: (state, action: PayloadAction<number>) => {
@@ -132,7 +138,7 @@ export const activeSlice = createSlice( {
         },
         saveDamage: (state, action: PayloadAction<Damage>) => {
             state.id = state.id + 1;
-            state.damages.push({dmg:action.payload, id:state.id+1, visible: true});
+            state.damages.push({dmg:action.payload, id:state.id+1, visible: true, times: 1});
         },
         //number is ID value!
         removeDamage: (state, action: PayloadAction<number>) => {
@@ -152,7 +158,7 @@ export const activeSlice = createSlice( {
 });
 
 export const {setType, setEnchant, removeEnchant, removeEffect, setEffect, setDamageType, setDamage,
-    setDamageTicks, toggleDamage, removeSetup, addSetup, saveDamage, removeDamage, moveDamage} = activeSlice.actions;
+    setDamageTicks, toggleDamage, addDamageTimes, removeSetup, addSetup, saveDamage, removeDamage, moveDamage} = activeSlice.actions;
 // The function below is called a selector and allows us to select a value from
 // 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)`

diff --git a/src/features/item/damage.ts b/src/features/item/damage.ts
@@ -11,7 +11,16 @@ export interface Damage {
 export interface DamageItem {
     dmg: Damage,
     id: number,
-    visible: boolean
+    visible: boolean,
+    times: number
+}
+export function find(items: DamageItem[], id: number) {
+    for (let i = 0 ; i < items.length ; i++) {
+        if (items[i].id === id) {
+            return items[i];
+        }
+    }
+    return items[0];
 }
 /*
 export class Damage implements DamageType {

diff --git a/src/features/item/entity.ts b/src/features/item/entity.ts
@@ -28,12 +28,12 @@ export function summary(e : Entity) {
     let str = "";
     str += e.armor[0].type.charAt(0) + "/" + e.armor[1].type.charAt(0) +  "/" + 
     e.armor[2].type.charAt(0) + "/" + e.armor[3].type.charAt(0);
-    str += " A: " + getSetArmor(e.armor);
-    str += " T: " + getSetToughness(e.armor);
+    //str += " A: " + getSetArmor(e.armor);
+    //str += " T: " + getSetToughness(e.armor);
     if (getEffect(e.effects, RESISTANCE.key)) {
         str += " R: " + nomar(getEffect(e.effects, RESISTANCE.key)!.value);
     }
-    str += " HP: " + maxHealth(e);
+    //str += " HP: " + maxHealth(e);
     return str;
 }
 export function removeSetup(setups : Entity[], i : number) {

diff --git a/src/features/item/images/full_armor.png b/src/features/item/images/full_armor.png
diff --git a/src/features/item/images/full_heart.png b/src/features/item/images/full_heart.png
diff --git a/src/features/item/images/half_armor.png b/src/features/item/images/half_armor.png
diff --git a/src/features/item/images/no_armor.png b/src/features/item/images/no_armor.png
diff --git a/src/features/item/images/no_heart.png b/src/features/item/images/no_heart.png