updated styles and formatting

src/sheet/SheetApi.ts

@@ -44,6 +44,7 @@ export class MockSheetApi implements SheetApi {
           name: 'constitution modifier', modifiers: [
             { source: 'constitution', formula: '([constitution] - 10) / 2' }]
         },
+        { name: 'example', modifiers: [{ formula: 'min(-1, 1)' }] },
         { name: 'dexterity', modifiers: [{ formula: '14' }] },
         { name: 'dexterity modifier', modifiers: [{ source: 'dexterity', formula: '([dexterity] - 10) / 2' }] },
         {

src/sheetManage/ConditionalTable.tsx

@@ -8,10 +8,15 @@ const toRow = (key: string, conditional: Conditional, sheet: Sheet) => {
   return (
     <tr key={key}>
       <td>{conditional.condition}</td>
-      <td colSpan={conditional.source ? 1 : 2}>
-        {conditional.formula === calculatedValue ? conditional.formula : `${conditional.formula} (${calculatedValue})`}
+      <td className="text-center">
+        {conditional.formula === calculatedValue 
+          ? conditional.formula 
+          : `"${conditional.formula}" => ${calculatedValue}`}
+      </td>
+      <td>{conditional.source}</td>
+      <td>
+        <button className="fill-cell m-0 btn btn-light">...</button>
       </td>
-      {conditional.source && <td>{conditional.source}</td>}
     </tr>
   );
 };

src/sheetManage/ModifierTable.tsx

@@ -1,22 +1,34 @@
 import * as React from 'react';
-import { Modifier } from '../sheet/SheetModel';
+import Sheet, { Modifier, calculateFormula } from '../sheet/SheetModel';
 import combineClasses from '../controls/combineClasses';
 
-const ModifierTable: React.StatelessComponent<{ className?: string, modifiers: Modifier[] }> =
-  ({ className, modifiers }) => {
+const toRow = (key: string, sheet: Sheet, modifier: Modifier) => {
+  var calculatedValue = calculateFormula(sheet, modifier.formula).toString();
+
+  return (
+    <tr key={key}>
+      <td>{modifier.source}</td>
+      <td className="text-center">
+        {modifier.formula === calculatedValue 
+          ? modifier.formula 
+          : `"${modifier.formula}" => ${calculatedValue}`}</td>
+      <td>
+        <button className="fill-cell m-0 btn btn-light">...</button>
+      </td>
+    </tr>
+  );
+};
+
+const ModifierTable: React.StatelessComponent<{ className?: string, sheet: Sheet, modifiers: Modifier[] }> =
+  ({ className, sheet, modifiers }) => {
 
     const classes = combineClasses(className, 'table-responsive');
 
     return (
       <div className={classes}>
         <table className="table table-no-hover m-0">
           <tbody>
-            {modifiers.map((modifier, index) => (
-              <tr key={index.toString()}>
-                <td colSpan={modifier.source ? 1 : 2}>{modifier.formula}</td>
-                {modifier.source && <td>{modifier.source}</td>}
-              </tr>
-            ))}
+            {modifiers.map((modifier, index) => toRow(index.toString(), sheet, modifier))}
           </tbody>
         </table>
       </div>

src/sheetManage/StatisticsPanel.tsx

@@ -52,7 +52,7 @@ export class StatisticsPanel extends React.Component<StatisticsPanelProps, { exp
           {hasConditionals && <h6 className="m-2">conditionals</h6>}
           {hasConditionals && <ConditionalTable sheet={sheet} conditionals={statistic.conditionals!} />}
           {hasModifiers && <h6 className="m-2">modifiers</h6>}
-          {hasModifiers && <ModifierTable modifiers={statistic.modifiers!} />}
+          {hasModifiers && <ModifierTable sheet={sheet} modifiers={statistic.modifiers!} />}
 
           <button className="btn btn-outline-danger float-right btn-small d-inline">Delete</button>
           <button className="btn btn-outline-primary float-right btn-small d-inline">Add Modifier</button>

src/styles.css

@@ -27,5 +27,11 @@
   border-top-width: 5px;
   border-top-style: solid;
   border-top-color: lightskyblue;
+  background-color:lightgray;
   font-weight: bold;
+}
+
+.fill-cell {
+  height:100%;
+  width:100%;
 }