Split up more scss and fix so arrow starts from under the icon

src/components/Calculator.tsx

@@ -19,14 +19,6 @@ interface Props {
 }
 
 const EMPTY_TALENTS = Map<number, number>()
-  // .set(30, 5)
-  // .set(26, 5)
-  // .set(34, 5)
-  // .set(28, 2)
-  // .set(27, 3)
-  // .set(33, 1)
-  // .set(29, 1)
-  // .set(32, 1)
 
 export class Calculator extends React.PureComponent<Props> {
   static whyDidYouRender = true

src/components/Talent.tsx

@@ -63,4 +63,4 @@ export const Talent: FC<Props> = (props) => {
 
 Talent.defaultProps = defaultProps
 
-// ;(Talent as any).whyDidYouRender = true
+;(Talent as any).whyDidYouRender = true

src/components/TalentTree.scss

@@ -0,0 +1,53 @@
+@import "../sass/config";
+
+.trees {
+  display: flex;
+  justify-content: center;
+}
+
+.tree {
+  position: relative;
+  min-width: 300px;  
+  color: white;
+  margin-right: 1em;
+  background-color: #111;
+
+  .talent {
+    position: absolute;
+
+    // Rows
+    @for $i from 0 through 6 {
+      &[data-row="#{$i}"] {
+        top: $row-offset + (($i) * $row-distance);
+      }
+    }
+
+    // Columns
+    @for $i from 0 through 3 {
+      &[data-col="#{$i}"] { 
+        left: $col-offset + ($col-distance * $i); 
+      }
+    }
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &__header {
+    text-align: center;
+
+    h3 {
+      margin-top: .75em;
+      margin-bottom: .75em;
+    }
+  }
+
+  &__body {
+    position: relative;
+    height: 520px;
+    border: 1px solid black;
+    background-size: cover;
+    background-position: center;
+  }
+}

src/components/TalentTree.tsx

@@ -1,7 +1,8 @@
+import './TalentTree.scss'
 import React, { useCallback } from 'react'
 import { Map }  from 'immutable'
 import { Talent } from './Talent';
-import { getPointsInSpec, canLearnTalent, calcMeetsRequirements } from '../lib/tree';
+import { getPointsInSpec, canLearnTalent, calcMeetsRequirements, SORT_TALENTS_DESC } from '../lib/tree';
 import { talentsBySpec, specNames, talentsById, talentToSpec } from '../data/talents'
 import { Arrow } from './Arrow'
 
@@ -13,8 +14,7 @@ interface Props {
 }
 
 export const TalentTree: React.FC<Props> = ({ specId, knownTalents, availablePoints, onTalentPress }) => {
-  const talents = Object.values(talentsBySpec[specId])
-  const bgImg = require(`../images/specs/${specId}.jpg`)
+  const talents = Object.values(talentsBySpec[specId]).sort(SORT_TALENTS_DESC)
 
   const handleClick = useCallback(
     (talentId) => onTalentPress(specId, talentId, 1), 
@@ -25,50 +25,40 @@ export const TalentTree: React.FC<Props> = ({ specId, knownTalents, availablePoi
     [specId, onTalentPress]
   )
 
-  const arrows = talents
-    .filter((talent) => talent.requires.length)
-    .map((talent) => {
-      return <Arrow 
-        key={talent.id}
-        from={talentsById[talent.requires[0].id]}
-        to={talent}
-        active={knownTalents.get(talent.id, 0) > 0 || canLearnTalent(knownTalents, talent)}
-      />
-    })
-
   return (
     <div className="tree">
       <div className="tree__header">
         <h3>{specNames[specId]} ({getPointsInSpec(specId, knownTalents)})</h3>
       </div>
 
-      <div className="tree__body" style={{ backgroundImage: `url(${bgImg})` }}>
-        {talents.map((talent) => 
-          <Talent 
-            key={talent.id}
-            talent={talent}
-            points={knownTalents.get(talent.id, 0)}
-            onClick={handleClick}
-            onRightClick={handleRightClick}
-            disabled={availablePoints === 0 || !isAvailable(talent, knownTalents)}
-          />
-        )}
+      <div className="tree__body" style={{ backgroundImage: `url(${require(`../images/specs/${specId}.jpg`)})` }}>
+        {talents.map((talent) => {
+          const points = knownTalents.get(talent.id, 0)
+          const canLearn = canLearnTalent(knownTalents, talent)
 
-        {arrows}
+          return <React.Fragment>
+            <Talent 
+              key={talent.id}
+              talent={talent}
+              points={points}
+              onClick={handleClick}
+              onRightClick={handleRightClick}
+              disabled={availablePoints === 0 || !canLearn}
+            />
+
+            {!!talent.requires.length &&
+              <Arrow 
+                key={`arrow-${talent.id}`}
+                from={talentsById[talent.requires[0].id]}
+                to={talent}
+                active={points > 0 || canLearn}
+              />
+            }
+          </React.Fragment>
+        })}
       </div>
     </div>
   )
 }
 
-// move this somewhere else/revise this
-export const isAvailable = (talent: TalentData, knownTalents: Map<number, number>): boolean => {
-  // Dependent on other talents?
-  if (!calcMeetsRequirements(talent, knownTalents)) {
-    return false
-  }
-  const specId = talentToSpec[talent.id]
-  const pointsInSpec = getPointsInSpec(specId, knownTalents)
-  return talent.row * 5 <= pointsInSpec
-}
-
 ;(TalentTree as any).whyDidYouRender = true