ESLint fixes for Views complete

.idea/compiler.xml

@@ -2,5 +2,6 @@
 <project version="4">
   <component name="TypeScriptCompiler">
     <option name="recompileOnChanges" value="true" />
+    <option name="showAllErrors" value="true" />
   </component>
 </project>

.idea/dictionaries/lukas.xml

@@ -1,9 +0,0 @@
-<component name="ProjectDictionaryState">
-  <dictionary name="lukas">
-    <words>
-      <w>lukasobermann</w>
-      <w>optolith</w>
-      <w>optolyth</w>
-    </words>
-  </dictionary>
-</component>

.idea/inspectionProfiles/Project_Default.xml

@@ -2,5 +2,10 @@
   <profile version="1.0">
     <option name="myName" value="Project Default" />
     <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="SpellCheckingInspection" enabled="false" level="TYPO" enabled_by_default="false">
+      <option name="processCode" value="true" />
+      <option name="processLiterals" value="true" />
+      <option name="processComments" value="true" />
+    </inspection_tool>
   </profile>
 </component>

src/App/Containers/RCPSelectionsContainer.ts

@@ -6,6 +6,7 @@ import { ReduxDispatch } from "../Actions/Actions";
 import * as ProfessionActions from "../Actions/ProfessionActions";
 import { HeroModelRecord } from "../Models/Hero/HeroModel";
 import { Selections as SelectionsInterface } from "../Models/Hero/heroTypeHelpers";
+import { DropdownOption } from "../Models/View/DropdownOption";
 import { Culture } from "../Models/Wiki/Culture";
 import { L10nRecord } from "../Models/Wiki/L10n";
 import { Profession } from "../Models/Wiki/Profession";
@@ -17,7 +18,6 @@ import { getCurrentCulture, getCurrentProfession, getCurrentProfessionVariant, g
 import { getAllSpellsForManualGuildMageSelect } from "../Selectors/spellsSelectors";
 import { getWiki } from "../Selectors/stateSelectors";
 import { RCPOptionSelectionsEnsure } from "../Views/RCPOptionSelections/RCPOptionSelectionsEnsure";
-import { DropdownOption } from "../Views/Universal/Dropdown";
 
 interface OwnProps {
   hero: HeroModelRecord

src/App/Models/Hero/Item.ts

@@ -2,7 +2,7 @@ import { List } from "../../../Data/List";
 import { Just, Maybe, Nothing } from "../../../Data/Maybe";
 import { elem, OrderedSet } from "../../../Data/OrderedSet";
 import { fromDefault, makeLenses, Record } from "../../../Data/Record";
-import { DropdownOption } from "../../Views/Universal/Dropdown";
+import { DropdownOption } from "../View/DropdownOption";
 import { ItemTemplate } from "../Wiki/ItemTemplate";
 import { PrimaryAttributeDamageThreshold } from "../Wiki/sub/PrimaryAttributeDamageThreshold";
 import { SourceLink } from "../Wiki/sub/SourceLink";

src/App/Models/View/DropdownOption.ts

@@ -0,0 +1,38 @@
+import { Maybe, Nothing } from "../../../Data/Maybe"
+import { Accessors, fromDefault, OmitName, PartialMaybeOrNothing, Record, RecordCreator, StrictAccessors } from "../../../Data/Record"
+
+export type DropdownKey = string | number
+
+export interface DropdownOption<A extends DropdownKey = DropdownKey> {
+  "@@name": "DropdownOption"
+  id: Maybe<A>
+  name: string
+  disabled: Maybe<boolean>
+}
+
+interface DropdownOptionAccessors extends Accessors<DropdownOption> {
+  id:
+  <A extends DropdownKey>
+  (x: Record<Pick<OmitName<DropdownOption<A>>, "id"> & { "@@name": string }>) => Maybe<A>
+}
+
+interface DropdownOptionStrictAccessors extends StrictAccessors<DropdownOption> {
+  id: <A extends DropdownKey> (x: Record<DropdownOption<A>>) => Maybe<A>
+}
+
+interface DropdownOptionCreator extends RecordCreator<DropdownOption> {
+  <A extends DropdownKey = DropdownKey>
+  (x: PartialMaybeOrNothing<OmitName<DropdownOption<A>>>): Record<DropdownOption<A>>
+  readonly default: Record<DropdownOption>
+  readonly AL: DropdownOptionAccessors
+  readonly A: DropdownOptionStrictAccessors
+  readonly is:
+    <B, A extends DropdownKey> (x: B | Record<DropdownOption<A>>) => x is Record<DropdownOption<A>>
+}
+
+export const DropdownOption: DropdownOptionCreator =
+  fromDefault ("DropdownOption") <DropdownOption<any>> ({
+                id: Nothing,
+                name: "",
+                disabled: Nothing,
+              })

src/App/Models/View/RadioOption.ts

@@ -0,0 +1,25 @@
+import { Maybe, Nothing } from "../../../Data/Maybe"
+import { fromDefault, OmitName, PartialMaybeOrNothing, Record, RecordCreator } from "../../../Data/Record"
+
+export type RadioOptionValue = string | number
+
+export interface RadioOption<A extends RadioOptionValue = RadioOptionValue> {
+  "@@name": "RadioOption"
+  className: Maybe<string>
+  disabled: Maybe<boolean>
+  name: string
+  value: Maybe<A>
+}
+
+export interface RadioOptionCreator extends RecordCreator<RadioOption<any>> {
+  <A extends RadioOptionValue = RadioOptionValue>
+  (x: PartialMaybeOrNothing<OmitName<RadioOption<A>>>): Record<RadioOption<A>>
+}
+
+export const RadioOption: RadioOptionCreator =
+  fromDefault ("RadioOption") <RadioOption<any>> ({
+                className: Nothing,
+                disabled: Nothing,
+                name: "",
+                value: Nothing,
+              })

src/App/Models/Wiki/ItemTemplate.ts

@@ -1,7 +1,7 @@
 import { List } from "../../../Data/List";
 import { Just, Maybe, Nothing } from "../../../Data/Maybe";
 import { fromDefault, Record } from "../../../Data/Record";
-import { DropdownOption } from "../../Views/Universal/Dropdown";
+import { DropdownOption } from "../View/DropdownOption";
 import { Erratum } from "./sub/Errata";
 import { PrimaryAttributeDamageThreshold } from "./sub/PrimaryAttributeDamageThreshold";
 import { SourceLink } from "./sub/SourceLink";

src/App/Models/Wiki/sub/SelectOption.ts

@@ -1,7 +1,7 @@
 import { List } from "../../../../Data/List";
 import { Just, Maybe, Nothing } from "../../../../Data/Maybe";
 import { fromDefault, makeLenses, Record } from "../../../../Data/Record";
-import { DropdownOption } from "../../../Views/Universal/Dropdown";
+import { DropdownOption } from "../../View/DropdownOption";
 import { AllRequirementObjects } from "../wikiTypeHelpers";
 import { Application } from "./Application";
 import { Erratum } from "./Errata";

src/App/Selectors/personalDataSelectors.ts

@@ -6,6 +6,7 @@ import { dec } from "../../Data/Num";
 import { fst, Pair, snd } from "../../Data/Tuple";
 import { curryN, uncurryN, uncurryN3 } from "../../Data/Tuple/Curry";
 import { DisadvantageId, SocialStatusId } from "../Constants/Ids";
+import { DropdownOption } from "../Models/View/DropdownOption";
 import { Culture } from "../Models/Wiki/Culture";
 import { Race } from "../Models/Wiki/Race";
 import { RaceVariant } from "../Models/Wiki/RaceVariant";
@@ -15,7 +16,6 @@ import { translate } from "../Utilities/I18n";
 import { pipe, pipe_ } from "../Utilities/pipe";
 import { mapGetToMaybeSlice } from "../Utilities/SelectorsUtils";
 import { sortRecordsByName } from "../Utilities/sortBy";
-import { DropdownOption } from "../Views/Universal/Dropdown";
 import { getCulture, getRace, getRaceVariant } from "./rcpSelectors";
 import { getDisadvantages, getLocaleAsProp, getSocialDependencies } from "./stateSelectors";
 

src/App/Selectors/wikiSelectors.ts

@@ -7,6 +7,7 @@ import { elems, keysSet } from "../../Data/OrderedMap";
 import { Record } from "../../Data/Record";
 import { uncurryN, uncurryN3, uncurryN4 } from "../../Data/Tuple/Curry";
 import { CultureCombinedA_ } from "../Models/View/CultureCombined";
+import { DropdownOption } from "../Models/View/DropdownOption";
 import { ProfessionCombined, ProfessionCombinedA_ } from "../Models/View/ProfessionCombined";
 import { ProfessionVariantCombined } from "../Models/View/ProfessionVariantCombined";
 import { RaceCombinedA_ } from "../Models/View/RaceCombined";
@@ -28,7 +29,6 @@ import { compareLocale, translate } from "../Utilities/I18n";
 import { pipe, pipe_ } from "../Utilities/pipe";
 import { filterByAvailabilityF } from "../Utilities/RulesUtils";
 import { comparingR, sortByMulti, sortRecordsByName } from "../Utilities/sortBy";
-import { DropdownOption } from "../Views/Universal/Dropdown";
 import { getAllCultures, getAllProfessions, getAllRaces } from "./rcpSelectors";
 import { getWikiProfessionsCombinedSortOptions } from "./sortOptionsSelectors";
 import { getLocaleAsProp, getWikiAdvantages, getWikiBlessings, getWikiBooks, getWikiCantrips, getWikiCombatTechniques, getWikiCombatTechniquesGroup, getWikiDisadvantages, getWikiFilterText, getWikiItemTemplates, getWikiItemTemplatesGroup, getWikiLiturgicalChants, getWikiLiturgicalChantsGroup, getWikiProfessionsGroup, getWikiSkills, getWikiSkillsGroup, getWikiSpecialAbilities, getWikiSpecialAbilitiesGroup, getWikiSpells, getWikiSpellsGroup } from "./stateSelectors";

src/App/Utilities/Activatable/activatableInactiveViewUtils.tsx

@@ -15,6 +15,7 @@ import { AdvantageId, DisadvantageId, SpecialAbilityId } from "../../Constants/I
 import { ActivatableActivationOptions, ActivatableActivationOptionsL } from "../../Models/Actions/ActivatableActivationOptions";
 import { ActivatableDependent } from "../../Models/ActiveEntries/ActivatableDependent";
 import { ActiveObject } from "../../Models/ActiveEntries/ActiveObject";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { InactiveActivatable, InactiveActivatableA_ } from "../../Models/View/InactiveActivatable";
 import { Disadvantage } from "../../Models/Wiki/Disadvantage";
 import { L10nRecord } from "../../Models/Wiki/L10n";
@@ -25,7 +26,7 @@ import { SelectOption } from "../../Models/Wiki/sub/SelectOption";
 import { WikiModel, WikiModelRecord } from "../../Models/Wiki/WikiModel";
 import { Activatable } from "../../Models/Wiki/wikiTypeHelpers";
 import { ActivatableAddListItemSelectedOptions } from "../../Views/Activatable/ActivatableAddListItem";
-import { Dropdown, DropdownOption } from "../../Views/Universal/Dropdown";
+import { Dropdown } from "../../Views/Universal/Dropdown";
 import { TextField } from "../../Views/Universal/TextField";
 import { getActiveWithNoCustomCost } from "../AdventurePoints/activatableCostUtils";
 import { translate } from "../I18n";

src/App/Utilities/NumberUtils.ts

@@ -65,14 +65,8 @@ export const sign = signNullCustom ("0")
 /**
  * `signNeg :: Int -> String`
  *
- * Correctly signs numbers. Basically, this makes negative numbers use the
- * typographically correct minus sign instead of the default hyphen.
- *
- * ```haskell
- * signNeg -1 === "−1"
- * signNeg 0 === "0"
- * signNeg 1 === "1"
- * ```
+ * Forces signing on the given number, but it does not add a `+` if the number
+ * is positive. Only a proper minus sign is added.
  */
 export const signNeg = (x: number) => x < 0 ? `${minus}\u2060${Math.abs (x)}` : `${x}`
 

src/App/Utilities/levelUtils.ts

@@ -2,7 +2,7 @@ import { unfoldr } from "../../Data/List";
 import { Just, Nothing } from "../../Data/Maybe";
 import { Record } from "../../Data/Record";
 import { Pair } from "../../Data/Tuple";
-import { DropdownOption } from "../Views/Universal/Dropdown";
+import { DropdownOption } from "../Models/View/DropdownOption";
 import { toRoman } from "./NumberUtils";
 
 const getElements =

src/App/Utilities/rcpAdjustmentSelectionUtils.tsx

@@ -7,19 +7,17 @@ import { lookup, lookupF } from "../../Data/OrderedMap";
 import { Record } from "../../Data/Record";
 import { fst, Pair, snd } from "../../Data/Tuple";
 import { SpecialAbilityId } from "../Constants/Ids";
+import { DropdownOption } from "../Models/View/DropdownOption";
 import { Culture } from "../Models/Wiki/Culture";
 import { L10nRecord } from "../Models/Wiki/L10n";
 import { ProfessionRequireActivatable } from "../Models/Wiki/prerequisites/ActivatableRequirement";
 import { Profession } from "../Models/Wiki/Profession";
-import { ProfessionSelections } from "../Models/Wiki/professionSelections/ProfessionAdjustmentSelections";
-import { TerrainKnowledgeSelection } from "../Models/Wiki/professionSelections/TerrainKnowledgeSelection";
 import { SpecialAbility } from "../Models/Wiki/SpecialAbility";
 import { SelectOption } from "../Models/Wiki/sub/SelectOption";
 import { WikiModel, WikiModelRecord } from "../Models/Wiki/WikiModel";
-import { ProfessionPrerequisite, ProfessionSelectionIds } from "../Models/Wiki/wikiTypeHelpers";
-import { TerrainKnowledge } from "../Views/RCPOptionSelections/TerrainKnowledgeSelectionList";
+import { ProfessionPrerequisite } from "../Models/Wiki/wikiTypeHelpers";
 import { Checkbox } from "../Views/Universal/Checkbox";
-import { Dropdown, DropdownOption } from "../Views/Universal/Dropdown";
+import { Dropdown } from "../Views/Universal/Dropdown";
 import { findSelectOption } from "./Activatable/selectionUtils";
 import { translate } from "./I18n";
 import { pipe } from "./pipe";
@@ -74,24 +72,6 @@ export const getBuyScriptElement =
         )
       : Nothing
 
-export const getTerrainKnowledgeElement =
-  (wiki: WikiModelRecord) =>
-  (terrainKnowledgeActive: Maybe<number>) =>
-  (setTerrainKnowledge: (terrainKnowledge: number) => void) =>
-    pipe (
-      ProfessionSelections.AL[ProfessionSelectionIds.TERRAIN_KNOWLEDGE],
-      Maybe.liftM2<Record<SpecialAbility>, Record<TerrainKnowledgeSelection>, JSX.Element>
-        (wikiEntry => selection => (
-          <TerrainKnowledge
-            available={TerrainKnowledgeSelection.AL.sid (selection)}
-            terrainKnowledge={wikiEntry}
-            set={setTerrainKnowledge}
-            active={terrainKnowledgeActive}
-            />
-        ))
-        (lookupF (WA.specialAbilities (wiki)) (SpecialAbilityId.TerrainKnowledge))
-    )
-
 export const getMotherTongueSelectionElement =
   (locale: L10nRecord) =>
   (wiki: WikiModelRecord) =>

src/App/Views/Activatable/ActivatableRemoveListItem.tsx

@@ -10,13 +10,14 @@ import { Record } from "../../../Data/Record";
 import { SpecialAbilityId } from "../../Constants/Ids";
 import { ActivatableDeactivationOptions } from "../../Models/Actions/ActivatableDeactivationOptions";
 import { ActiveActivatable, ActiveActivatableA_ } from "../../Models/View/ActiveActivatable";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { classListMaybe } from "../../Utilities/CSS";
 import { translate } from "../../Utilities/I18n";
 import { getLevelElementsWithMin } from "../../Utilities/levelUtils";
 import { pipe, pipe_ } from "../../Utilities/pipe";
 import { renderMaybe } from "../../Utilities/ReactUtils";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
+import { Dropdown } from "../Universal/Dropdown";
 import { IconButton } from "../Universal/IconButton";
 import { ListItem } from "../Universal/ListItem";
 import { ListItemButtons } from "../Universal/ListItemButtons";
@@ -212,3 +213,4 @@ const ActivatableRemoveListItemM =
   )
 
 export { ActivatableRemoveListItemM as ActivatableRemoveListItem };
