GotchaApp

A frustrating app.

by bigpopakap

HTML

<div id="gotcha"></div>

CSS

.app.state-initial {
  background: lightblue;
}

.app.state-loading {
  background: lightcoral;
}

.app.state-completed {
  background: lightgreen;
}

.full-viewport {
  width: 100vw;
  height: 100vh;
}

.centerer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.completed-content,
.incompleted-content {
  width: 100%;
  height: 100%;
}

.completed-content {
  display: none;
}

.completed-content.state-completed {
  display: block;
}

.incompleted-content.state-completed {
  display: none;
}

.gotcha-button {
  padding: 12px;
}

.tetris {
  height: 100%;
}

React

class GotchaApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	isLoading: false,
      isCompleted: false
    };
    
    this.startLoading = this.startLoading.bind(this);
    this.finishLoading = this.finishLoading.bind(this);
    
    window.addEventListener('beforeunload', this.finishLoading);
  }
  
  startLoading() {
  	this.setState({
    	isLoading: true
    });
  }
  
  finishLoading() {
  	if (this.state.isLoading) {
      this.setState({
        isLoading: false,
        isCompleted: true
      });
    } else {
    	this.setState({
        isLoading: false
      });
    }
  }
  
  render() {
  	const buttonText = this.state.isLoading ? 'Loading Tetris...' : 'Start Tetris';

  	const stateClass = (() => {
    	if (this.state.isCompleted) {
      	return 'state-completed';
      } else if (this.state.isLoading) {
      	return 'state-loading'
      } else {
      	return 'state-initial';
      }
    })();
    
    const appClass = `app ${stateClass}`;
    const incompletedContentClass = `incompleted-content ${stateClass}`;
    const completedContentClass = `completed-content ${stateClass}`;
  
    return (
      <div className={appClass}>
        <div class="full-viewport">
          <div class={incompletedContentClass}>
            <div className="centerer">
              <button className="gotcha-button" onClick={this.startLoading}>
                {buttonText}
              </button>
            </div>
          </div>

          <div className={completedContentClass}>
            <div className="centerer">
              <img 
                className="tetris"
                src="https://assets1.ignimgs.com/2019/02/13/screen-shot-2019-02-13-at-22706-pm-2-1550096845310.png"
                />
            </div>
          </div>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<GotchaApp />, document.querySelector("#gotcha"))