Skip to content

Commit

Permalink
some shortening and indention changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcw780
jcw780 committed Jun 16, 2020
1 parent 88de3c2 commit 2e024c5
Show file tree
Hide file tree
Showing 10 changed files with 364 additions and 365 deletions.
42 changes: 21 additions & 21 deletions src/components/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,27 +237,27 @@ class App extends React.Component<{},{}> {
}
render () {
return (
<div className="App">
<NavbarCustom links={this.links} ref={this.navRef}/>
<h1 style={{textAlign: 'center'}}>World of Warships Ballistics Calculator</h1>
<hr/>
<ShellFormsContainer ref={this.SFCref} settings={this.settings}/>
<hr/>
<TargetFormsContainer ref={this.TFCref}/>
<hr/>
<SettingsBar settings={this.settings} ref={this.Settingsref} updateColors={this.updateColors}/>
<hr/>
<Row>
<Col/>
<Col sm="9">
<Button style={{width: "100%", paddingTop: "0.6rem", paddingBottom: "0.6rem"}}
variant="secondary" onClick={this.generate}>Make Graphs!</Button>
</Col>
<Col/>
</Row>
<hr/>
<ChartGroup ref={this.graphsRef} settings={this.settings} links={this.links} onUpdate={this.onUpdate}/>
</div>
<div className="App">
<NavbarCustom links={this.links} ref={this.navRef}/>
<h1 style={{textAlign: 'center'}}>World of Warships Ballistics Calculator</h1>
<hr/>
<ShellFormsContainer ref={this.SFCref} settings={this.settings}/>
<hr/>
<TargetFormsContainer ref={this.TFCref}/>
<hr/>
<SettingsBar settings={this.settings} ref={this.Settingsref} updateColors={this.updateColors}/>
<hr/>
<Row>
<Col/>
<Col sm="9">
<Button style={{width: "100%", paddingTop: "0.6rem", paddingBottom: "0.6rem"}}
variant="secondary" onClick={this.generate}>Make Graphs!</Button>
</Col>
<Col/>
</Row>
<hr/>
<ChartGroup ref={this.graphsRef} settings={this.settings} links={this.links} onUpdate={this.onUpdate}/>
</div>
);
}
componentDidMount(){
Expand Down
132 changes: 66 additions & 66 deletions src/components/Charts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,29 +49,29 @@ export class SingleChart extends React.Component<singleChartProps, singleChartSt
}
render(){
return(
<>
<Button style={{width: "100%", paddingTop: "0.6rem", paddingBottom: "0.6rem", height: "3rem"}}
onClick={this.toggleCollapse} ref={this.scrollRef} variant="dark"
aria-controls="collapseChart"
aria-expanded={this.state.open}
className={this.state.open === true ? 'active' : ''}
>{this.titles[Number(!this.state.open)] + this.props.title}</Button>
<Collapse in={this.state.open}>
<div id="collapseChart">
<Scatter data={this.props.config.data} options={this.props.config.options}
width={this.props.dimensions.width} height={this.props.dimensions.height}
ref={this.chartRef} datasetKeyProvider={this.datasetKeyProvider}/>
<Row style={{margin: 0}}>
<Col sm="4" style={{padding: 0}}/>
<Col sm="2" style={{padding: 0}}><DownloadButton ref={this.DownloadRef[0]} updateData={this.updateDownloadGraph}
label="Download Graph"/></Col>
<Col sm="2" style={{padding: 0}}><DownloadButton ref={this.DownloadRef[1]} updateData={this.updateDownloadJSON}
label="Download Data"/></Col>
<Col sm="4" style={{padding: 0}}/>
</Row>
</div>
</Collapse>
</>
<>
<Button style={{width: "100%", paddingTop: "0.6rem", paddingBottom: "0.6rem", height: "3rem"}}
onClick={this.toggleCollapse} ref={this.scrollRef} variant="dark"
aria-controls="collapseChart"
aria-expanded={this.state.open}
className={this.state.open === true ? 'active' : ''}
>{this.titles[Number(!this.state.open)] + this.props.title}</Button>
<Collapse in={this.state.open}>
<div id="collapseChart">
<Scatter data={this.props.config.data} options={this.props.config.options}
width={this.props.dimensions.width} height={this.props.dimensions.height}
ref={this.chartRef} datasetKeyProvider={this.datasetKeyProvider}/>
<Row style={{margin: 0}}>
<Col sm="4" style={{padding: 0}}/>
<Col sm="2" style={{padding: 0}}><DownloadButton ref={this.DownloadRef[0]} updateData={this.updateDownloadGraph}
label="Download Graph"/></Col>
<Col sm="2" style={{padding: 0}}><DownloadButton ref={this.DownloadRef[1]} updateData={this.updateDownloadJSON}
label="Download Data"/></Col>
<Col sm="4" style={{padding: 0}}/>
</Row>
</div>
</Collapse>
</>
);
}
componentDidUpdate(){
Expand Down Expand Up @@ -464,49 +464,49 @@ export class ChartGroup extends React.Component<chartGroupProps>{
});
}
return(
<>
<GeneralTooltip title="Impact Charts" content={
<>
<table id="tooltip-table">
<tbody>
<tr><td>Effective Penetration*</td><td>Belt Impact Angle</td></tr>
<tr><td>Effective Deck Penetration*</td><td>Deck Impact Angle</td></tr>
<tr><td>Impact Velocity</td><td>Time to Target**</td></tr>
</tbody>
</table>
* Adjusts for fall angle and normalization <br/> - does not adjust for armor inclination <br/>
** Scaled by x(1/3.1) ≈ game / real world <br/>
</>
}>
<h3 style={{textAlign: "center", display:"inline-block"}}>Impact Charts</h3>
</GeneralTooltip>
{addChart('impact')}
<GeneralTooltip title="Angle Charts" content={
<>
Shows at what target angles and ranges shells will: <br/>
- Start Ricocheting - Always Ricochet <br/>
- No Longer Perforate Armor <br/>
- Start to Fuse on Armor <br/>
Note: Adjusts for angle of fall and armor inclination
</>
}>
<h3 style={{textAlign: "center", display:"inline-block"}}>Angle Charts</h3>
</GeneralTooltip>
{addChart('angle')}
<GeneralTooltip title="Post-Penetration Charts" content={
<>
Show how far shells would travel into a ship after penetrating armor. <br/>
Along with whether and when shells would fuse at the given target angle. <br/>
Note: <br/>
- Shows x axis of distance travelled (distance travelled that is parallel to the ship's beam) <br/>
***This is not total distance travelled by the shell. ***<br/>
- Adjusts for angle of fall and armor inclination
</>
}>
<h3 style={{textAlign: "center", display:"inline-block"}}>Post-Penetration Charts</h3>
</GeneralTooltip>
{addChart('post')}
</>
<>
<GeneralTooltip title="Impact Charts" content={
<>
<table id="tooltip-table">
<tbody>
<tr><td>Effective Penetration*</td><td>Belt Impact Angle</td></tr>
<tr><td>Effective Deck Penetration*</td><td>Deck Impact Angle</td></tr>
<tr><td>Impact Velocity</td><td>Time to Target**</td></tr>
</tbody>
</table>
* Adjusts for fall angle and normalization <br/> - does not adjust for armor inclination <br/>
** Scaled by x(1/3.1) ≈ game / real world <br/>
</>
}>
<h3 style={{textAlign: "center", display:"inline-block"}}>Impact Charts</h3>
</GeneralTooltip>
{addChart('impact')}
<GeneralTooltip title="Angle Charts" content={
<>
Shows at what target angles and ranges shells will: <br/>
- Start Ricocheting - Always Ricochet <br/>
- No Longer Perforate Armor <br/>
- Start to Fuse on Armor <br/>
Note: Adjusts for angle of fall and armor inclination
</>
}>
<h3 style={{textAlign: "center", display:"inline-block"}}>Angle Charts</h3>
</GeneralTooltip>
{addChart('angle')}
<GeneralTooltip title="Post-Penetration Charts" content={
<>
Show how far shells would travel into a ship after penetrating armor. <br/>
Along with whether and when shells would fuse at the given target angle. <br/>
Note: <br/>
- Shows x axis of distance travelled (distance travelled that is parallel to the ship's beam) <br/>
***This is not total distance travelled by the shell. ***<br/>
- Adjusts for angle of fall and armor inclination
</>
}>
<h3 style={{textAlign: "center", display:"inline-block"}}>Post-Penetration Charts</h3>
</GeneralTooltip>
{addChart('post')}
</>
);
}
componentDidMount(){
Expand Down
68 changes: 37 additions & 31 deletions src/components/DefaultForms.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -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<DefaultForm>(), 0],
nation: ['Nation' , React.createRef<DefaultForm>(), 0],
shipType: ['Type' , React.createRef<DefaultForm>(), 0],
ship: ['Ship' , React.createRef<DefaultForm>(), 0],
artillery: ['Artillery' , React.createRef<DefaultForm>(), 0],
shellType: ['Shell Type', React.createRef<DefaultForm>(), 0],
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],
})
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,
Expand All @@ -114,60 +114,66 @@ 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);}
});
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(
<Container style={{paddingLeft: 0, paddingRight: 0}}>
{Object.entries(this.defaultForms).map( ([k, v], i) => {
v[singleFormIndex.queryIndex] = i;
return (<DefaultForm label={v[singleFormIndex.name]} key={i} controlId={k}
handleValueChange={this.changeForm} ref={v[singleFormIndex.ref]} keyProp={this.props.keyProp}
defaultValue={this.props.defaultData[k][T.singleDefaultDataIndex.value]}
defaultOptions={this.props.defaultData[k][T.singleDefaultDataIndex.options]}> </DefaultForm>);
})}
</Container>
<Container style={{paddingLeft: 0, paddingRight: 0}}>
{Object.entries(this.defaultForms).map( ([name, v], i) => {
return (<DefaultForm label={v[singleFormIndex.name]} key={i} controlId={name}
handleValueChange={this.changeForm} ref={v[singleFormIndex.ref]} keyProp={this.props.keyProp}
defaultValue={defaultData[name][T.singleDefaultDataIndex.value]}
defaultOptions={defaultData[name][T.singleDefaultDataIndex.options]}> </DefaultForm>);
})}
</Container>
);
}
//componentDidUpdate(){}
Expand Down
9 changes: 4 additions & 5 deletions src/components/DownloadButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<a download={this.state.download} href={this.state.href}>
<Button variant="outline-secondary" onClick={this.click} style={this.props.style}>
{this.props.label}
</Button>
</a>
<a download={state.download} href={state.href}>
<Button variant="outline-secondary" onClick={this.click} style={props.style}>{props.label}</Button>
</a>
);
}
}
Expand Down
46 changes: 23 additions & 23 deletions src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,29 +18,29 @@ class NavbarCustom extends React.Component<{links: T.linkT}>{
};

