Skip to content

Commit 610b39a

Browse files
pippo-scipippo-sci
committed
cleaning, refactoring and commenting
1 parent b67a0b8 commit 610b39a

File tree

8 files changed

+237
-136
lines changed

8 files changed

+237
-136
lines changed

‎src/pages/HomePage/home.js‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,11 @@ import CardHeader from '@material-ui/core/CardHeader';
77
import CssBaseline from '@material-ui/core/CssBaseline';
88
import Grid from '@material-ui/core/Grid';
99
import StarIcon from '@material-ui/icons/StarBorder';
10-
1110
import Typography from '@material-ui/core/Typography';
12-
import Link from '@material-ui/core/Link';
1311
import { makeStyles } from '@material-ui/core/styles';
1412
import Container from '@material-ui/core/Container';
15-
import Box from '@material-ui/core/Box';
16-
import { createTheme } from '@material-ui/core/styles';
17-
import NavigationBar from '@/components/navigationBar/navigationBar';
1813
import { useHistory } from 'react-router-dom';
1914

20-
function Copyright() {
21-
return (
22-
<Typography variant="body2" color="textSecondary" align="center">
23-
{'Copyright © '}
24-
<Link color="inherit" href="https://material-ui.com/">
25-
Your Website
26-
</Link>{' '}
27-
{new Date().getFullYear()}
28-
{'.'}
29-
</Typography>
30-
);
31-
}
3215

