newthuhole/hole_thu_frontend
4
6
Fork 2
Code Issues 8 Pull Requests Projects Releases Wiki Activity

fix pressure helper ui

Browse Source
This commit is contained in:
xmcp
2019-04-26 22:14:09 +08:00
parent 7a25357315
commit 2dc4ae419f
2 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/PressureHelper.css
View File

@@ -4,11 +4,10 @@
margin: auto; margin: auto;
z-index: 100; z-index: 100;
pointer-events: none; pointer-events: none;
transition: }
top 100ms linear,
bottom 100ms linear, .pressure-box-empty {
left 100ms linear, visibility: hidden;
right 100ms linear;
} }
.pressure-box-fired { .pressure-box-fired {

12
src/PressureHelper.js
View File

@@ -70,7 +70,7 @@ export class PressureHelper extends Component {
if(this.esc_interval) if(this.esc_interval)
clearInterval(this.esc_interval); clearInterval(this.esc_interval);
this.setState({ this.setState({
level: THRESHOLD, level: THRESHOLD/2,
},()=>{ },()=>{
this.esc_interval=setInterval(()=>{ this.esc_interval=setInterval(()=>{
let new_level=this.state.level+.1; let new_level=this.state.level+.1;
@@ -80,7 +80,7 @@ export class PressureHelper extends Component {
this.setState({ this.setState({
level: new_level, level: new_level,
}); });
},50); },30);
}); });
} }
}); });
@@ -99,9 +99,13 @@ export class PressureHelper extends Component {
} }
render() { render() {
const pad=this.state.level===0 ? -BORDER_WIDTH-500 : MULTIPLIER*(this.state.level-THRESHOLD)-BORDER_WIDTH; const pad=MULTIPLIER*(this.state.level-THRESHOLD)-BORDER_WIDTH;
return ( return (
<div className={'pressure-box '+(this.state.fired ? 'pressure-box-fired' : '')} style={{ <div className={
'pressure-box'
+(this.state.fired ? ' pressure-box-fired' : '')
+(this.state.level<=.0001 ? ' pressure-box-empty' : '')
} style={{
left: pad, left: pad,
right: pad, right: pad,
top: pad, top: pad,