return(
<Navbar variant="dark" bg="dark" expand="lg" fixed="top">
<Navbar.Brand onClick={() => {window.scrollTo(0, 0);}}>World of Warships Ballistics Calculator</Navbar.Brand>
<Nav className="mr-auto">
<NavDropdown title="Parameters" id="basic-nav-dropdown">
{makeDropdowns('parameters')}
</NavDropdown>
<NavDropdown title="Impact Charts" id="basic-nav-dropdown">
{makeDropdowns('impact')}
</NavDropdown>
<NavDropdown title="Angle Charts" id="basic-nav-dropdown">
{makeDropdowns('angle')}
</NavDropdown>
<NavDropdown title="Post-Pentration Charts" id="basic-nav-dropdown">
{makeDropdowns('post')}
</NavDropdown>
</Nav>
<Nav className="navbar-right">
<NavDropdown title="Support" id="basic-nav-dropdown" alignRight>
<NavDropdown.Item href="/~https://github.com/jcw780/wows_ballistics">Github</NavDropdown.Item>
<NavDropdown.Item href="/~https://github.com/jcw780/wows_ballistics/issues">Issues</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar>
<Navbar variant="dark" bg="dark" expand="lg" fixed="top">
<Navbar.Brand onClick={() => {window.scrollTo(0, 0);}}>World of Warships Ballistics Calculator</Navbar.Brand>
<Nav className="mr-auto">
<NavDropdown title="Parameters" id="basic-nav-dropdown">
{makeDropdowns('parameters')}
</NavDropdown>
<NavDropdown title="Impact Charts" id="basic-nav-dropdown">
{makeDropdowns('impact')}
</NavDropdown>
<NavDropdown title="Angle Charts" id="basic-nav-dropdown">
{makeDropdowns('angle')}
</NavDropdown>
<NavDropdown title="Post-Pentration Charts" id="basic-nav-dropdown">
{makeDropdowns('post')}
</NavDropdown>
</Nav>
<Nav className="navbar-right">
<NavDropdown title="Support" id="basic-nav-dropdown" alignRight>
<NavDropdown.Item href="/~https://github.com/jcw780/wows_ballistics">Github</NavDropdown.Item>
<NavDropdown.Item href="/~https://github.com/jcw780/wows_ballistics/issues">Issues</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar>
);
}
}
Expand Down
Loading

0 comments on commit 2e024c5

Please sign in to comment.