Merge pull request #55 from jcw780/shipUpgrades

Ship upgrades

HISTORY.md

@@ -7,7 +7,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-## [v2.2.12](https://github.com/jcw780/wows_ballistics/compare/v2.2.11...v2.2.12)
+## [v2.3.0](https://github.com/jcw780/wows_ballistics/compare/v2.2.12...v2.3.0)
+
+### Merged
+
+- Basic modifiers [`#54`](https://github.com/jcw780/wows_ballistics/pull/54)
+- Basic modifiers [`#53`](https://github.com/jcw780/wows_ballistics/pull/53)
+
+### Commits
+
+- refactor: moved upgradeforms to another file [`5a57614`](https://github.com/jcw780/wows_ballistics/commit/5a57614c64e64e4c2ad41e64bdd7b53849d457f5)
+- feature: ship upgrades basic UI complete [`d5b11ac`](https://github.com/jcw780/wows_ballistics/commit/d5b11acdfdb13b66040ddc41b9ae653e3fd7a76d)
+- feature: basic component selection working [`f867bc5`](https://github.com/jcw780/wows_ballistics/commit/f867bc51251c506867861fd2da1f72a6676edaa6)
+- feature: integrated upgrades into defaultForms updates [`0c6da8a`](https://github.com/jcw780/wows_ballistics/commit/0c6da8ada18d43f2b4b0ef6747aa9ce6a9e6ff6b)
+- fix: fixed ship upgrade items breaking column alignment [`60990fb`](https://github.com/jcw780/wows_ballistics/commit/60990fbf1f9feed35f54fb60d4c76d93ea7da2ac)
+- update version [`4723614`](https://github.com/jcw780/wows_ballistics/commit/4723614e9079f902911745e3343165ec72c81c88)
+- refactor: moved defaultForms interface into more isolated tsx [`0f35613`](https://github.com/jcw780/wows_ballistics/commit/0f35613f1f1aaaf8c0d2db781cced0d75e8344c2)
+- feature: added fcs modifiers [`16e41f3`](https://github.com/jcw780/wows_ballistics/commit/16e41f3909938fbf0b50c7712781dbe71571df80)
+
+## [v2.2.12](https://github.com/jcw780/wows_ballistics/compare/v2.2.11...v2.2.12) - 2021-01-31
 
 ### Merged
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wows_ballistics",
-  "version": "2.2.12",
+  "version": "2.3.0",
   "private": true,
   "license": "MIT",
   "homepage": "http://jcw780.github.io/wows_ballistics",

src/components/ShellForms/DefaultForms.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import {Form} from 'react-bootstrap';
+import {Button, Form, Popover, OverlayTrigger} from 'react-bootstrap';
 import * as T from '../commonTypes';
 import * as S from './Types';
+import {UpgradeTable} from './UpgradeForms';
 
 interface defaultFormProps{
 	controlId: string, keyProp: number, ariaLabel : string, children : string | JSX.Element, 
@@ -62,7 +63,7 @@ export class DefaultForm extends React.PureComponent<defaultFormProps, defaultFo
 	//componentDidUpdate(){}
 }
 
-const dataURL = "https://jcw780.github.io/LiveGameData2/data_accuracy/"
+const dataURL = "https://jcw780.github.io/LiveGameData2/data_upgrades/"
 
 const fetchJsonData = (target) => {
     return fetch(target)
@@ -98,9 +99,12 @@ export class DefaultShips extends React.PureComponent<defaultShipsProps> {
 		nation:    ['Nation'    , React.createRef<DefaultForm>(), 1], 
 		shipType:  ['Type'      , React.createRef<DefaultForm>(), 2], 
 		ship:      ['Ship'      , React.createRef<DefaultForm>(), 3], 
-		artillery: ['Artillery' , React.createRef<DefaultForm>(), 4], 
-		shellType: ['Shell Type', React.createRef<DefaultForm>(), 5],
+		artillery: ['Artillery' , React.createRef<DefaultForm>(), 5], 
+		shellType: ['Shell Type', React.createRef<DefaultForm>(), 6],
 	})
+
+	upgradesRef = React.createRef<typeof UpgradeTable>();
+
 	changeForm = async (value: string, id: keyof(defaultFormType)) => {
 		//this.defaultForms[id][singleFormIndex.value] = value;
 		let queryIndex = this.defaultForms[id][singleFormIndex.queryIndex];
@@ -111,10 +115,31 @@ export class DefaultShips extends React.PureComponent<defaultShipsProps> {
 		}
 		defaultData[id][S.DefaultDataRowI.value] = value;
 		// Now iterative - instead of waiting for rerenders and clogging stack depth
-		for(; queryIndex <= 5; ++queryIndex){
+		for(; queryIndex <= 6; ++queryIndex){
+			this.postVersion(queryIndex)();
+		}
+	}
+	changeUpgrades = () => {
+		this.updateUpgrades();
+		for(let queryIndex = 4; queryIndex <= 6; ++queryIndex){
 			this.postVersion(queryIndex)();
 		}
 	}
+	updateUpgrades = () => {
+		const {upgrades, values} = this.props.defaultData; 
+		const temp: Record<string, string[]> = {};
+		Object.entries(values).forEach(([k, v]) => {
+			const current_data = upgrades[k][v][2];
+			Object.entries(current_data.components).forEach(([cType, cList]: [string, string[]]) => {
+				if(cType in temp){
+					temp[cType] = temp[cType].filter(value => cList.includes(value));
+				}else{
+					temp[cType] = cList;
+				}
+			});
+		});
+		this.props.defaultData.components = temp;
+	}
 	updateForm = (target: keyof(defaultFormType), options: string[], values: string[]) => {
 		const {current} = this.defaultForms[target][singleFormIndex.ref];
 		if(current){ 
@@ -181,8 +206,21 @@ export class DefaultShips extends React.PureComponent<defaultShipsProps> {
 			}
 			this.updateForm('ship', options, values);
 		}
-		const queryArtillery = () => {
-			const options = Object.keys(qDataS[nation][type][ship].artillery);
+		const queryUpgrades = () => {
+			const {upgrades, values} = this.props.defaultData; 
+			Object.keys(upgrades).forEach((key) => {
+				delete upgrades[key];
+				delete values[key];
+			});
+			Object.entries(qDataS[nation][type][ship].upgrades).forEach(([k, v]) => {
+				upgrades[k] = v; values[k] = 0;
+			});
+			this.updateUpgrades();
+			if (this.upgradesRef.current)
+				this.upgradesRef.current.updateUpgradeListsRaw(upgrades);
+		}
+		const queryArtillery = () => {			
+			const options = dData.components.artillery !== undefined ? dData.components.artillery: [];
 			this.updateForm('artillery', options, options);
 		}
 		const queryShellType = () => {
@@ -202,10 +240,16 @@ export class DefaultShips extends React.PureComponent<defaultShipsProps> {
 				name = qDataS[nation][type][ship].Name
 			}
 
+			if('fireControl' in dData.components){
+				const fireControlSystem = dData.components.fireControl[0];
+				const fireControlParameters = qDataS[nation][type][ship].fireControl[fireControlSystem];
+				dispersionData.maxDist *= fireControlParameters.maxDistCoef;
+				dispersionData.sigmaCount *= fireControlParameters.sigmaCountCoef;
+			}
 			this.props.sendDefault({...dData.queriedData.shells[shellName], ...dispersionData}, name);
 		}
 		const queries = [
-			queryNation, queryType, queryShip,
+			queryNation, queryType, queryShip, queryUpgrades,
 			queryArtillery, queryShellType, sendData
 		];
 		return queries[index];
@@ -228,10 +272,37 @@ export class DefaultShips extends React.PureComponent<defaultShipsProps> {
 			</DefaultForm>
 			);
 		}
-		const run = () => Object.entries(this.defaultForms).map(singleForm); return run;
+		//const run = () => Object.entries(this.defaultForms).map(singleForm); return run;
+		//const {defaultData} = this.props;
+		return <>
+			{singleForm(['version', this.defaultForms.version], 0)}
+			{singleForm(['nation', this.defaultForms.nation], 1)}
+			{singleForm(['shipType', this.defaultForms.shipType], 2)}
+			{singleForm(['ship', this.defaultForms.ship], 3)}
+			<OverlayTrigger trigger="click" placement="bottom-start" overlay={
+				<Popover>
+					<Popover.Content>
+					<UpgradeTable 
+					ref={this.upgradesRef}
+					upgrades={this.props.defaultData.upgrades} 
+					values={this.props.defaultData.values}
+					localized={this.props.formatSettings.shortNames}
+					onChange={this.changeUpgrades}
+					/>
+					</Popover.Content>
+				</Popover>
+				}
+			>
+				<Button className="footer-button btn-custom-blue" variant="warning" >
+					Ship Upgrades
+				</Button>
+			</OverlayTrigger>
+			{singleForm(['artillery', this.defaultForms.artillery], 4)}
+			{singleForm(['shellType', this.defaultForms.shellType], 5)}
+		</>;
 	}
 	render(){
-		return(<>{this.addDefaultForms()()}</>);
+		return(<>{this.addDefaultForms()}</>);
 	}
 	//componentDidUpdate(){}
 }

src/components/ShellForms/ShellForms.tsx

@@ -28,7 +28,9 @@ export class ShellForms extends React.PureComponent<shellFormsProps> {
 	defaultData : S.defaultDataT = Object.seal({
 		version: ['', [''], ['']], nation: ['', [''], ['']], shipType: ['', [''], ['']], 
 		ship: ['', [''], ['']], artillery: ['', [''], ['']], shellType: ['', [''], ['']],
-		queriedData: {}
+		queriedData: {},
+
+		upgrades: {}, values: {}, components: {}
 	});
 	formData : S.formDataT = Object.seal({
 		caliber: 0, muzzleVelocity: 0, dragCoefficient: 0,

src/components/ShellForms/Types.tsx

@@ -27,7 +27,18 @@ export interface formDataT extends formTemplate<number>, dispersionTemplate<numb
 	name: string, colors: string[]
 }
 
+export interface defaultFormGeneric<T>{
+    version: T, nation: T, shipType: T, 
+	ship: T, artillery: T, shellType: T,
+}
+
 export enum DefaultDataRowI {value, options, values}
 export type DefaultDataRowT = [string, string[], string[]]
-interface queriedDataT {queriedData: Record<string, Record<string, any>>}
-export type defaultDataT = T.defaultFormGeneric<DefaultDataRowT> & queriedDataT
+interface queriedDataT {
+	queriedData: Record<string, Record<string, any>>
+}
+interface upgradeDataT {
+	upgrades: Record<string, [string, string, any][]>, values: Record<string, number>,
+	components: Record<string, string[]>
+}
+export type defaultDataT = defaultFormGeneric<DefaultDataRowT> & queriedDataT & upgradeDataT

src/components/ShellForms/UpgradeForms.tsx

@@ -0,0 +1,111 @@
+import React, {useState, useImperativeHandle} from 'react';
+
+function UpgradeSingle({active, name, img_target, onClick} : 
+	{active: boolean, name: string, img_target: [string, string], onClick: () => void}){
+	return (
+	<figure onClick={() => {onClick()}}>
+		<img src={`${process.env.PUBLIC_URL}/upgrades/${img_target[active?1:0]}.png`} alt={name}/>
+		<figcaption style={{wordWrap: 'normal'}}>{name}</figcaption>
+	</figure>);
+}
+
+function UpgradeColumn({column, value, rows_max, img_target, localized, sendValue} : {
+	column: [string, string, any][], 
+	value: number, 
+	rows_max: number, 
+	img_target: [string, string], 
+	localized: boolean,
+	sendValue: (index: number) => void}){
+	const [value_state, setValue] = useState(value);
+	const changeSelected = (index: number) => {
+		if (value_state !== index){
+			sendValue(index);
+			setValue(index);
+		}
+	}
+
+	return (
+		<div>
+			{column.map((row, i: number) => {
+				const name = (row[1] !== "") && localized ? row[1]: row[0];
+				return (
+					<UpgradeSingle 
+					key={i}
+					active={i === value_state} 
+					name={name} 
+					img_target={img_target} 
+					onClick={() => {changeSelected(i)}}/>
+				);	
+			})}
+			{
+				Array(rows_max - column.length).fill(<div style={{height: '60px', width: '60px'}}></div>)
+			}
+		</div>
+	);
+}
+
+const upgrade_order = ['_Artillery', '_Hull', '_Torpedoes', '_Suo', '_Engine'];
+const upgrade_img_src_table = Object.freeze({
+	'_Artillery': ['icon_module_Artillery', 'icon_module_Artillery_installed'],
+	'_Hull': ['icon_module_Hull', 'icon_module_Hull_installed'],
+	'_Torpedoes': ['icon_module_Torpedoes', 'icon_module_Torpedoes_installed'],
+	'_Suo': ['icon_module_Suo', 'icon_module_Suo_installed'],
+	'_Engine': ['icon_module_Engine', 'icon_module_Engine_installed'] 
+});
+
+export const UpgradeTable = React.forwardRef((
+	{upgrades, values, localized, onChange}: {
+		upgrades: Record<string, [string, string, any][]>, 
+		values: Record<string, number>,
+		localized: boolean,
+		onChange: () => void,
+	}, 
+	ref) => {
+	const makeUpgradeLists = (raw_upgrades: Record<string, [string, string, any][]>) => {
+		const upgrade_lists = Object.entries(raw_upgrades);
+		upgrade_lists.sort((a, b) => upgrade_order.indexOf(a[0]) - upgrade_order.indexOf(b[0]));
+		return upgrade_lists;
+	}
+	const [upgrade_lists, changeUpgradeLists] = useState(makeUpgradeLists(upgrades));
+
+	useImperativeHandle(ref, () => ({
+		updateUpgradeListsRaw: (raw_upgrades: Record<string, [string, string, any][]>) => {
+			changeUpgradeLists(makeUpgradeLists(raw_upgrades));
+		}
+	}));
+
+	const updateValue = (type: string, value: number) => {
+		values[type] = value;
+		onChange();
+	}
+
+	const rows_max: number = (()=>{
+		let rows_max_current = 0;
+		upgrade_lists.forEach(([, data]) => {
+			rows_max_current = Math.max(rows_max_current, data.length);
+		});
+		return rows_max_current;
+	})();
+
+	return (
+		<div style={{
+			display: 'grid', 
+			gridTemplateColumns: `repeat(${upgrade_lists.length}, 1fr)`,
+			columnGap: `.5rem`
+		}}>
+		{upgrade_lists.map(([type, data], i) => {
+			return (
+				<UpgradeColumn 
+				key={i}
+				column={data} 
+				value={values[type]} 
+				rows_max={rows_max}
+				img_target={upgrade_img_src_table[type]} 
+				localized={localized}
+				sendValue={(index: number) => {updateValue(type, index);}}
+				/>
+			);
+		})}
+		</div>
+	);
+});

src/components/commonTypes.tsx

@@ -15,12 +15,6 @@ export interface styleT{
 
 export type handleValueChangeT = (value: string, id: string | number) => void | string;
 
-//DefaultForms
-export interface defaultFormGeneric<T>{
-    version: T, nation: T, shipType: T, 
-	ship: T, artillery: T, shellType: T,
-}
-
 //Target Data
 export interface targetDataNoAngleT {
     armor: number, inclination: number, width: number,