From 2e024c594e6d8a56b44b7cf21bdf8acd2554768d Mon Sep 17 00:00:00 2001 From: jwc780 Date: Mon, 15 Jun 2020 20:06:24 -0400 Subject: [PATCH] some shortening and indention changes --- src/components/App.tsx | 42 +++---- src/components/Charts.tsx | 132 +++++++++++----------- src/components/DefaultForms.tsx | 68 ++++++------ src/components/DownloadButton.tsx | 9 +- src/components/Navbar.tsx | 46 ++++---- src/components/ParameterForm.tsx | 25 +++-- src/components/SettingsBar.tsx | 142 ++++++++++++------------ src/components/ShellForms.tsx | 175 +++++++++++++++--------------- src/components/TargetForms.tsx | 74 ++++++------- src/components/Tooltips.tsx | 16 +-- 10 files changed, 364 insertions(+), 365 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index e2dbd7b..bc20c16 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -237,27 +237,27 @@ class App extends React.Component<{},{}> { } render () { return ( -
- -

World of Warships Ballistics Calculator

-
- -
- -
- -
- - - - - - - -
- -
+
+ +

World of Warships Ballistics Calculator

+
+ +
+ +
+ +
+ + + + + + + +
+ +
); } componentDidMount(){ diff --git a/src/components/Charts.tsx b/src/components/Charts.tsx index 5f759b0..a7298fc 100644 --- a/src/components/Charts.tsx +++ b/src/components/Charts.tsx @@ -49,29 +49,29 @@ export class SingleChart extends React.Component - - -
- - - - - - - -
- - +<> + + +
+ + + + + + + +
+ + ); } componentDidUpdate(){ @@ -464,49 +464,49 @@ export class ChartGroup extends React.Component{ }); } return( - <> - - - - - - - -
Effective Penetration*Belt Impact Angle
Effective Deck Penetration*Deck Impact Angle
Impact VelocityTime to Target**
- * Adjusts for fall angle and normalization
- does not adjust for armor inclination
- ** Scaled by x(1/3.1) ≈ game / real world
- - }> -

Impact Charts

- - {addChart('impact')} - - Shows at what target angles and ranges shells will:
- - Start Ricocheting - Always Ricochet
- - No Longer Perforate Armor
- - Start to Fuse on Armor
- Note: Adjusts for angle of fall and armor inclination - - }> -

Angle Charts

- - {addChart('angle')} - - Show how far shells would travel into a ship after penetrating armor.
- Along with whether and when shells would fuse at the given target angle.
- Note:
- - Shows x axis of distance travelled (distance travelled that is parallel to the ship's beam)
- ***This is not total distance travelled by the shell. ***
- - Adjusts for angle of fall and armor inclination - - }> -

Post-Penetration Charts

- - {addChart('post')} - +<> + + + + + + + +
Effective Penetration*Belt Impact Angle
Effective Deck Penetration*Deck Impact Angle
Impact VelocityTime to Target**
+ * Adjusts for fall angle and normalization
- does not adjust for armor inclination
+ ** Scaled by x(1/3.1) ≈ game / real world
+ + }> +

Impact Charts

+ + {addChart('impact')} + + Shows at what target angles and ranges shells will:
+ - Start Ricocheting - Always Ricochet
+ - No Longer Perforate Armor
+ - Start to Fuse on Armor
+ Note: Adjusts for angle of fall and armor inclination + + }> +

Angle Charts

+ + {addChart('angle')} + + Show how far shells would travel into a ship after penetrating armor.
+ Along with whether and when shells would fuse at the given target angle.
+ Note:
+ - Shows x axis of distance travelled (distance travelled that is parallel to the ship's beam)
+ ***This is not total distance travelled by the shell. ***
+ - Adjusts for angle of fall and armor inclination + + }> +

Post-Penetration Charts

