Skip to content

Commit 1701324

Browse files
kdvalinkdvalin
authored
Merge pull request #490 from samuel-zuk/vertical-movement
Added movement speed slider in scene config menu
2 parents 2235ace + 393c36a commit 1701324

6 files changed

Lines changed: 105 additions & 15 deletions

File tree

‎src/actions/sceneActions.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,10 @@ export function setNameDesc(payload) {
9292
return { type: types.SET_NAME_DESC, payload };
9393
}
9494

95+
export function updateMoveSpeed(speed) {
96+
return { type: types.UPDATE_MOVE_SPEED, speed };
97+
}
98+
9599
export default {
96100
nameScene,
97101
loadScene,
@@ -112,5 +116,6 @@ export default {
112116
removeCollectionID,
113117
toggleDefaultLight,
114118
toggleCastShadow,
115-
toggleLightIndicator
116-
};
119+
toggleLightIndicator,
120+
updateMoveSpeed
121+
};

‎src/components/structural/View.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,7 @@ class View extends Component {
260260
<a-camera
261261
position={this.props.sceneConfig.settings.cameraPosition}
262262
look-controls="pointerLockEnabled: true"
263-
wasd-plus-controls="enabled: true">
263+
wasd-plus-controls={`acceleration: ${this.props.sceneConfig.settings.moveSpeed}`}>
264264
<a-cursor
265265
raycaster="objects:.raycastable"
266266
position="0 0 -1"

‎src/components/structural/header/SceneConfigMenu.js‎

Lines changed: 82 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
IconButton,
77
Icon,
88
Modal,
9+
Slider,
910
TextField,
1011
Tooltip,
1112
Tabs,
@@ -87,17 +88,19 @@ class ConfigModal extends Component {
8788
super(props);
8889
this.state = {
8990
open: false,
90-
skyColor: this.props.scene.settings.color,
9191
displaySkyColorPicker: false,
92-
anchorEl: null,
9392
displayFloorColorPicker: false,
93+
displayMoveSpeedSlider: false,
9494
qrCodeOpen: false,
9595
pwProtectOpen: false,
9696
shareOpen: false,
9797
addClassOpen: false,
9898
defaultLight: true,
9999
castShadow: false,
100100
spawnLightIndicator: false,
101+
skyColor: this.props.scene.settings.color,
102+
moveSpeed: this.props.scene.settings.moveSpeed,
103+
anchorEl: null,
101104
email: "",
102105
sendTo: [],
103106
collectionID: "",
@@ -118,7 +121,12 @@ class ConfigModal extends Component {
118121
* Closes the modal
119122
*/
120123
handleClose = () => {
121-
this.setState({ open: false, displaySkyColorPicker: false, displayFloorColorPicker: false });
124+
this.setState({
125+
open: false,
126+
displaySkyColorPicker: false,
127+
displayFloorColorPicker: false,
128+
displayMoveSpeedSlider: false
129+
});
122130
};
123131

124132
handleClick = event => {
@@ -227,6 +235,16 @@ class ConfigModal extends Component {
227235
this.props.sceneActions.changeFloorColor(color.hex);
228236
};
229237

238+
handleMoveSpeedUpdate = (e, newSpeed) => {
239+
/* update component state whenever the slider's value changes
240+
* so text displays correctly, only update redux store on
241+
* mouseup when user drags slider */
242+
this.setState({ moveSpeed: newSpeed });
243+
if(!e || e.type === "mouseup") {
244+
this.props.sceneActions.updateMoveSpeed(newSpeed);
245+
}
246+
};
247+
230248
handleSkyColorClick = () => {
231249
this.setState({ displaySkyColorPicker: !this.state.displaySkyColorPicker });
232250
};
@@ -235,6 +253,10 @@ class ConfigModal extends Component {
235253
this.setState({ displayFloorColorPicker: !this.state.displayFloorColorPicker });
236254
};
237255

256+
handleMoveSpeedClick = () => {
257+
this.setState({ displayMoveSpeedSlider: !this.state.displayMoveSpeedSlider });
258+
};
259+
238260
handleSkyColorClose = () => {
239261
this.setState({ displaySkyColorPicker: false });
240262
};
@@ -288,6 +310,7 @@ class ConfigModal extends Component {
288310
</ButtonBase >
289311
);
290312
};
313+
291314
defaultLightToggle = () =>{
292315
let style = this.props.scene.settings.defaultLight ? btnStyle.on : btnStyle.off;
293316
style = { ...btnStyle.base, ...style };
@@ -307,7 +330,8 @@ class ConfigModal extends Component {
307330
Default Light
308331
</ButtonBase >
309332
);
310-
}
333+
};
334+
311335
castShadowToggle = () => {
312336
let style = this.props.scene.settings.castShadow ? btnStyle.on : btnStyle.off;
313337
style = { ...btnStyle.base, ...style };
@@ -327,7 +351,8 @@ class ConfigModal extends Component {
327351
Cast Shadow
328352
</ButtonBase >
329353
);
330-
}
354+
};
355+
331356
lightIndicatorToggle = () => {
332357
let style = this.props.scene.settings.lightIndicator ? btnStyle.on : btnStyle.off;
333358
style = { ...btnStyle.base, ...style };
@@ -347,7 +372,7 @@ class ConfigModal extends Component {
347372
Light Indicator
348373
</ButtonBase >
349374
);
350-
}
375+
};
351376

352377
/**
353378
* Toggles the floor on and off
@@ -446,6 +471,20 @@ class ConfigModal extends Component {
446471
);
447472
};
448473

474+
updateMoveSpeed = () => {
475+
return (
476+
<ButtonBase
477+
style={btnStyle.base}
478+
onClick={() => {
479+
this.props.handleRender();
480+
this.handleMoveSpeedClick();
481+
}}>
482+
<Icon className="material-icons">tune</Icon>
483+
Change Speed
484+
</ButtonBase >
485+
);
486+
};
487+
449488
changeSkyColor = () => {
450489
return (
451490
<ButtonBase
@@ -539,6 +578,9 @@ class ConfigModal extends Component {
539578
<this.lightIndicatorToggle/>
540579
</div>
541580
<div className="col-12 border-bottom pt-4">Camera Control</div>
581+
<div className="col-6">
582+
<this.updateMoveSpeed />
583+
</div>
542584
<div className="col-6">
543585
<this.resetPosition />
544586
</div>
@@ -551,7 +593,10 @@ class ConfigModal extends Component {
551593
<Icon className="material-icons">clear</Icon>
552594
</ButtonBase >
553595
<div id="color-cover" onClick={this.handleSkyColorClose} />
554-
<ChromePicker disableAlpha={true} color={this.state.skyColor} onChangeComplete={this.handleSkyChangeComplete} />
596+
<ChromePicker
597+
disableAlpha={true}
598+
color={this.state.skyColor}
599+
onChangeComplete={this.handleSkyChangeComplete} />
555600
</div>
556601
:
557602
null
@@ -565,7 +610,35 @@ class ConfigModal extends Component {
565610
<Icon className="material-icons">clear</Icon>
566611
</ButtonBase >
567612
<div id="color-cover" onClick={this.handleFloorColorClose} />
568-
<ChromePicker disableAlpha={true} color={this.state.floorColor} onChangeComplete={this.handleFloorChangeComplete} />
613+
<ChromePicker
614+
disableAlpha={true}
615+
color={this.state.floorColor}
616+
onChangeComplete={this.handleFloorChangeComplete} />
617+
</div>
618+
:
619+
null
620+
}
621+
{this.state.displayMoveSpeedSlider
622+
?
623+
<div id="speed-config" className="col-12 pt-4">
624+
<div className="row">
625+
<div className="col-9">
626+
<Slider
627+
value={this.state.moveSpeed}
628+
valueLabelDisplay="auto"
629+
onChange={this.handleMoveSpeedUpdate}
630+
onChangeCommitted={this.handleMoveSpeedUpdate}
631+
min={0}
632+
max={1000} />
633+
</div>
634+
<div className="col-3 align-top">
635+
<ButtonBase
636+
onClick={() => this.handleMoveSpeedUpdate(null, 150)}>
637+
<Icon className="material-icons">settings_backup_restore</Icon>
638+
Reset
639+
</ButtonBase >
640+
</div>
641+
</div>
569642
</div>
570643
:
571644
null
@@ -686,4 +759,4 @@ class ConfigModal extends Component {
686759

687760
const SceneConfigMenu = withStyles(modelStyles)(ConfigModal);
688761

689-
export default SceneConfigMenu;
762+
export default SceneConfigMenu;

‎src/constants/ActionTypes.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,10 @@ export const SET_NAME_DESC = "SET_NAME_DESC";
4444
export const TOGGLE_DEFAULT_LIGHT = "TOGGLE_DEFAULT_LIGHT";
4545
export const TOGGLE_CAST_SHADOW = "TOGGLE_CAST_SHADOW";
4646
export const TOGGLE_LIGHT_INDICATOR = "TOGGLE_LIGHT_INDICATOR";
47+
export const UPDATE_MOVE_SPEED = "UPDATE_MOVE_SPEED";
4748

4849
export const SYNC_CLASSES = "SYNC_CLASSES";
4950
export const SYNC_CLASS = "SYNC_CLASS";
5051
export const DELETE_CLASS = "DELETE_CLASS";
5152

52-
export const LOAD_REF_EX = "LOAD_REF_EX";
53+
export const LOAD_REF_EX = "LOAD_REF_EX";

‎src/reducers/scene.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export const DEF_SETTINGS = {
1111
defaultLight: true,
1212
castShadow: false,
1313
lightIndicator: false,
14+
moveSpeed: 150,
1415
collectionID: ""
1516
};
1617

@@ -157,13 +158,21 @@ export default function scene(state = initial_state, action) {
157158
}
158159
};
159160
case types.TOGGLE_LIGHT_INDICATOR:
160-
return{
161+
return {
161162
...state,
162-
settings:{
163+
settings: {
163164
...state.settings,
164165
lightIndicator: !state.settings.lightIndicator
165166
}
166167
};
168+
case types.UPDATE_MOVE_SPEED:
169+
return {
170+
...state,
171+
settings: {
172+
...state.settings,
173+
moveSpeed: action.speed
174+
}
175+
};
167176
default:
168177
return state;
169178
}

‎src/tests/App.test.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ const generateMockProps = () => {
7070
defaultLight: true,
7171
castShadow: false,
7272
lightIndicator: false,
73+
moveSpeed: 150,
7374
collectionID: ""
7475
},
7576
},
@@ -322,6 +323,7 @@ describe("Scene Reducer", () => {
322323
defaultLight: true,
323324
castShadow: false,
324325
lightIndicator: false,
326+
moveSpeed: 150,
325327
collectionID: ""
326328
}
327329
};

0 commit comments

Comments
 (0)