3316
const useStyles = makeStyles((theme) => ({
3417
'@global': {

‎src/pages/HomePage/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
2-
import { Link } from 'react-router-dom';
32
import Home from "./home";
4-
import styles from './index.module.less';
3+
4+
55
class HomePage extends React.Component {
66

77
// init data

‎src/pages/PageFour/index.js‎

Lines changed: 65 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {subGoal, stepInfo, allStages, steps, stepSubgoalMap, vfg, textContent,
33
getAllStages, getSteps, getStepInfo, getSubGoal, getStepSubgoalMap} from './dataUtils';
44
import Button from '@material-ui/core/Button';
55
import styles from './index.less';
6-
import ViScreen, { ControlPanel, StepScreen } from "./screenComponents";
6+
import Screen, { ControlPanel, StepScreen, GoalScreen } from "./screenComponents";
77

88

99
class PageFour extends React.Component {
@@ -39,6 +39,8 @@ class PageFour extends React.Component {
3939
this.receiveMessageFromPlugin = this.receiveMessageFromPlugin.bind(this);
4040
}
4141

42+
43+
4244
updateWindowDimensions() {
4345
if(this.refDom){
4446
const {clientWidth, clientHeight} = this.refDom;
@@ -47,13 +49,17 @@ class PageFour extends React.Component {
4749
console.log('client.inner',clientWidth, clientHeight);
4850
});
4951
}
50-
}
52+
}
53+
54+
5155

5256
handleOnClick() {
5357
this.props.history.push('/')
5458
}
5559

56-
handleSubItemClick(key) {
60+
61+
62+
handleSubItemClick = (key) => {
5763
// this.state.stageIndex = index;
5864
if(this.state.showKey !== key) {
5965
this.setState({
@@ -66,12 +72,16 @@ class PageFour extends React.Component {
6672
}
6773
}
6874

75+
76+
6977
componentDidMount() {
7078
this.updateWindowDimensions();
7179
this.refDom.addEventListener('resize', this.updateWindowDimensions);
7280

7381
}
7482

83+
84+
7585
receiveMessageFromPlugin ( event ) {
7686
if(event.origin!== "http://localhost:3000"){
7787
console.log( 'iframe is working:', event.origin );
@@ -112,8 +122,9 @@ class PageFour extends React.Component {
112122
return map;
113123
}
114124

125+
115126
/**
116-
* Calculate interpolation values between two stages
127+
* Calculate and diplays interpolation animation between two stages
117128
* @param {Integer} index
118129
*/
119130
animation(index) {
@@ -186,7 +197,9 @@ class PageFour extends React.Component {
186197
this.handler = handler;
187198
};
188199

189-
handleStepsClick(index) {
200+
201+
202+
handleStepsClick = (index) =>{
190203
// Get Stage[index] sprites, and display
191204
if(this.handlerPlay) {
192205
clearInterval(this.handlerPlay);
@@ -204,7 +217,9 @@ class PageFour extends React.Component {
204217
this.animation(index)
205218
}
206219

207-
handleSubgoalStepItemClick(value) {
220+
221+
222+
handleSubgoalStepItemClick = (value) => {
208223
if(this.handlerPlay) {
209224
clearInterval(this.handlerPlay);
210225
}
@@ -224,7 +239,9 @@ class PageFour extends React.Component {
224239
this.stepItem[index].current.scrollIntoView();
225240
}
226241

227-
handlePreviousClick(value) {
242+
243+
244+
handlePreviousClick = (value) => {
228245
const previousIndex = Number(value) - 1;
229246
if (previousIndex < 0) {
230247
alert("It's already the initial state!")
@@ -242,7 +259,9 @@ class PageFour extends React.Component {
242259
}
243260
}
244261

245-
handleNextClick(value) {
262+
263+
264+
handleNextClick = (value) => {
246265
const nextIndex = Number(value) + 1
247266
if (nextIndex >= steps.length) {
248267
alert("It's already the final state!")
@@ -260,7 +279,9 @@ class PageFour extends React.Component {
260279
}
261280
}
262281

263-
handleStartClick(value) {
282+
283+
284+
handleStartClick = (value) => {
264285
let nextIndex = Number(value) + 1
265286
if(nextIndex === steps.length) {
266287
alert("It's already the final state!")
@@ -315,7 +336,9 @@ class PageFour extends React.Component {
315336
}
316337
}
317338

318-
handlePauseClick() {
339+
340+
341+
handlePauseClick = () => {
319342
if(this.handlerPlay) {
320343
this.setState( {
321344
playButtonColor: 'primary',
@@ -325,7 +348,9 @@ class PageFour extends React.Component {
325348
}
326349
}
327350

328-
handleResetClick() {
351+
352+
353+
handleResetClick = () => {
329354
if(this.handlerPlay) {
330355
clearInterval(this.handlerPlay);
331356
}
@@ -341,7 +366,9 @@ class PageFour extends React.Component {
341366
this.stepItem[0].current.scrollIntoView();
342367
}
343368

344-
handleShowFinalGoalClick(){
369+
370+
371+
handleShowFinalGoalClick = () =>{
345372
if(this.handlerPlay) {
346373
clearInterval(this.handlerPlay);
347374
}
@@ -358,7 +385,9 @@ class PageFour extends React.Component {
358385
this.stepItem[index].current.scrollIntoView();
359386
}
360387

361-
handleExportClick(){
388+
389+
390+
handleExportClick = () =>{
362391
const data = textContent
363392
let blob = new Blob([data]);
364393
let filename = "download.vfg";
@@ -382,13 +411,18 @@ class PageFour extends React.Component {
382411
}
383412
}
384413

385-
handleSpeedControllor(value){
414+
415+
416+
handleSpeedControllor = (value) => {
386417
this.setState({
387418
playSpeed: value
388419
})
389420
}
421+
390422

391-
// prevent crash when jumping to other pages during the animation playing
423+
/**
424+
* prevent crash when jumping to other pages during the animation playing
425+
* */
392426
componentWillUnmount(){
393427
if(this.handlerPlay) {
394428
clearInterval(this.handlerPlay);
@@ -397,6 +431,8 @@ class PageFour extends React.Component {
397431

398432
}
399433

434+
435+
400436
render() {
401437
// Get all sprites
402438
let sprites = this.state.drawSprites;
@@ -406,13 +442,22 @@ class PageFour extends React.Component {
406442
return (
407443
<div className={styles.container} ref={(ref)=>this.refDom=ref}>
408444
<div className={styles.left}>
409-
<StepScreen stepInfoIndex={this.state.stepInfoIndex} stepItem={this.stepItem} stepInfo={stepInfo}/>
445+
<StepScreen stepInfoIndex={this.state.stepInfoIndex} stepItem={this.stepItem} stepInfo={stepInfo} onStepClick={this.handleStepsClick}/>
410446
</div>
411447
<div className={styles.middle}>
412-
<ViScreen canvasWidth={this.state.canvasWidth} canvasHeight={this.state.canvasHeight} sprites={this.state.drawSprites} vfg={vfg} />
448+
<Screen canvasWidth={this.state.canvasWidth} canvasHeight={this.state.canvasHeight} sprites={this.state.drawSprites} vfg={vfg} />
413449
<div className={styles.btn_box}>
414450
<div>
415-
<ControlPanel playButtonColor={this.state.playButtonColor} pauseButtonColor={this.state.pauseButtonColor} stepInfoIndex={this.state.stepInfoIndex}></ControlPanel>
451+
<ControlPanel
452+
playButtonColor={this.state.playButtonColor}
453+
pauseButtonColor={this.state.pauseButtonColor}
454+
stepInfoIndex={this.state.stepInfoIndex}
455+
onPreviousClick={this.handlePreviousClick}
456+
onStartClick={this.handleStartClick}
457+
onPauseClick={this.handlePauseClick}
458+
onNextClick={this.handleNextClick}
459+
onResetClick={this.handleResetClick}
460+
onSpeedControllor={this.handleSpeedControllor}></ControlPanel>
416461
</div>
417462
</div>
418463
</div>
@@ -427,29 +472,8 @@ class PageFour extends React.Component {
427472
Export
428473
</Button>
429474
</div>
430-
<div className={styles.sub_title} style={{position: 'relative'}}>
431-
<span className={styles.sub_title_key}>Subgoal</span>
432-
<span className={styles.sub_title_selected}>{Object.keys(this.state.selectedSubGoals || {}).length}/{subGoal.size}</span>
433-
</div>
434-
<div className={styles.sub_list}>
435-
{ sprites &&
436-
[...subGoal.keys()].map(key => {
437-
return <div className={styles.sub_item + ' ' + (this.state.selectedSubGoals[key] ? styles.highlight_item : ' ')}
438-
key={key} onClick={()=> {this.handleSubItemClick(key)}}>
439-
{key}
440-
<div className={styles.sub_item_menu}
441-
style={{display: this.state.showKey === key ? 'block': 'none'}}>
442-
{subGoal.get(key).map(value => {
443-
return <div className={styles.sub_item_menu_item}
444-
onClick={()=>this.handleSubgoalStepItemClick(value)}
445-
key={key + value}
446-
>Step {value}</div>
447-
})}
448-
</div>
449-
</div>;
450-
})
451-
}
452-
</div>
475+
<GoalScreen sprites={sprites} subGoal={subGoal} selectedSubGoals={this.state.selectedSubGoals}
476+
showKey={this.state.showKey} onSubItemClick={this.handleSubItemClick} onSubgoalStepItemClick={this.handleSubgoalStepItemClick}/>
453477
</div>
454478
</div>
455479
);

0 commit comments

Comments
 (0)