+ + {addChart('post')} + ); } componentDidMount(){ diff --git a/src/components/DefaultForms.tsx b/src/components/DefaultForms.tsx index 97f440d..96e567d 100644 --- a/src/components/DefaultForms.tsx +++ b/src/components/DefaultForms.tsx @@ -67,7 +67,6 @@ const fetchJsonData = async (target) => { } return response.json(); }) - .then((data) => {return data;}) .catch((error) => { console.error('There has been a problem with your fetch operation:', error); } @@ -82,15 +81,16 @@ class DefaultShips extends React.Component <{sendDefault: Function, reset: Function, index: number, keyProp: number, defaultData: T.defaultDataT}> { defaultForms : defaultFormType = Object.seal({ version: ['Version' , React.createRef(), 0], - nation: ['Nation' , React.createRef(), 0], - shipType: ['Type' , React.createRef(), 0], - ship: ['Ship' , React.createRef(), 0], - artillery: ['Artillery' , React.createRef(), 0], - shellType: ['Shell Type', React.createRef(), 0], + nation: ['Nation' , React.createRef(), 1], + shipType: ['Type' , React.createRef(), 2], + ship: ['Ship' , React.createRef(), 3], + artillery: ['Artillery' , React.createRef(), 4], + shellType: ['Shell Type', React.createRef(), 5], }) changeForm = (value, id) => { //this.defaultForms[id][singleFormIndex.value] = value; - this.props.defaultData[id][T.singleDefaultDataIndex.value] = value; + const defaultData = this.props.defaultData; + defaultData[id][T.singleDefaultDataIndex.value] = value; const queryIndex = this.defaultForms[id][singleFormIndex.queryIndex]; const queries = { 0: this.queryNation, 1: this.queryType, 2: this.queryShip, @@ -114,30 +114,34 @@ class DefaultShips extends React.Component }); } queryNation = () => { - fetchJson(dataURL + this.props.defaultData.version[T.singleDefaultDataIndex.value] + "/nations.json", + const defaultData = this.props.defaultData; + fetchJson(dataURL + defaultData.version[T.singleDefaultDataIndex.value] + "/nations.json", (data) => {this.updateForm('nation', data);} ); } queryType = () => { - fetchJson(dataURL + this.props.defaultData.version[T.singleDefaultDataIndex.value] + "/" + - this.props.defaultData.nation[T.singleDefaultDataIndex.value] + "/shiptypes.json", + const defaultData = this.props.defaultData; + fetchJson(dataURL + defaultData.version[T.singleDefaultDataIndex.value] + "/" + + defaultData.nation[T.singleDefaultDataIndex.value] + "/shiptypes.json", (data) => {this.updateForm('shipType', data);} ); } queryShip = async () => { + const defaultData = this.props.defaultData; const data = await fetchJsonData( - dataURL + this.props.defaultData.version[T.singleDefaultDataIndex.value] + "/" + - this.props.defaultData.nation[T.singleDefaultDataIndex.value] + - "/" + this.props.defaultData.nation[T.singleDefaultDataIndex.value] + "_" + - this.props.defaultData.shipType[T.singleDefaultDataIndex.value] + ".json"); - this.props.defaultData.queriedData = data; + dataURL + defaultData.version[T.singleDefaultDataIndex.value] + "/" + + defaultData.nation[T.singleDefaultDataIndex.value] + + "/" + defaultData.nation[T.singleDefaultDataIndex.value] + "_" + + defaultData.shipType[T.singleDefaultDataIndex.value] + ".json"); + defaultData.queriedData = data; let sorted = Object.keys(data); sorted.sort((a, b) => {return data[a]['Tier'] - data[b]['Tier']}); this.updateForm('ship', sorted); } queryArtillery = () => { - const shipName : string = this.props.defaultData.ship[T.singleDefaultDataIndex.value]; - const shipInfo = this.props.defaultData.queriedData[shipName]; + const defaultData = this.props.defaultData; + const shipName : string = defaultData.ship[T.singleDefaultDataIndex.value]; + const shipInfo = defaultData.queriedData[shipName]; let options: string[] = []; Object.keys(shipInfo!).forEach((key : string) : void => { if(key.includes('Artillery')){options.push(key);} @@ -145,29 +149,31 @@ class DefaultShips extends React.Component this.updateForm('artillery', options); } queryShellType = () => { - const input = this.props.defaultData.queriedData[this.props.defaultData.ship[T.singleDefaultDataIndex.value]] + const defaultData = this.props.defaultData; + const input = defaultData.queriedData[this.props.defaultData.ship[T.singleDefaultDataIndex.value]] [this.props.defaultData.artillery[T.singleDefaultDataIndex.value]]; this.updateForm('shellType', Object.keys(input)); } sendData = () => { + const defaultData = this.props.defaultData; this.props.sendDefault( - this.props.defaultData.queriedData[this.props.defaultData.ship[T.singleDefaultDataIndex.value]] - [this.props.defaultData.artillery[T.singleDefaultDataIndex.value]] - [this.props.defaultData.shellType[T.singleDefaultDataIndex.value]], - this.props.defaultData.ship[T.singleDefaultDataIndex.value] + defaultData.queriedData[defaultData.ship[T.singleDefaultDataIndex.value]] + [defaultData.artillery[T.singleDefaultDataIndex.value]] + [defaultData.shellType[T.singleDefaultDataIndex.value]], + defaultData.ship[T.singleDefaultDataIndex.value] ); } render(){ + const defaultData = this.props.defaultData; return( - - {Object.entries(this.defaultForms).map( ([k, v], i) => { - v[singleFormIndex.queryIndex] = i; - return ( ); - })} - + + {Object.entries(this.defaultForms).map( ([name, v], i) => { + return ( ); + })} + ); } //componentDidUpdate(){} diff --git a/src/components/DownloadButton.tsx b/src/components/DownloadButton.tsx index 522826b..93e496c 100644 --- a/src/components/DownloadButton.tsx +++ b/src/components/DownloadButton.tsx @@ -11,12 +11,11 @@ export class DownloadButton extends React.Component<{updateData: Function, label } private click = () => {this.props.updateData()} render(){ + const state = this.state, props = this.props; return ( - - - + + + ); } } diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index a7ca85d..2517da9 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -18,29 +18,29 @@ class NavbarCustom extends React.Component<{links: T.linkT}>{ }; return( - - {window.scrollTo(0, 0);}}>World of Warships Ballistics Calculator - - - + + {window.scrollTo(0, 0);}}>World of Warships Ballistics Calculator + + + ); } } diff --git a/src/components/ParameterForm.tsx b/src/components/ParameterForm.tsx index 8f6d952..fdbbaad 100644 --- a/src/components/ParameterForm.tsx +++ b/src/components/ParameterForm.tsx @@ -35,19 +35,20 @@ export class ParameterForm extends React.Component {return {value: newValue, invalid: false};}); } render(){ + const props = this.props, state = this.state, style = props.style; return ( - - {this.props.children} - - - - {this.appendText} - - - + + {props.children} + + + + {this.appendText} + + + ); } } \ No newline at end of file diff --git a/src/components/SettingsBar.tsx b/src/components/SettingsBar.tsx index 93c0a61..5892ab4 100644 --- a/src/components/SettingsBar.tsx +++ b/src/components/SettingsBar.tsx @@ -134,77 +134,77 @@ export class SettingsBar extends React.Component - -
- - -

Graphs

- - -

Line

- - - - - Show Line - - - - -

Range Axis

- {generateGraphForm()} - - -

Labeling

- - - - - Short Names - - - - - - Tooltip Rounding - -

Color Generation

- - Saturation - - - Light - - - - - -

Calculations

- - -

Launch Angle

- {generateLaunchAngleForm()} - - -

Numerical Analysis

- - {generateNumericalMethodForm()} - - - - -
+ +
+ + +

Graphs

+ + +

Line

+ + + + + Show Line + + + + +

Range Axis

+ {generateGraphForm()} + + +

Labeling

+ + + + + Short Names + + + + + + Tooltip Rounding + +

Color Generation

+ + Saturation + + + Light + + + + + +

Calculations

+ + +

Launch Angle

+ {generateLaunchAngleForm()} + + +

Numerical Analysis

+ + {generateNumericalMethodForm()} + + + + +
 ); } } diff --git a/src/components/ShellForms.tsx b/src/components/ShellForms.tsx index 332423f..d03400a 100644 --- a/src/components/ShellForms.tsx +++ b/src/components/ShellForms.tsx @@ -21,39 +21,41 @@ class ShellParameters extends React.Component{ downloadRef = React.createRef(); handleValueChange = (value, k) => {this.props.handleValueChange(value, k);} updateShells() { - Object.entries(this.props.formLabels).forEach(([key, value] : any): void => { - value[valuesComponentIndex.ref].current.updateValue(this.props.formValues[key]); + const props = this.props; + Object.entries(props.formLabels).forEach(([key, value] : any): void => { + value[valuesComponentIndex.ref].current.updateValue(props.formValues[key]); }); } updateDownloadJSON = () => { - const selectedData = Object.assign({}, this.props.formValues); + const formValues = this.props.formValues, selectedData = cloneDeep(formValues); delete selectedData.colors; const url = URL.createObjectURL(new Blob([JSON.stringify(selectedData)], {type: 'text/json;charset=utf-8'})); - this.downloadRef.current!.update(url, this.props.formValues.name + '.json'); + this.downloadRef.current!.update(url, formValues.name + '.json'); } render() { + const props = this.props; return( - <> -
- {Object.entries(this.props.formLabels).map(([key, value] : [string, valuesComponent], i) => { - return ( - - {value[valuesComponentIndex.name]} - - ); - })} -
- - - - - - - - +<> +
+ {Object.entries(props.formLabels).map(([key, value] : [string, valuesComponent], i) => { + return ( + + {value[valuesComponentIndex.name]} + + ); + })} +
+ + + + + + + + ); } } @@ -324,57 +326,58 @@ export class ShellForms extends React.Component { this.graph = event.target.checked; } render() { + const props = this.props; return( - - - Shell {this.props.index + 1} - - - - - - Shell Label - - - Colors - - + + + Shell {props.index + 1} + + + + + + Shell Label + + + Colors + + + + + + Graph Shell + +
+ + + + + + + + + + + - - - Graph Shell - -
- - - - - - - - - - - - - - - - }> - - - - - - - - + + + + }> + + + + + + + + ); } componentDidMount(){ @@ -413,13 +416,14 @@ export class ShellFormsContainer extends React.Component<{settings : T.settingsT colors : string[] = []; addShip = () => { - if(this.state.disabled && (this.state.keys.size > 0)){return;} + const state = this.state; + if(state.disabled && (state.keys.size > 0)){return;} else{ let index: number = 0; if(this.deletedKeys.length > 0){ index = this.deletedKeys.pop()!; }else{ - index = this.state.keys.size; + index = state.keys.size; } this.shellRefs.push(React.createRef()); @@ -430,10 +434,11 @@ export class ShellFormsContainer extends React.Component<{settings : T.settingsT } } deleteShip = (key, index) => { - if(this.state.disabled){return;} + const state = this.state; + if(state.disabled){return;} else{ - if(this.state.keys.size > 0){ - let set = this.state.keys; set.delete(key); this.deletedKeys.push(key); + if(state.keys.size > 0){ + let set = state.keys; set.delete(key); this.deletedKeys.push(key); this.shellRefs.splice(index, 1); this.setState((current) => { return {keys: set, disabled: true}; @@ -442,12 +447,8 @@ export class ShellFormsContainer extends React.Component<{settings : T.settingsT } } copyShip = (defaultData : T.defaultDataT, shellData : formDataT) => { - const data: copyTempT = { - default: defaultData, - data: shellData - } - this.copyTemp = data; this.copied = true; - this.addShip(); + this.copyTemp = {default: defaultData, data: shellData}; + this.copied = true; this.addShip(); } returnShellData = () => { let data = Array(); @@ -491,8 +492,8 @@ export class ShellFormsContainer extends React.Component<{settings : T.settingsT render(){ this.updateColors(); const generateShellForms = () => { + const stateKeys = Array.from(this.state.keys); if(this.copied){ - const stateKeys = Array.from(this.state.keys); let returnValue : JSX.Element[] = []; for(let i=0; i< stateKeys.length - 1; i++){ const value = stateKeys[i]; @@ -518,7 +519,7 @@ export class ShellFormsContainer extends React.Component<{settings : T.settingsT ) return returnValue; }else{ - return Array.from(this.state.keys).map((value, i) => { + return stateKeys.map((value, i) => { return { this.props.deleteElement(this.props.keyProp, this.props.index); } render(){ + const props = this.props; return ( - Label {this.props.index + 1} + Label {props.index + 1} Text Angle @@ -53,17 +54,18 @@ class AngleForm extends React.Component{ this.props.deleteElement(this.props.keyProp, this.props.index); } render(){ + const props = this.props; return ( - - {this.props.label} + + {props.label} @@ -123,8 +125,8 @@ class TargetFormsContainer extends React.Component ], width: ['Target Width', 'm', <> - Width (Beam) of the targeted ship
- *Labeling purposes only + Width (Beam) of the targeted ship.
+ *These do not affect calculation values. @@ -180,16 +182,17 @@ class TargetFormsContainer extends React.Component } deleteRefAngle = (key : number, index : number) => { this.targetData.refAngles.splice(index, 1); - this.targetData.refLabels.splice(index, 1) + this.targetData.refLabels.splice(index, 1); this.deleteForm(key, index, 'refAngles'); } onRefAngleChange = (value: string, id : string) : void => {this.targetData.refAngles[id] = parseFloat(value);} onRefLabelChange = (value: string, id : string) : void => {this.targetData.refLabels[id] = value;} render(){ + const stateKeys = this.state.keys; const generateAngleElements = (elementsPerColumn : number) => { let angleElements : Array> = []; - Array.from(this.state.keys.angles).forEach((key, i) => { + Array.from(stateKeys.angles).forEach((key, i) => { const columnIndex = Math.floor(i / elementsPerColumn); if(i % elementsPerColumn === 0){angleElements.push([]);} angleElements[columnIndex].push( @@ -203,7 +206,7 @@ class TargetFormsContainer extends React.Component } const generateRefAngleElements = (elementsPerColumn : number) => { let angleElements : Array> = []; - Array.from(this.state.keys.refAngles).forEach((key, i) => { + Array.from(stateKeys.refAngles).forEach((key, i) => { const columnIndex = Math.floor(i / elementsPerColumn); if(i % elementsPerColumn === 0){angleElements.push([]);} angleElements[columnIndex].push( @@ -243,9 +246,7 @@ class TargetFormsContainer extends React.Component handleValueChange={this.handleChange} type="number" labelWidth={3} append={value[1]} ariaLabel={value[0]}> -
- {value[0]} -
+
{value[0]}
 @@ -255,31 +256,24 @@ class TargetFormsContainer extends React.Component - Angle that target is presenting, adding or changing
values affects post-penetration charts.
+ Angle that target is presenting,
+ adding or changing values affects
+ post-penetration charts.
Examples
- - - - - - - - - - - - - + + + + + + +
Examples
0°Full Broadside
45°Standard Start Ricochet*
60°Standard Always Ricochet*
90°Perfectly Angled
Examples
0°Full Broadside
45°Standard Start Ricochet*
60°Standard Always Ricochet*
90°Perfectly Angled
- *At 0° angle of fall and 0° armor inclination. + *0° angle of fall and armor inclination. } >

Target Angles

- - {renderAngleElements(angleElements)} - + {renderAngleElements(angleElements)} -