+

src/App/Views/Alerts/Alerts.tsx

@@ -1,8 +1,7 @@
-import * as React from "react";
 import { Maybe } from "../../../Data/Maybe";
 import { Record } from "../../../Data/Record";
 import { PromptOptions } from "../../Actions/AlertActions";
-import { Alert, AlertProps } from "../Universal/Alert";
+import { Alert } from "../Universal/Alert";
 
 export interface AlertsOwnProps { }
 
@@ -16,9 +15,4 @@ export interface AlertsDispatchProps {
 
 export type AlertsProps = AlertsStateProps & AlertsDispatchProps & AlertsOwnProps
 
-export const Alerts: React.FC<AlertProps> = ({ options, close }) => (
-  <Alert
-    options={options}
-    close={close}
-    />
-)
+export const Alerts = Alert

src/App/Views/Attributes/AttributesAdjustment.tsx

@@ -3,11 +3,12 @@ import { elem, flength, List } from "../../../Data/List";
 import { fromMaybe, isNothing, joinMaybeList, Just, liftM2, mapMaybe, Maybe, Nothing } from "../../../Data/Maybe";
 import { Record } from "../../../Data/Record";
 import { AttributeWithRequirements, AttributeWithRequirementsA_ } from "../../Models/View/AttributeWithRequirements";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { translate } from "../../Utilities/I18n";
 import { sign } from "../../Utilities/NumberUtils";
 import { pipe_ } from "../../Utilities/pipe";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
+import { Dropdown } from "../Universal/Dropdown";
 
 export interface AttributesAdjustmentProps {
   adjustmentValue: Maybe<number>

src/App/Views/Cultures/Cultures.tsx

@@ -5,11 +5,12 @@ import { Record } from "../../../Data/Record";
 import { WikiInfoContainer } from "../../Containers/WikiInfoContainer";
 import { HeroModelRecord } from "../../Models/Hero/HeroModel";
 import { CultureCombined, CultureCombinedA_ } from "../../Models/View/CultureCombined";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { translate } from "../../Utilities/I18n";
 import { pipe, pipe_ } from "../../Utilities/pipe";
 import { CulturesSortOptions, CulturesVisibilityFilter } from "../../Utilities/Raw/JSON/Config";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
+import { Dropdown } from "../Universal/Dropdown";
 import { ListView } from "../Universal/List";
 import { ListHeader } from "../Universal/ListHeader";
 import { ListHeaderTag } from "../Universal/ListHeaderTag";

src/App/Views/Equipment/Equipment.tsx

@@ -12,13 +12,14 @@ import { HeroModelRecord } from "../../Models/Hero/HeroModel";
 import { fromItemTemplate, Item } from "../../Models/Hero/Item";
 import { Purse } from "../../Models/Hero/Purse";
 import { CombatTechniqueWithRequirements, CombatTechniqueWithRequirementsA_ } from "../../Models/View/CombatTechniqueWithRequirements";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { ItemTemplate } from "../../Models/Wiki/ItemTemplate";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { translate } from "../../Utilities/I18n";
 import { pipe, pipe_ } from "../../Utilities/pipe";
 import { Aside } from "../Universal/Aside";
 import { BorderButton } from "../Universal/BorderButton";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
+import { Dropdown } from "../Universal/Dropdown";
 import { ListView } from "../Universal/List";
 import { ListHeader } from "../Universal/ListHeader";
 import { ListHeaderTag } from "../Universal/ListHeaderTag";

src/App/Views/Equipment/ItemEditorArmorSection.tsx

@@ -3,13 +3,14 @@ import { imap } from "../../../Data/List";
 import { Just, Maybe } from "../../../Data/Maybe";
 import { Record } from "../../../Data/Record";
 import { EditItem } from "../../Models/Hero/EditItem";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { translate } from "../../Utilities/I18n";
 import { ItemEditorInputValidation } from "../../Utilities/itemEditorInputValidationUtils";
 import { getLossLevelElements } from "../../Utilities/ItemUtils";
 import { sortRecordsByName } from "../../Utilities/sortBy";
 import { Checkbox } from "../Universal/Checkbox";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
+import { Dropdown } from "../Universal/Dropdown";
 import { Hr } from "../Universal/Hr";
 import { TextField } from "../Universal/TextField";
 

src/App/Views/Equipment/ItemEditorCommonSection.tsx

@@ -3,13 +3,14 @@ import { consF, imap, List, map, take } from "../../../Data/List";
 import { isJust, isNothing, Just, Maybe } from "../../../Data/Maybe";
 import { Record } from "../../../Data/Record";
 import { EditItem } from "../../Models/Hero/EditItem";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { ItemTemplate, itemTemplateToDropdown } from "../../Models/Wiki/ItemTemplate";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { translate } from "../../Utilities/I18n";
 import { ItemEditorInputValidation } from "../../Utilities/itemEditorInputValidationUtils";
 import { pipe_ } from "../../Utilities/pipe";
 import { Checkbox } from "../Universal/Checkbox";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
+import { Dropdown } from "../Universal/Dropdown";
 import { Hr } from "../Universal/Hr";
 import { IconButton } from "../Universal/IconButton";
 import { TextField } from "../Universal/TextField";

src/App/Views/Equipment/ItemEditorMeleeSection.tsx

@@ -9,6 +9,7 @@ import { fst, isTuple, snd } from "../../../Data/Tuple";
 import { AttrId, CombatTechniqueId } from "../../Constants/Ids";
 import { EditItem } from "../../Models/Hero/EditItem";
 import { EditPrimaryAttributeDamageThreshold } from "../../Models/Hero/EditPrimaryAttributeDamageThreshold";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { Attribute } from "../../Models/Wiki/Attribute";
 import { CombatTechnique } from "../../Models/Wiki/CombatTechnique";
 import { L10nRecord } from "../../Models/Wiki/L10n";
@@ -18,7 +19,7 @@ import { getLossLevelElements } from "../../Utilities/ItemUtils";
 import { pipe, pipe_ } from "../../Utilities/pipe";
 import { isString } from "../../Utilities/typeCheckUtils";
 import { Checkbox } from "../Universal/Checkbox";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
+import { Dropdown } from "../Universal/Dropdown";
 import { Hr } from "../Universal/Hr";
 import { Label } from "../Universal/Label";
 import { TextField } from "../Universal/TextField";

src/App/Views/Equipment/ItemEditorRangedSection.tsx

@@ -6,6 +6,7 @@ import { ensure, Just, mapMaybe, Maybe } from "../../../Data/Maybe";
 import { elems, OrderedMap } from "../../../Data/OrderedMap";
 import { Record } from "../../../Data/Record";
 import { EditItem } from "../../Models/Hero/EditItem";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { CombatTechnique } from "../../Models/Wiki/CombatTechnique";
 import { ItemTemplate } from "../../Models/Wiki/ItemTemplate";
 import { L10nRecord } from "../../Models/Wiki/L10n";
@@ -13,7 +14,7 @@ import { translate } from "../../Utilities/I18n";
 import { ItemEditorInputValidation } from "../../Utilities/itemEditorInputValidationUtils";
 import { getLossLevelElements } from "../../Utilities/ItemUtils";
 import { pipe, pipe_ } from "../../Utilities/pipe";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
+import { Dropdown } from "../Universal/Dropdown";
 import { Hr } from "../Universal/Hr";
 import { Label } from "../Universal/Label";
 import { TextField } from "../Universal/TextField";

src/App/Views/Heroes/HeroCreation.tsx

@@ -5,6 +5,8 @@ import { elems, OrderedMap } from "../../../Data/OrderedMap";
 import { OrderedSet, toggle } from "../../../Data/OrderedSet";
 import { Record } from "../../../Data/Record";
 import { Sex } from "../../Models/Hero/heroTypeHelpers";
+import { DropdownOption } from "../../Models/View/DropdownOption";
+import { RadioOption } from "../../Models/View/RadioOption";
 import { Book } from "../../Models/Wiki/Book";
 import { ExperienceLevel } from "../../Models/Wiki/ExperienceLevel";
 import { L10nRecord } from "../../Models/Wiki/L10n";
@@ -12,10 +14,10 @@ import { translate } from "../../Utilities/I18n";
 import { pipe_ } from "../../Utilities/pipe";
 import { BookSelection } from "../Rules/BookSelection";
 import { Dialog } from "../Universal/Dialog";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
+import { Dropdown } from "../Universal/Dropdown";
 import { Hr } from "../Universal/Hr";
 import { Scroll } from "../Universal/Scroll";
-import { Option, SegmentedControls } from "../Universal/SegmentedControls";
+import { SegmentedControls } from "../Universal/SegmentedControls";
 import { TextField } from "../Universal/TextField";
 
 const ELA = ExperienceLevel.A
@@ -150,11 +152,11 @@ export const HeroCreation: React.FC<HeroCreationProps> = props => {
         active={msex}
         onClick={setSex}
         options={List (
-          Option<Sex> ({
+          RadioOption<Sex> ({
             value: Just<Sex> ("m"),
             name: translate (l10n) ("male"),
           }),
-          Option<Sex> ({
+          RadioOption<Sex> ({
             value: Just<Sex> ("f"),
             name: translate (l10n) ("female"),
           })

src/App/Views/Heroes/Herolist.tsx

@@ -6,6 +6,7 @@ import { OrderedSet } from "../../../Data/OrderedSet";
 import { Record } from "../../../Data/Record";
 import { HerolistItemContainer } from "../../Containers/HerolistItemContainer";
 import { HeroModel, HeroModelRecord } from "../../Models/Hero/HeroModel";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { Book } from "../../Models/Wiki/Book";
 import { ExperienceLevel } from "../../Models/Wiki/ExperienceLevel";
 import { L10nRecord } from "../../Models/Wiki/L10n";
@@ -13,7 +14,7 @@ import { translate } from "../../Utilities/I18n";
 import { pipe_ } from "../../Utilities/pipe";
 import { HeroListVisibilityFilter } from "../../Utilities/Raw/JSON/Config";
 import { BorderButton } from "../Universal/BorderButton";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
+import { Dropdown } from "../Universal/Dropdown";
 import { ListView } from "../Universal/List";
 import { Options } from "../Universal/Options";
 import { Page } from "../Universal/Page";

src/App/Views/HitZoneArmors/HitZoneArmorEditor.tsx

@@ -7,6 +7,7 @@ import { ensure, mapMaybe, Maybe, maybe } from "../../../Data/Maybe";
 import { Record } from "../../../Data/Record";
 import { EditHitZoneArmor } from "../../Models/Hero/EditHitZoneArmor";
 import { Item, itemToDropdown } from "../../Models/Hero/Item";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { ItemTemplate, itemTemplateToDropdown } from "../../Models/Wiki/ItemTemplate";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { translate } from "../../Utilities/I18n";
@@ -14,7 +15,6 @@ import { getLossLevelElements } from "../../Utilities/ItemUtils";
 import { pipe, pipe_ } from "../../Utilities/pipe";
 import { sortRecordsByName } from "../../Utilities/sortBy";
 import { Dialog } from "../Universal/Dialog";
-import { DropdownOption } from "../Universal/Dropdown";
 import { TextField } from "../Universal/TextField";
 import { HitZoneArmorEditorRow } from "./HitZoneArmorEditorRow";
 

src/App/Views/HitZoneArmors/HitZoneArmorEditorRow.tsx

@@ -2,9 +2,10 @@ import * as React from "react";
 import { List } from "../../../Data/List";
 import { Maybe } from "../../../Data/Maybe";
 import { Record } from "../../../Data/Record";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { translate } from "../../Utilities/I18n";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
+import { Dropdown } from "../Universal/Dropdown";
 
 export type HitZoneNames =
   "head"

src/App/Views/LiturgicalChants/LiturgicalChants.tsx

@@ -67,12 +67,6 @@ export type LiturgicalChantsProps =
   & LiturgicalChantsDispatchProps
   & LiturgicalChantsOwnProps
 
-export interface LiturgicalChantsState {
-  showAddSlidein: boolean
-  currentId: Maybe<string>
-  currentSlideinId: Maybe<string>
-}
-
 type Combined = Record<LiturgicalChantWithRequirements> | Record<BlessingCombined>
 
 export const LiturgicalChants: React.FC<LiturgicalChantsProps> = props => {

src/App/Views/NavBar/ApTooltip.tsx

@@ -6,7 +6,7 @@ import { AdventurePointsCategories } from "../../Models/View/AdventurePointsCate
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { translate, translateP } from "../../Utilities/I18n";
 
-export interface ApTooltipProps {
+interface Props {
   l10n: L10nRecord
   adventurePoints: Record<AdventurePointsCategories>
   maximumForMagicalAdvantagesDisadvantages: Maybe<number>
@@ -16,7 +16,7 @@ export interface ApTooltipProps {
 
 const APCA = AdventurePointsCategories.A
 
-export function ApTooltip (props: ApTooltipProps) {
+export const ApTooltip: React.FC<Props> = props => {
   const {
     l10n,
     adventurePoints: ap,

src/App/Views/NavBar/NavigationBar.tsx

@@ -7,6 +7,7 @@ import { SettingsContainer } from "../../Containers/SettingsContainer";
 import { HeroModelRecord } from "../../Models/Hero/HeroModel";
 import { SubTab } from "../../Models/Hero/heroTypeHelpers";
 import { AdventurePointsCategories } from "../../Models/View/AdventurePointsCategories";
+import { NavigationBarTabOptions } from "../../Models/View/NavigationBarTabOptions";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { translate } from "../../Utilities/I18n";
 import { TabId } from "../../Utilities/LocationUtils";
@@ -22,7 +23,6 @@ import { NavigationBarBack } from "./NavigationBarBack";
 import { NavigationBarLeft } from "./NavigationBarLeft";
 import { NavigationBarRight } from "./NavigationBarRight";
 import { NavigationBarSubTabs } from "./NavigationBarSubTabs";
-import { NavigationBarTabProps } from "./NavigationBarTab";
 import { NavigationBarTabs } from "./NavigationBarTabs";
 import { NavigationBarWrapper } from "./NavigationBarWrapper";
 
@@ -41,7 +41,7 @@ export interface NavigationBarStateProps {
   isUndoAvailable: boolean
   isSettingsOpen: boolean
   isHeroSection: boolean
-  tabs: List<NavigationBarTabProps>
+  tabs: List<Record<NavigationBarTabOptions>>
   subtabs: Maybe<List<SubTab>>
   adventurePoints: Maybe<Record<AdventurePointsCategories>>
   maximumForMagicalAdvantagesDisadvantages: Maybe<number>

src/App/Views/NavBar/NavigationBarBack.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 
-export interface NavigationBarBackProps {
+interface Props {
   handleSetTab (): void
 }
 
-export function NavigationBarBack (props: NavigationBarBackProps) {
+export const NavigationBarBack: React.FC<Props> = props => {
   const { handleSetTab } = props
 
   return (

src/App/Views/NavBar/NavigationBarForGroup.tsx

@@ -14,7 +14,7 @@ import { NavigationBarLeft } from "./NavigationBarLeft";
 import { NavigationBarRight } from "./NavigationBarRight";
 import { NavigationBarWrapper } from "./NavigationBarWrapper";
 
-export interface NavigationBarForGroupProps {
+interface Props {
   l10n: L10nRecord
   groupName: string
   platform: string
@@ -27,7 +27,7 @@ export interface NavigationBarForGroupProps {
 
 const toggleDevtools = remote.getCurrentWindow ().webContents.toggleDevTools
 
-export const NavigationBarForGroup: React.FC<NavigationBarForGroupProps> = props => {
+export const NavigationBarForGroup: React.FC<Props> = props => {
   const {
     l10n,
     groupName,

src/App/Views/NavBar/NavigationBarLeft.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 
-export interface NavigationBarLeftProps { }
+interface Props { }
 
-export const NavigationBarLeft: React.FC<NavigationBarLeftProps> = ({ children }) => (
+export const NavigationBarLeft: React.FC<Props> = ({ children }) => (
   <div className="navigationbar-left">
     {children}
   </div>

src/App/Views/NavBar/NavigationBarRight.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 
-export interface NavigationBarRightProps { }
+interface Props { }
 
-export const NavigationBarRight: React.FC<NavigationBarRightProps> = ({ children }) => (
+export const NavigationBarRight: React.FC<Props> = ({ children }) => (
   <div className="navigationbar-right">
     {children}
   </div>

src/App/Views/NavBar/NavigationBarSubTab.tsx

@@ -3,13 +3,13 @@ import { SubTab } from "../../Models/Hero/heroTypeHelpers";
 import { TabId } from "../../Utilities/LocationUtils";
 import { Tab } from "../Universal/Tab";
 
-export interface NavigationBarSubTabProps {
+interface Props {
   currentTab: TabId
   tab: SubTab
   setTab (tab: TabId): void
 }
 
-export const NavigationBarSubTab: React.FC<NavigationBarSubTabProps> = props => {
+export const NavigationBarSubTab: React.FC<Props> = props => {
   const { currentTab, tab, setTab } = props
 
   const { id, label, disabled } = tab

src/App/Views/NavBar/NavigationBarSubTabs.tsx

@@ -5,13 +5,13 @@ import { TabId } from "../../Utilities/LocationUtils";
 import { pipe_ } from "../../Utilities/pipe";
 import { NavigationBarSubTab } from "./NavigationBarSubTab";
 
-export interface NavigationBarSubTabsProps {
+interface Props {
   currentTab: TabId
   tabs: List<SubTab>
   setTab (tab: TabId): void
 }
 
-export const NavigationBarSubTabs: React.FC<NavigationBarSubTabsProps> = props => {
+export const NavigationBarSubTabs: React.FC<Props> = props => {
   const { currentTab, tabs, setTab } = props
 
   return (

src/App/Views/NavBar/NavigationBarTabs.tsx

@@ -1,15 +1,19 @@
 import * as React from "react";
 import { List, map, toArray } from "../../../Data/List";
+import { Record } from "../../../Data/Record";
+import { NavigationBarTabOptions } from "../../Models/View/NavigationBarTabOptions";
 import { TabId } from "../../Utilities/LocationUtils";
 import { pipe_ } from "../../Utilities/pipe";
-import { NavigationBarTab, NavigationBarTabProps } from "./NavigationBarTab";
+import { NavigationBarTab } from "./NavigationBarTab";
 
-export interface NavigationBarTabsProps {
+const NBTOA = NavigationBarTabOptions.A
+
+interface Props {
   currentTab: TabId
-  tabs: List<NavigationBarTabProps>
+  tabs: List<Record<NavigationBarTabOptions>>
 }
 
-export const NavigationBarTabs: React.FC<NavigationBarTabsProps> = props => {
+export const NavigationBarTabs: React.FC<Props> = props => {
   const { currentTab, tabs } = props
 
   return (
@@ -18,12 +22,9 @@ export const NavigationBarTabs: React.FC<NavigationBarTabsProps> = props => {
         tabs,
         map (tab => (
           <NavigationBarTab
-            className={tab.className}
+            key={NBTOA.id (tab)}
             currentTab={currentTab}
-            disabled={tab.disabled}
-            label={tab.label}
-            id={tab.id}
-            subTabs={tab.subTabs}
+            options={tab}
             />
         )),
         toArray

src/App/Views/NavBar/NavigationBarWrapper.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 
-export interface NavigationBarWrapperProps { }
+interface Props { }
 
-export const NavigationBarWrapper: React.FC<NavigationBarWrapperProps> = ({ children }) => (
+export const NavigationBarWrapper: React.FC<Props> = ({ children }) => (
   <div className="navigationbar">
     <div className="navigationbar-inner">
       {children}

src/App/Views/Pact/Pact.tsx

@@ -9,13 +9,14 @@ import { Record } from "../../../Data/Record";
 import { Pair } from "../../../Data/Tuple";
 import { HeroModelRecord } from "../../Models/Hero/HeroModel";
 import { Pact } from "../../Models/Hero/Pact";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { translate } from "../../Utilities/I18n";
 import { toRoman } from "../../Utilities/NumberUtils";
 import { pipe, pipe_ } from "../../Utilities/pipe";
 import { misNumberM, misStringM } from "../../Utilities/typeCheckUtils";
 import { Checkbox } from "../Universal/Checkbox";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
+import { Dropdown } from "../Universal/Dropdown";
 import { Page } from "../Universal/Page";
 import { TextField } from "../Universal/TextField";
 
@@ -83,12 +84,12 @@ export const PactSettings: React.FC<PactSettingsProps> = props => {
           options={pipe_ (
                           translate (l10n) ("pactcategories"),
                           imap (i => (name: string) => DropdownOption ({
-                          id: Just (i + 1),
-                          name,
-                        })),
+                            id: Just (i + 1),
+                            name,
+                          })),
                           consF (DropdownOption ({
-                          name: translate (l10n) ("nopact"),
-                        }))
+                            name: translate (l10n) ("nopact"),
+                          }))
                       )}
           onChange={setPactCategory}
           value={fmapF (mpact) (Pact.A.category)}

src/App/Views/Professions/ProfessionVariants.tsx

@@ -9,12 +9,13 @@ import { selectProfessionVariant } from "../../Actions/ProfessionVariantActions"
 import { Sex } from "../../Models/Hero/heroTypeHelpers";
 import { ProfessionCombined, ProfessionCombinedA_ } from "../../Models/View/ProfessionCombined";
 import { ProfessionVariantCombinedA_ } from "../../Models/View/ProfessionVariantCombined";
+import { RadioOption } from "../../Models/View/RadioOption";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { translate } from "../../Utilities/I18n";
 import { pipe, pipe_ } from "../../Utilities/pipe";
 import { getNameBySex } from "../../Utilities/rcpUtils";
 import { sortRecordsByName } from "../../Utilities/sortBy";
-import { Option, RadioButtonGroup } from "../Universal/RadioButtonGroup";
+import { RadioButtonGroup } from "../Universal/RadioButtonGroup";
 
 export interface ProfessionVariantsProps {
   currentProfessionId: Maybe<string>
@@ -57,7 +58,7 @@ export const ProfessionVariants: React.FC<ProfessionVariantsProps> = props => {
                    const ap_tag = translate (l10n) ("adventurepoints.short")
                    const ap = Maybe.sum (PCA_.ap (prof)) + PVCA_.ap (prof_var)
 
-                   return Option ({
+                   return RadioOption ({
                      name: `${name} (${ap} ${ap_tag})`,
                      value: Just (PVCA_.id (prof_var)),
                    })
@@ -65,14 +66,14 @@ export const ProfessionVariants: React.FC<ProfessionVariantsProps> = props => {
                  sortRecordsByName (l10n),
                  PCA_.isVariantRequired (prof)
                    ? ident
-                   : consF (Option ({ name: translate (l10n) ("novariant") }))
+                   : consF (RadioOption ({ name: translate (l10n) ("novariant") }))
                ))
              ))
            (msex)
            (bind (professions) (find (pipe (PCA_.id, Maybe.elemF (currentProfessionId)))))
 
   return maybe (<></>)
-               ((vars: List<Record<Option<string>>>) => (
+               ((vars: List<Record<RadioOption<string>>>) => (
                  <RadioButtonGroup
                    active={currentProfessionVariantId}
                    onClick={handleProfessionVariantSelect}

src/App/Views/Professions/Professions.tsx

@@ -6,6 +6,7 @@ import { SelectionsContainer } from "../../Containers/RCPSelectionsContainer";
 import { WikiInfoContainer } from "../../Containers/WikiInfoContainer";
 import { HeroModelRecord } from "../../Models/Hero/HeroModel";
 import { Sex } from "../../Models/Hero/heroTypeHelpers";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { ProfessionCombined, ProfessionCombinedA_ } from "../../Models/View/ProfessionCombined";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { WikiModelRecord } from "../../Models/Wiki/WikiModel";
@@ -13,7 +14,7 @@ import { translate } from "../../Utilities/I18n";
 import { pipe, pipe_ } from "../../Utilities/pipe";
 import { ProfessionsGroupVisibilityFilter, ProfessionsVisibilityFilter } from "../../Utilities/Raw/JSON/Config";
 import { Aside } from "../Universal/Aside";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
+import { Dropdown } from "../Universal/Dropdown";
 import { ListView } from "../Universal/List";
 import { ListHeader } from "../Universal/ListHeader";
 import { ListHeaderTag } from "../Universal/ListHeaderTag";

src/App/Views/Profile/OverviewPersonalData.tsx

@@ -5,11 +5,12 @@ import { all, bind, listToMaybe, Maybe } from "../../../Data/Maybe";
 import { Record } from "../../../Data/Record";
 import { SocialStatusId } from "../../Constants/Ids";
 import { PersonalData } from "../../Models/Hero/PersonalData";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { translate } from "../../Utilities/I18n";
 import { renderMaybeWith } from "../../Utilities/ReactUtils";
 import { isEmptyOr, isFloat, isNaturalNumber } from "../../Utilities/RegexUtils";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
+import { Dropdown } from "../Universal/Dropdown";
 import { IconButton } from "../Universal/IconButton";
 import { InputButtonGroup } from "../Universal/InputButtonGroup";
 import { TextField } from "../Universal/TextField";

src/App/Views/Profile/PersonalData.tsx

@@ -9,6 +9,7 @@ import { HeroModelRecord } from "../../Models/Hero/HeroModel";
 import { Sex } from "../../Models/Hero/heroTypeHelpers";
 import { PersonalData } from "../../Models/Hero/PersonalData";
 import { ActiveActivatable } from "../../Models/View/ActiveActivatable";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { Advantage } from "../../Models/Wiki/Advantage";
 import { Culture } from "../../Models/Wiki/Culture";
 import { Disadvantage } from "../../Models/Wiki/Disadvantage";
@@ -24,7 +25,6 @@ import { ActivatableTextList } from "../Activatable/ActivatableTextList";
 import { AvatarChange } from "../Universal/AvatarChange";
 import { AvatarWrapper } from "../Universal/AvatarWrapper";
 import { BorderButton } from "../Universal/BorderButton";
-import { DropdownOption } from "../Universal/Dropdown";
 import { EditText } from "../Universal/EditText";
 import { IconButton } from "../Universal/IconButton";
 import { Page } from "../Universal/Page";

src/App/Views/RCPOptionSelections/LanguageSelectionListItem.tsx

@@ -3,12 +3,13 @@ import { List } from "../../../Data/List";
 import { Just, Maybe, Nothing } from "../../../Data/Maybe";
 import { findWithDefault, member, OrderedMap } from "../../../Data/OrderedMap";
 import { Record } from "../../../Data/Record";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { LanguagesSelectionListItemOptions } from "../../Models/View/LanguagesSelectionListItemOptions";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { translate } from "../../Utilities/I18n";
 import { getLevelElements } from "../../Utilities/levelUtils";
 import { Checkbox } from "../Universal/Checkbox";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
+import { Dropdown } from "../Universal/Dropdown";
 
 const LSLIOA = LanguagesSelectionListItemOptions.A
 

src/App/Views/RCPOptionSelections/RCPOptionSelections.tsx

@@ -14,6 +14,7 @@ import { sel2 } from "../../../Data/Tuple/Select";
 import { ProfessionId } from "../../Constants/Ids";
 import { Selections as SelectionsInterface } from "../../Models/Hero/heroTypeHelpers";
 import { Rules } from "../../Models/Hero/Rules";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { Attribute } from "../../Models/Wiki/Attribute";
 import { Culture } from "../../Models/Wiki/Culture";
 import { L10nRecord } from "../../Models/Wiki/L10n";
@@ -30,11 +31,11 @@ import { translate } from "../../Utilities/I18n";
 import { getAllAdjustmentSelections } from "../../Utilities/mergeRcpAdjustmentSelections";
 import { sign } from "../../Utilities/NumberUtils";
 import { pipe, pipe_ } from "../../Utilities/pipe";
-import { getBuyScriptElement, getGuildMageUnfamiliarSpellSelectionElement, getMainScriptSelectionElement, getMotherTongueSelectionElement, getTerrainKnowledgeElement } from "../../Utilities/rcpAdjustmentSelectionUtils";
+import { getBuyScriptElement, getGuildMageUnfamiliarSpellSelectionElement, getMainScriptSelectionElement, getMotherTongueSelectionElement } from "../../Utilities/rcpAdjustmentSelectionUtils";
 import { getSelPair } from "../../Utilities/RCPSelectionsUtils";
 import { BorderButton } from "../Universal/BorderButton";
 import { Checkbox } from "../Universal/Checkbox";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
+import { Dropdown } from "../Universal/Dropdown";
 import { Scroll } from "../Universal/Scroll";
 import { Slidein } from "../Universal/Slidein";
 import { CantripSelectionList, isCantripsSelectionValid } from "./CantripSelectionList";
@@ -43,6 +44,7 @@ import { CursesSelectionList, isCursesSelectionValid } from "./CursesSelectionLi
 import { isLanguagesScriptsSelectionValid, LanguagesScriptsSelectionLists } from "./LanguagesScriptsSelectionLists";
 import { isSkillSelectionValid, SkillSelectionList } from "./SkillSelectionList";
 import { isSkillSpecializationSelectionValid, SkillSpecializationSelectionList } from "./SkillSpecializationSelectionList";
+import { isTerrainKnowledgeSelectionValid, TerrainKnowledgeSelectionList } from "./TerrainKnowledgeSelectionList";
 
 export interface RCPOptionSelectionsProps {
   l10n: L10nRecord
@@ -421,10 +423,18 @@ export const RCPOptionSelections: React.FC<RCPOptionSelectionsProps> = props =>
                (PSA[ProfessionSelectionIds.SKILLS])
                (prof_sels)
 
-  const terrainKnowledge = getTerrainKnowledgeElement (wiki)
-                                                      (terrainKnowledgeActive)
-                                                      (handleSetTerrainKnowledge)
-                                                      (prof_sels)
+  const terrainKnowledge =
+    getSelPair (isTerrainKnowledgeSelectionValid (terrainKnowledgeActive))
+               (selection => (
+                 <TerrainKnowledgeSelectionList
+                   wiki={wiki}
+                   active={terrainKnowledgeActive}
+                   selection={selection}
+                   setTerrainId={handleSetTerrainKnowledge}
+                   />
+               ))
+               (PSA[ProfessionSelectionIds.TERRAIN_KNOWLEDGE])
+               (prof_sels)
 
   const guildMageUnfamiliarSpell =
     getGuildMageUnfamiliarSpellSelectionElement (l10n)
@@ -441,6 +451,7 @@ export const RCPOptionSelections: React.FC<RCPOptionSelectionsProps> = props =>
     || !fst (cantrips)
     || !fst (curses)
     || !fst (skills)
+    || !fst (terrainKnowledge)
     || isNothing (attributeAdjustment)
     || (isMotherTongueSelectionNeeded && motherTongue === 0)
     || (
@@ -448,15 +459,6 @@ export const RCPOptionSelections: React.FC<RCPOptionSelectionsProps> = props =>
       && snd (isScriptSelectionNeeded)
       && mainScript === 0
     )
-    || (
-      isJust (PSA[ProfessionSelectionIds.SPECIALIZATION] (prof_sels))
-      && snd (specialization) === ""
-      && isNothing (fst (specialization))
-    )
-    || (
-    isJust (PSA[ProfessionSelectionIds.TERRAIN_KNOWLEDGE] (prof_sels))
-      && isNothing (terrainKnowledgeActive)
-    )
     || (
       PSA[ProfessionSelectionIds.GUILD_MAGE_UNFAMILIAR_SPELL] (prof_sels)
       && isNothing (selectedUnfamiliarSpell)
@@ -521,7 +523,7 @@ export const RCPOptionSelections: React.FC<RCPOptionSelectionsProps> = props =>
         {maybeToNullable (guildMageUnfamiliarSpell)}
         {maybeToNullable (snd (cantrips))}
         {maybeToNullable (snd (skills))}
-        {maybeToNullable (terrainKnowledge)}
+        {maybeToNullable (snd (terrainKnowledge))}
         <BorderButton
           label={translate (l10n) ("complete")}
           primary

src/App/Views/RCPOptionSelections/RCPOptionSelectionsEnsure.tsx

@@ -4,13 +4,13 @@ import { fromJust, isJust, Maybe } from "../../../Data/Maybe";
 import { Record } from "../../../Data/Record";
 import { HeroModel, HeroModelRecord } from "../../Models/Hero/HeroModel";
 import { Selections as SelectionsInterface } from "../../Models/Hero/heroTypeHelpers";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { Culture } from "../../Models/Wiki/Culture";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { Profession } from "../../Models/Wiki/Profession";
 import { ProfessionVariant } from "../../Models/Wiki/ProfessionVariant";
 import { Race } from "../../Models/Wiki/Race";
 import { WikiModelRecord } from "../../Models/Wiki/WikiModel";
-import { DropdownOption } from "../Universal/Dropdown";
 import { RCPOptionSelections } from "./RCPOptionSelections";
 
 export interface RCPOptionSelectionsEnsureProps {

src/App/Views/RCPOptionSelections/SkillSpecializationSelectionApplications.tsx

@@ -5,11 +5,13 @@ import { flength, map } from "../../../Data/List";
 import { Just, Maybe, maybeToNullable } from "../../../Data/Maybe";
 import { Record } from "../../../Data/Record";
 import { fst, Pair, snd } from "../../../Data/Tuple";
+import { DropdownOption } from "../../Models/View/DropdownOption";
+import { RadioOption } from "../../Models/View/RadioOption";
 import { Skill } from "../../Models/Wiki/Skill";
 import { Application } from "../../Models/Wiki/sub/Application";
 import { pipe_ } from "../../Utilities/pipe";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
-import { Option, RadioButtonGroup } from "../Universal/RadioButtonGroup";
+import { Dropdown } from "../Universal/Dropdown";
+import { RadioButtonGroup } from "../Universal/RadioButtonGroup";
 import { TextField } from "../Universal/TextField";
 
 const SA = Skill.A
@@ -79,7 +81,7 @@ const applicationsToDropdown = map ((e: Record<Application>) => DropdownOption (
   name: Application.A.name (e),
 }))
 
-const applicationsToRadio = map ((e: Record<Application>) => Option ({
+const applicationsToRadio = map ((e: Record<Application>) => RadioOption ({
   name: Application.A.name (e),
   value: Just (Application.A.id (e)),
 }))

src/App/Views/RCPOptionSelections/SkillSpecializationSelectionList.tsx

@@ -5,6 +5,7 @@ import { bind, ensure, fromJust, fromMaybe, isJust, isNothing, Just, mapMaybe, M
 import { lookupF } from "../../../Data/OrderedMap";
 import { Record } from "../../../Data/Record";
 import { fst, Pair, snd, Tuple } from "../../../Data/Tuple";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { SpecializationSelection } from "../../Models/Wiki/professionSelections/SpecializationSelection";
 import { Skill } from "../../Models/Wiki/Skill";
@@ -12,7 +13,7 @@ import { WikiModel, WikiModelRecord } from "../../Models/Wiki/WikiModel";
 import { localizeOrList, translateP } from "../../Utilities/I18n";
 import { pipe, pipe_ } from "../../Utilities/pipe";
 import { isString } from "../../Utilities/typeCheckUtils";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
+import { Dropdown } from "../Universal/Dropdown";
 import { SkillSpecializationSelectionApplications } from "./SkillSpecializationSelectionApplications";
 
 const WA = WikiModel.A

src/App/Views/RCPOptionSelections/TerrainKnowledgeSelectionList.tsx

@@ -1,48 +1,78 @@
 import * as React from "react";
 import { fmap } from "../../../Data/Functor";
 import { elem, List } from "../../../Data/List";
-import { ensure, mapMaybe, Maybe, maybeToNullable } from "../../../Data/Maybe";
+import { bindF, ensure, joinMaybeList, mapMaybe, Maybe, maybe } from "../../../Data/Maybe";
+import { lookup } from "../../../Data/OrderedMap";
 import { Record } from "../../../Data/Record";
+import { Tuple } from "../../../Data/Tuple";
+import { SpecialAbilityId } from "../../Constants/Ids";
+import { TerrainKnowledgeSelection } from "../../Models/Wiki/professionSelections/TerrainKnowledgeSelection";
 import { SpecialAbility } from "../../Models/Wiki/SpecialAbility";
 import { SelectOption, selectToDropdownOption } from "../../Models/Wiki/sub/SelectOption";
+import { WikiModel, WikiModelRecord } from "../../Models/Wiki/WikiModel";
 import { pipe, pipe_ } from "../../Utilities/pipe";
 import { isNumber } from "../../Utilities/typeCheckUtils";
 import { Dropdown } from "../Universal/Dropdown";
 
-export interface TerrainKnowledgeProps {
-  active: Maybe<number>
-  available: List<number>
-  terrainKnowledge: Record<SpecialAbility>
-  set (id: number): void
-}
-
+const WA = WikiModel.A
+const TKSA = TerrainKnowledgeSelection.A
 const SAA = SpecialAbility.A
 
-export function TerrainKnowledge (props: TerrainKnowledgeProps) {
-  const { active, available, terrainKnowledge, set } = props
+export const isTerrainKnowledgeSelectionValid =
+  (activeTerrain: Maybe<number>) =>
+  (selection: Record<TerrainKnowledgeSelection>): Tuple<[boolean]> => {
+    const sid = TKSA.sid (selection)
+
+    const is_terrain_valid = Maybe.any (List.elemF (sid)) (activeTerrain)
+
+    return Tuple (is_terrain_valid)
+  }
+
+interface Props {
+  wiki: WikiModelRecord
+  active: Maybe<number>
+  selection: Record<TerrainKnowledgeSelection>
+  setTerrainId (id: number): void
+}
+
+export const TerrainKnowledgeSelectionList: React.FC<Props> = props => {
+  const { active, selection, setTerrainId, wiki } = props
+
+  const available = TKSA.sid (selection)
+
+  const terrain_knowledge = React.useMemo (
+    () => pipe_ (
+      wiki,
+      WA.specialAbilities,
+      lookup <string> (SpecialAbilityId.TerrainKnowledge)
+    ),
+    [ wiki ]
+  )
+
+  const terrains = React.useMemo (
+    () => pipe_ (
+      terrain_knowledge,
+      bindF (SAA.select),
+      joinMaybeList,
+      mapMaybe (pipe (
+        ensure (pipe (
+          SelectOption.A.id,
+          id => isNumber (id) && elem (id) (available)
+        )),
+        fmap (selectToDropdownOption)
+      ))
+    ),
+    [ available, terrain_knowledge ]
+  )
 
   return (
     <div className="terrain-knowledge">
-      <h4>{SAA.name (terrainKnowledge)}</h4>
-      {pipe_ (
-        terrainKnowledge,
-        SAA.select,
-        fmap (select => (
-          <Dropdown
-            value={active}
-            options={mapMaybe (pipe (
-                                ensure (pipe (
-                                  SelectOption.A.id,
-                                  id => isNumber (id) && elem (id) (available)
-                                )),
-                                fmap (selectToDropdownOption)
-                              ))
-                              (select)}
-            onChangeJust={set}
-            />
-        )),
-        maybeToNullable
-      )}
+      <h4>{maybe ("") (SAA.name) (terrain_knowledge)}</h4>
+      <Dropdown
+        value={active}
+        options={terrains}
+        onChangeJust={setTerrainId}
+        />
     </div>
   )
 }

src/App/Views/RCPOptionSelections/TerrainKnowledgeSelectionListItem.tsx

@@ -1,66 +0,0 @@
-import * as React from "react";
-import { isJust, isNothing, Just, Maybe, maybe, maybeRNullF, Nothing } from "../../../Data/Maybe";
-import { lte } from "../../../Data/Num";
-import { lookup, OrderedMap } from "../../../Data/OrderedMap";
-import { Record } from "../../../Data/Record";
-import { Spell } from "../../Models/Wiki/Spell";
-import { minus } from "../../Utilities/Chars";
-import { BorderButton } from "../Universal/BorderButton";
-import { Checkbox } from "../Universal/Checkbox";
-
-const SA = Spell.A
-
-interface Props {
-  apLeft: number
-  curse: Record<Spell>
-  active: OrderedMap<string, number>
-  adjustCurseValue: (id: string) => (method: Maybe<"add" | "remove">) => void
-}
-
-export const TerrainKnowledgeSelectionListItem: React.FC<Props> = props => {
-  const { active, apLeft, curse, adjustCurseValue } = props
-
-  const id = SA.id (curse)
-  const name = SA.name (curse)
-  const ic = SA.ic (curse)
-
-  const mvalue = lookup (id) (active)
-
-  const handleToggle = React.useCallback (
-    () => adjustCurseValue (id) (Nothing),
-    [ id, adjustCurseValue ]
-  )
-
-  const handleAddPoint = React.useCallback (
-    () => adjustCurseValue (id) (Just ("add")),
-    [ id, adjustCurseValue ]
-  )
-
-  const handleRemovePoint = React.useCallback (
-    () => adjustCurseValue (id) (Just ("remove")),
-    [ id, adjustCurseValue ]
-  )
-
-  return (
-    <li>
-      <Checkbox
-        checked={isJust (mvalue)}
-        disabled={isNothing (mvalue) && apLeft <= 0}
-        onClick={handleToggle}
-        >
-        {name}
-      </Checkbox>
-      {maybeRNullF (mvalue) (value => (<span>{value}</span>))}
-      <BorderButton
-        label="+"
-        disabled={isNothing (mvalue) || apLeft <= 0 || apLeft - ic < 0}
-        onClick={handleAddPoint}
-        />
-      <BorderButton
-        label={minus}
-        disabled={maybe (true) (lte (0)) (mvalue)}
-        onClick={handleRemovePoint}
-        />
-    </li>
-  )
-}

src/App/Views/Races/RaceVariants.tsx

@@ -5,11 +5,12 @@ import { bindF, ensure, Just, Maybe, maybe } from "../../../Data/Maybe";
 import { Record } from "../../../Data/Record";
 import { selectRaceVariant } from "../../Actions/RaceActions";
 import { RaceCombined, RaceCombinedA_ } from "../../Models/View/RaceCombined";
+import { RadioOption } from "../../Models/View/RadioOption";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { RaceVariant } from "../../Models/Wiki/RaceVariant";
 import { pipe, pipe_ } from "../../Utilities/pipe";
 import { sortRecordsByName } from "../../Utilities/sortBy";
-import { Option, RadioButtonGroup } from "../Universal/RadioButtonGroup";
+import { RadioButtonGroup } from "../Universal/RadioButtonGroup";
 
 export interface RaceVariantsProps {
   currentId: Maybe<string>
@@ -34,7 +35,7 @@ export const RaceVariants: React.FC<RaceVariantsProps> = props => {
     find (pipe (RaceCombinedA_.id, Maybe.elemF (currentId))),
     bindF (pipe (
       RaceCombined.A.mappedVariants,
-      map (e => Option ({
+      map (e => RadioOption ({
         name: RaceVariant.A.name (e),
         value: Just (RaceVariant.A.id (e)),
       })),

src/App/Views/Router/Router.tsx

@@ -32,21 +32,21 @@ import { MainContent } from "../Universal/MainContent";
 import { Page } from "../Universal/Page";
 import { Scroll } from "../Universal/Scroll";
 
-export interface RouterProps {
+interface Props {
   id: TabId
   l10n: L10nRecord
   mhero: Maybe<HeroModelRecord>
 }
 
-export interface RouterState {
+interface State {
   hasError?: {
     error: Error;
     info: any;
   }
 }
 
-export class Router extends React.Component<RouterProps> {
-  state: RouterState = {}
+export class Router extends React.Component<Props> {
+  state: State = {}
 
   componentDidCatch (error: any, info: any) {
     this.setState (() => ({ hasError: { error, info } }))

src/App/Views/Rules/BookSelection.tsx

@@ -1,14 +1,15 @@
 import * as React from "react";
 import { List, map, toArray } from "../../../Data/List";
-import { member, OrderedSet } from "../../../Data/OrderedSet";
+import { OrderedSet } from "../../../Data/OrderedSet";
 import { Record } from "../../../Data/Record";
 import { Book } from "../../Models/Wiki/Book";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { translate } from "../../Utilities/I18n";
 import { pipe_ } from "../../Utilities/pipe";
 import { Checkbox } from "../Universal/Checkbox";
+import { BookSelectionListItem } from "./BookSelectionListItem";
 
-export interface BookSelectionProps {
+interface Props {
   l10n: L10nRecord
   sortedBooks: List<Record<Book>>
   allRuleBooksEnabled: boolean
@@ -17,7 +18,7 @@ export interface BookSelectionProps {
   switchEnableRuleBook (id: string): void
 }
 
-export function BookSelection (props: BookSelectionProps) {
+export const BookSelection: React.FC<Props> = props => {
   const {
     l10n,
     sortedBooks,
@@ -37,27 +38,15 @@ export function BookSelection (props: BookSelectionProps) {
       <div className="rule-books">
         {pipe_ (
           sortedBooks,
-          map (e => {
-            const id = Book.A.id (e)
-            const name = Book.A.name (e)
-            const isCore = Book.A.isCore (e)
-            const isAdultContent = Book.A.isAdultContent (e)
-
-            return (
-              <Checkbox
-                className={isAdultContent ? "adult-content" : undefined}
-                key={Book.A.id (e)}
-                checked={
-                  isCore
-                  || member (id) (enabledRuleBooks)
-                  || !isAdultContent && allRuleBooksEnabled
-                }
-                onClick={() => switchEnableRuleBook (id)}
-                label={name}
-                disabled={allRuleBooksEnabled && !isAdultContent || isCore}
-                />
-            )
-          }),
+          map (e => (
+            <BookSelectionListItem
+              key={Book.A.id (e)}
+              areAllRuleBooksEnabled={allRuleBooksEnabled}
+              book={e}
+              enabledRuleBooks={enabledRuleBooks}
+              switchBookEnabled={switchEnableRuleBook}
+              />
+          )),
           toArray
         )}
       </div>

src/App/Views/Rules/BookSelectionListItem.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import { member, OrderedSet } from "../../../Data/OrderedSet"
+import { Record } from "../../../Data/Record"
+import { Book } from "../../Models/Wiki/Book"
+import { Checkbox } from "../Universal/Checkbox"
+
+const BA = Book.A
+
+interface Props {
+  book: Record<Book>
+  enabledRuleBooks: OrderedSet<string>
+  areAllRuleBooksEnabled: boolean
+  switchBookEnabled: (id: string) => void
+}
+
+export const BookSelectionListItem: React.FC<Props> = props => {
+  const { areAllRuleBooksEnabled, book, enabledRuleBooks, switchBookEnabled } = props
+
+  const id = BA.id (book)
+  const name = BA.name (book)
+  const isCore = BA.isCore (book)
+  const isAdultContent = BA.isAdultContent (book)
+
+  const handleSwitch = React.useCallback (
+    () => switchBookEnabled (id),
+    [ id, switchBookEnabled ]
+  )
+
+  return (
+    <Checkbox
+      className={isAdultContent ? "adult-content" : undefined}
+      checked={
+        isCore
+        || member (id) (enabledRuleBooks)
+        || (!isAdultContent && areAllRuleBooksEnabled)
+      }
+      onClick={handleSwitch}
+      label={name}
+      disabled={(areAllRuleBooksEnabled && !isAdultContent) || isCore}
+      />
+  )
+}

src/App/Views/Rules/Rules.tsx

@@ -4,12 +4,13 @@ import { fromMaybe, isJust, Just, liftM2, Maybe, Nothing } from "../../../Data/M
 import { Record } from "../../../Data/Record";
 import { HeroModel, HeroModelRecord } from "../../Models/Hero/HeroModel";
 import { Rules } from "../../Models/Hero/Rules";
+import { DropdownOption } from "../../Models/View/DropdownOption";
 import { Book } from "../../Models/Wiki/Book";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { translate } from "../../Utilities/I18n";
 import { Locale } from "../../Utilities/Raw/JSON/Config";
 import { Checkbox } from "../Universal/Checkbox";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
+import { Dropdown } from "../Universal/Dropdown";
 import { Scroll } from "../Universal/Scroll";
 import { BookSelection } from "./BookSelection";
 
@@ -36,9 +37,9 @@ export interface RulesDispatchProps {
   setGuildMageSpell (spellId: string): void
 }
 
-export type RulesProps = RulesStateProps & RulesDispatchProps & RulesOwnProps
+type Props = RulesStateProps & RulesDispatchProps & RulesOwnProps
 
-export const RulesView: React.FC<RulesProps> = props => {
+export const RulesView: React.FC<Props> = props => {
   const {
     sortedBooks,
     changeAttributeValueLimit,
@@ -71,7 +72,7 @@ export const RulesView: React.FC<RulesProps> = props => {
   const handleHigherParadeValues =
     React.useCallback (
       () => changeHigherParadeValues (Just (areHigherParadeValuesEnabled ? 0 : 2)),
-      [changeHigherParadeValues, areHigherParadeValuesEnabled]
+      [ changeHigherParadeValues, areHigherParadeValuesEnabled ]
     )
 
   return (

src/App/Views/Settings/Settings.tsx

@@ -1,14 +1,16 @@
 import * as React from "react";
 import { List } from "../../../Data/List";
 import { Just, Maybe, Nothing } from "../../../Data/Maybe";
+import { DropdownOption } from "../../Models/View/DropdownOption";
+import { RadioOption } from "../../Models/View/RadioOption";
 import { L10nRecord } from "../../Models/Wiki/L10n";
 import { translate } from "../../Utilities/I18n";
 import { Theme } from "../../Utilities/Raw/JSON/Config";
 import { BorderButton } from "../Universal/BorderButton";
 import { Checkbox } from "../Universal/Checkbox";
 import { Dialog } from "../Universal/Dialog";
-import { Dropdown, DropdownOption } from "../Universal/Dropdown";
-import { Option, SegmentedControls } from "../Universal/SegmentedControls";
+import { Dropdown } from "../Universal/Dropdown";
+import { SegmentedControls } from "../Universal/SegmentedControls";
 
 export interface SettingsOwnProps {
   l10n: L10nRecord
@@ -34,9 +36,9 @@ export interface SettingsDispatchProps {
   switchEnableAnimations (): void
 }
 
-export type SettingsProps = SettingsStateProps & SettingsDispatchProps & SettingsOwnProps
+type Props = SettingsStateProps & SettingsDispatchProps & SettingsOwnProps
 
-export function Settings (props: SettingsProps) {
+export const Settings: React.FC<Props> = props => {
   const {
     close,
     isEditingHeroAfterCreationPhaseEnabled,
@@ -98,11 +100,11 @@ export function Settings (props: SettingsProps) {
       <p>{translate (l10n) ("languagehint")}</p>
       <SegmentedControls
         options={List (
-          Option ({
+          RadioOption ({
             name: translate (l10n) ("dark"),
             value: Just (Theme.Dark),
           }),
-          Option ({
+          RadioOption ({
             name: translate (l10n) ("light"),
             value: Just (Theme.Light),
           })

src/App/Views/Sheets/AttributeMods.tsx

@@ -3,44 +3,42 @@ import { List, map, toArray } from "../../../Data/List";
 import { Record } from "../../../Data/Record";
 import { AttributeCombined, AttributeCombinedA_ } from "../../Models/View/AttributeCombined";
 import { L10nRecord } from "../../Models/Wiki/L10n";
-import { minus } from "../../Utilities/Chars";
 import { translate } from "../../Utilities/I18n";
+import { sign } from "../../Utilities/NumberUtils";
 import { pipe_ } from "../../Utilities/pipe";
 import { TextBox } from "../Universal/TextBox";
 import { AttributeModsListItem } from "./AttributeModsListItem";
 
-export interface AttributeModsProps {
-  attributes: List<Record<AttributeCombined>>
+interface Props {
   l10n: L10nRecord
+  attributes: List<Record<AttributeCombined>>
 }
 
-export function AttributeMods (props: AttributeModsProps) {
-  return (
-    <TextBox
-      className="attribute-mods"
-      label={translate (props.l10n) ("attributemodifiers")}
-      >
-      <table>
-        <thead>
-          <tr>
-            <th className="name"></th>
-            <th>{minus}3</th>
-            <th>{minus}2</th>
-            <th>{minus}1</th>
-            <th className="null">0</th>
-            <th>+1</th>
-            <th>+2</th>
-            <th>+3</th>
-          </tr>
-        </thead>
-        <tbody>
-          {pipe_ (
-            props.attributes,
-            map (e => <AttributeModsListItem attribute={e} key={AttributeCombinedA_.id (e)} />),
-            toArray
-          )}
-        </tbody>
-      </table>
-    </TextBox>
-  )
-}
+export const AttributeMods: React.FC<Props> = ({ attributes, l10n }) => (
+  <TextBox
+    className="attribute-mods"
+    label={translate (l10n) ("attributemodifiers")}
+    >
+    <table>
+      <thead>
+        <tr>
+          <th className="name" />
+          <th>{sign (-3)}</th>
+          <th>{sign (-2)}</th>
+          <th>{sign (-1)}</th>
+          <th className="null">{sign (0)}</th>
+          <th>{sign (1)}</th>
+          <th>{sign (2)}</th>
+          <th>{sign (3)}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {pipe_ (
+          attributes,
+          map (e => <AttributeModsListItem attribute={e} key={AttributeCombinedA_.id (e)} />),
+          toArray
+        )}
+      </tbody>
+    </table>
+  </TextBox>
+)

src/App/Views/Sheets/AttributeModsListItem.tsx

@@ -2,14 +2,14 @@ import * as React from "react";
 import { Record } from "../../../Data/Record";
 import { AttributeCombined, AttributeCombinedA_ } from "../../Models/View/AttributeCombined";
 
-interface AttributeModsListItemProps {
+interface Props {
   attribute: Record<AttributeCombined>
 }
 
-export function AttributeModsListItem (props: AttributeModsListItemProps) {
-  const id = AttributeCombinedA_.id (props.attribute)
-  const short = AttributeCombinedA_.short (props.attribute)
-  const value = AttributeCombinedA_.value (props.attribute)
+export const AttributeModsListItem: React.FC<Props> = ({ attribute }) => {
+  const id = AttributeCombinedA_.id (attribute)
+  const short = AttributeCombinedA_.short (attribute)
+  const value = AttributeCombinedA_.value (attribute)
 
   return (
     <tr className={id}>

src/App/Views/Sheets/BelongingsSheet/BelongingsSheet.tsx

@@ -23,7 +23,7 @@ import { SheetWrapper } from "../SheetWrapper";
 import { BelongingsSheetItemsColumn } from "./BelongingsSheetItemsColumn";
 import { BelongingsSheetPet } from "./BelongingsSheetPet";
 
-export interface BelongingsSheetProps {
+interface Props {
   attributes: List<Record<AttributeCombined>>
   items: Maybe<List<Record<ItemForView>>>
   l10n: L10nRecord
@@ -33,7 +33,7 @@ export interface BelongingsSheetProps {
   totalWeight: Maybe<number>
 }
 
-export function BelongingsSheet (props: BelongingsSheetProps) {
+export const BelongingsSheet: React.FC<Props> = props => {
   const {
     attributes,
     items: mitems,
@@ -41,6 +41,7 @@ export function BelongingsSheet (props: BelongingsSheetProps) {
     purse,
     totalPrice: maybeTotalPrice,
     totalWeight: maybeTotalWeight,
+    pet,
   } = props
 
   const strength =
@@ -193,7 +194,11 @@ export function BelongingsSheet (props: BelongingsSheetProps) {
           </TextBox>
         </div>
         <div className="fill" />
-        <BelongingsSheetPet {...props} />
+        <BelongingsSheetPet
+          attributes={attributes}
+          l10n={l10n}
+          pet={pet}
+          />
       </Sheet>
     </SheetWrapper>
   )

src/App/Views/Sheets/BelongingsSheet/BelongingsSheetItemsColumn.tsx

@@ -11,7 +11,7 @@ import { localizeNumber, localizeWeight, translate } from "../../../Utilities/I1
 import { pipe, pipe_ } from "../../../Utilities/pipe";
 import { renderMaybe, renderMaybeWith } from "../../../Utilities/ReactUtils";
 
-export interface BelongingsSheetItemsColumnProps {
+interface Props {
   columnSize: number
   items: List<Record<ItemForView>>
   l10n: L10nRecord
@@ -19,7 +19,7 @@ export interface BelongingsSheetItemsColumnProps {
 
 const IFVA = ItemForView.A
 
-export function BelongingsSheetItemsColumn (props: BelongingsSheetItemsColumnProps) {
+export const BelongingsSheetItemsColumn: React.FC<Props> = props => {
   const { columnSize, l10n, items } = props
 
   return (

src/App/Views/Sheets/BelongingsSheet/BelongingsSheetPet.tsx

@@ -15,13 +15,13 @@ import { renderMaybe, renderMaybeWith } from "../../../Utilities/ReactUtils";
 import { AvatarWrapper } from "../../Universal/AvatarWrapper";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface BelongingsSheetPetProps {
+interface Props {
   attributes: List<Record<AttributeCombined>>
   l10n: L10nRecord
   pet: Maybe<Record<Pet>>
 }
 
-export function BelongingsSheetPet (props: BelongingsSheetPetProps) {
+export const BelongingsSheetPet: React.FC<Props> = props => {
   const { attributes, l10n, pet: mpet } = props
 
   return (

src/App/Views/Sheets/CombatSheet/CombatSheet.tsx

@@ -27,7 +27,7 @@ import { CombatSheetSpecialAbilities } from "./CombatSheetSpecialAbilities";
 import { CombatSheetStates } from "./CombatSheetStates";
 import { CombatSheetTechniques } from "./CombatSheetTechniques";
 
-export interface CombatSheetProps {
+interface Props {
   armors: Maybe<List<Record<Armor>>>
   attributes: List<Record<AttributeCombined>>
   combatSpecialAbilities: Maybe<List<Record<ActiveActivatable<SpecialAbility>>>>
@@ -41,7 +41,7 @@ export interface CombatSheetProps {
   states: List<Record<NumIdName>>
 }
 
-export function CombatSheet (props: CombatSheetProps) {
+export const CombatSheet: React.FC<Props> = props => {
   const {
     armors,
     attributes,
@@ -60,7 +60,7 @@ export function CombatSheet (props: CombatSheetProps) {
 
   return (
     <SheetWrapper>
-      <Options/>
+      <Options />
       <Sheet
         id="combat-sheet"
         title={translate (l10n) ("combat")}

src/App/Views/Sheets/CombatSheet/CombatSheetArmor.tsx

@@ -14,14 +14,14 @@ import { pipe, pipe_ } from "../../../Utilities/pipe";
 import { renderMaybe, renderMaybeWith } from "../../../Utilities/ReactUtils";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface CombatSheetArmorProps {
+interface Props {
   armors: Maybe<List<Record<Armor>>>
   l10n: L10nRecord
 }
 
 const AA = Armor.A
 
-export function CombatSheetArmor (props: CombatSheetArmorProps) {
+export const CombatSheetArmor: React.FC<Props> = props => {
   const { l10n, armors: marmors } = props
 
   const movement_tag = translate (l10n) ("movement.short")

src/App/Views/Sheets/CombatSheet/CombatSheetArmorZones.tsx

@@ -11,14 +11,14 @@ import { localizeNumber, localizeWeight, translate } from "../../../Utilities/I1
 import { pipe, pipe_ } from "../../../Utilities/pipe";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface CombatSheetArmorZonesProps {
+interface Props {
   armorZones: Maybe<List<Record<HitZoneArmorForView>>>
   l10n: L10nRecord
 }
 
 const HZAFVA = HitZoneArmorForView.A
 
-export function CombatSheetArmorZones (props: CombatSheetArmorZonesProps) {
+export const CombatSheetArmorZones: React.FC<Props> = props => {
   const { l10n, armorZones: mhit_zone_armors } = props
 
   return (
@@ -81,16 +81,16 @@ export function CombatSheetArmorZones (props: CombatSheetArmorZonesProps) {
           {replicateR (2 - Maybe.sum (fmapF (mhit_zone_armors) (flength)))
                       (i => (
                         <tr key={`undefined-${i}`}>
-                          <td className="name"></td>
-                          <td className="zone"></td>
-                          <td className="zone"></td>
-                          <td className="zone"></td>
-                          <td className="zone"></td>
-                          <td className="zone"></td>
-                          <td className="zone"></td>
-                          <td className="enc"></td>
-                          <td className="add-penalties"></td>
-                          <td className="weight"></td>
+                          <td className="name" />
+                          <td className="zone" />
+                          <td className="zone" />
+                          <td className="zone" />
+                          <td className="zone" />
+                          <td className="zone" />
+                          <td className="zone" />
+                          <td className="enc" />
+                          <td className="add-penalties" />
+                          <td className="weight" />
                         </tr>
                       ))}
         </tbody>

src/App/Views/Sheets/CombatSheet/CombatSheetLifePoints.tsx

@@ -12,12 +12,12 @@ import { Box } from "../../Universal/Box";
 import { LabelBox } from "../../Universal/LabelBox";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface CombatSheetLifePointsProps {
+interface Props {
   derivedCharacteristics: List<Record<DerivedCharacteristic>>
   l10n: L10nRecord
 }
 
-export function CombatSheetLifePoints (props: CombatSheetLifePointsProps) {
+export const CombatSheetLifePoints: React.FC<Props> = props => {
   const { derivedCharacteristics, l10n } = props
 
   const lifePoints =
@@ -59,11 +59,11 @@ export function CombatSheetLifePoints (props: CombatSheetLifePointsProps) {
         {translate (l10n) ("pain3")}
       </div>
       <div className="tiers">
-        <Box>5</Box>
+        <Box>{5}</Box>
         {translate (l10n) ("pain4")}
       </div>
       <div className="tiers">
-        <Box>0</Box>
+        <Box>{0}</Box>
         {translate (l10n) ("dying")}
       </div>
     </TextBox>

src/App/Views/Sheets/CombatSheet/CombatSheetMeleeWeapons.tsx

@@ -15,14 +15,14 @@ import { pipe, pipe_ } from "../../../Utilities/pipe";
 import { renderMaybe, renderMaybeWith } from "../../../Utilities/ReactUtils";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface CombatSheetMeleeWeaponsProps {
+interface Props {
   l10n: L10nRecord
   meleeWeapons: Maybe<List<Record<MeleeWeapon>>>
 }
 
 const MWA = MeleeWeapon.A
 
-export function CombatSheetMeleeWeapons (props: CombatSheetMeleeWeaponsProps) {
+export const CombatSheetMeleeWeapons: React.FC<Props> = props => {
   const { l10n, meleeWeapons: mmelee_weapons } = props
 
   return (

src/App/Views/Sheets/CombatSheet/CombatSheetRangedWeapons.tsx

@@ -12,14 +12,14 @@ import { pipe, pipe_ } from "../../../Utilities/pipe";
 import { renderMaybe, renderMaybeWith } from "../../../Utilities/ReactUtils";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface CombatSheetRangedWeaponProps {
+interface Props {
   l10n: L10nRecord
   rangedWeapons: Maybe<List<Record<RangedWeapon>>>
 }
 
 const RWA = RangedWeapon.A
 
-export function CombatSheetRangedWeapons (props: CombatSheetRangedWeaponProps) {
+export const CombatSheetRangedWeapons: React.FC<Props> = props => {
   const { l10n, rangedWeapons: mranged_weapons } = props
 
   return (
@@ -103,16 +103,16 @@ export function CombatSheetRangedWeapons (props: CombatSheetRangedWeaponProps) {
           {replicateR (2 - Maybe.sum (fmapF (mranged_weapons) (flength)))
                       (i => (
                         <tr key={`undefined-${i}`}>
-                          <td className="name"></td>
-                          <td className="combat-technique"></td>
-                          <td className="reload-time"></td>
-                          <td className="damage"></td>
-                          <td className="ammunition"></td>
-                          <td className="range"></td>
-                          <td className="bf"></td>
-                          <td className="loss"></td>
-                          <td className="ranged"></td>
-                          <td className="weight"></td>
+                          <td className="name" />
+                          <td className="combat-technique" />
+                          <td className="reload-time" />
+                          <td className="damage" />
+                          <td className="ammunition" />
+                          <td className="range" />
+                          <td className="bf" />
+                          <td className="loss" />
+                          <td className="ranged" />
+                          <td className="weight" />
                         </tr>
                       ))}
         </tbody>

src/App/Views/Sheets/CombatSheet/CombatSheetShields.tsx

@@ -12,14 +12,14 @@ import { pipe, pipe_ } from "../../../Utilities/pipe";
 import { renderMaybeWith } from "../../../Utilities/ReactUtils";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface CombatSheetShieldsProps {
+interface Props {
   l10n: L10nRecord
   shieldsAndParryingWeapons: Maybe<List<Record<ShieldOrParryingWeapon>>>
 }
 
 const SOPWA = ShieldOrParryingWeapon.A
 
-export function CombatSheetShields (props: CombatSheetShieldsProps) {
+export const CombatSheetShields: React.FC<Props> = props => {
   const { l10n, shieldsAndParryingWeapons: msh_or_parry_weapons } = props
 
   return (
@@ -59,7 +59,9 @@ export function CombatSheetShields (props: CombatSheetShieldsProps) {
                     {renderMaybeWith (toRoman) (SOPWA.loss (e))}
                   </td>
                   <td className="mod">
-                    {sign (Maybe.sum (SOPWA.atMod (e)))}/{sign (Maybe.sum (SOPWA.paMod (e)))}
+                    {sign (Maybe.sum (SOPWA.atMod (e)))}
+                    {"/"}
+                    {sign (Maybe.sum (SOPWA.paMod (e)))}
                   </td>
                   <td className="weight">
                     {pipe_ (
@@ -80,12 +82,12 @@ export function CombatSheetShields (props: CombatSheetShieldsProps) {
           {replicateR (2 - Maybe.sum (fmapF (msh_or_parry_weapons) (flength)))
                       (i => (
                         <tr key={`undefined-${i}`}>
-                          <td className="name"></td>
-                          <td className="str"></td>
-                          <td className="bf"></td>
-                          <td className="loss"></td>
-                          <td className="mod"></td>
-                          <td className="weight"></td>
+                          <td className="name" />
+                          <td className="str" />
+                          <td className="bf" />
+                          <td className="loss" />
+                          <td className="mod" />
+                          <td className="weight" />
                         </tr>
                       ))}
         </tbody>

src/App/Views/Sheets/CombatSheet/CombatSheetSpecialAbilities.tsx

@@ -9,12 +9,12 @@ import { compressList } from "../../../Utilities/Activatable/activatableNameUtil
 import { translate } from "../../../Utilities/I18n";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface CombatSheetSpecialAbilitiesProps {
+interface Props {
   combatSpecialAbilities: Maybe<List<Record<ActiveActivatable<SpecialAbility>>>>
   l10n: L10nRecord
 }
 
-export function CombatSheetSpecialAbilities (props: CombatSheetSpecialAbilitiesProps) {
+export const CombatSheetSpecialAbilities: React.FC<Props> = props => {
   const { combatSpecialAbilities: maybeCombatSpecialAbilities, l10n } = props
 
   return (

src/App/Views/Sheets/CombatSheet/CombatSheetStates.tsx

@@ -8,13 +8,13 @@ import { translate } from "../../../Utilities/I18n";
 import { toRoman } from "../../../Utilities/NumberUtils";
 import { pipe_ } from "../../../Utilities/pipe";
 
-export interface CombatSheetStatesProps {
+interface Props {
   l10n: L10nRecord
   conditions: List<Record<NumIdName>>
   states: List<Record<NumIdName>>
 }
 
-export function CombatSheetStates (props: CombatSheetStatesProps) {
+export const CombatSheetStates: React.FC<Props> = props => {
   const { l10n, conditions, states } = props
 
   const statesSplit = splitAt (9) (states)
@@ -35,16 +35,16 @@ export function CombatSheetStates (props: CombatSheetStatesProps) {
             <div key={NumIdName.A.id (e)}>
               <span>{NumIdName.A.name (e)}</span>
               <div>
-                <div></div>
+                <div />
               </div>
               <div>
-                <div></div>
+                <div />
               </div>
               <div>
-                <div></div>
+                <div />
               </div>
               <div>
-                <div></div>
+                <div />
               </div>
             </div>
           )),
@@ -62,7 +62,7 @@ export function CombatSheetStates (props: CombatSheetStatesProps) {
             <div key={NumIdName.A.id (e)}>
               <span>{NumIdName.A.name (e)}</span>
               <div>
-                <div></div>
+                <div />
               </div>
             </div>
           )),
@@ -77,7 +77,7 @@ export function CombatSheetStates (props: CombatSheetStatesProps) {
             <div key={NumIdName.A.id (e)}>
               <span>{NumIdName.A.name (e)}</span>
               <div>
-                <div></div>
+                <div />
               </div>
             </div>
           )),

src/App/Views/Sheets/CombatSheet/CombatSheetTechniques.tsx

@@ -13,7 +13,7 @@ import { translate } from "../../../Utilities/I18n";
 import { pipe, pipe_ } from "../../../Utilities/pipe";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface CombatSheetTechniquesProps {
+interface Props {
   attributes: List<Record<AttributeCombined>>
   combatTechniques: Maybe<List<Record<CombatTechniqueWithAttackParryBase>>>
   l10n: L10nRecord
@@ -22,7 +22,7 @@ export interface CombatSheetTechniquesProps {
 const CTWAPBA = CombatTechniqueWithAttackParryBase.A
 const CTWAPBA_ = CombatTechniqueWithAttackParryBaseA_
 
-export function CombatSheetTechniques (props: CombatSheetTechniquesProps) {
+export const CombatSheetTechniques: React.FC<Props> = props => {
   const { attributes, combatTechniques: mcombat_techniques, l10n } = props
 
   return (

src/App/Views/Sheets/CombatSheet/CombatSheetZones.tsx

@@ -27,7 +27,7 @@ import { CombatSheetSpecialAbilities } from "./CombatSheetSpecialAbilities";
 import { CombatSheetStates } from "./CombatSheetStates";
 import { CombatSheetTechniques } from "./CombatSheetTechniques";
 
-export interface CombatSheetZonesProps {
+interface Props {
   armorZones: Maybe<List<Record<HitZoneArmorForView>>>
   attributes: List<Record<AttributeCombined>>
   combatSpecialAbilities: Maybe<List<Record<ActiveActivatable<SpecialAbility>>>>
@@ -41,7 +41,7 @@ export interface CombatSheetZonesProps {
   states: List<Record<NumIdName>>
 }
 
-export function CombatSheetZones (props: CombatSheetZonesProps) {
+export const CombatSheetZones: React.FC<Props> = props => {
   const {
     armorZones,
     attributes,
@@ -60,7 +60,7 @@ export function CombatSheetZones (props: CombatSheetZonesProps) {
 
   return (
     <SheetWrapper>
-      <Options/>
+      <Options />
       <Sheet
         id="combat-sheet-zones"
         title={translate (l10n) ("combat")}

src/App/Views/Sheets/LiturgicalChantsSheet/LiturgicalChantsSheet.tsx

@@ -24,7 +24,7 @@ import { LiturgicalChantsSheetLiturgicalChants } from "./LiturgicalChantsSheetLi
 import { LiturgicalChantsSheetSpecialAbilities } from "./LiturgicalChantsSheetSpecialAbilities";
 import { LiturgicalChantsSheetTraditionsAspects } from "./LiturgicalChantsSheetTraditionsAspects";
 
-export interface LiturgicalChantsSheetProps {
+interface Props {
   aspects: Maybe<string>
   attributes: List<Record<AttributeCombined>>
   blessedPrimary: Maybe<string>
@@ -38,10 +38,17 @@ export interface LiturgicalChantsSheetProps {
   switchAttributeValueVisibility (): void
 }
 
-export function LiturgicalChantsSheet (props: LiturgicalChantsSheetProps) {
+export const LiturgicalChantsSheet: React.FC<Props> = props => {
   const {
+    aspects,
+    attributes,
+    blessedPrimary,
+    blessedSpecialAbilities,
+    blessedTradition,
+    blessings,
     checkAttributeValueVisibility,
     derivedCharacteristics,
+    liturgicalChants,
     l10n,
     switchAttributeValueVisibility,
   } = props
@@ -74,17 +81,37 @@ export function LiturgicalChantsSheet (props: LiturgicalChantsSheetProps) {
         </Checkbox>
       </Options>
       <Sheet
-        {...props}
         id="liturgies-sheet"
         title={translate (l10n) ("liturgicalchants")}
         addHeaderInfo={addHeader}
+        l10n={l10n}
+        attributes={attributes}
         >
         <div className="all">
-          <LiturgicalChantsSheetLiturgicalChants {...props} />
-          <AttributeMods {...props} />
-          <LiturgicalChantsSheetTraditionsAspects {...props} />
-          <LiturgicalChantsSheetSpecialAbilities {...props} />
-          <LiturgicalChantsSheetBlessings {...props} />
+          <LiturgicalChantsSheetLiturgicalChants
+            attributes={attributes}
+            checkAttributeValueVisibility={checkAttributeValueVisibility}
+            liturgicalChants={liturgicalChants}
+            l10n={l10n}
+            />
+          <AttributeMods
+            l10n={l10n}
+            attributes={attributes}
+            />
+          <LiturgicalChantsSheetTraditionsAspects
+            l10n={l10n}
+            aspects={aspects}
+            blessedPrimary={blessedPrimary}
+            blessedTradition={blessedTradition}
+            />
+          <LiturgicalChantsSheetSpecialAbilities
+            l10n={l10n}
+            blessedSpecialAbilities={blessedSpecialAbilities}
+            />
+          <LiturgicalChantsSheetBlessings
+            l10n={l10n}
+            blessings={blessings}
+            />
         </div>
       </Sheet>
     </SheetWrapper>

src/App/Views/Sheets/LiturgicalChantsSheet/LiturgicalChantsSheetBlessings.tsx

@@ -10,12 +10,12 @@ import { pipe, pipe_ } from "../../../Utilities/pipe";
 import { sortStrings } from "../../../Utilities/sortBy";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface LiturgicalChantSheetBlessingsProps {
-  blessings: Maybe<List<Record<BlessingCombined>>>
+interface Props {
   l10n: L10nRecord
+  blessings: Maybe<List<Record<BlessingCombined>>>
 }
 
-export function LiturgicalChantsSheetBlessings (props: LiturgicalChantSheetBlessingsProps) {
+export const LiturgicalChantsSheetBlessings: React.FC<Props> = props => {
   const { blessings, l10n } = props
 
   return (

src/App/Views/Sheets/LiturgicalChantsSheet/LiturgicalChantsSheetLiturgicalChants.tsx

@@ -21,7 +21,7 @@ import { sortStrings } from "../../../Utilities/sortBy";
 import { getCheckModStr } from "../../InlineWiki/Elements/WikiSkillCheck";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface LiturgicalChantsSheetLiturgicalChantsProps {
+interface Props {
   attributes: List<Record<AttributeCombined>>
   checkAttributeValueVisibility: boolean
   liturgicalChants: Maybe<List<Record<LiturgicalChantWithRequirements>>>
@@ -30,9 +30,7 @@ export interface LiturgicalChantsSheetLiturgicalChantsProps {
 
 const LCWRA_ = LiturgicalChantWithRequirementsA_
 
-export function LiturgicalChantsSheetLiturgicalChants (
-  props: LiturgicalChantsSheetLiturgicalChantsProps
-) {
+export const LiturgicalChantsSheetLiturgicalChants: React.FC<Props> = props => {
   const {
     attributes,
     checkAttributeValueVisibility,

src/App/Views/Sheets/LiturgicalChantsSheet/LiturgicalChantsSheetSpecialAbilities.tsx

@@ -9,14 +9,12 @@ import { compressList } from "../../../Utilities/Activatable/activatableNameUtil
 import { translate } from "../../../Utilities/I18n";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface LiturgicalChantsSheetSpecialAbilitiesProps {
-  blessedSpecialAbilities: Maybe<List<Record<ActiveActivatable<SpecialAbility>>>>
+interface Props {
   l10n: L10nRecord
+  blessedSpecialAbilities: Maybe<List<Record<ActiveActivatable<SpecialAbility>>>>
 }
 
-export function LiturgicalChantsSheetSpecialAbilities (
-  props: LiturgicalChantsSheetSpecialAbilitiesProps
-) {
+export const LiturgicalChantsSheetSpecialAbilities: React.FC<Props> = props => {
   const { l10n, blessedSpecialAbilities: maybeBlessedSpecialAbilities } = props
 
   return (

src/App/Views/Sheets/LiturgicalChantsSheet/LiturgicalChantsSheetTraditionsAspects.tsx

@@ -4,16 +4,14 @@ import { L10nRecord } from "../../../Models/Wiki/L10n";
 import { translate } from "../../../Utilities/I18n";
 import { renderMaybe } from "../../../Utilities/ReactUtils";
 
-export interface LiturgicalChantsSheetTraditionsAspectsProps {
+interface Props {
+  l10n: L10nRecord
   aspects: Maybe<string>
   blessedPrimary: Maybe<string>
   blessedTradition: Maybe<string>
-  l10n: L10nRecord
 }
 
-export function LiturgicalChantsSheetTraditionsAspects (
-  props: LiturgicalChantsSheetTraditionsAspectsProps
-) {
+export const LiturgicalChantsSheetTraditionsAspects: React.FC<Props> = props => {
   const { aspects, blessedPrimary, blessedTradition, l10n } = props
 
   return (

src/App/Views/Sheets/MainSheet/MainSheet.tsx

@@ -27,7 +27,7 @@ import { SheetWrapper } from "../SheetWrapper";
 import { MainSheetAttributes } from "./MainSheetAttributes";
 import { MainSheetPersonalData } from "./MainSheetPersonalData";
 
-export interface MainSheetProps {
+interface Props {
   advantagesActive: Maybe<List<Record<ActiveActivatable<Advantage>>>>
   ap: Maybe<Record<AdventurePointsCategories>>
   attributes: List<Record<AttributeCombined>>
@@ -47,7 +47,7 @@ export interface MainSheetProps {
   printToPDF (): void
 }
 
-export function MainSheet (props: MainSheetProps) {
+export const MainSheet: React.FC<Props> = props => {
   const {
     advantagesActive: maybeAdvantagesActive,
     ap,

src/App/Views/Sheets/MainSheet/MainSheetAttributes.tsx

@@ -12,7 +12,7 @@ import { pipe_ } from "../../../Utilities/pipe";
 import { MainSheetAttributesItem } from "./MainSheetAttributesItem";
 import { MainSheetFatePoints } from "./MainSheetFatePoints";
 
-export interface MainSheetAttributesProps {
+interface Props {
   attributes: List<Record<DerivedCharacteristic>>
   fatePointsModifier: number
   l10n: L10nRecord
@@ -21,7 +21,7 @@ export interface MainSheetAttributesProps {
 
 const DCA = DerivedCharacteristic.A
 
-export function MainSheetAttributes (props: MainSheetAttributesProps) {
+export const MainSheetAttributes: React.FC<Props> = props => {
   const { attributes, fatePointsModifier, race, l10n } = props
 
   return (

src/App/Views/Sheets/MainSheet/MainSheetAttributesItem.tsx

@@ -7,7 +7,7 @@ import { classListMaybe } from "../../../Utilities/CSS";
 import { pipe, pipe_ } from "../../../Utilities/pipe";
 import { renderMaybeWith } from "../../../Utilities/ReactUtils";
 
-export interface MainSheetAttributesItemProps {
+interface Props {
   add: Maybe<number>
   calc: string
   empty: Maybe<boolean>
@@ -19,7 +19,7 @@ export interface MainSheetAttributesItemProps {
   subLabel: Maybe<string>
 }
 
-export function MainSheetAttributesItem (props: MainSheetAttributesItemProps) {
+export const MainSheetAttributesItem: React.FC<Props> = props => {
   const {
     add,
     base,
@@ -37,7 +37,13 @@ export function MainSheetAttributesItem (props: MainSheetAttributesItemProps) {
       <div className="label">
         <h3>{label}</h3>
         <span className="calc">{calc}</span>
-        {maybeRNull ((str: string) => <span className="sub">{str}:</span>) (subLabel)}
+        {maybeRNull ((str: string) => (
+                      <span className="sub">
+                        {str}
+                        {":"}
+                      </span>
+                    ))
+                    (subLabel)}
       </div>
       <div className="values">
         <div className="base">

src/App/Views/Sheets/MainSheet/MainSheetFatePoints.tsx

@@ -5,12 +5,12 @@ import { translate } from "../../../Utilities/I18n";
 import { LabelBox } from "../../Universal/LabelBox";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface SkillsSheetLanguagesProps {
+interface Props {
   fatePointsModifier: number
   l10n: L10nRecord
 }
 
-export function MainSheetFatePoints (props: SkillsSheetLanguagesProps) {
+export const MainSheetFatePoints: React.FC<Props> = props => {
   const { fatePointsModifier, l10n } = props
 
   return (

src/App/Views/Sheets/MainSheet/MainSheetPersonalData.tsx

@@ -20,7 +20,7 @@ import { Plain } from "../../Universal/Plain";
 
 const PDA = PersonalData.A
 
-export interface MainSheetPersonalDataProps {
+interface Props {
   ap: Maybe<Record<AdventurePointsCategories>>
   avatar: Maybe<string>
   culture: Maybe<Record<Culture>>
@@ -36,7 +36,7 @@ export interface MainSheetPersonalDataProps {
   socialstatusTags: List<string>
 }
 
-export function MainSheetPersonalData (props: MainSheetPersonalDataProps) {
+export const MainSheetPersonalData: React.FC<Props> = props => {
   const {
     ap,
     avatar,

src/App/Views/Sheets/SheetHeader.tsx

@@ -22,14 +22,14 @@ export const HeaderValue =
                 value: Nothing,
               })
 
-export interface SheetHeaderProps {
+interface Props {
   add?: List<Record<HeaderValue>>
   attributes: List<Record<AttributeCombined>>
   l10n: L10nRecord
   title: string
 }
 
-export function SheetHeader (props: SheetHeaderProps) {
+export const SheetHeader: React.FC<Props> = props => {
   const { add = List<Record<HeaderValue>> (), attributes, l10n, title } = props
 
   const list: List<Record<HeaderValue>> =

src/App/Views/Sheets/SheetHeaderAttribute.tsx

@@ -4,17 +4,15 @@ import { Just, Maybe } from "../../../Data/Maybe";
 import { classListMaybe } from "../../Utilities/CSS";
 import { renderMaybe } from "../../Utilities/ReactUtils";
 
-export interface SheetHeaderAttributeProps {
+interface Props {
   id: string
   label: string
   value: Maybe<number | string>
 }
 
-export function SheetHeaderAttribute (props: SheetHeaderAttributeProps) {
-  return (
-    <div className={classListMaybe (List (Just ("sheet-attribute"), Maybe (props.id)))}>
-      <span className="label">{props.label}</span>
-      <span className="value">{renderMaybe (props.value)}</span>
-    </div>
-  )
-}
+export const SheetHeaderAttribute: React.FC<Props> = ({ id, label, value }) => (
+  <div className={classListMaybe (List (Just ("sheet-attribute"), Maybe (id)))}>
+    <span className="label">{label}</span>
+    <span className="value">{renderMaybe (value)}</span>
+  </div>
+)

src/App/Views/Sheets/SheetOptions.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 
-export interface SheetOptionsProps {
+interface Props {
   children?: React.ReactNode
 }
 
-export function SheetOptions (props: SheetOptionsProps) {
+export const SheetOptions: React.FC<Props> = props => {
   const { children } = props
 
   return (

src/App/Views/Sheets/SheetWrapper.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 
-export interface SheetWrapperProps {
+interface Props {
   children?: React.ReactNode
 }
 
-export function SheetWrapper (props: SheetWrapperProps) {
+export const SheetWrapper: React.FC<Props> = props => {
   const { children } = props
 
   return (

src/App/Views/Sheets/Sheets.tsx

@@ -115,12 +115,12 @@ export interface SheetsDispatchProps {
   switchAttributeValueVisibility (): void
 }
 
-export type SheetsProps = SheetsStateProps & SheetsDispatchProps & SheetsOwnProps
+type Props = SheetsStateProps & SheetsDispatchProps & SheetsOwnProps
 
 const HA = HeroModel.A
 const RA = Rules.A
 
-export function Sheets (props: SheetsProps) {
+export const Sheets: React.FC<Props> = props => {
   const {
     derivedCharacteristics,
     books,

src/App/Views/Sheets/SkillsSheet/SkillsSheet.tsx

@@ -21,7 +21,7 @@ import { SkillsSheetRoutineChecks } from "./SkillsSheetRoutineChecks";
 import { SkillsSheetScripts } from "./SkillsSheetScripts";
 import { SkillsSheetSkills } from "./SkillsSheetSkills";
 
-export interface SkillsSheetProps {
+interface Props {
   attributes: List<Record<AttributeCombined>>
   checkAttributeValueVisibility: boolean
   languagesStateEntry: Maybe<Record<ActivatableDependent>>
@@ -34,7 +34,7 @@ export interface SkillsSheetProps {
   switchAttributeValueVisibility (): void
 }
 
-export function SkillsSheet (props: SkillsSheetProps) {
+export const SkillsSheet: React.FC<Props> = props => {
   const {
     attributes,
     checkAttributeValueVisibility,

src/App/Views/Sheets/SkillsSheet/SkillsSheetLanguages.tsx

@@ -17,7 +17,7 @@ import { pipe_ } from "../../../Utilities/pipe";
 import { comparingR, sortByMulti } from "../../../Utilities/sortBy";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface SkillsSheetLanguagesProps {
+interface Props {
   languagesStateEntry: Maybe<Record<ActivatableDependent>>
   languagesWikiEntry: Maybe<Record<SpecialAbility>>
   l10n: L10nRecord
@@ -37,7 +37,7 @@ const IdNameLevel =
                 level: 0,
               })
 
-export function SkillsSheetLanguages (props: SkillsSheetLanguagesProps) {
+export const SkillsSheetLanguages: React.FC<Props> = props => {
   const {
     languagesStateEntry: maybeLanguagesStateEntry,
     languagesWikiEntry: maybeLanguagesWikiEntry,

src/App/Views/Sheets/SkillsSheet/SkillsSheetQualityLevels.tsx

@@ -4,11 +4,11 @@ import { ndash } from "../../../Utilities/Chars";
 import { translate } from "../../../Utilities/I18n";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface SkillsSheetQualityLevelsProps {
+interface Props {
   l10n: L10nRecord
 }
 
-export const SkillsSheetQualityLevels = ({ l10n }: SkillsSheetQualityLevelsProps) => (
+export const SkillsSheetQualityLevels: React.FC<Props> = ({ l10n }) => (
   <TextBox
     className="quality-levels"
     label={translate (l10n) ("qualitylevels")}

src/App/Views/Sheets/SkillsSheet/SkillsSheetRoutineChecks.tsx

@@ -2,13 +2,14 @@ import * as React from "react";
 import { L10nRecord } from "../../../Models/Wiki/L10n";
 import { minus } from "../../../Utilities/Chars";
 import { translate } from "../../../Utilities/I18n";
+import { sign, signNeg } from "../../../Utilities/NumberUtils";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface SkillsSheetRoutineChecksProps {
+interface Props {
   l10n: L10nRecord
 }
 
-export const SkillsSheetRoutineChecks = ({ l10n }: SkillsSheetRoutineChecksProps) => (
+export const SkillsSheetRoutineChecks: React.FC<Props> = ({ l10n }) => (
   <TextBox
     className="routine-checks"
     label={translate (l10n) ("routinechecks")}
@@ -44,28 +45,28 @@ export const SkillsSheetRoutineChecks = ({ l10n }: SkillsSheetRoutineChecksProps
       </thead>
       <tbody>
         <tr>
-          <td>{translate (l10n) ("from")} +3</td>
-          <td>1</td>
-          <td>{minus}1</td>
-          <td>13</td>
+          <td>{translate (l10n) ("from")}</td>
+          <td>{1}</td>
+          <td>{signNeg (-1)}</td>
+          <td>{13}</td>
         </tr>
         <tr>
-          <td>+2</td>
-          <td>4</td>
-          <td>{minus}2</td>
-          <td>16</td>
+          <td>{sign (2)}</td>
+          <td>{4}</td>
+          <td>{sign (-2)}</td>
+          <td>{16}</td>
         </tr>
         <tr>
-          <td>+1</td>
-          <td>7</td>
-          <td>{minus}3</td>
-          <td>19</td>
+          <td>{sign (1)}</td>
+          <td>{7}</td>
+          <td>{sign (-3)}</td>
+          <td>{19}</td>
         </tr>
         <tr>
-          <td>+/{minus}0</td>
-          <td>10</td>
-          <td></td>
-          <td></td>
+          <td>{`+/${minus}0`}</td>
+          <td>{10}</td>
+          <td />
+          <td />
         </tr>
       </tbody>
     </table>

src/App/Views/Sheets/SkillsSheet/SkillsSheetScripts.tsx

@@ -14,13 +14,13 @@ import { pipe_ } from "../../../Utilities/pipe";
 import { sortStrings } from "../../../Utilities/sortBy";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface SkillsSheetScriptsProps {
+interface Props {
   l10n: L10nRecord
   scriptsStateEntry: Maybe<Record<ActivatableDependent>>
   scriptsWikiEntry: Maybe<Record<SpecialAbility>>
 }
 
-export function SkillsSheetScripts (props: SkillsSheetScriptsProps) {
+export const SkillsSheetScripts: React.FC<Props> = props => {
   const {
     l10n,
     scriptsStateEntry: maybeScriptsStateEntry,

src/App/Views/Sheets/SkillsSheet/SkillsSheetSkills.tsx

@@ -13,7 +13,7 @@ import { TextBox } from "../../Universal/TextBox";
 import { iterateGroupHeaders } from "./SkillsSheetSkillsGroups";
 import { iterateList } from "./SkillsSheetSkillsIterate";
 
-export interface SkillsSheetSkillsProps {
+interface Props {
   attributes: List<Record<AttributeCombined>>
   checkAttributeValueVisibility: boolean
   l10n: L10nRecord
@@ -23,17 +23,17 @@ export interface SkillsSheetSkillsProps {
 
 const EmptyRow = () => (
   <tr>
-    <td/>
-    <td/>
-    <td/>
-    <td/>
-    <td/>
-    <td/>
-    <td/>
+    <td />
+    <td />
+    <td />
+    <td />
+    <td />
+    <td />
+    <td />
   </tr>
 )
 
-export function SkillsSheetSkills (props: SkillsSheetSkillsProps) {
+export const SkillsSheetSkills: React.FC<Props> = props => {
   const { attributes, checkAttributeValueVisibility, l10n, skillsByGroup, skillGroupPages } = props
 
   const groupHeaders = iterateGroupHeaders (l10n)

src/App/Views/Sheets/SpellsSheet/SpellsSheet.tsx

@@ -40,9 +40,16 @@ export interface SpellsSheetProps {
 
 export function SpellsSheet (props: SpellsSheetProps) {
   const {
+    attributes,
+    cantrips,
     checkAttributeValueVisibility,
     derivedCharacteristics,
     l10n,
+    magicalPrimary,
+    magicalSpecialAbilities,
+    magicalTradition,
+    properties,
+    spells,
     switchAttributeValueVisibility,
   } = props
 
@@ -74,17 +81,37 @@ export function SpellsSheet (props: SpellsSheetProps) {
         </Checkbox>
       </Options>
       <Sheet
-        {...props}
         id="spells-sheet"
         title={translate (l10n) ("spellsandrituals")}
         addHeaderInfo={addHeader}
+        l10n={l10n}
+        attributes={attributes}
         >
         <div className="all">
-          <SpellsSheetSpells {...props} />
-          <AttributeMods {...props} />
-          <SpellsSheetTraditionsProperties {...props} />
-          <SpellsSheetSpecialAbilities {...props} />
-          <SpellsSheetCantrips {...props} />
+          <SpellsSheetSpells
+            l10n={l10n}
+            attributes={attributes}
+            checkAttributeValueVisibility={checkAttributeValueVisibility}
+            spells={spells}
+            />
+          <AttributeMods
+            l10n={l10n}
+            attributes={attributes}
+            />
+          <SpellsSheetTraditionsProperties
+            l10n={l10n}
+            magicalPrimary={magicalPrimary}
+            magicalTradition={magicalTradition}
+            properties={properties}
+            />
+          <SpellsSheetSpecialAbilities
+            l10n={l10n}
+            magicalSpecialAbilities={magicalSpecialAbilities}
+            />
+          <SpellsSheetCantrips
+            l10n={l10n}
+            cantrips={cantrips}
+            />
         </div>
       </Sheet>
     </SheetWrapper>

src/App/Views/Sheets/SpellsSheet/SpellsSheetCantrips.tsx

@@ -10,12 +10,12 @@ import { pipe, pipe_ } from "../../../Utilities/pipe";
 import { sortStrings } from "../../../Utilities/sortBy";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface SpellsSheetCantripsProps {
+interface Props {
   cantrips: Maybe<List<Record<CantripCombined>>>
   l10n: L10nRecord
 }
 
-export function SpellsSheetCantrips (props: SpellsSheetCantripsProps) {
+export const SpellsSheetCantrips: React.FC<Props> = props => {
   const { cantrips, l10n } = props
 
   return (

src/App/Views/Sheets/SpellsSheet/SpellsSheetSpecialAbilities.tsx

@@ -9,12 +9,12 @@ import { compressList } from "../../../Utilities/Activatable/activatableNameUtil
 import { translate } from "../../../Utilities/I18n";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface SpellsSheetSpecialAbilitiesProps {
+interface Props {
   l10n: L10nRecord
   magicalSpecialAbilities: Maybe<List<Record<ActiveActivatable<SpecialAbility>>>>
 }
 
-export function SpellsSheetSpecialAbilities (props: SpellsSheetSpecialAbilitiesProps) {
+export const SpellsSheetSpecialAbilities: React.FC<Props> = props => {
   const { l10n, magicalSpecialAbilities: maybeMagicalSpecialAbilities } = props
 
   return (

src/App/Views/Sheets/SpellsSheet/SpellsSheetSpells.tsx

@@ -18,7 +18,7 @@ import { getAttributeStringByIdList } from "../../../Utilities/sheetUtils";
 import { getCheckModStr } from "../../InlineWiki/Elements/WikiSkillCheck";
 import { TextBox } from "../../Universal/TextBox";
 
-export interface SpellsSheetSpellsProps {
+interface Props {
   attributes: List<Record<AttributeCombined>>
   checkAttributeValueVisibility: boolean
   l10n: L10nRecord
@@ -27,7 +27,7 @@ export interface SpellsSheetSpellsProps {
 
 const SWRA_ = SpellWithRequirementsA_
 
-export function SpellsSheetSpells (props: SpellsSheetSpellsProps) {
+export const SpellsSheetSpells: React.FC<Props> = props => {
   const {
     attributes,
     checkAttributeValueVisibility,
@@ -145,8 +145,8 @@ export function SpellsSheetSpells (props: SpellsSheetSpellsProps) {
                       </Textfit>
                     </td>
                     <td className="ic">{getICName (SWRA_.ic (e))}</td>
-                    <td className="effect"></td>
-                    <td className="ref"></td>
+                    <td className="effect" />
+                    <td className="ref" />
                   </tr>
                 )
               }),
@@ -157,17 +157,17 @@ export function SpellsSheetSpells (props: SpellsSheetSpellsProps) {
           {replicateR (21 - Maybe.sum (fmapF (maybeSpells) (flength)))
                       (i => (
                         <tr key={`undefined-${i}`}>
-                          <td className="name"></td>
-                          <td className="check"></td>
-                          <td className="value"></td>
-                          <td className="cost"></td>
-                          <td className="cast-time"></td>
-                          <td className="range"></td>
-                          <td className="duration"></td>
-                          <td className="aspect"></td>
-                          <td className="ic"></td>
-                          <td className="effect"></td>
-                          <td className="ref"></td>
+                          <td className="name" />
+                          <td className="check" />
+                          <td className="value" />
+                          <td className="cost" />
+                          <td className="cast-time" />
+                          <td className="range" />
+                          <td className="duration" />
+                          <td className="aspect" />
+                          <td className="ic" />
+                          <td className="effect" />
+                          <td className="ref" />
                         </tr>
                       ))}
         </tbody>

src/App/Views/Sheets/SpellsSheet/SpellsSheetTraditionsProperties.tsx

@@ -5,14 +5,14 @@ import { L10nRecord } from "../../../Models/Wiki/L10n";
 import { translate } from "../../../Utilities/I18n";
 import { renderMaybe } from "../../../Utilities/ReactUtils";
 
-export interface SpellsSheetTraditionsPropertiesProps {
+interface Props {
   l10n: L10nRecord
   magicalPrimary: List<string>
   magicalTradition: string
   properties: Maybe<string>
 }
 
-export function SpellsSheetTraditionsProperties (props: SpellsSheetTraditionsPropertiesProps) {
+export const SpellsSheetTraditionsProperties: React.FC<Props> = props => {
   const { magicalPrimary, magicalTradition, properties, l10n } = props
 
   return (

src/App/Views/Skills/CombatTechniquesListItem.tsx

@@ -1,86 +0,0 @@
-import * as React from "react";
-import { equals } from "../../../Data/Eq";
-import { fmapF } from "../../../Data/Functor";
-import { find, flength, intercalate, List } from "../../../Data/List";
-import { fromMaybe, listToMaybe, mapMaybe, Maybe } from "../../../Data/Maybe";
-import { Record } from "../../../Data/Record";
-import { AttributeCombined, AttributeCombinedA_ } from "../../Models/View/AttributeCombined";
-import { CombatTechniqueWithRequirements, CombatTechniqueWithRequirementsA_ } from "../../Models/View/CombatTechniqueWithRequirements";
-import { L10nRecord } from "../../Models/Wiki/L10n";
-import { ndash } from "../../Utilities/Chars";
-import { translate } from "../../Utilities/I18n";
-import { pipe, pipe_ } from "../../Utilities/pipe";
-import { SkillListItem } from "../Skills/SkillListItem";
-
-const ACA_ = AttributeCombinedA_
-const CTWRA = CombatTechniqueWithRequirements.A
-const CTWRA_ = CombatTechniqueWithRequirementsA_
-
-export interface CombatTechniqueListItemProps {
-  l10n: L10nRecord
-  attributes: List<Record<AttributeCombined>>
-  combatTechnique: Record<CombatTechniqueWithRequirements>
-  currentInfoId: Maybe<string>
-  isRemovingEnabled: boolean
-  addPoint: (id: string) => void
-  removePoint: (id: string) => void
-  selectForInfo: (id: string) => void
-}
-
-export const CombatTechniqueListItem: React.FC<CombatTechniqueListItemProps> = props => {
-  const {
-    attributes,
-    currentInfoId,
-    isRemovingEnabled,
-    l10n,
-    combatTechnique: ct,
-    selectForInfo,
-    addPoint,
-    removePoint,
-  } = props
-
-  const primary =
-    pipe_ (
-      CTWRA_.primary (ct),
-      mapMaybe ((id: string) => fmapF (find (pipe (ACA_.id, equals (id)))
-                                            (attributes))
-                                      (ACA_.short)),
-      intercalate ("/")
-    )
-
-  const customClassName =
-    flength (CTWRA_.primary (ct)) > 1
-      ? "ATTR_6_8"
-      : fromMaybe ("") (listToMaybe (CTWRA_.primary (ct)))
-
-  const primaryClassName = `primary ${customClassName}`
-
-  return (
-    <SkillListItem
-      id={CTWRA_.id (ct)}
-      name={CTWRA_.name (ct)}
-      sr={CTWRA_.value (ct)}
-      ic={CTWRA_.ic (ct)}
-      checkDisabled
-      addPoint={addPoint}
-      addDisabled={CTWRA_.value (ct) >= CTWRA.max (ct)}
-      removePoint={removePoint}
-      removeDisabled={!isRemovingEnabled || CTWRA_.value (ct) <= CTWRA.min (ct)}
-      addValues={List (
-        { className: primaryClassName, value: primary },
-        { className: "at", value: CTWRA.at (ct) },
-        { className: "atpa" },
-        {
-          className: "pa",
-          value: fromMaybe<string | number> (ndash) (CTWRA.pa (ct)),
-        }
-      )}
-      attributes={attributes}
-      l10n={l10n}
-      selectForInfo={selectForInfo}
-      groupIndex={CTWRA_.gr (ct)}
-      groupList={translate (l10n) ("combattechniquegroups")}
-      selectedForInfo={currentInfoId}
-      />
-  )
-}