text: import React from 'react';
  import keystoneLeft from '../../images/keystone-left.png';
  import keystoneRight from '../../images/keystone-right.png';
  import thirdEye from '../../images/third-eye.png';
  import trianglePink from '../../images/triangle-pink.svg';
  import triangleBlue from '../../images/triangle.svg';
  import whiteRabbit from '../../images/rabbit.png';
  import awaken from '../../images/awaken.mp3';
  import './Pyramid.css';
  
  class Pyramid extends React.Component {
    state = {
      reality: false,
      rabbit: false,
      playing: false,
    };
  
    backToNormal = () => {
      this.setState({ reality: false, rabbit: false });
    }
  
    play = () => {
      this.player.play();
      this.player.addEventListener("timeupdate", e => {
        this.setState({
          currentTime: e.target.currentTime,
          duration: e.target.duration
        });
      });
      this.setState({ playing: true });
    }
  
    stop = () => {
      this.player.pause();
      this.player.removeEventListener("timeupdate", () => {});
      this.setState({ playing: false, reality: false, rabbit: false });
    }
  
    render() {
      const { reality, rabbit, playing } = this.state;
      if (!rabbit) {
        if (!reality) {
          return (
            <div className="center">
              <div className="glitch">
                <img src={trianglePink} className="triangle triangle-pink" alt="triangle2" />
                <img src={triangleBlue} className="triangle triangle-blue" alt="triangle1" />
                <img src={thirdEye} className="third-eye" alt="I" />
                <div className="third-eye click" onClick={() => this.setState({ reality: true })} />
                <div className="image-container">
                  <img src={keystoneLeft} className="pyramid pyramid-left" alt="keystone1" />
                  <img src={keystoneRight} className="pyramid pyramid-right" alt="keystone2" />
                </div>
              </div>
            <div className="background-image" />
            {/* <h1 className="title">Tap the eye to find out more about I</h1> */}
          </div>
          );
        }
        return (
          <div className="reality">
            <p>there is no "I".</p>
            <p>there is no "You".</p>
            <p>the self is an illusion.</p>
            <p>things aren't as they seem.</p>
            <p>the only truth is that something seems to be happening.</p>
            <p>something <b onClick={() => this.setState({ rabbit: true })}>seems</b> to be happening.</p>
            <p className="back" onClick={() => this.setState({ reality: false })}>&larr;back to the forest</p>
          </div>
        );
      }
      function getTime(time) {
        if(!isNaN(time)) {
          return Math.floor(time / 60) + ':' + ('0' + Math.floor(time % 60)).slice(-2)
        }
      }
      const currentTime = getTime(this.state.currentTime);
      const duration = getTime(this.state.duration);
      return (
        <div className="reality">
          <audio src={awaken}  ref={ref => (this.player = ref)} />
          <img className="rabbit" src={whiteRabbit} onClick={() => this.play()} />
          {(playing && currentTime && duration) && <p onClick={() => this.stop()} className="back">
            {currentTime}/{duration} X
          </p>}
        </div>
      );
    }
  }
  
  export default Pyramid;
  