Transformed missing important files to TypeScript

.babelrc

@@ -1,16 +1,16 @@
 {
 	"presets": [
-		"react",
-		"stage-1"
+		"react"
+		// "stage-1"
 	],
 	"plugins": [
 		"transform-class-properties",
 		"transform-do-expressions",
 		"transform-object-rest-spread",
-		"transform-es2015-destructuring",
+		"transform-es2015-destructuring"
 		// "transform-es2015-modules-commonjs",
-		"transform-es2015-parameters",
-		"transform-runtime"
+		// "transform-es2015-parameters",
+		// "transform-runtime"
 	// ],
 	// "env": {
 	// 	"production": {

.gitignore

@@ -1,4 +1,4 @@
 node_modules/
-npm-debug.log
+npm-debug.log*
 .vs/
 .vscode/

package.json

@@ -61,7 +61,6 @@
   },
   "scripts": {
     "watch": "webpack --watch",
-    "watchSass": "webpack --watch",
     "build": "webpack",
     "buildpro": "SET NODE_ENV=production && webpack -p",
     "test": "jest"

src/Main.scss

@@ -5,4 +5,4 @@
 @import "Fonts";
 @import "Headings";
 
-@import "AppBootstrap";
+@import "index";

src/actions/DisAdvActions.ts

@@ -21,10 +21,10 @@ export default {
 		args.actionType = ActionTypes.DEACTIVATE_DISADV;
 		AppDispatcher.dispatch(args);
 	},
-	updateTier(id: string, tier: number, costs: number, sid: number | string): void {
+	updateTier(id: string, tier: number, cost: number, sid: number | string): void {
 		AppDispatcher.dispatch({
 			actionType: ActionTypes.UPDATE_DISADV_TIER,
-			id, tier, costs, sid
+			id, tier, cost, sid
 		});
 	}
 };

src/actions/InventoryActions.ts

@@ -1,6 +1,6 @@
 import AppDispatcher from '../dispatcher/AppDispatcher';
 import ActionTypes from '../constants/ActionTypes';
-import { ItemArguments } from '../utils/data/Item';
+import { ItemEditorInstance } from '../utils/data/Item';
 
 export default {
 	filter(text: string): void {
@@ -15,13 +15,13 @@ export default {
 			option
 		});
 	},
-	addToList(item: ItemArguments): void {
+	addToList(item: ItemEditorInstance): void {
 		AppDispatcher.dispatch({
 			actionType: ActionTypes.ADD_ITEM,
 			item
 		});
 	},
-	saveItem(item: ItemArguments): void {
+	saveItem(item: ItemEditorInstance): void {
 		AppDispatcher.dispatch({
 			actionType: ActionTypes.SAVE_ITEM,
 			item

src/actions/ProfileActions.ts

@@ -9,7 +9,7 @@ export default {
 			name
 		});
 	},
-	addAP(value: string): void {
+	addAP(value: number): void {
 		AppDispatcher.dispatch({
 			actionType: ActionTypes.ADD_ADVENTURE_POINTS,
 			value

src/actions/ServerActions.ts

@@ -118,7 +118,7 @@ export default {
 			actionType: ActionTypes.LOGOUT_SUCCESS
 		});
 	},
-	changeUsernameSuccess(callback: string): void {
+	changeUsernameSuccess(callback: string, name: string): void {
 		switch (callback) {
 			case 'false':
 				this.runtimeError();
@@ -127,7 +127,8 @@ export default {
 			default:
 				alert('Passwort erfolgreich geändert', 'Dein Passwort wurde erfolgreich geändert.');
 				AppDispatcher.dispatch({
-					actionType: ActionTypes.PASSWORD_CHANGE_SUCCESS
+					actionType: ActionTypes.ACCOUNTNAME_CHANGE_SUCCESS,
+					name
 				});
 				break;
 		}

src/actions/SpecialAbilitiesActions.ts

@@ -28,10 +28,10 @@ export default {
 		args.actionType = ActionTypes.DEACTIVATE_SPECIALABILITY;
 		AppDispatcher.dispatch(args);
 	},
-	updateTier(id: string, tier: number, costs: number, sid: number | string): void {
+	updateTier(id: string, tier: number, cost: number, sid: number | string): void {
 		AppDispatcher.dispatch({
 			actionType: ActionTypes.UPDATE_SPECIALABILITY_TIER,
-			id, tier, costs, sid
+			id, tier, cost, sid
 		});
 	}
 };

src/components/Checkbox.tsx

@@ -8,6 +8,7 @@ import Text from './Text';
 interface Props {
 	checked: boolean;
 	className?: string;
+	disabled?: boolean;
 	label?: string;
 	onClick: (event: React.MouseEvent<any>) => void;
 }

src/components/Dropdown.tsx

@@ -4,14 +4,16 @@ import classNames from 'classnames';
 import GeminiScrollbar from 'react-gemini-scrollbar';
 import Label from './Label';
 
+type OptionID = number | boolean | string | null;
+
 interface Props {
 	className?: string;
 	disabled?: boolean;
 	fullWidth?: boolean;
 	hint?: string;
 	label?: string;
-	onChange: (event: React.MouseEvent<any>) => void;
-	options: Array<Array<string | number | string>>
+	onChange: (option: OptionID) => void;
+	options: [string,  OptionID][];
 	value: boolean | string | number;
 }
 
@@ -105,7 +107,7 @@ export default class Dropdown extends Component<Props, State> {
 								const classNameInner = classNames( option[1] === this.props.value && 'active' );
 
 								return (
-									<div className={classNameInner} key={option[1]} onClick={this.props.disabled ? null : this.onChange.bind(null, option[1])}>
+									<div className={classNameInner} key={option[1].toString()} onClick={this.props.disabled ? null : this.onChange.bind(null, option[1])}>
 										{option[0]}
 									</div>
 								);

src/components/Overlay.tsx

@@ -1,4 +1,5 @@
 import { Component, PropTypes } from 'react';
+import { findDOMNode } from 'react-dom';
 import * as React from 'react';
 import classNames from 'classnames';
 
@@ -7,7 +8,7 @@ interface Props {
 	margin?: number;
 	node?: React.ReactNode;
 	position?: string;
-	trigger: any;
+	trigger: Element;
 }
 
 interface State {
@@ -28,18 +29,17 @@ export default class Overlay extends Component<Props, State> {
 		margin: 0
 	};
 
-	overlayRef;
-
 	state = {
 		style: {},
 		position: ''
 	};
 
+	overlayRef: Element;
+
 	alignToElement = () => {
 		const { margin, position, trigger } = this.props;
-		const overlay = this.overlayRef;
 		const triggerCoordinates = trigger.getBoundingClientRect();
-		const overlayCoordinates = overlay.getBoundingClientRect();
+		const overlayCoordinates = this.overlayRef.getBoundingClientRect();
 		var top,
 			left;
 
@@ -140,7 +140,7 @@ export default class Overlay extends Component<Props, State> {
 		let newOther = { ...other, style };
 
 		return (
-			<div {...newOther} className={className} ref={node => this.overlayRef}>
+			<div {...newOther} className={className} ref={node => this.overlayRef = findDOMNode(node)}>
 				{children}
 			</div>
 		);

src/components/RadioButtonGroup.tsx

@@ -13,7 +13,7 @@ interface Props {
 	active: number | string | boolean;
 	array: Option[],
 	disabled?: boolean;
-	onClick: (event: React.MouseEvent<any>) => void;
+	onClick: (option: string | number | boolean) => void;
 }
 
 export default class RadioButtonGroup extends Component<Props, any> {

src/components/SortOptions.tsx

@@ -11,7 +11,7 @@ const SORT_NAMES = {
 
 interface Props {
 	options: string[];
-	sort: () => void;
+	sort: (option: string) => void;
 	sortOrder: string;
 }
 

src/components/SubTabs.tsx

@@ -10,7 +10,7 @@ interface TabProps {
 
 interface Props {
 	active: string;
-	onClick: () => void;
+	onClick: (tab: string) => void;
 	tabs: TabProps[];
 }
 

src/components/TextField.tsx

@@ -48,7 +48,7 @@ export default class TextField extends Component<Props, any> {
 
 	componentDidMount() {
 		if (this.props.autoFocus) {
-			ReactDOM.findDOMNode(this.inputRef).focus();
+			ReactDOM.findDOMNode<HTMLInputElement>(this.inputRef).focus();
 		}
 	}
 

src/components/TooltipToggle.tsx

@@ -30,7 +30,7 @@ export default class Tooltip extends Component<Props, State> {
 		isDisplayed: false
 	};
 
-	triggerRef;
+	triggerRef: Element;
 	node;
 
 	componentWillUnmount() {

src/components/titlebar/TitleBar.tsx

@@ -6,7 +6,7 @@ import AuthStore from '../../stores/AuthStore';
 import AvatarWrapper from '../AvatarWrapper';
 import BorderButton from '../BorderButton';
 import createOverlay from '../../utils/createOverlay';
-import ELStore from '../../stores/ELStore.js';
+import ELStore from '../../stores/ELStore';
 import HeroCreation from '../../views/herolist/HeroCreation';
 import HerolistActions from '../../actions/HerolistActions';
 import HistoryActions from '../../actions/HistoryActions';

src/constants/ActionTypes.ts

@@ -8,6 +8,7 @@ interface ActionTypes {
 	SHOW_TAB_SECTION: string;
 	RECEIVE_ACCOUNT: string;
 	UPDATE_USERNAME: string;
+	ACCOUNTNAME_CHANGE_SUCCESS: string;
 	PASSWORD_CHANGE_SUCCESS: string;
 	LOGOUT_SUCCESS: string;
 	CLEAR_ACCOUNT: string;
@@ -147,6 +148,7 @@ export default keyMirror({
 	UPDATE_USERNAME: null,
 	LOGOUT_SUCCESS: null,
 	CLEAR_ACCOUNT: null,
+	ACCOUNTNAME_CHANGE_SUCCESS: null,
 	PASSWORD_CHANGE_SUCCESS: null,
 	
 	// Registration

src/index.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import AppDispatcher from './dispatcher/AppDispatcher';
 import Router from './views/Router';
 import WebAPIUtils from './utils/WebAPIUtils';
+import './main.scss';
 
 window.onunload = function() {
 	// WebAPIUtils.logoutSync();

src/stores/RequirementsStore.ts

@@ -126,32 +126,32 @@ RequirementsStore.dispatchToken = AppDispatcher.register(payload => {
 
 			case ActionTypes.ACTIVATE_DISADV:
 				_updateOwnRequirements(get(payload.id).isActivatable);
-				_updateDisAdvCost(payload.id, payload.costs);
+				_updateDisAdvCost(payload.id, payload.cost);
 				break;
 
 			case ActionTypes.ACTIVATE_SPECIALABILITY:
 				_updateOwnRequirements(get(payload.id).isActivatable);
-				_updateCost(payload.costs);
+				_updateCost(payload.cost);
 				break;
 
 			case ActionTypes.DEACTIVATE_DISADV:
 				_updateOwnRequirements(get(payload.id).isDeactivatable);
-				_updateDisAdvCost(payload.id, payload.costs);
+				_updateDisAdvCost(payload.id, payload.cost);
 				break;
 
 			case ActionTypes.DEACTIVATE_SPECIALABILITY:
 				_updateOwnRequirements(get(payload.id).isDeactivatable);
-				_updateCost(-payload.costs);
+				_updateCost(-payload.cost);
 				break;
 
 			case ActionTypes.UPDATE_DISADV_TIER:
 				_updateOwnRequirements(true);
-				_updateDisAdvCost(payload.id, payload.costs);
+				_updateDisAdvCost(payload.id, payload.cost);
 				break;
 
 			case ActionTypes.UPDATE_SPECIALABILITY_TIER:
 				_updateOwnRequirements(true);
-				_updateCost(payload.costs);
+				_updateCost(payload.cost);
 				break;
 
 			case ActionTypes.ADD_ATTRIBUTE_POINT:

src/utils/ListUtils.ts

@@ -1,9 +1,9 @@
 import SpellsStore from '../stores/SpellsStore';
 
-export const filter = (list: Object[], filterText: string, addProperty?: string): Object[] => {
+export const filter = <T>(list: T[], filterText: string, addProperty?: string): T[] => {
 	if (filterText !== '') {
 		filterText = filterText.toLowerCase();
-		return list.filter(obj => obj.name.toLowerCase().match(filterText) && (!addProperty || obj[addProperty].toLowerCase().match(filterText)));
+		return list.filter(obj => obj['name'] && obj['name'].toLowerCase().match(filterText) && (!addProperty || obj[addProperty].toLowerCase().match(filterText)));
 	}
 	return list;
 };
@@ -51,7 +51,7 @@ export const sortByWeight = (a, b) => a.weight < b.weight ? -1 : a.weight > b.we
 
 export const sortByWhere = (a, b) => a.where < b.where ? -1 : a.where > b.where ? 1 : sortByName(a,b);
 
-export const sort = (list: Object[], sortOrder: string): Object[] => {
+export const sort = <T>(list: T[], sortOrder: string): T[] => {
 	let sort;
 	switch (sortOrder) {
 		case 'name':
@@ -91,7 +91,7 @@ export const sort = (list: Object[], sortOrder: string): Object[] => {
 	return list.sort(sort);
 };
 
-export const sortSex = (list: Object[], sortOrder: string, sex: string): Object[] => {
+export const sortSex = <T>(list: T[], sortOrder: string, sex: string): T[] => {
 	let sort;
 	switch (sortOrder) {
 		case 'name':
@@ -108,12 +108,12 @@ export const sortSex = (list: Object[], sortOrder: string, sex: string): Object[
 	return list.sort(sort);
 };
 
-export const filterAndSort = (list: Object[], filterText: string, sortOrder: string, option: Object): Object[] => {
+export const filterAndSort = <T>(list: T[], filterText: string, sortOrder: string, option?: any[] | string): T[] => {
 	if (Array.isArray(option)) {
 		GROUPS = option;
 	}
-	else if (option) {
-		return sortSex(filter(list, filterText), sortOrder, option);
+	else if (typeof option === 'string') {
+		return sortSex<T>(filter(list, filterText), sortOrder, option);
 	}
-	return sort(filter(list, filterText), sortOrder);
+	return sort<T>(filter(list, filterText), sortOrder);
 };

src/utils/WebAPIUtils.ts

@@ -21,7 +21,7 @@ export default {
 			ServerActions.startLoading();
 			let response = await fetch('data/register.php?email=' + email + '&name=' + name + '&display=' + displayname + '&password=' + password);
 			let result = await response.text();
-			ServerActions.registrationSuccess(result);
+			ServerActions.registrationSuccess();
 		} catch(e) {
 			ServerActions.connectionError(e);
 		}
@@ -213,7 +213,7 @@ export default {
 			ServerActions.startLoading();
 			let response = await fetch('php/newhero.php?uid=' + AuthStore.getID() + '&n=' + name);
 			let result = await response.text();
-			ServerActions.createNewHeroSuccess(result);
+			// ServerActions.createNewHeroSuccess(result);
 		} catch(e) {
 			ServerActions.connectionError(e);
 		}
@@ -232,7 +232,7 @@ export default {
 				body: JSON.stringify(data)
 			});
 			let result = await response.text();
-			ServerActions.saveHeroSuccess(result);
+			// ServerActions.saveHeroSuccess(result);
 		} catch(e) {
 			ServerActions.connectionError(e);
 		}
@@ -255,7 +255,7 @@ export default {
 			ServerActions.startLoading();
 			let response = await fetch('php/deletehero.php?uid=' + AuthStore.getID() + '&hid=' + heroid);
 			let result = await response.text();
-			ServerActions.deleteHeroSuccess(result);
+			// ServerActions.deleteHeroSuccess(result);
 		} catch(e) {
 			ServerActions.connectionError(e);
 		}

src/utils/count.ts

@@ -1,4 +1,4 @@
-export default (arr: string[] | number[], keepValues: boolean = false) => {
+export default (arr: (string | number)[], keepValues: boolean = false) => {
 	const counter = new Map();
 	if (keepValues) {
 		arr.forEach(e => {

src/utils/data/Core.ts

@@ -1,6 +1,6 @@
 export interface CoreInstance {
-	id: string;
-	name: string;
+	readonly id: string;
+	readonly name: string;
 }
 
 export interface CoreArguments {
@@ -10,8 +10,8 @@ export interface CoreArguments {
 
 export default class Core implements CoreInstance {
 
-	id: string;
-	name: string;
+	readonly id: string;
+	readonly name: string;
 
 	constructor(args: CoreArguments) {
 		const { id, name } = args;

src/utils/data/Item.ts

@@ -1,7 +1,7 @@
 import Core, { CoreArguments, CoreInstance } from './Core';
 
-export interface ItemInstance extends CoreInstance {
-	addpenalties: string;
+interface ItemInstanceCore extends CoreInstance {
+	addpenalties: boolean;
 	ammunition: string;
 	at: string;
 	combattechnique: string;
@@ -10,14 +10,14 @@ export interface ItemInstance extends CoreInstance {
 	damageDiceSides: string;
 	damageFlat: string;
 	enc: string;
-	gr: string;
+	gr: number;
 	isTemplateLocked: boolean;
 	length: string;
+	name: string;
 	number: string;
 	pa: string;
 	price: string;
 	pro: string;
-	range: string[];
 	reach: string;
 	reloadtime: string;
 	stp: string;
@@ -26,18 +26,23 @@ export interface ItemInstance extends CoreInstance {
 	where: string;
 }
 
-export interface ItemEditorInstance extends ItemInstance {
+export interface ItemInstance extends ItemInstanceCore {
+	range: string[];
+}
+
+export interface ItemEditorInstance extends ItemInstanceCore {
 	range1?: string;
 	range2?: string;
 	range3?: string;
 }
 
 export interface ItemArguments extends CoreArguments {
+	name: string;
 	price: string;
 	weight: string;
 	number: string;
 	where: string;
-	gr: string;
+	gr: number;
 	combattechnique: string;
 	damageDiceNumber: string;
 	damageDiceSides: string;
@@ -53,7 +58,7 @@ export interface ItemArguments extends CoreArguments {
 	ammunition: string;
 	pro: string;
 	enc: string;
-	addpenalties: string;
+	addpenalties: boolean;
 	template: string;
 	isTemplateLocked: boolean;
 }
@@ -66,7 +71,7 @@ export interface ItemEditorArguments extends ItemArguments {
 
 export default class Item extends Core implements ItemInstance {
 
-	addpenalties: string;
+	addpenalties: boolean;
 	ammunition: string;
 	at: string;
 	combattechnique: string;
@@ -75,10 +80,11 @@ export default class Item extends Core implements ItemInstance {
 	damageDiceSides: string;
 	damageFlat: string;
 	enc: string;
-	gr: string;
+	gr: number;
 	isTemplateLocked: boolean;
 	length: string;
 	number: string;
+	name: string;
 	pa: string;
 	price: string;
 	pro: string;
@@ -145,19 +151,18 @@ export default class Item extends Core implements ItemInstance {
 		this.isTemplateLocked = isTemplateLocked || false;
 	}
 
-	static prepareDataForStore(target: ItemEditorArguments): ItemArguments {
-		const newTarget = { ...target };
-		newTarget.range = [];
-		for (const name in newTarget) {
-			const value = newTarget[name];
+	static prepareDataForStore(target: ItemEditorInstance): ItemArguments {
+		const range = [];
+		for (const name in target) {
+			const value = target[name];
 			switch (name) {
 				case 'price':
 				case 'weight':
-					newTarget[name] = value ? (typeof value === 'number' ? value : parseInt(value.replace(',','.'))) : value;
+					target[name] = value ? (typeof value === 'number' ? value : parseInt(value.replace(',','.'))) : value;
 					break;
 
 				case 'number':
-					newTarget[name] = value ? (typeof value === 'number' ? value : parseInt(value)) : value;
+					target[name] = value ? (typeof value === 'number' ? value : parseInt(value)) : value;
 					break;
 
 				case 'damageDiceNumber':
@@ -170,37 +175,39 @@ export default class Item extends Core implements ItemInstance {
 				case 'reloadtime':
 				case 'pro':
 				case 'enc':
-					newTarget[name] = value ? parseInt(value) : value;
+					target[name] = value ? parseInt(value) : value;
 					break;
 
 				case 'range1':
-					newTarget.range[0] = value;
+					range[0] = value;
 					break;
 
 				case 'range2':
-					newTarget.range[1] = value;
+					range[1] = value;
 					break;
 
 				case 'range3':
-					newTarget.range[2] = value;
+					range[2] = value;
 					break;
 
 				default:
-					newTarget[name] = value;
+					target[name] = value;
 			}
 		}
-		delete newTarget.range1;
-		delete newTarget.range2;
-		delete newTarget.range3;
-		return newTarget;
+		delete target.range1;
+		delete target.range2;
+		delete target.range3;
+		return { ...target, range };
 	}
 
 	static prepareDataForEditor(target: ItemInstance): ItemEditorInstance {
-		let newTarget: ItemEditorInstance = { ...target };
-		newTarget.range1 = newTarget.range[0];
-		newTarget.range2 = newTarget.range[1];
-		newTarget.range3 = newTarget.range[2];
+		const newTarget: ItemInstance = { ...target };
+		const addTarget = {
+			range1: newTarget.range[0],
+			range2: newTarget.range[1],
+			range3: newTarget.range[2]
+		}
 		delete newTarget.range;
-		return newTarget;
+		return { ...newTarget, ...addTarget };
 	}
 }

src/utils/data/Profession.ts

@@ -3,62 +3,67 @@ import { fixIDs } from '../DataUtils';
 import Categories from '../../constants/Categories';
 
 export interface ProfessionInstance extends CoreInstance {
+	readonly name: string | { m: string, f: string };
+	readonly subname: string | { m: string, f: string };
 	readonly ap: number;
-	readonly languages: number[];
-	readonly scripts: number[];
-	readonly social: number[];
-	readonly typ_prof: string[];
+	readonly reqs_p: (string | number | boolean)[][];
+	readonly reqs: (string | number | boolean)[][];
+	readonly sel: (string | string[] | number[])[][];
+	readonly specialabilities: (string | number | boolean)[][];
+	readonly combattechniques: (string | number)[][];
+	readonly talents: (string | number)[][];
+	readonly spells: (string | number)[][];
+	readonly liturgies: (string | number)[][];
 	readonly typ_adv: string[];
 	readonly typ_dadv: string[];
 	readonly untyp_adv: string[];
 	readonly untyp_dadv: string[];
-	readonly typ_talents: string[];
-	readonly untyp_talents: string[];
-	readonly talents: string[];
+	readonly variants: string[];
 	readonly category: string;
 }
 
 export interface ProfessionArguments extends CoreArguments {
+	subname: string | { m: string, f: string };
 	ap: number;
-	lang: number[];
-	literacy: number[];
-	social: number[];
-	typ_prof: string[];
+	pre_req: (string | number | boolean)[][];
+	req: (string | number | boolean)[][];
+	sel: (string | string[] | number[])[][];
+	sa: (string | number | boolean)[][];
+	combattech: (string | number)[][];
+	talents: (string | number)[][];
+	spells: (string | number)[][];
+	chants: (string | number)[][];
 	typ_adv: string[];
 	typ_dadv: string[];
 	untyp_adv: string[];
 	untyp_dadv: string[];
-	typ_talents: string[];
-	untyp_talents: string[];
-	talents: string[];
+	vars: string[];
 }
 
 export default class Profession extends Core implements ProfessionInstance {
+
+	readonly name: string | { m: string, f: string };
+	readonly subname: string | { m: string, f: string };
+	readonly ap: number;
+	readonly reqs_p: (string | number | boolean)[][];
+	readonly reqs: (string | number | boolean)[][];
+	readonly sel: (string | string[] | number[])[][];
+	readonly specialabilities: (string | number | boolean)[][];
+	readonly combattechniques: (string | number)[][];
+	readonly talents: (string | number)[][];
+	readonly spells: (string | number)[][];
+	readonly liturgies: (string | number)[][];
+	readonly typ_adv: string[];
+	readonly typ_dadv: string[];
+	readonly untyp_adv: string[];
+	readonly untyp_dadv: string[];
+	readonly variants: string[];
+	readonly category: string = Categories.PROFESSIONS;
 	
-	constructor(args: ProfessionArguments) {
+	constructor({ subname, ap, pre_req, req, sel, sa, combattech, talents, spells, chants, typ_adv, typ_dadv, untyp_adv, untyp_dadv, vars, ...args }: ProfessionArguments) {
 		super(args);
-		let {
-			subname,
-			ap,
-			pre_req,
-			req,
-			sel,
-			sa,
-			combattech,
-			talents,
-			spells,
-			chants,
-			typ_adv,
-			typ_dadv,
-			untyp_adv,
-			untyp_dadv,
-			vars
-		} = args;
-
 		this.subname = subname;
-
 		this.ap = ap;
-
 		this.reqs_p = pre_req;
 		this.reqs = req;
 		this.sel = sel.map(e => {
@@ -66,18 +71,17 @@ export default class Profession extends Core implements ProfessionInstance {
 				e[3] = e[3].split(',').map(e => `CT_${e}`);
 				return e;
 			}
-			else if (e[0] === 'cantrips') {
+			else if (e[0] === 'cantrips' && typeof e[2] === 'string') {
 				e[2] = e[2].split(',').map(e => parseInt(e));
 				return e;
 			}
-			return e;
 		});
 
-		this.specialabilities = fixIDs(sa, 'SA');
-		this.combattechniques = fixIDs(combattech, 'CT');
-		this.talents = fixIDs(talents, 'TAL');
-		this.spells = fixIDs(spells, 'SPELL');
-		this.liturgies = fixIDs(chants, 'LITURGY');
+		this.specialabilities = fixIDs<number | boolean>(sa, 'SA');
+		this.combattechniques = fixIDs<number>(combattech, 'CT');
+		this.talents = fixIDs<number>(talents, 'TAL');
+		this.spells = fixIDs<number>(spells, 'SPELL');
+		this.liturgies = fixIDs<number>(chants, 'LITURGY');
 		
 		this.typ_adv = typ_adv.map(e => `ADV_${e}`);
 		this.typ_dadv = typ_dadv.map(e => `DISADV_${e}`);
@@ -85,7 +89,5 @@ export default class Profession extends Core implements ProfessionInstance {
 		this.untyp_dadv = untyp_dadv.map(e => `DISADV_${e}`);
 
 		this.variants = vars.map(e => `PV_${e}`);
-
-		this.category = Categories.PROFESSIONS;
 	}
 }

src/utils/data/ProfessionVariant.ts

@@ -3,49 +3,40 @@ import { fixIDs } from '../DataUtils';
 import Categories from '../../constants/Categories';
 
 export interface ProfessionVariantInstance extends CoreInstance {
+	readonly name: string | { m: string, f: string };
 	readonly ap: number;
-	readonly languages: number[];
-	readonly scripts: number[];
-	readonly social: number[];
-	readonly typ_prof: string[];
-	readonly typ_adv: string[];
-	readonly typ_dadv: string[];
-	readonly untyp_adv: string[];
-	readonly untyp_dadv: string[];
-	readonly typ_talents: string[];
-	readonly untyp_talents: string[];
-	readonly talents: string[];
-	readonly category: string;
+	readonly reqs_p: (string | number | boolean)[][];
+	readonly reqs: (string | number | boolean)[][];
+	readonly sel: (string | string[] | number[])[][];
+	readonly specialabilities: (string | number | boolean)[][];
+	readonly combattechniques: (string | number)[][];
+	readonly talents: (string | number)[][];
 }
 
 export interface ProfessionVariantArguments extends CoreArguments {
 	ap: number;
-	lang: number[];
-	literacy: number[];
-	social: number[];
-	typ_prof: string[];
-	typ_adv: string[];
-	typ_dadv: string[];
-	untyp_adv: string[];
-	untyp_dadv: string[];
-	typ_talents: string[];
-	untyp_talents: string[];
-	talents: string[];
+	pre_req: (string | number | boolean)[][];
+	req: (string | number | boolean)[][];
+	sel: (string | string[] | number[])[][];
+	sa: (string | number | boolean)[][];
+	combattech: (string | number)[][];
+	talents: (string | number)[][];
 }
 
 export default class ProfessionVariant extends Core implements ProfessionVariantInstance {
+
+	readonly name: string | { m: string, f: string };
+	readonly ap: number;
+	readonly reqs_p: (string | number | boolean)[][];
+	readonly reqs: (string | number | boolean)[][];
+	readonly sel: (string | string[] | number[])[][];
+	readonly specialabilities: (string | number | boolean)[][];
+	readonly combattechniques: (string | number)[][];
+	readonly talents: (string | number)[][];
+	readonly category: string = Categories.PROFESSION_VARIANTS;
 	
-	constructor(args: ProfessionVariantArguments) {
+	constructor({ ap, pre_req, req, sel, sa, combattech, talents, ...args }: ProfessionVariantArguments) {
 		super(args);
-		let {
-			ap,
-			pre_req,
-			req,
-			sel,
-			sa,
-			combattech,
-			talents
-		} = args;
 
 		this.ap = ap;
 
@@ -53,10 +44,8 @@ export default class ProfessionVariant extends Core implements ProfessionVariant
 		this.reqs = req;
 		this.sel = sel;
 
-		this.specialabilities = fixIDs(sa, 'SA');
-		this.combattechniques = fixIDs(combattech, 'CT');
-		this.talents = fixIDs(talents, 'TAL');
-
-		this.category = Categories.PROFESSION_VARIANTS;
+		this.specialabilities = fixIDs<number | boolean>(sa, 'SA');
+		this.combattechniques = fixIDs<number>(combattech, 'CT');
+		this.talents = fixIDs<number>(talents, 'TAL');
 	}
 }

src/views/Route.tsx

@@ -8,7 +8,7 @@ import Grouplist from './grouplist/Grouplist';
 import Herolist from './herolist/Herolist';
 import Home from './home/Home';
 import Items from './items/Items';
-import Master from './master/Master';
+// import Master from './master/Master';
 import Profile from './profile/Profile';
 import RCP  from './rcp/RCP';
 import Skills from './skills/Skills';
@@ -37,9 +37,9 @@ export default class Route extends Component<Props, any> {
 			attributes: <Attribute />,
 			disadv: <DisAdv />,
 			skills: <Skills />,
-			items: <Items />,
+			items: <Items />
 
-			master: <Master />
+			// master: <Master />
 		};
 
 		return VIEWS[this.props.id] || null;

src/views/disadv/Advantages.tsx

@@ -1,19 +1,35 @@
 import BorderButton from '../../components/BorderButton';
 import Checkbox from '../../components/Checkbox';
 import CultureStore from '../../stores/CultureStore';
+import { Deactive } from './DisAdvAddListItem';
+import { Active } from './DisAdvRemoveListItem';
+import { RaceInstance } from '../../utils/data/Race';
+import { CultureInstance } from '../../utils/data/Culture';
+import { ProfessionInstance } from '../../utils/data/Profession';
 import DisAdvActions from '../../actions/DisAdvActions';
 import DisAdvList from './DisAdvList';
 import DisAdvStore from '../../stores/DisAdvStore';
 import ProfessionStore from '../../stores/ProfessionStore';
 import RaceStore from '../../stores/RaceStore';
-import React, { Component } from 'react';
+import * as React from 'react';
 import Slidein from '../../components/Slidein';
 import TextField from '../../components/TextField';
 
-export default class Advantages extends Component {
+interface State {
+	filterText: string;
+	showRating: boolean;
+	advActive: Active[];
+	advDeactive: Deactive[];
+	showAddSlidein: boolean;
+	race: RaceInstance;
+	culture: CultureInstance;
+	profession: ProfessionInstance;
+}
+
+export default class Advantages extends React.Component<any, State> {
 	
 	state = { 
-		filter: DisAdvStore.getFilter(),
+		filterText: DisAdvStore.getFilter(),
 		showRating: DisAdvStore.getRating(),
 		advActive: DisAdvStore.getActiveForView(true),
 		advDeactive: DisAdvStore.getDeactiveForView(true),
@@ -24,16 +40,16 @@ export default class Advantages extends Component {
 	};
 	
 	_updateDisAdvStore = () => this.setState({
-		filter: DisAdvStore.getFilter(),
+		filterText: DisAdvStore.getFilter(),
 		showRating: DisAdvStore.getRating(),
 		advActive: DisAdvStore.getActiveForView(true),
 		advDeactive: DisAdvStore.getDeactiveForView(true)
-	});
+	} as State);
 
 	filter = event => DisAdvActions.filter(event.target.value);
 	changeRating = () => DisAdvActions.changeRating();
-	showAddSlidein = () => this.setState({ showAddSlidein: true });
-	hideAddSlidein = () => this.setState({ showAddSlidein: false });
+	showAddSlidein = () => this.setState({ showAddSlidein: true } as State);
+	hideAddSlidein = () => this.setState({ showAddSlidein: false } as State);
 	
 	componentDidMount() {
 		DisAdvStore.addChangeListener(this._updateDisAdvStore );
@@ -70,13 +86,13 @@ export default class Advantages extends Component {
 			<div className="page" id="advantages">
 				<Slidein isOpen={this.state.showAddSlidein} close={this.hideAddSlidein}>
 					<div className="options">
-						<TextField hint="Suchen" value={this.state.filter} onChange={this.filter} fullWidth />
+						<TextField hint="Suchen" value={this.state.filterText} onChange={this.filter} fullWidth />
 						<Checkbox checked={showRating} onClick={this.changeRating}>Wertung durch Spezies, Kultur und Profession anzeigen</Checkbox>
 					</div>
 					<DisAdvList list={this.state.advDeactive} type="ADV" rating={rating} showRating={this.state.showRating} />
 				</Slidein>
 				<div className="options">
-					<TextField hint="Suchen" value={this.state.filter} onChange={this.filter} fullWidth />
+					<TextField hint="Suchen" value={this.state.filterText} onChange={this.filter} fullWidth />
 					<BorderButton label="Hinzufügen" onClick={this.showAddSlidein} />
 				</div>
 				<DisAdvList list={this.state.advActive} type="ADV" rating={rating} showRating={showRating} active />

src/views/disadv/DisAdv.tsx

@@ -1,9 +1,13 @@
 import Advantages from './Advantages';
 import Disadvantages from './Disadvantages';
-import React from 'react';
+import * as React from 'react';
 import SubTabs from '../../components/SubTabs';
 
-export default class DisAdv extends React.Component {
+interface State {
+	tab: string;
+}
+
+export default class DisAdv extends React.Component<any, State> {
 
 	state = {
 		tab: 'adv'

src/views/disadv/DisAdvAddListItem.tsx

@@ -2,14 +2,47 @@ import BorderButton from '../../components/BorderButton';
 import DisAdvActions from '../../actions/DisAdvActions';
 import { get } from '../../stores/ListStore';
 import Dropdown from '../../components/Dropdown';
-import React, { Component, PropTypes } from 'react';
+import * as React from 'react';
 import TextField from '../../components/TextField';
 
-export default class DisAdvAddListItem extends Component {
+export interface Deactive {
+    id: string;
+    name: string;
+    sel?: any;
+    sid?: any;
+    input?: string;
+    cost: number;
+    tier?: number;
+    tiers?: number;
+    gr: number;
+}
+
+interface AddObject {
+	id: string;
+	cost?: number;
+	sel?: string | number;
+	sel2?: string | number;
+	input?: string;
+	tier?: number;
+}
+
+interface Props {
+	className?: string;
+	item: Deactive;
+}
+
+interface State {
+	selected: string | number;
+	selected_tier: number;
+	input: string;
+	input2: string;
+}
+
+export default class DisAdvAddListItem extends React.Component<Props, State> {
 
 	static propTypes = {
-		className: PropTypes.string,
-		item: PropTypes.object
+		className: React.PropTypes.string,
+		item: React.PropTypes.object
 	};
 
 	state = {
@@ -17,18 +50,18 @@ export default class DisAdvAddListItem extends Component {
 		selected_tier: 0,
 		input: '',
 		input2: ''
-	};
+	} as State;
 
-	handleSelect = selected => this.setState({ selected });
+	handleSelect = selected => this.setState({ selected } as State);
 	handleSelectTier = selected_tier => {
 		if (['DISADV_34','DISADV_50'].indexOf(this.props.item.id) > -1) {
-			this.setState({ selected_tier, selected: '' });
+			this.setState({ selected_tier, selected: '' } as State);
 		} else {
-			this.setState({ selected_tier });
+			this.setState({ selected_tier } as State);
 		}
 	};
-	handleInput = event => this.setState({ input: event.target.value });
-	handleSecondInput = event => this.setState({ input2: event.target.value });
+	handleInput = event => this.setState({ input: event.target.value } as State);
+	handleSecondInput = event => this.setState({ input2: event.target.value } as State);
 	addToList = args => {
 		DisAdvActions.addToList(args);
 		if (this.state.selected !== '' || this.state.selected_tier !== 0 || this.state.input !== '') {
@@ -47,7 +80,7 @@ export default class DisAdvAddListItem extends Component {
 
 		var ap;
 		var disabled = false;
-		var args = { id: disadv.id };
+		var args: AddObject = { id: disadv.id };
 
 		var tierElement;
 		var selectElement;
@@ -83,7 +116,7 @@ export default class DisAdvAddListItem extends Component {
 			// 		value={this.state.input2}
 			// 		onChange={this.handleSecondInput} />
 			// );
-			ap = this.state.selected !== '' ? get(disadv.id).sel[this.state.selected - 1][2] : '';
+			ap = typeof this.state.selected === 'number' ? get(disadv.id).sel[this.state.selected - 1][2] : '';
 			if (this.state.selected === '') disabled = true;
 			// ap = this.state.input2 !== '' && !Number.isNaN(parseInt(this.state.input2)) ? Math.round(parseInt(this.state.input2) / 2) : this.state.selected !== '' ? get(disadv.id).sel[this.state.selected - 1][2] : '';
 			// if (!((this.state.selected !== '' && this.state.input === '' && this.state.input2 === '') || 
@@ -117,15 +150,15 @@ export default class DisAdvAddListItem extends Component {
 			args.sel = this.state.selected;
 			args.input = this.state.input;
 			args.tier = this.state.selected_tier;
-		} else if (['ADV_32','DISADV_24'].indexOf(disadv.id) > -1) {
+		} else if (['ADV_32','DISADV_24'].includes(disadv.id)) {
 			if (this.state.selected === '' && this.state.input === '') disabled = true;
 			args.sel = this.state.selected;
 			args.input = this.state.input;
 			ap = disadv.cost;
-		} else if (['DISADV_33','DISADV_37','DISADV_51'].indexOf(disadv.id) > -1) {
+		} else if (['DISADV_33','DISADV_37','DISADV_51'].includes(disadv.id)) {
 			if (disadv.id === 'DISADV_33') {
 				var disab = true;
-				if ([7,8].indexOf(this.state.selected) > -1) {
+				if ([7,8].includes(this.state.selected)) {
 					args.input = this.state.input;
 					ap = get(disadv.id).sel[this.state.selected - 1][2];
 					disab = false;
@@ -166,7 +199,7 @@ export default class DisAdvAddListItem extends Component {
 
 		if (disadv.id.match('DIS') && ap !== undefined) ap = -ap;
 
-		args.costs = ap;
+		args.cost = ap;
 
 		var roman = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'];
 

src/views/disadv/DisAdvList.tsx

@@ -1,10 +1,18 @@
-import DisAdvAddListItem from './DisAdvAddListItem';
-import DisAdvRemoveListItem from './DisAdvRemoveListItem';
+import DisAdvAddListItem, { Deactive } from './DisAdvAddListItem';
+import DisAdvRemoveListItem, { Active } from './DisAdvRemoveListItem';
 import React, { Component, PropTypes } from 'react';
 import Scroll from '../../components/Scroll';
 import classNames from 'classnames';
 
-export default class DisAdvList extends Component {
+interface Props {
+	active?: boolean;
+	list: Object[];
+	rating: { [id: string]: string };
+	showRating: boolean;
+	type: string;
+}
+
+export default class DisAdvList extends Component<Props, any> {
 
 	static propTypes = {
 		active: PropTypes.bool,

src/views/disadv/DisAdvRemoveListItem.tsx

@@ -3,7 +3,34 @@ import DisAdvActions from '../../actions/DisAdvActions';
 import Dropdown from '../../components/Dropdown';
 import React, { Component, PropTypes } from 'react';
 
-export default class DisAdvRemoveListItem extends Component {
+export interface Active {
+    id: string;
+    name: string;
+    sid?: string | number;
+    add?: any;
+    cost: number;
+    tier?: number;
+    tiers?: number;
+    gr: number;
+    disabled: boolean;
+}
+
+interface RemoveObject {
+	id: string;
+	cost?: number;
+	sid?: string | number;
+}
+
+interface Props {
+	item: Active;
+	phase: number;
+}
+
+interface State {
+	selected_tier: number;
+}
+
+export default class DisAdvRemoveListItem extends Component<Props, State> {
 
 	static propTypes = {
 		item: PropTypes.object
@@ -20,7 +47,7 @@ export default class DisAdvRemoveListItem extends Component {
 		const disadv = this.props.item;
 
 		var disabled = disadv.disabled;
-		var args = { id: disadv.id };
+		var args: RemoveObject = { id: disadv.id };
 
 		var name = disadv.name;
 		var ap = disadv.cost;
@@ -45,7 +72,7 @@ export default class DisAdvRemoveListItem extends Component {
 
 		if (disadv.id.match('DIS')) ap = -ap;
 
-		args.costs = -ap;
+		args.cost = -ap;
 
 		if (disadv.hasOwnProperty('sid')) args.sid = disadv.sid;
 

src/views/disadv/Disadvantages.tsx

@@ -1,6 +1,11 @@
 import BorderButton from '../../components/BorderButton';
 import Checkbox from '../../components/Checkbox';
 import CultureStore from '../../stores/CultureStore';
+import { Deactive } from './DisAdvAddListItem';
+import { Active } from './DisAdvRemoveListItem';
+import { RaceInstance } from '../../utils/data/Race';
+import { CultureInstance } from '../../utils/data/Culture';
+import { ProfessionInstance } from '../../utils/data/Profession';
 import DisAdvActions from '../../actions/DisAdvActions';
 import DisAdvList from './DisAdvList';
 import DisAdvStore from '../../stores/DisAdvStore';
@@ -10,10 +15,21 @@ import React, { Component } from 'react';
 import Slidein from '../../components/Slidein';
 import TextField from '../../components/TextField';
 
-export default class Disadvantages extends Component {
+interface State {
+	filterText: string;
+	showRating: boolean;
+	disadvActive: Active[];
+	disadvDeactive: Deactive[];
+	showAddSlidein: boolean;
+	race: RaceInstance;
+	culture: CultureInstance;
+	profession: ProfessionInstance;
+}
+
+export default class Disadvantages extends Component<any, State> {
 	
 	state = { 
-		filter: DisAdvStore.getFilter(),
+		filterText: DisAdvStore.getFilter(),
 		showRating: DisAdvStore.getRating(),
 		disadvActive: DisAdvStore.getActiveForView(false),
 		disadvDeactive: DisAdvStore.getDeactiveForView(false),
@@ -24,16 +40,16 @@ export default class Disadvantages extends Component {
 	};
 	
 	_updateDisAdvStore = () => this.setState({
-		filter: DisAdvStore.getFilter(),
+		filterText: DisAdvStore.getFilter(),
 		showRating: DisAdvStore.getRating(),
 		disadvActive: DisAdvStore.getActiveForView(false),
 		disadvDeactive: DisAdvStore.getDeactiveForView(false)
-	});
+	} as State);
 
 	filter = event => DisAdvActions.filter(event.target.value);
 	changeRating = () => DisAdvActions.changeRating();
-	showAddSlidein = () => this.setState({ showAddSlidein: true });
-	hideAddSlidein = () => this.setState({ showAddSlidein: false });
+	showAddSlidein = () => this.setState({ showAddSlidein: true } as State);
+	hideAddSlidein = () => this.setState({ showAddSlidein: false } as State);
 	
 	componentDidMount() {
 		DisAdvStore.addChangeListener(this._updateDisAdvStore );
@@ -68,13 +84,13 @@ export default class Disadvantages extends Component {
 			<div className="page" id="advantages">
 				<Slidein isOpen={this.state.showAddSlidein} close={this.hideAddSlidein}>
 					<div className="options">
-						<TextField hint="Suchen" value={this.state.filter} onChange={this.filter} fullWidth />
+						<TextField hint="Suchen" value={this.state.filterText} onChange={this.filter} fullWidth />
 						<Checkbox checked={this.state.showRating} onClick={this.changeRating}>Wertung durch Spezies, Kultur und Profession anzeigen</Checkbox>
 					</div>
 					<DisAdvList list={this.state.disadvDeactive} type="DISADV" rating={rating} showRating={this.state.showRating} />
 				</Slidein>
 				<div className="options">
-					<TextField hint="Suchen" value={this.state.filter} onChange={this.filter} fullWidth />
+					<TextField hint="Suchen" value={this.state.filterText} onChange={this.filter} fullWidth />
 					<BorderButton label="Hinzufügen" onClick={this.showAddSlidein} />
 				</div>
 				<DisAdvList list={this.state.disadvActive} type="DISADV" rating={rating} showRating={this.state.showRating} active />

src/views/grouplist/Grouplist.tsx

@@ -4,7 +4,7 @@ import Scroll from '../../components/Scroll';
 import TabActions from '../../actions/TabActions';
 import TextField from '../../components/TextField';
 
-export default class Grouplist extends Component {
+export default class Grouplist extends Component<any, any> {
 
 	filter = event => event.target.value;
 	openGroup = () => TabActions.showSection('group');

src/views/home/Home.tsx

@@ -2,7 +2,11 @@ import Overview from './Overview';
 import React, { Component } from 'react';
 import SubTabs from '../../components/SubTabs';
 
-export default class Home extends Component {
+interface State {
+	tab: string;
+}
+
+export default class Home extends Component<any, State> {
 
 	state = {
 		tab: 'overview'

src/views/home/Overview.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Scroll from '../../components/Scroll';
 
-export default class Overview extends Component {
+export default class Overview extends Component<any, any> {
 	render() {
 		return (
 			<div className="page" id="home-overview">

src/views/items/Inventory.tsx

@@ -1,3 +1,4 @@
+import { ItemInstance } from '../../utils/data/Item';
 import { filterAndSort } from '../../utils/ListUtils';
 import BorderButton from '../../components/BorderButton';
 import createOverlay from '../../utils/createOverlay';
@@ -13,17 +14,26 @@ import TextField from '../../components/TextField';
 
 const GROUPS = ['Nahkampfwaffen', 'Fernkampfwaffen', 'Munition', 'Rüstungen', 'Waffenzubehör', 'Kleidung', 'Reisebedarf und Werkzeuge', 'Beleuchtung', 'Verbandzeug und Heilmittel', 'Behältnisse', 'Seile und Ketten', 'Diebeswerkzeug', 'Handwerkszeug', 'Orientierungshilfen', 'Schmuck', 'Edelsteine und Feingestein', 'Schreibwaren', 'Bücher', 'Magische Artefakte', 'Alchimica', 'Gifte', 'Heilkräuter', 'Musikinstrumente', 'Genussmittel und Luxus', 'Tiere', 'Tierbedarf', 'Forbewegungsmittel'];
 
+interface State {
+	items: ItemInstance[];
+	filterText: string;
+	sortOrder: string;
+	templates: ItemInstance[];
+	showAddSlidein: boolean;
+}
+
 const getInventoryStore = () => ({
 	items: InventoryStore.getAll(),
 	filterText: InventoryStore.getFilterText(),
 	sortOrder: InventoryStore.getSortOrder(),
-});
+} as State);
 
-export default class Inventory extends Component {
+export default class Inventory extends Component<any, State> {
 
 	state = {
 		...getInventoryStore(),
-		templates: InventoryStore.getAllTemplates()
+		templates: InventoryStore.getAllTemplates(),
+		showAddSlidein: false
 	};
 	
 	_updateInventoryStore = () => this.setState(getInventoryStore());
@@ -40,8 +50,8 @@ export default class Inventory extends Component {
 	}
 
 	showItemCreation = () => createOverlay(<ItemEditor create />);
-	showAddSlidein = () => this.setState({ showAddSlidein: true });
-	hideAddSlidein = () => this.setState({ showAddSlidein: false });
+	showAddSlidein = () => this.setState({ showAddSlidein: true } as State);
+	hideAddSlidein = () => this.setState({ showAddSlidein: false } as State);
 
 	render() {
 

src/views/items/ItemEditor.tsx

@@ -1,3 +1,4 @@
+import { ItemEditorInstance } from '../../utils/data/Item';
 import Checkbox from '../../components/Checkbox';
 import CombatTechniquesStore from '../../stores/CombatTechniquesStore';
 import Dialog from '../../components/Dialog';
@@ -10,12 +11,20 @@ import Label from '../../components/Label';
 import React, { Component, PropTypes } from 'react';
 import TextField from '../../components/TextField';
 
+interface Props {
+	create?: boolean;
+	item: ItemEditorInstance;
+	node: HTMLDivElement;
+}
+
+interface State extends ItemEditorInstance {}
+
 const GROUPS = ['Nahkampfwaffen', 'Fernkampfwaffen', 'Munition', 'Rüstungen', 'Waffenzubehör', 'Kleidung', 'Reisebedarf und Werkzeuge', 'Beleuchtung', 'Verbandzeug und Heilmittel', 'Behältnisse', 'Seile und Ketten', 'Diebeswerkzeug', 'Handwerkszeug', 'Orientierungshilfen', 'Schmuck', 'Edelsteine und Feingestein', 'Schreibwaren', 'Bücher', 'Magische Artefakte', 'Alchimica', 'Gifte', 'Heilkräuter', 'Musikinstrumente', 'Genussmittel und Luxus', 'Tiere', 'Tierbedarf', 'Forbewegungsmittel'];
 
 const GROUPS_SELECTION = GROUPS.map((e,i) => [ e, i + 1 ]);
 // const GROUPS_SELECTION = GROUPS.map((e,i) => [ e, i + 1 ]).sort((a,b) => a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0);
 
-export default class ItemEditor extends Component {
+export default class ItemEditor extends Component<Props, State> {
 
 	static propTypes = { 
 		create: PropTypes.bool,
@@ -53,9 +62,9 @@ export default class ItemEditor extends Component {
 		addpenalties: false
 	};
 
-	onEvent = (prop, e) => this.setState({ [prop]: e.target.value });
-	onSwitch = prop => this.setState({ [prop]: !this.state[prop] });
-	onValue = (prop, value) => this.setState({ [prop]: value });
+	onEvent = (prop, e) => this.setState({ [prop]: e.target.value } as State);
+	onSwitch = (prop: string) => this.setState({ [prop]: !this.state[prop] });
+	onValue = (prop, value) => this.setState({ [prop]: value } as State);
 
 	applyTemplate = () => {
 		if (this.state.template !== 'ITEMTPL_0') {
@@ -77,7 +86,7 @@ export default class ItemEditor extends Component {
 			this.setState(template);
 		}
 	};
-	unlockTemplate = () => this.setState({ isTemplateLocked: false });
+	unlockTemplate = () => this.setState({ isTemplateLocked: false } as State);
 
 	addItem = () => InventoryActions.addToList(this.state);
 	saveItem = () => InventoryActions.saveItem(this.state);
@@ -148,7 +157,7 @@ export default class ItemEditor extends Component {
 							label="Art"
 							hint="Wähle den Typ des Gegenstands aus"
 							value={gr}
-							options={GROUPS_SELECTION}
+							options={GROUPS_SELECTION as [string, number][]}
 							onChange={this.onValue.bind(null, 'gr')}
 							disabled={locked}
 							/>
@@ -160,7 +169,7 @@ export default class ItemEditor extends Component {
 							label="Vorlage"
 							hint="Keine"
 							value={template}
-							options={TEMPLATES}
+							options={TEMPLATES as [string, string][]}
 							onChange={this.onValue.bind(null, 'template')}
 							disabled={locked}
 							/>
@@ -191,7 +200,7 @@ export default class ItemEditor extends Component {
 							label="Kampftechnik"
 							hint="Keine"
 							value={combattechnique}
-							options={CombatTechniquesStore.getAll().filter(e => e.gr === 1).map(e => [e.name, e.id])}
+							options={CombatTechniquesStore.getAll().filter(e => e.gr === 1).map(e => [e.name, e.id]) as [string, string][]}
 							onChange={this.onValue.bind(null, 'ct')}
 							disabled={locked}
 							/>
@@ -280,7 +289,7 @@ export default class ItemEditor extends Component {
 							label="Kampftechnik"
 							hint="Keine"
 							value={combattechnique}
-							options={CombatTechniquesStore.getAll().filter(e => e.gr === 2).map(e => [e.name, e.id])}
+							options={CombatTechniquesStore.getAll().filter(e => e.gr === 2).map(e => [e.name, e.id]) as [string, string][]}
 							onChange={this.onValue.bind(null, 'ct')}
 							disabled={locked}
 							/>
@@ -346,7 +355,7 @@ export default class ItemEditor extends Component {
 							label="Munition"
 							hint="Keine"
 							value={ammunition}
-							options={AMMUNITION}
+							options={AMMUNITION as [string, string][]}
 							onChange={this.onValue.bind(null, 'ammunition')}
 							disabled={locked}
 							/>

src/views/items/Items.tsx

@@ -3,7 +3,11 @@ import Inventory from './Inventory';
 import React, { Component } from 'react';
 import SubTabs from '../../components/SubTabs';
 
-export default class Items extends Component {
+interface State {
+	tab: string;
+}
+
+export default class Items extends Component<any, State> {
 
 	state = {
 		tab: 'inventory'

src/views/profile/AbilitiesTextList.tsx

@@ -0,0 +1,53 @@
+import React, { Component, PropTypes } from 'react';
+
+export interface ActiveAbility {
+    id: string;
+    name: string;
+    sid?: string | number;
+    add?: any;
+    cost: number;
+    tier?: number;
+    tiers?: number;
+    gr: number;
+    disabled: boolean;
+}
+
+export interface AbilitiesTextListProps {
+	list: ActiveAbility[];
+}
+
+export default (props: AbilitiesTextListProps) => {
+	const roman = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'];
+
+	const list = props.list.filter(obj => !['SA_28', 'SA_30'].includes(obj.id)).map(obj => {
+		let { id, name, add, tiers, tier } = obj;
+
+		if (['ADV_28','ADV_29'].includes(id)) {
+			name = `Immunität gegen ${add}`;
+		}
+		else if (id === 'DISADV_1') {
+			name = `Angst vor ${add}`;
+		}
+		else if (['DISADV_34','DISADV_50'].includes(id)) {
+			name += ` ${roman[tier - 1]} (${add})`;
+		}
+		else if (add) {
+			name += ` (${add})`;
+		}
+		
+		if (tiers !== undefined && tiers !== null && !['DISADV_34','DISADV_50'].includes(id)) {
+			if (id === 'SA_30' && tier === 4) {
+				name += ` MS`;
+			}
+			else {
+				name += ` ${roman[tier - 1]}`;
+			}
+		}
+		
+		return name;
+	}).sort().join(', ');
+
+	return (
+		<div className="list">{list}</div>
+	);
+}

src/views/profile/AttributeCheckMods.js

@@ -1,46 +0,0 @@
-import AttributeStore from '../../stores/AttributeStore';
-import classNames from 'classnames';
-import React, { Component, PropTypes } from 'react';
-import TextBox from '../../components/TextBox';
-
-export default class AttributeCheckMods extends Component {
-
-	render() {
-
-		const attributes = AttributeStore.getAll();
-
-		return (
-			<TextBox className="attribute-check-mods" label="Eigenschaftsmodifikationen">
-				<table>
-					<thead>
-						<tr>
-							<td className="name"></td>
-							<td>-3</td>
-							<td>-2</td>
-							<td>-1</td>
-							<td className="null">0</td>
-							<td>+1</td>
-							<td>+2</td>
-							<td>+3</td>
-						</tr>
-					</thead>
-					<tbody>
-						{attributes.map(obj => {
-							const { id, short, value } = obj;
-							return (<tr key={id} className={id}>
-								<td className="name">{short}</td>
-								<td>{value - 3}</td>
-								<td>{value - 2}</td>
-								<td>{value - 1}</td>
-								<td className="null">{value}</td>
-								<td>{value + 1}</td>
-								<td>{value + 2}</td>
-								<td>{value + 3}</td>
-							</tr>);
-						})}
-					</tbody>
-				</table>
-			</TextBox>
-		);
-	}
-}

src/views/profile/AttributeMods.scss

@@ -1,4 +1,4 @@
-.attribute-check-mods {
+.attribute-mods {
 	h3 {
 		margin-bottom: 4mm;
 	}

src/views/profile/AttributeMods.tsx

@@ -0,0 +1,31 @@
+import { AttributeInstance } from '../../utils/data/Attribute';
+import * as React from 'react';
+import AttributeModsListItem from './AttributeModsListItem';
+import AttributeStore from '../../stores/AttributeStore';
+import classNames from 'classnames';
+import TextBox from '../../components/TextBox';
+
+export default () => {
+	const attributes: AttributeInstance[] = AttributeStore.getAll();
+	return (
+		<TextBox className="attribute-mods" label="Eigenschaftsmodifikationen">
+			<table>
+				<thead>
+					<tr>
+						<td className="name"></td>
+						<td>-3</td>
+						<td>-2</td>
+						<td>-1</td>
+						<td className="null">0</td>
+						<td>+1</td>
+						<td>+2</td>
+						<td>+3</td>
+					</tr>
+				</thead>
+				<tbody>
+					{attributes.map(obj => <AttributeModsListItem {...obj} key={obj.id} />)}
+				</tbody>
+			</table>
+		</TextBox>
+	);
+}

src/views/profile/AttributeModsListItem.tsx

@@ -0,0 +1,21 @@
+import { AttributeInstance } from '../../utils/data/Attribute';
+import * as React from 'react';
+import AttributeStore from '../../stores/AttributeStore';
+import classNames from 'classnames';
+import TextBox from '../../components/TextBox';
+
+export default (props: AttributeInstance) => {
+	const { id, short, value } = props;
+	return (
+		<tr className={id}>
+			<td className="name">{short}</td>
+			<td>{value - 3}</td>
+			<td>{value - 2}</td>
+			<td>{value - 1}</td>
+			<td className="null">{value}</td>
+			<td>{value + 1}</td>
+			<td>{value + 2}</td>
+			<td>{value + 3}</td>
+		</tr>
+	);
+}

src/views/profile/ChantSheet.js

@@ -1,23 +0,0 @@
-import React, { Component } from 'react';
-import SheetHeader from './SheetHeader';
-import TextBox from '../../components/TextBox';
-
-export default class ChantSheet extends Component {
-	render() {
-
-		const addHeader = [
-			{ short: 'KaP Max.', value: 0 },
-			{ short: 'Aktuell' }
-		];
-
-		return (
-			<div className="sheet chants">
-				<SheetHeader title="Liturgien & Zeremonien" add={[]} />
-				<div className="upper">
-					<TextBox label="Liturgien & Zeremonien">
-					</TextBox>
-				</div>
-			</div>
-		);
-	}
-}

src/views/profile/ChantSheet.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import SheetHeader from './SheetHeader';
+import TextBox from '../../components/TextBox';
+
+export default () => {
+	const addHeader = [
+		{ short: 'KaP Max.', value: 0 },
+		{ short: 'Aktuell' }
+	];
+
+	return (
+		<div className="sheet chants">
+			<SheetHeader title="Liturgien & Zeremonien" add={[]} />
+			<div className="upper">
+				<TextBox label="Liturgien & Zeremonien">
+				</TextBox>
+			</div>
+		</div>
+	);
+}

src/views/profile/CombatSheet.js

@@ -1,24 +0,0 @@
-import React, { Component } from 'react';
-import SheetHeader from './SheetHeader';
-import * as secondaryAttributes from '../../utils/secondaryAttributes';
-import TextBox from '../../components/TextBox';
-
-export default class CombatSheet extends Component {
-
-	render() {
-
-		const addHeader = secondaryAttributes.getAll();
-
-		addHeader.splice(1, 2);
-
-		return (
-			<div className="sheet combat">
-				<SheetHeader title="Kampf" add={addHeader} />
-				<div className="upper">
-					<TextBox label="Kampftechniken">
-					</TextBox>
-				</div>
-			</div>
-		);
-	}
-}

src/views/profile/CombatSheet.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as secondaryAttributes from '../../utils/secondaryAttributes';
+import SheetHeader from './SheetHeader';
+import TextBox from '../../components/TextBox';
+
+export default () => {
+	const addHeader = secondaryAttributes.getAll();
+
+	addHeader.splice(1, 2);
+
+	return (
+		<div className="sheet combat">
+			<SheetHeader title="Kampf" add={addHeader} />
+			<div className="upper">
+				<TextBox label="Kampftechniken">
+				</TextBox>
+			</div>
+		</div>
+	);
+}

src/views/profile/InventorySheet.js

@@ -1,17 +0,0 @@
-import React, { Component } from 'react';
-import SheetHeader from './SheetHeader';
-import TextBox from '../../components/TextBox';
-
-export default class InventorySheet extends Component {
-	render() {
-		return (
-			<div className="sheet inventory">
-				<SheetHeader title="Besitz" />
-				<div className="upper">
-					<TextBox label="Ausrüstung">
-					</TextBox>
-				</div>
-			</div>
-		);
-	}
-}

src/views/profile/InventorySheet.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import SheetHeader from './SheetHeader';
+import TextBox from '../../components/TextBox';
+
+export default () => {
+	return (
+		<div className="sheet inventory">
+			<SheetHeader title="Besitz" />
+			<div className="upper">
+				<TextBox label="Ausrüstung">
+				</TextBox>
+			</div>
+		</div>
+	);
+}

src/views/profile/MainSheet.js

@@ -1,73 +0,0 @@
-import * as secondaryAttributes from '../../utils/secondaryAttributes';
-import APStore from '../../stores/APStore';
-import AttributeStore from '../../stores/AttributeStore';
-import CultureStore from '../../stores/CultureStore';
-import DisAdvStore from '../../stores/DisAdvStore';
-import ELStore from '../../stores/ELStore';
-import MainSheetCalc from './MainSheetCalc';
-import MainSheetPersonalData from './MainSheetPersonalData';
-import OverviewConstSkills from './OverviewConstSkills';
-import ProfessionStore from '../../stores/ProfessionStore';
-import ProfessionVariantStore from '../../stores/ProfessionVariantStore';
-import ProfileStore from '../../stores/ProfileStore';
-import RaceStore from '../../stores/RaceStore';
-import React, { Component } from 'react';
-import SheetHeader from './SheetHeader';
-import SpecialAbilitiesStore from '../../stores/SpecialAbilitiesStore';
-import TextBox from '../../components/TextBox';
-
-export default class MainSheet extends Component {
-
-	render() {
-
-		const ap = APStore.getAll();
-		const el = ELStore.getStart().name;
-		const profile = ProfileStore.getAll();
-		const race = RaceStore.getCurrent();
-		const culture = CultureStore.getCurrent();
-		const profession = ProfessionStore.getCurrent();
-		const professionVariant = ProfessionVariantStore.getCurrent();
-		const haircolorTags = ProfileStore.getHaircolorTags();
-		const eyecolorTags = ProfileStore.getEyecolorTags();
-		const socialstatusTags = ProfileStore.getSocialstatusTags();
-
-		const advActive = DisAdvStore.getActiveForView(true);
-		const disadvActive = DisAdvStore.getActiveForView(false);
-		const generalsaActive = SpecialAbilitiesStore.getActiveForView(1,2);
-
-		const attributes = secondaryAttributes.getAll();
-		const baseValues = AttributeStore.getBaseValues();
-
-		return (
-			<div className="sheet" id="main-sheet">
-				<SheetHeader title="Persönliche Daten" />
-				<MainSheetPersonalData
-					ap={ap}
-					culture={culture}
-					el={el}
-					eyecolorTags={eyecolorTags}
-					haircolorTags={haircolorTags}
-					profession={profession}
-					professionVariant={professionVariant}
-					profile={profile}
-					race={race}
-					socialstatusTags={socialstatusTags}
-					/>
-				<div className="lower">
-					<div className="lists">
-						<TextBox className="advantages" label="Vorteile">
-							<OverviewConstSkills list={advActive} />
-						</TextBox>
-						<TextBox className="disadvantages" label="Nachteile">
-							<OverviewConstSkills list={disadvActive} />
-						</TextBox>
-						<TextBox className="general-special-abilities" label="Allgemeine Sonderfertigkeiten">
-							<OverviewConstSkills list={generalsaActive} />
-						</TextBox>
-					</div>
-					<MainSheetCalc attributes={attributes} baseValues={baseValues} />
-				</div>
-			</div>
-		);
-	}
-}

src/views/profile/MainSheet.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import * as secondaryAttributes from '../../utils/secondaryAttributes';
+import APStore from '../../stores/APStore';
+import AttributeStore from '../../stores/AttributeStore';
+import CultureStore from '../../stores/CultureStore';
+import DisAdvStore from '../../stores/DisAdvStore';
+import ELStore from '../../stores/ELStore';
+import MainSheetAttributes from './MainSheetAttributes';
+import MainSheetPersonalData from './MainSheetPersonalData';
+import AbilitiesTextList from './AbilitiesTextList';
+import ProfessionStore from '../../stores/ProfessionStore';
+import ProfessionVariantStore from '../../stores/ProfessionVariantStore';
+import ProfileStore from '../../stores/ProfileStore';
+import RaceStore from '../../stores/RaceStore';
+import SheetHeader from './SheetHeader';
+import SpecialAbilitiesStore from '../../stores/SpecialAbilitiesStore';
+import TextBox from '../../components/TextBox';
+
+export default () => {
+	const ap = APStore.getAll();
+	const el = ELStore.getStart().name;
+	const profile = ProfileStore.getAll();
+	const race = RaceStore.getCurrent();
+	const culture = CultureStore.getCurrent();
+	const profession = ProfessionStore.getCurrent();
+	const professionVariant = ProfessionVariantStore.getCurrent();
+	const haircolorTags = ProfileStore.getHaircolorTags();
+	const eyecolorTags = ProfileStore.getEyecolorTags();
+	const socialstatusTags = ProfileStore.getSocialstatusTags();
+
+	const advActive = DisAdvStore.getActiveForView(true);
+	const disadvActive = DisAdvStore.getActiveForView(false);
+	const generalsaActive = SpecialAbilitiesStore.getActiveForView(1,2);
+
+	const attributes = secondaryAttributes.getAll();
+	const baseValues = AttributeStore.getBaseValues();
+
+	return (
+		<div className="sheet" id="main-sheet">
+			<SheetHeader title="Persönliche Daten" />
+			<MainSheetPersonalData
+				ap={ap}
+				culture={culture}
+				el={el}
+				eyecolorTags={eyecolorTags}
+				haircolorTags={haircolorTags}
+				profession={profession}
+				professionVariant={professionVariant}
+				profile={profile}
+				race={race}
+				socialstatusTags={socialstatusTags}
+				/>
+			<div className="lower">
+				<div className="lists">
+					<TextBox className="advantages" label="Vorteile">
+						<AbilitiesTextList list={advActive} />
+					</TextBox>
+					<TextBox className="disadvantages" label="Nachteile">
+						<AbilitiesTextList list={disadvActive} />
+					</TextBox>
+					<TextBox className="general-special-abilities" label="Allgemeine Sonderfertigkeiten">
+						<AbilitiesTextList list={generalsaActive} />
+					</TextBox>
+				</div>
+				<MainSheetAttributes attributes={attributes} baseValues={baseValues} />
+			</div>
+		</div>
+	);
+}

src/views/profile/MainSheetAttributes.tsx

@@ -0,0 +1,94 @@
+import { SecondaryAttribute } from '../../utils/secondaryAttributes';
+import * as React from 'react';
+import MainSheetAttributesItem from './MainSheetAttributesItem';
+import MainSheetFatePoints from './MainSheetFatePoints';
+
+export interface MainSheetAttributesProps {
+	attributes: SecondaryAttribute[];
+	baseValues: {
+		le: number;
+		leAdd: number;
+		aeAdd: number;
+		keAdd: number;
+		sk: number;
+		zk: number;
+		gs: number;
+	};
+}
+
+export default (props: MainSheetAttributesProps ) => {
+	const { attributes, baseValues } = props;
+	return (
+		<div className="calculated">
+			<div className="calc-header">
+				<div>Wert</div>
+				<div>Bonus/<br/>Malus</div>
+				<div>Zukauf</div>
+				<div>Max</div>
+			</div>
+			<MainSheetAttributesItem
+				label={attributes[0].name}
+				calc={attributes[0].calc}
+				value={attributes[0].value}
+				add={attributes[0].mod}
+				purchased={attributes[0].currentAdd}
+				subLabel="Grundwert"
+				subArray={[baseValues.le]} />
+			<MainSheetAttributesItem
+				label={attributes[1].name}
+				calc={attributes[1].calc}
+				value={attributes[1].value}
+				add={attributes[1].mod}
+				purchased={baseValues.aeAdd}
+				subLabel="perm. eingesetzt/davon zurückgekauft"
+				subArray={[0,0]}
+				empty={attributes[1].value === '-'} />
+			<MainSheetAttributesItem
+				label={attributes[2].name}
+				calc={attributes[2].calc}
+				value={attributes[2].value}
+				add={attributes[2].mod}
+				purchased={baseValues.keAdd}
+				subLabel="perm. eingesetzt/davon zurückgekauft"
+				subArray={[0,0]}
+				empty={attributes[2].value === '-'} />
+			<MainSheetAttributesItem
+				label={attributes[3].name}
+				calc={attributes[3].calc}
+				value={attributes[3].value}
+				add={attributes[3].mod}
+				purchased={null}
+				subLabel="Grundwert"
+				subArray={[baseValues.sk]} />
+			<MainSheetAttributesItem
+				label={attributes[4].name}
+				calc={attributes[4].calc}
+				value={attributes[4].value}
+				add={attributes[4].mod}
+				purchased={null}
+				subLabel="Grundwert"
+				subArray={[baseValues.zk]} />
+			<MainSheetAttributesItem
+				label={attributes[5].name}
+				calc={attributes[5].calc}
+				value={attributes[5].value}
+				add={0}
+				purchased={null} />
+			<MainSheetAttributesItem
+				label={attributes[6].name}
+				calc={attributes[6].calc}
+				value={attributes[6].value}
+				add={0}
+				purchased={null} />
+			<MainSheetAttributesItem
+				label={attributes[7].name}
+				calc={attributes[7].calc}
+				value={attributes[7].value}
+				add={0}
+				purchased={null}
+				subLabel="Grundwert"
+				subArray={[baseValues.gs]} />
+			<MainSheetFatePoints />
+		</div>
+	);
+}

src/views/profile/MainSheetAttributesItem.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+export interface MainSheetAttributesItem {
+	add?: number,
+	calc: string,
+	empty?: boolean,
+	label: string,
+	max?: number,
+	purchased?: number,
+	subArray?: number[],
+	subLabel?: string,
+	value: number | string;
+}
+
+export default (props: MainSheetAttributesItem) => {
+	let max = props.empty ? '-' : props.value + props.add;
+	if (!props.empty) {
+		if (props.purchased !== null) max += props.purchased;
+		if (props.max) max += props.max;
+	}
+
+	return (
+		<div>
+			<div className="label">
+				<h3>{props.label}</h3>
+				<span className="calc">{props.calc}</span>
+				{
+					props.subLabel ? (
+						<span className="sub">{props.subLabel}:</span>
+					) : null
+				}
+			</div>
+			<div className="values">
+				<div className="base">{props.empty ? '-' : props.value}</div>
+				<div className="add">{props.empty ? '-' : props.add}</div>
+				<div className={classNames(
+					'purchased',
+					props.purchased === null && 'blocked'
+				)}>{ props.purchased === null ? '\uE14B' : props.empty ? '-' : props.purchased}</div>
+				<div className="max">{max}</div>
+				{
+					props.subArray ? props.subArray.map(
+						(value, index) => <div key={props.label + index} className="sub">{props.empty ? '-' : value}</div>
+					) : null
+				}
+			</div>
+		</div>
+	);
+}

src/views/profile/MainSheetCalc.js

@@ -1,90 +0,0 @@
-import MainSheetCalcItem from './MainSheetCalcItem';
-import MainSheetFatePoints from './MainSheetFatePoints';
-import React, { Component, PropTypes } from 'react';
-
-export default class MainSheetCalc extends Component {
-
-	static propTypes = {
-		attributes: PropTypes.array.isRequired,
-		baseValues: PropTypes.object.isRequired
-	};
-
-	render() {
-
-		const { attributes, baseValues } = this.props;
-
-		return attributes.length > 0 ? (
-			<div className="calculated">
-				<div className="calc-header">
-					<div>Wert</div>
-					<div>Bonus/<br/>Malus</div>
-					<div>Zukauf</div>
-					<div>Max</div>
-				</div>
-				<MainSheetCalcItem
-					label={attributes[0].name}
-					calc={attributes[0].calc}
-					value={attributes[0].value}
-					add={attributes[0].mod}
-					purchased={attributes[0].currentAdd}
-					subLabel="Grundwert"
-					subArray={[baseValues.le]} />
-				<MainSheetCalcItem
-					label={attributes[1].name}
-					calc={attributes[1].calc}
-					value={attributes[1].value}
-					add={attributes[1].mod}
-					purchased={baseValues.aeAdd}
-					subLabel="perm. eingesetzt/davon zurückgekauft"
-					subArray={[0,0]}
-					empty={attributes[1].value === '-'} />
-				<MainSheetCalcItem
-					label={attributes[2].name}
-					calc={attributes[2].calc}
-					value={attributes[2].value}
-					add={attributes[2].mod}
-					purchased={baseValues.keAdd}
-					subLabel="perm. eingesetzt/davon zurückgekauft"
-					subArray={[0,0]}
-					empty={attributes[2].value === '-'} />
-				<MainSheetCalcItem
-					label={attributes[3].name}
-					calc={attributes[3].calc}
-					value={attributes[3].value}
-					add={attributes[3].mod}
-					purchased={null}
-					subLabel="Grundwert"
-					subArray={[baseValues.sk]} />
-				<MainSheetCalcItem
-					label={attributes[4].name}
-					calc={attributes[4].calc}
-					value={attributes[4].value}
-					add={attributes[4].mod}
-					purchased={null}
-					subLabel="Grundwert"
-					subArray={[baseValues.zk]} />
-				<MainSheetCalcItem
-					label={attributes[5].name}
-					calc={attributes[5].calc}
-					value={attributes[5].value}
-					add={0}
-					purchased={null} />
-				<MainSheetCalcItem
-					label={attributes[6].name}
-					calc={attributes[6].calc}
-					value={attributes[6].value}
-					add={0}
-					purchased={null} />
-				<MainSheetCalcItem
-					label={attributes[7].name}
-					calc={attributes[7].calc}
-					value={attributes[7].value}
-					add={0}
-					purchased={null}
-					subLabel="Grundwert"
-					subArray={[baseValues.gs]} />
-				<MainSheetFatePoints />
-			</div>
-		) : null;
-	}
-}

src/views/profile/MainSheetCalcItem.js

@@ -1,57 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import classNames from 'classnames';
-
-export default class MainSheetCalcItem extends Component {
-
-	static propTypes = {
-		add: PropTypes.number,
-		calc: PropTypes.string.isRequired,
-		empty: PropTypes.bool,
-		label: PropTypes.string.isRequired,
-		max: PropTypes.number,
-		purchased: PropTypes.number,
-		subArray: PropTypes.array,
-		subLabel: PropTypes.string,
-		value: PropTypes.oneOfType([
-			PropTypes.number,
-			PropTypes.string
-		])
-	};
-
-	render() {
-
-		var max = this.props.empty ? '-' : this.props.value + this.props.add;
-		if (!this.props.empty) {
-			if (this.props.purchased !== null) max += this.props.purchased;
-			if (this.props.max) max += this.props.max;
-		}
-
-		return (
-			<div>
-				<div className="label">
-					<h3>{this.props.label}</h3>
-					<span className="calc">{this.props.calc}</span>
-					{
-						this.props.subLabel ? (
-							<span className="sub">{this.props.subLabel}:</span>
-						) : null
-					}
-				</div>
-				<div className="values">
-					<div className="base">{this.props.empty ? '-' : this.props.value}</div>
-					<div className="add">{this.props.empty ? '-' : this.props.add}</div>
-					<div className={classNames(
-						'purchased',
-						this.props.purchased === null && 'blocked'
-					)}>{ this.props.purchased === null ? '\uE14B' : this.props.empty ? '-' : this.props.purchased}</div>
-					<div className="max">{max}</div>
-					{
-						this.props.subArray ? this.props.subArray.map(
-							(value, index) => <div key={this.props.label + index} className="sub">{this.props.empty ? '-' : value}</div>
-						) : null
-					}
-				</div>
-			</div>
-		);
-	}
-}

src/views/profile/MainSheetFatePoints.js

@@ -1,28 +0,0 @@
-import LabelBox from '../../components/LabelBox';
-import TextBox from '../../components/TextBox';
-import React, { Component } from 'react';
-import { get } from '../../stores/ListStore';
-
-export default class MainSheetFatePoints extends Component {
-
-	render() {
-
-		let bonus = 0;
-
-		if (get('ADV_14').active) {
-			bonus += get('ADV_14').tier;
-		}
-		else if (get('DISADV_31').active) {
-			bonus -= get('ADV_14').tier;
-		}
-
-		return (
-			<TextBox className="fate-points" label="Schicksalspunkte">
-				<LabelBox label="Wert" value="3" />
-				<LabelBox label="Bonus" value={bonus.toString()} />
-				<LabelBox label="Max" value={3 + bonus} />
-				<LabelBox label="Aktuell" value="" />
-			</TextBox>
-		);
-	}
-}

src/views/profile/MainSheetFatePoints.tsx

@@ -0,0 +1,24 @@
+import { get } from '../../stores/ListStore';
+import * as React from 'react';
+import LabelBox from '../../components/LabelBox';
+import TextBox from '../../components/TextBox';
+
+export default () => {
+	let bonus = 0;
+
+	if (get('ADV_14').active) {
+		bonus += get('ADV_14').tier;
+	}
+	else if (get('DISADV_31').active) {
+		bonus -= get('DISADV_31').tier;
+	}
+
+	return (
+		<TextBox className="fate-points" label="Schicksalspunkte">
+			<LabelBox label="Wert" value="3" />
+			<LabelBox label="Bonus" value={bonus} />
+			<LabelBox label="Max" value={3 + bonus} />
+			<LabelBox label="Aktuell" value="" />
+		</TextBox>
+	);
+}

src/views/profile/MainSheetPersonalData.js

@@ -1,76 +0,0 @@
-import Avatar from '../../components/Avatar';
-import LabelBox from '../../components/LabelBox';
-import Plain from '../../components/Plain';
-import React, { Component, PropTypes } from 'react';
-
-export default class MainSheetPersonalData extends Component {
-
-	static propTypes = {
-		ap: PropTypes.object.isRequired,
-		culture: PropTypes.object.isRequired,
-		el: PropTypes.string.isRequired,
-		eyecolorTags: PropTypes.array.isRequired,
-		haircolorTags: PropTypes.array.isRequired,
-		profession: PropTypes.object.isRequired,
-		professionVariant: PropTypes.object,
-		profile: PropTypes.object.isRequired,
-		race: PropTypes.object.isRequired,
-		socialstatusTags: PropTypes.array.isRequired
-	};
-
-	render() {
-		const { ap, culture, el, eyecolorTags, haircolorTags, profession, professionVariant, profile: { name, family, placeofbirth, dateofbirth, age, sex, size, weight, haircolor, eyecolor, title, socialstatus, characteristics, otherinfo, avatar }, race, socialstatusTags } = this.props;
-
-		const raceName = race.name;
-		const cultureName = culture.name;
-		const professionName = (() => {
-			let { name, subname } = profession || { name: 'Loading...' };
-			if (typeof name === 'object') {
-				name = name[sex];
-			}
-			if (typeof subname === 'object') {
-				subname = subname[sex];
-			}
-			let { name: vname } = professionVariant || { name: 'Loading...' };
-			if (typeof vname === 'object') {
-				vname = vname[sex];
-			}
-			return name + (subname ? ` (${subname})` : professionVariant ? ` (${vname})` : '');
-		})();
-		
-		const haircolorName = haircolorTags[haircolor - 1];
-		const eyecolorName = eyecolorTags[eyecolor - 1];
-		const socialstatusName = socialstatusTags[socialstatus - 1];
-
-		return (
-			<div className="upper">
-				<div className="info">
-					<Plain className="name" label="Name" value={name} />
-					<Plain className="family" label="Familie" value={family} />
-					<Plain className="placeofbirth" label="Geburtsort" value={placeofbirth} />
-					<Plain className="dateofbirth" label="Geburtsdatum" value={dateofbirth} />
-					<Plain className="age" label="Alter" value={age} />
-					<Plain className="sex" label="Geschlecht" value={sex} />
-					<Plain className="race" label="Spezies" value={raceName} />
-					<Plain className="size" label="Größe" value={size} />
-					<Plain className="weight" label="Gewicht" value={weight} />
-					<Plain className="haircolor" label="Haarfarbe" value={haircolorName} />
-					<Plain className="eyecolor" label="Augenfarbe" value={eyecolorName} />
-					<Plain className="culture" label="Kultur" value={cultureName} />
-					<Plain className="socialstatus" label="Sozialstatus" value={socialstatusName} />
-					<Plain className="profession" label="Profession" value={professionName} />
-					<Plain className="title" label="Titel" value={title} />
-					<Plain className="characteristics" label="Charakteristika" value={characteristics} />
-					<Plain className="otherinfo" label="Sonstiges" value={otherinfo} />
-				</div>
-				<div className="ap-portrait">
-					<LabelBox className="el" label="Erfahrungsgrad" value={el} />
-					<LabelBox className="ap-total" label="AP gesamt" value={ap.total} />
-					<LabelBox className="portrait" label="Porträt/Wappen"><Avatar src={avatar} img /></LabelBox>
-					<LabelBox className="ap-available" label="AP verfügbar" value={ap.total - ap.spent} />
-					<LabelBox className="ap-used" label="AP ausgegeben" value={ap.spent} />
-				</div>
-			</div>
-		);
-	}
-}

src/views/profile/MainSheetPersonalData.tsx

@@ -0,0 +1,96 @@
+import { CultureInstance } from '../../utils/data/Culture';
+import { ProfessionInstance } from '../../utils/data/Profession';
+import { ProfessionVariantInstance } from '../../utils/data/ProfessionVariant';
+import { RaceInstance } from '../../utils/data/Race';
+import * as React from 'react';
+import Avatar from '../../components/Avatar';
+import LabelBox from '../../components/LabelBox';
+import Plain from '../../components/Plain';
+
+export interface MainSheetPersonalDataProps {
+	ap: {
+		spent: number;
+		total: number;
+	};
+	culture: CultureInstance;
+	el: string;
+	eyecolorTags: string[];
+	haircolorTags: string[];
+	profession: ProfessionInstance;
+	professionVariant?: ProfessionVariantInstance;
+	profile: {
+		name: string;
+		sex: string;
+		avatar: string;
+		family: string;
+		placeofbirth: string;
+		dateofbirth: string;
+		age: string;
+		haircolor: number;
+		eyecolor: number;
+		size: string;
+		weight: string;
+		title: string;
+		socialstatus: number;
+		characteristics: string;
+		otherinfo: string;
+	};
+	race: RaceInstance;
+	socialstatusTags: string[];
+}
+
+export default (props: MainSheetPersonalDataProps) => {
+	const { ap, culture, el, eyecolorTags, haircolorTags, profession, professionVariant, profile: { name, family, placeofbirth, dateofbirth, age, sex, size, weight, haircolor, eyecolor, title, socialstatus, characteristics, otherinfo, avatar }, race, socialstatusTags } = props;
+
+	const raceName = race.name;
+	const cultureName = culture.name;
+	const professionName = (() => {
+		let { name, subname } = profession || { name: 'Loading...', subname: null };
+		if (typeof name === 'object') {
+			name = name[sex];
+		}
+		if (typeof subname === 'object') {
+			subname = subname[sex];
+		}
+		let { name: vname } = professionVariant || { name: 'Loading...' };
+		if (typeof vname === 'object') {
+			vname = vname[sex];
+		}
+		return name + (subname ? ` (${subname})` : professionVariant ? ` (${vname})` : '');
+	})();
+	
+	const haircolorName = haircolorTags[haircolor - 1];
+	const eyecolorName = eyecolorTags[eyecolor - 1];
+	const socialstatusName = socialstatusTags[socialstatus - 1];
+
+	return (
+		<div className="upper">
+			<div className="info">
+				<Plain className="name" label="Name" value={name} />
+				<Plain className="family" label="Familie" value={family} />
+				<Plain className="placeofbirth" label="Geburtsort" value={placeofbirth} />
+				<Plain className="dateofbirth" label="Geburtsdatum" value={dateofbirth} />
+				<Plain className="age" label="Alter" value={age} />
+				<Plain className="sex" label="Geschlecht" value={sex} />
+				<Plain className="race" label="Spezies" value={raceName} />
+				<Plain className="size" label="Größe" value={size} />
+				<Plain className="weight" label="Gewicht" value={weight} />
+				<Plain className="haircolor" label="Haarfarbe" value={haircolorName} />
+				<Plain className="eyecolor" label="Augenfarbe" value={eyecolorName} />
+				<Plain className="culture" label="Kultur" value={cultureName} />
+				<Plain className="socialstatus" label="Sozialstatus" value={socialstatusName} />
+				<Plain className="profession" label="Profession" value={professionName} />
+				<Plain className="title" label="Titel" value={title} />
+				<Plain className="characteristics" label="Charakteristika" value={characteristics} />
+				<Plain className="otherinfo" label="Sonstiges" value={otherinfo} />
+			</div>
+			<div className="ap-portrait">
+				<LabelBox className="el" label="Erfahrungsgrad" value={el} />
+				<LabelBox className="ap-total" label="AP gesamt" value={ap.total} />
+				<LabelBox className="portrait" label="Porträt/Wappen"><Avatar src={avatar} img /></LabelBox>
+				<LabelBox className="ap-available" label="AP verfügbar" value={ap.total - ap.spent} />
+				<LabelBox className="ap-used" label="AP ausgegeben" value={ap.spent} />
+			</div>
+		</div>
+	);
+}

src/views/profile/Overview.tsx

@@ -1,11 +1,15 @@
+import { Active } from '../disadv/DisAdvRemoveListItem';
 import AvatarWrapper from '../../components/AvatarWrapper';
 import APStore from '../../stores/APStore';
 import BorderButton from '../../components/BorderButton';
+import createOverlay from '../../utils/createOverlay';
 import CultureStore from '../../stores/CultureStore';
 import DisAdvStore from '../../stores/DisAdvStore';
 import ELStore from '../../stores/ELStore';
 import IconButton from '../../components/IconButton';
-import OverviewConstSkills from './OverviewConstSkills';
+import OverviewAddAP from './OverviewAddAP';
+import OverviewAvatarChange from './OverviewAvatarChange';
+import AbilitiesTextList from './AbilitiesTextList';
 import OverviewNameChange from './OverviewNameChange';
 import OverviewPersonalData from './OverviewPersonalData';
 import ProfessionStore from '../../stores/ProfessionStore';
@@ -14,12 +18,35 @@ import RaceStore from '../../stores/RaceStore';
 import PhaseStore from '../../stores/PhaseStore';
 import ProfileActions from '../../actions/ProfileActions';
 import ProfileStore from '../../stores/ProfileStore';
-import React, { Component } from 'react';
+import * as React from 'react';
 import Scroll from '../../components/Scroll';
 import VerticalList from '../../components/VerticalList';
 import calcEL from '../../utils/calcEL';
 
-export default class Overview extends Component {
+interface ProfileOverviewState {
+	ap: number;
+	advActive: Active[];
+	disadvActive: Active[];
+	phase: number;
+	name: string;
+	sex: string;
+	avatar: string;
+	family: string;
+	placeofbirth: string;
+	dateofbirth: string;
+	age: string;
+	haircolor: number;
+	eyecolor: number;
+	size: string;
+	weight: string;
+	title: string;
+	socialstatus: number;
+	characteristics: string;
+	otherinfo: string;
+	editName: boolean;
+}
+
+export default class ProfileOverview extends React.Component<undefined, ProfileOverviewState> {
 	
 	state = {
 		ap: APStore.getTotal(),
@@ -30,11 +57,11 @@ export default class Overview extends Component {
 		editName: false
 	};
 	
-	_updateAPStore = () => this.setState({ ap: APStore.getTotal() });
-	_updateProfileStore = () => this.setState(ProfileStore.getAll());
+	_updateAPStore = () => this.setState({ ap: APStore.getTotal() } as ProfileOverviewState);
+	_updateProfileStore = () => this.setState(ProfileStore.getAll() as ProfileOverviewState);
 	_updatePhaseStore = () => this.setState({
 		phase: PhaseStore.get()
-	});
+	} as ProfileOverviewState);
 	
 	componentDidMount() {
 		APStore.addChangeListener(this._updateAPStore );
@@ -51,10 +78,10 @@ export default class Overview extends Component {
 	showImageUpload = () => createOverlay(<OverviewAvatarChange />);
 	changeName = name => {
 		ProfileActions.changeName(name);
-		this.setState({ editName: false });
+		this.setState({ editName: false } as ProfileOverviewState);
 	};
-	editName = () => this.setState({ editName: true });
-	editNameCancel = () => this.setState({ editName: false });
+	editName = () => this.setState({ editName: true } as ProfileOverviewState);
+	editNameCancel = () => this.setState({ editName: false } as ProfileOverviewState);
 
 	endCharacterCreation = () => ProfileActions.endCharacterCreation();
 	deleteHero = () => ProfileActions.deleteHero();
@@ -183,9 +210,9 @@ export default class Overview extends Component {
 						phase === 3 ? (
 							<div>
 								<h3>Vorteile</h3>
-								<OverviewConstSkills list={this.state.advActive} />
+								<AbilitiesTextList list={this.state.advActive} />
 								<h3>Nachteile</h3>
-								<OverviewConstSkills list={this.state.disadvActive} />
+								<AbilitiesTextList list={this.state.disadvActive} />
 								<BorderButton
 									className="delete-char"
 									label="Held löschen"

src/views/profile/OverviewAddAP.tsx

@@ -3,7 +3,15 @@ import ProfileActions from '../../actions/ProfileActions';
 import React, { Component, PropTypes } from 'react';
 import TextField from '../../components/TextField';
 
-export default class OverviewAddAP extends Component {
+interface OverviewAddAPProps {
+	node: HTMLDivElement;
+}
+
+interface OverviewAddAPState {
+	value: string;
+}
+
+export default class OverviewAddAP extends Component<OverviewAddAPProps, OverviewAddAPState> {
 
 	static propTypes = { 
 		node: PropTypes.any

src/views/profile/OverviewAvatarChange.tsx

@@ -1,4 +1,4 @@
-import Avatar from '../../components/Avatar';
+import AvatarWrapper from '../../components/Avatar';
 import Dialog from '../../components/Dialog';
 import Dropdown from '../../components/Dropdown';
 import ProfileActions from '../../actions/ProfileActions';
@@ -13,7 +13,7 @@ const Ext = ({ state, func }) => (
 			value={state}
 			onChange={func}
 			fullWidth />
-		<Avatar src={state} wrapper />
+		<AvatarWrapper src={state} />
 	</div>
 );
 
@@ -24,7 +24,7 @@ const FileValid = ({ func, preview }) => (
 			onChange={func}
 			type="file"
 			fullWidth />
-		<Avatar src={preview} wrapper />
+		<AvatarWrapper src={preview} />
 	</div>
 );
 

src/views/profile/OverviewConstSkills.js

@@ -1,43 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-
-export default class OverviewConstSkills extends Component {
-
-	static propTypes = {
-		list: PropTypes.array
-	};
-
-	render() {
-
-		var roman = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'];
-		var langLitc = new Set(['SA_28','SA_30']);
-
-		return (
-			<div className="list">
-				{
-					this.props.list.map(obj => {
-						let { id, name, add, tiers, tier } = obj;
-
-						if (langLitc.has(id)) {
-							return;
-						}
-
-						if (['ADV_28','ADV_29'].indexOf(id) > -1) name = `Immunität gegen ${add}`;
-						else if (id === 'DISADV_1') name = `Angst vor ${add}`;
-						else if (['DISADV_34','DISADV_50'].indexOf(id) > -1) name  += ` ${roman[tier - 1]} (${add})`;
-						else if (add) name += ` (${add})`;
-						
-						if (tiers !== undefined && tiers !== null && ['DISADV_34','DISADV_50'].indexOf(id) === -1) {
-							if (id === 'SA_30' && tier === 4) {
-								name += ` MS`;
-							} else {
-								name += ` ${roman[tier - 1]}`;
-							}
-						}
-
-						return name;
-					}).filter(e => e).join(', ')
-				}
-			</div>
-		);
-	}
-}