main.js

const animationEngine = ( () => {

    let uniqueID = 0;
  
    class AnimationEngine {
  
      constructor() {
  
        this.ids = [];
        this.animations = {};
        this.update = this.update.bind( this );
        this.raf = 0;
        this.time = 0;
  
      }
  
      update() {
  
        const now = performance.now();
        const delta = now - this.time;
        this.time = now;
  
        let i = this.ids.length;
  
        this.raf = i ? requestAnimationFrame( this.update ) : 0;
  
        while ( i-- )
          this.animations[ this.ids[ i ] ] && this.animations[ this.ids[ i ] ].update( delta );
  
      }
  
      add( animation ) {
  
        animation.id = uniqueID ++;
  
        this.ids.push( animation.id );
        this.animations[ animation.id ] = animation;
  
        if ( this.raf !== 0 ) return;
  
        this.time = performance.now();
        this.raf = requestAnimationFrame( this.update );
  
      }
  
      remove( animation ) {
  
        const index = this.ids.indexOf( animation.id );
  
        if ( index < 0 ) return;
  
        this.ids.splice( index, 1 );
        delete this.animations[ animation.id ];
        animation = null;
  
      }
  
    }
  
    return new AnimationEngine();
  
  } )();
  
  class Animation {
  
    constructor( start ) {
  
      if ( start === true ) this.start();
  
    }
  
    start() {
  
      animationEngine.add( this );
  
    }
  
    stop() {
  
      animationEngine.remove( this );
  
    }
  
    update( delta ) {}
  
  }
  
  class World extends Animation {
  
    constructor( game ) {
  
      super( true );
  
      this.game = game;
  
      this.container = this.game.dom.game;
      this.scene = new THREE.Scene();
  
      this.renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
      this.renderer.setPixelRatio( window.devicePixelRatio );
      this.container.appendChild( this.renderer.domElement );
  
      this.camera = new THREE.PerspectiveCamera( 2, 1, 0.1, 10000 );
  
      this.stage = { width: 2, height: 3 };
      this.fov = 10;
  
      this.createLights();
  
      this.onResize = [];
  
      this.resize();
      window.addEventListener( 'resize', () => this.resize(), false );
  
    }
  
    update() {
  
      this.renderer.render( this.scene, this.camera );
  
    }
  
    resize() {
  
      this.width = this.container.offsetWidth;
      this.height = this.container.offsetHeight;
  
      this.renderer.setSize( this.width, this.height );
  
      this.camera.fov = this.fov;
      this.camera.aspect = this.width / this.height;
  
      const aspect = this.stage.width / this.stage.height;
      const fovRad = this.fov * THREE.Math.DEG2RAD;
  
      let distance = ( aspect < this.camera.aspect )
        ? ( this.stage.height / 2 ) / Math.tan( fovRad / 2 )
        : ( this.stage.width / this.camera.aspect ) / ( 2 * Math.tan( fovRad / 2 ) );
  
      distance *= 0.5;
  
      this.camera.position.set( distance, distance, distance);
      this.camera.lookAt( this.scene.position );
      this.camera.updateProjectionMatrix();
  
      const docFontSize = ( aspect < this.camera.aspect )
        ? ( this.height / 100 ) * aspect
        : this.width / 100;
  
      document.documentElement.style.fontSize = docFontSize + 'px';
  
      if ( this.onResize ) this.onResize.forEach( cb => cb() );
  
    }
  
    createLights() {
  
      this.lights = {
        holder:  new THREE.Object3D,
        ambient: new THREE.AmbientLight( 0xffffff, 0.69 ),
        front:   new THREE.DirectionalLight( 0xffffff, 0.36 ),
        back:    new THREE.DirectionalLight( 0xffffff, 0.19 ),
      };
  
      this.lights.front.position.set( 1.5, 5, 3 );
      this.lights.back.position.set( -1.5, -5, -3 );
  
      this.lights.holder.add( this.lights.ambient );
      this.lights.holder.add( this.lights.front );
      this.lights.holder.add( this.lights.back );
  
      this.scene.add( this.lights.holder );
  
    }
  
  }
  
  function RoundedBoxGeometry( size, radius, radiusSegments ) {
  
    THREE.BufferGeometry.call( this );
  
    this.type = 'RoundedBoxGeometry';
  
    radiusSegments = ! isNaN( radiusSegments ) ? Math.max( 1, Math.floor( radiusSegments ) ) : 1;
  
    var width, height, depth;
  
    width = height = depth = size;
    radius = size * radius;
  
    radius = Math.min( radius, Math.min( width, Math.min( height, Math.min( depth ) ) ) / 2 );
  
    var edgeHalfWidth = width / 2 - radius;
    var edgeHalfHeight = height / 2 - radius;
    var edgeHalfDepth = depth / 2 - radius;
  
    this.parameters = {
      width: width,
      height: height,
      depth: depth,
      radius: radius,
      radiusSegments: radiusSegments
    };
  
    var rs1 = radiusSegments + 1;
    var totalVertexCount = ( rs1 * radiusSegments + 1 ) << 3;
  
    var positions = new THREE.BufferAttribute( new Float32Array( totalVertexCount * 3 ), 3 );
    var normals = new THREE.BufferAttribute( new Float32Array( totalVertexCount * 3 ), 3 );
  
    var
      cornerVerts = [],
      cornerNormals = [],
      normal = new THREE.Vector3(),
      vertex = new THREE.Vector3(),
      vertexPool = [],
      normalPool = [],
      indices = []
    ;
  
    var
      lastVertex = rs1 * radiusSegments,
      cornerVertNumber = rs1 * radiusSegments + 1
    ;
  
    doVertices();
    doFaces();
    doCorners();
    doHeightEdges();
    doWidthEdges();
    doDepthEdges();
  
    function doVertices() {
  
      var cornerLayout = [
        new THREE.Vector3( 1, 1, 1 ),
        new THREE.Vector3( 1, 1, - 1 ),
        new THREE.Vector3( - 1, 1, - 1 ),
        new THREE.Vector3( - 1, 1, 1 ),
        new THREE.Vector3( 1, - 1, 1 ),
        new THREE.Vector3( 1, - 1, - 1 ),
        new THREE.Vector3( - 1, - 1, - 1 ),
        new THREE.Vector3( - 1, - 1, 1 )
      ];
  
      for ( var j = 0; j < 8; j ++ ) {
  
        cornerVerts.push( [] );
        cornerNormals.push( [] );
  
      }
  
      var PIhalf = Math.PI / 2;
      var cornerOffset = new THREE.Vector3( edgeHalfWidth, edgeHalfHeight, edgeHalfDepth );
  
      for ( var y = 0; y <= radiusSegments; y ++ ) {
  
        var v = y / radiusSegments;
        var va = v * PIhalf;
        var cosVa = Math.cos( va );
        var sinVa = Math.sin( va );
  
        if ( y == radiusSegments ) {
  
          vertex.set( 0, 1, 0 );
          var vert = vertex.clone().multiplyScalar( radius ).add( cornerOffset );
          cornerVerts[ 0 ].push( vert );
          vertexPool.push( vert );
          var norm = vertex.clone();
          cornerNormals[ 0 ].push( norm );
          normalPool.push( norm );
          continue;
  
        }
  
        for ( var x = 0; x <= radiusSegments; x ++ ) {
  
          var u = x / radiusSegments;
          var ha = u * PIhalf;
          vertex.x = cosVa * Math.cos( ha );
          vertex.y = sinVa;
          vertex.z = cosVa * Math.sin( ha );
  
          var vert = vertex.clone().multiplyScalar( radius ).add( cornerOffset );
          cornerVerts[ 0 ].push( vert );
          vertexPool.push( vert );
  
          var norm = vertex.clone().normalize();
          cornerNormals[ 0 ].push( norm );
          normalPool.push( norm );
  
        }
  
      }
  
      for ( var i = 1; i < 8; i ++ ) {
  
        for ( var j = 0; j < cornerVerts[ 0 ].length; j ++ ) {
  
          var vert = cornerVerts[ 0 ][ j ].clone().multiply( cornerLayout[ i ] );
          cornerVerts[ i ].push( vert );
          vertexPool.push( vert );
  
          var norm = cornerNormals[ 0 ][ j ].clone().multiply( cornerLayout[ i ] );
          cornerNormals[ i ].push( norm );
          normalPool.push( norm );
  
        }
  
      }
  
    }
  
    function doCorners() {
  
      var flips = [
        true,
        false,
        true,
        false,
        false,
        true,
        false,
        true
      ];
  
      var lastRowOffset = rs1 * ( radiusSegments - 1 );
  
      for ( var i = 0; i < 8; i ++ ) {
  
        var cornerOffset = cornerVertNumber * i;
  
        for ( var v = 0; v < radiusSegments - 1; v ++ ) {
  
          var r1 = v * rs1;
          var r2 = ( v + 1 ) * rs1;
  
          for ( var u = 0; u < radiusSegments; u ++ ) {
  
            var u1 = u + 1;
            var a = cornerOffset + r1 + u;
            var b = cornerOffset + r1 + u1;
            var c = cornerOffset + r2 + u;
            var d = cornerOffset + r2 + u1;
  
            if ( ! flips[ i ] ) {
  
              indices.push( a );
              indices.push( b );
              indices.push( c );
  
              indices.push( b );
              indices.push( d );
              indices.push( c );
  
            } else {
  
              indices.push( a );
              indices.push( c );
              indices.push( b );
  
              indices.push( b );
              indices.push( c );
              indices.push( d );
  
            }
  
          }
  
        }
  
        for ( var u = 0; u < radiusSegments; u ++ ) {
  
          var a = cornerOffset + lastRowOffset + u;
          var b = cornerOffset + lastRowOffset + u + 1;
          var c = cornerOffset + lastVertex;
  
          if ( ! flips[ i ] ) {
  
            indices.push( a );
            indices.push( b );
            indices.push( c );
  
          } else {
  
            indices.push( a );
            indices.push( c );
            indices.push( b );
  
          }
  
        }
  
      }
  
    }
  
    function doFaces() {
  
      var a = lastVertex;
      var b = lastVertex + cornerVertNumber;
      var c = lastVertex + cornerVertNumber * 2;
      var d = lastVertex + cornerVertNumber * 3;
  
      indices.push( a );
      indices.push( b );
      indices.push( c );
      indices.push( a );
      indices.push( c );
      indices.push( d );
  
      a = lastVertex + cornerVertNumber * 4;
      b = lastVertex + cornerVertNumber * 5;
      c = lastVertex + cornerVertNumber * 6;
      d = lastVertex + cornerVertNumber * 7;
  
      indices.push( a );
      indices.push( c );
      indices.push( b );
      indices.push( a );
      indices.push( d );
      indices.push( c );
  
      a = 0;
      b = cornerVertNumber;
      c = cornerVertNumber * 4;
      d = cornerVertNumber * 5;
  
      indices.push( a );
      indices.push( c );
      indices.push( b );
      indices.push( b );
      indices.push( c );
      indices.push( d );
  
      a = cornerVertNumber * 2;
      b = cornerVertNumber * 3;
      c = cornerVertNumber * 6;
      d = cornerVertNumber * 7;
  
      indices.push( a );
      indices.push( c );
      indices.push( b );
      indices.push( b );
      indices.push( c );
      indices.push( d );
  
      a = radiusSegments;
      b = radiusSegments + cornerVertNumber * 3;
      c = radiusSegments + cornerVertNumber * 4;
      d = radiusSegments + cornerVertNumber * 7;
  
      indices.push( a );
      indices.push( b );
      indices.push( c );
      indices.push( b );
      indices.push( d );
      indices.push( c );
  
      a = radiusSegments + cornerVertNumber;
      b = radiusSegments + cornerVertNumber * 2;
      c = radiusSegments + cornerVertNumber * 5;
      d = radiusSegments + cornerVertNumber * 6;
  
      indices.push( a );
      indices.push( c );
      indices.push( b );
      indices.push( b );
      indices.push( c );
      indices.push( d );
  
    }
  
    function doHeightEdges() {
  
      for ( var i = 0; i < 4; i ++ ) {
  
        var cOffset = i * cornerVertNumber;
        var cRowOffset = 4 * cornerVertNumber + cOffset;
        var needsFlip = i & 1 === 1;
  
        for ( var u = 0; u < radiusSegments; u ++ ) {
  
          var u1 = u + 1;
          var a = cOffset + u;
          var b = cOffset + u1;
          var c = cRowOffset + u;
          var d = cRowOffset + u1;
  
          if ( ! needsFlip ) {
  
            indices.push( a );
            indices.push( b );
            indices.push( c );
            indices.push( b );
            indices.push( d );
            indices.push( c );
  
          } else {
  
            indices.push( a );
            indices.push( c );
            indices.push( b );
            indices.push( b );
            indices.push( c );
            indices.push( d );
  
          }
  
        }
  
      }
  
    }
  
    function doDepthEdges() {
  
      var cStarts = [ 0, 2, 4, 6 ];
      var cEnds = [ 1, 3, 5, 7 ];
  
      for ( var i = 0; i < 4; i ++ ) {
  
        var cStart = cornerVertNumber * cStarts[ i ];
        var cEnd = cornerVertNumber * cEnds[ i ];
  
        var needsFlip = 1 >= i;
  
        for ( var u = 0; u < radiusSegments; u ++ ) {
  
          var urs1 = u * rs1;
          var u1rs1 = ( u + 1 ) * rs1;
  
          var a = cStart + urs1;
          var b = cStart + u1rs1;
          var c = cEnd + urs1;
          var d = cEnd + u1rs1;
  
          if ( needsFlip ) {
  
            indices.push( a );
            indices.push( c );
            indices.push( b );
            indices.push( b );
            indices.push( c );
            indices.push( d );
  
          } else {
  
            indices.push( a );
            indices.push( b );
            indices.push( c );
            indices.push( b );
            indices.push( d );
            indices.push( c );
  
          }
  
        }
  
      }
  
    }
  
    function doWidthEdges() {
  
      var end = radiusSegments - 1;
  
      var cStarts = [ 0, 1, 4, 5 ];
      var cEnds = [ 3, 2, 7, 6 ];
      var needsFlip = [ 0, 1, 1, 0 ];
  
      for ( var i = 0; i < 4; i ++ ) {
  
        var cStart = cStarts[ i ] * cornerVertNumber;
        var cEnd = cEnds[ i ] * cornerVertNumber;
  
        for ( var u = 0; u <= end; u ++ ) {
  
          var a = cStart + radiusSegments + u * rs1;
          var b = cStart + ( u != end ? radiusSegments + ( u + 1 ) * rs1 : cornerVertNumber - 1 );
  
          var c = cEnd + radiusSegments + u * rs1;
          var d = cEnd + ( u != end ? radiusSegments + ( u + 1 ) * rs1 : cornerVertNumber - 1 );
  
          if ( ! needsFlip[ i ] ) {
  
            indices.push( a );
            indices.push( b );
            indices.push( c );
            indices.push( b );
            indices.push( d );
            indices.push( c );
  
          } else {
  
            indices.push( a );
            indices.push( c );
            indices.push( b );
            indices.push( b );
            indices.push( c );
            indices.push( d );
  
          }
  
        }
  
      }
  
    }
  
    var index = 0;
  
    for ( var i = 0; i < vertexPool.length; i ++ ) {
  
      positions.setXYZ(
        index,
        vertexPool[ i ].x,
        vertexPool[ i ].y,
        vertexPool[ i ].z
      );
  
      normals.setXYZ(
        index,
        normalPool[ i ].x,
        normalPool[ i ].y,
        normalPool[ i ].z
      );
  
      index ++;
  
    }
  
    this.setIndex( new THREE.BufferAttribute( new Uint16Array( indices ), 1 ) );
    this.addAttribute( 'position', positions );
    this.addAttribute( 'normal', normals );
  
  }
  
  RoundedBoxGeometry.prototype = Object.create( THREE.BufferGeometry.prototype );
  RoundedBoxGeometry.constructor = RoundedBoxGeometry;
  
  function RoundedPlaneGeometry( size, radius, depth ) {
  
    var x, y, width, height;
  
    x = y = - size / 2;
    width = height = size;
    radius = size * radius;
  
    const shape = new THREE.Shape();
  
    shape.moveTo( x, y + radius );
    shape.lineTo( x, y + height - radius );
    shape.quadraticCurveTo( x, y + height, x + radius, y + height );
    shape.lineTo( x + width - radius, y + height );
    shape.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
    shape.lineTo( x + width, y + radius );
    shape.quadraticCurveTo( x + width, y, x + width - radius, y );
    shape.lineTo( x + radius, y );
    shape.quadraticCurveTo( x, y, x, y + radius );
  
    const geometry = new THREE.ExtrudeBufferGeometry(
      shape,
      { depth: depth, bevelEnabled: false, curveSegments: 3 }
    );
  
    return geometry;
  
  }
  
  class Cube {
  
    constructor( game ) {
  
      this.game = game;
      this.size = 3;
  
      this.geometry = {
        pieceCornerRadius: 0.12,
        edgeCornerRoundness: 0.15,
        edgeScale: 0.82,
        edgeDepth: 0.01,
      };
  
      this.holder = new THREE.Object3D();
      this.object = new THREE.Object3D();
      this.animator = new THREE.Object3D();
  
      this.holder.add( this.animator );
      this.animator.add( this.object );
  
      this.game.world.scene.add( this.holder );
  
    }
  
    init() {
  
      this.cubes = [];
      this.object.children = [];
      this.object.add( this.game.controls.group );
  
      if ( this.size === 2 ) this.scale = 1.25;
      else if ( this.size === 3 ) this.scale = 1;
      else if ( this.size > 3 ) this.scale = 3 / this.size;
  
      this.object.scale.set( this.scale, this.scale, this.scale );
  
      const controlsScale = this.size === 2 ? 0.825 : 1;
      this.game.controls.edges.scale.set( controlsScale, controlsScale, controlsScale );
      
      this.generatePositions();
      this.generateModel();
  
      this.pieces.forEach( piece => {
  
        this.cubes.push( piece.userData.cube );
        this.object.add( piece );
  
      } );
  
      this.holder.traverse( node => {
  
        if ( node.frustumCulled ) node.frustumCulled = false;
  
      } );
  
      this.updateColors( this.game.themes.getColors() );
  
      this.sizeGenerated = this.size;
  
    }
  
    resize( force = false ) {
  
      if ( this.size !== this.sizeGenerated || force ) {
  
        this.size = this.game.preferences.ranges.size.value;
  
        this.reset();
        this.init();
  
        this.game.saved = false;
        this.game.timer.reset();
        this.game.storage.clearGame();
  
      }
  
    }
  
    reset() {
  
      this.game.controls.edges.rotation.set( 0, 0, 0 );
  
      this.holder.rotation.set( 0, 0, 0 );
      this.object.rotation.set( 0, 0, 0 );
      this.animator.rotation.set( 0, 0, 0 );
  
    }
  
    generatePositions() {
  
      const m = this.size - 1;
      const first = this.size % 2 !== 0
        ? 0 - Math.floor(this.size / 2)
        : 0.5 - this.size / 2;
  
      let x, y, z;
  
      this.positions = [];
  
      for ( x = 0; x < this.size; x ++ ) {
        for ( y = 0; y < this.size; y ++ ) {
          for ( z = 0; z < this.size; z ++ ) {
  
            let position = new THREE.Vector3(first + x, first + y, first + z);
            let edges = [];
  
            if ( x == 0 ) edges.push(0);
            if ( x == m ) edges.push(1);
            if ( y == 0 ) edges.push(2);
            if ( y == m ) edges.push(3);
            if ( z == 0 ) edges.push(4);
            if ( z == m ) edges.push(5);
  
            position.edges = edges;
            this.positions.push( position );
  
          }
        }
      }
  
    }
  
    generateModel() {
  
      this.pieces = [];
      this.edges = [];
  
      const pieceSize = 1 / 3;
  
      const mainMaterial = new THREE.MeshLambertMaterial();
  
      const pieceMesh = new THREE.Mesh(
        new RoundedBoxGeometry( pieceSize, this.geometry.pieceCornerRadius, 3 ),
        mainMaterial.clone()
      );
  
      const edgeGeometry = RoundedPlaneGeometry(
        pieceSize,
        this.geometry.edgeCornerRoundness,
        this.geometry.edgeDepth
      );
  
      this.positions.forEach( ( position, index ) => {
  
        const piece = new THREE.Object3D();
        const pieceCube = pieceMesh.clone();
        const pieceEdges = [];
  
        piece.position.copy( position.clone().divideScalar( 3 ) );
        piece.add( pieceCube );
        piece.name = index;
        piece.edgesName = '';
  
        position.edges.forEach( position => {
  
          const edge = new THREE.Mesh( edgeGeometry, mainMaterial.clone() );
          const name = [ 'L', 'R', 'D', 'U', 'B', 'F' ][ position ];
          const distance = pieceSize / 2;
  
          edge.position.set(
            distance * [ - 1, 1, 0, 0, 0, 0 ][ position ],
            distance * [ 0, 0, - 1, 1, 0, 0 ][ position ],
            distance * [ 0, 0, 0, 0, - 1, 1 ][ position ]
          );
  
          edge.rotation.set(
            Math.PI / 2 * [ 0, 0, 1, - 1, 0, 0 ][ position ],
            Math.PI / 2 * [ - 1, 1, 0, 0, 2, 0 ][ position ],
            0
          );
  
          edge.scale.set(
            this.geometry.edgeScale,
            this.geometry.edgeScale,
            this.geometry.edgeScale
          );
  
          edge.name = name;
  
          piece.add( edge );
          pieceEdges.push( name );
          this.edges.push( edge );
  
        } );
  
        piece.userData.edges = pieceEdges;
        piece.userData.cube = pieceCube;
  
        piece.userData.start = {
          position: piece.position.clone(),
          rotation: piece.rotation.clone(),
        };
  
        this.pieces.push( piece );
  
      } );
  
    }
  
    updateColors( colors ) {
  
      if ( typeof this.pieces !== 'object' && typeof this.edges !== 'object' ) return;
  
      this.pieces.forEach( piece => piece.userData.cube.material.color.setHex( colors.P ) );
      this.edges.forEach( edge => edge.material.color.setHex( colors[ edge.name ] ) );
  
    }
  
    loadFromData( data ) {
  
      this.size = data.size;
  
      this.reset();
      this.init();
  
      this.pieces.forEach( piece => {
  
        const index = data.names.indexOf( piece.name );
  
        const position = data.positions[index];
        const rotation = data.rotations[index];
  
        piece.position.set( position.x, position.y, position.z );
        piece.rotation.set( rotation.x, rotation.y, rotation.z );
  
      } );
  
    }
  
  }
  
  const Easing = {
  
    Power: {
  
      In: power => {
  
        power = Math.round( power || 1 );
  
        return t => Math.pow( t, power );
  
      },
  
      Out: power => {
  
        power = Math.round( power || 1 );
  
        return t => 1 - Math.abs( Math.pow( t - 1, power ) );
  
      },
  
      InOut: power => {
  
        power = Math.round( power || 1 );
  
        return t => ( t < 0.5 )
          ? Math.pow( t * 2, power ) / 2
          : ( 1 - Math.abs( Math.pow( ( t * 2 - 1 ) - 1, power ) ) ) / 2 + 0.5;
  
      },
  
    },
  
    Sine: {
  
      In: () => t => 1 + Math.sin( Math.PI / 2 * t - Math.PI / 2 ),
  
      Out: () => t => Math.sin( Math.PI / 2 * t ),
  
      InOut: () => t => ( 1 + Math.sin( Math.PI * t - Math.PI / 2 ) ) / 2,
  
    },
  
    Back: {
  
      Out: s => {
  
        s = s || 1.70158;
  
        return t => { return ( t -= 1 ) * t * ( ( s + 1 ) * t + s ) + 1; };
  
      },
  
      In: s => {
  
        s = s || 1.70158;
  
        return t => { return t * t * ( ( s + 1 ) * t - s ); };
  
      }
  
    },
  
    Elastic: {
  
      Out: ( amplitude, period ) => {
  
        let PI2 = Math.PI * 2;
  
        let p1 = ( amplitude >= 1 ) ? amplitude : 1;
        let p2 = ( period || 0.3 ) / ( amplitude < 1 ? amplitude : 1 );
        let p3 = p2 / PI2 * ( Math.asin( 1 / p1 ) || 0 );
  
        p2 = PI2 / p2;
  
        return t => { return p1 * Math.pow( 2, -10 * t ) * Math.sin( ( t - p3 ) * p2 ) + 1 }
  
      },
  
    },
  
  };
  
  class Tween extends Animation {
  
    constructor( options ) {
  
      super( false );
  
      this.duration = options.duration || 500;
      this.easing = options.easing || ( t => t );
      this.onUpdate = options.onUpdate || ( () => {} );
      this.onComplete = options.onComplete || ( () => {} );
  
      this.delay = options.delay || false;
      this.yoyo = options.yoyo ? false : null;
  
      this.progress = 0;
      this.value = 0;
      this.delta = 0;
  
      this.getFromTo( options );
  
      if ( this.delay ) setTimeout( () => super.start(), this.delay );
      else super.start();
  
      this.onUpdate( this );
  
    }
  
    update( delta ) {
  
      const old = this.value * 1;
      const direction = ( this.yoyo === true ) ? - 1 : 1;
  
      this.progress += ( delta / this.duration ) * direction;
  
      this.value = this.easing( this.progress );
      this.delta = this.value - old;
  
      if ( this.values !== null ) this.updateFromTo();
  
      if ( this.yoyo !== null ) this.updateYoyo();
      else if ( this.progress <= 1 ) this.onUpdate( this );
      else {
  
        this.progress = 1;
        this.value = 1;
        this.onUpdate( this );
        this.onComplete( this );
        super.stop();      
  
      }
  
    }
  
    updateYoyo() {
  
      if ( this.progress > 1 || this.progress < 0 ) {
  
        this.value = this.progress = ( this.progress > 1 ) ? 1 : 0;
        this.yoyo = ! this.yoyo;
  
      }
  
      this.onUpdate( this );
  
    }
  
    updateFromTo() {
  
      this.values.forEach( key => {
  
        this.target[ key ] = this.from[ key ] + ( this.to[ key ] - this.from[ key ] ) * this.value;
  
      } );
  
    }
  
    getFromTo( options ) {
  
      if ( ! options.target || ! options.to ) {
  
        this.values = null;
        return;
  
      }
  
      this.target = options.target || null;
      this.from = options.from || {};
      this.to = options.to || null;
      this.values = [];
  
      if ( Object.keys( this.from ).length < 1 )
        Object.keys( this.to ).forEach( key => { this.from[ key ] = this.target[ key ]; } );
  
      Object.keys( this.to ).forEach( key => { this.values.push( key ); } );
  
    }
  
  }
  
  window.addEventListener( 'touchmove', () => {} );
  document.addEventListener( 'touchmove',  event => { event.preventDefault(); }, { passive: false } );
  
  class Draggable {
  
    constructor( element, options ) {
  
      this.position = {
        current: new THREE.Vector2(),
        start: new THREE.Vector2(),
        delta: new THREE.Vector2(),
        old: new THREE.Vector2(),
        drag: new THREE.Vector2(),
      };
  
      this.options = Object.assign( {
        calcDelta: false,
      }, options || {} );
  
      this.element = element;
      this.touch = null;
  
      this.drag = {
  
        start: ( event ) => {
  
          if ( event.type == 'mousedown' && event.which != 1 ) return;
          if ( event.type == 'touchstart' && event.touches.length > 1 ) return;
  
          this.getPositionCurrent( event );
  
          if ( this.options.calcDelta ) {
  
            this.position.start = this.position.current.clone();
            this.position.delta.set( 0, 0 );
            this.position.drag.set( 0, 0 );
  
          }
  
          this.touch = ( event.type == 'touchstart' );
  
          this.onDragStart( this.position );
  
          window.addEventListener( ( this.touch ) ? 'touchmove' : 'mousemove', this.drag.move, false );
          window.addEventListener( ( this.touch ) ? 'touchend' : 'mouseup', this.drag.end, false );
  
        },
  
        move: ( event ) => {
  
          if ( this.options.calcDelta ) {
  
            this.position.old = this.position.current.clone();
  
          }
  
          this.getPositionCurrent( event );
  
          if ( this.options.calcDelta ) {
  
            this.position.delta = this.position.current.clone().sub( this.position.old );
            this.position.drag = this.position.current.clone().sub( this.position.start );
  
          }
  
          this.onDragMove( this.position );
  
        },
  
        end: ( event ) => {
  
          this.getPositionCurrent( event );
  
          this.onDragEnd( this.position );
  
          window.removeEventListener( ( this.touch ) ? 'touchmove' : 'mousemove', this.drag.move, false );
          window.removeEventListener( ( this.touch ) ? 'touchend' : 'mouseup', this.drag.end, false );
  
        },
  
      };
  
      this.onDragStart = () => {};
      this.onDragMove = () => {};
      this.onDragEnd = () => {};
  
      this.enable();
  
      return this;
  
    }
  
    enable() {
  
      this.element.addEventListener( 'touchstart', this.drag.start, false );
      this.element.addEventListener( 'mousedown', this.drag.start, false );
  
      return this;
  
    }
  
    disable() {
  
      this.element.removeEventListener( 'touchstart', this.drag.start, false );
      this.element.removeEventListener( 'mousedown', this.drag.start, false );
  
      return this;
  
    }
  
    getPositionCurrent( event ) {
  
      const dragEvent = event.touches
        ? ( event.touches[ 0 ] || event.changedTouches[ 0 ] )
        : event;
  
      this.position.current.set( dragEvent.pageX, dragEvent.pageY );
  
    }
  
    convertPosition( position ) {
  
      position.x = ( position.x / this.element.offsetWidth ) * 2 - 1;
      position.y = - ( ( position.y / this.element.offsetHeight ) * 2 - 1 );
  
      return position;
  
    }
  
  }
  
  const STILL = 0;
  const PREPARING = 1;
  const ROTATING = 2;
  const ANIMATING = 3;
  
  class Controls {
  
    constructor( game ) {
  
      this.game = game;
  
      this.flipConfig = 0;
  
      this.flipEasings = [ Easing.Power.Out( 3 ), Easing.Sine.Out(), Easing.Back.Out( 1.5 ) ];
      this.flipSpeeds = [ 125, 200, 300 ];
  
      this.raycaster = new THREE.Raycaster();
  
      const helperMaterial = new THREE.MeshBasicMaterial( { depthWrite: false, transparent: true, opacity: 0, color: 0x0033ff } );
  
      this.group = new THREE.Object3D();
      this.group.name = 'controls';
      this.game.cube.object.add( this.group );
  
      this.helper = new THREE.Mesh(
        new THREE.PlaneBufferGeometry( 200, 200 ),
        helperMaterial.clone()
      );
  
      this.helper.rotation.set( 0, Math.PI / 4, 0 );
      this.game.world.scene.add( this.helper );
  
      this.edges = new THREE.Mesh(
        new THREE.BoxBufferGeometry( 1, 1, 1 ),
        helperMaterial.clone(),
      );
  
      this.game.world.scene.add( this.edges );
  
      this.onSolved = () => {};
      this.onMove = () => {};
  
      this.momentum = [];
  
      this.scramble = null;
      this.state = STILL;
      this.enabled = false;
  
      this.initDraggable();
  
    }
  
    enable() {
  
      this.draggable.enable();
      this.enabled = true;
  
    }
  
    disable() {
  
      this.draggable.disable();
      this.enabled = false;
  
    }
  
    initDraggable() {
  
      this.draggable = new Draggable( this.game.dom.game );
  
      this.draggable.onDragStart = position => {
  
        if ( this.scramble !== null ) return;
        if ( this.state === PREPARING || this.state === ROTATING ) return;
  
        this.gettingDrag = this.state === ANIMATING;
  
        const edgeIntersect = this.getIntersect( position.current, this.edges, false );
  
        if ( edgeIntersect !== false ) {
  
          this.dragIntersect = this.getIntersect( position.current, this.game.cube.cubes, true );
  
        }
  
        if ( edgeIntersect !== false && this.dragIntersect !== false ) {
  
          this.dragNormal = edgeIntersect.face.normal.round();
          this.flipType = 'layer';
  
          this.attach( this.helper, this.edges );
  
          this.helper.rotation.set( 0, 0, 0 );
          this.helper.position.set( 0, 0, 0 );
          this.helper.lookAt( this.dragNormal );
          this.helper.translateZ( 0.5 );
          this.helper.updateMatrixWorld();
  
          this.detach( this.helper, this.edges );
  
        } else {
  
          this.dragNormal = new THREE.Vector3( 0, 0, 1 );
          this.flipType = 'cube';
  
          this.helper.position.set( 0, 0, 0 );
          this.helper.rotation.set( 0, Math.PI / 4, 0 );
          this.helper.updateMatrixWorld();
  
        }
  
        let planeIntersect = this.getIntersect( position.current, this.helper, false );
        if ( planeIntersect === false ) return;
  
        this.dragCurrent = this.helper.worldToLocal( planeIntersect.point );
        this.dragTotal = new THREE.Vector3();
        this.state = ( this.state === STILL ) ? PREPARING : this.state;
  
      };
  
      this.draggable.onDragMove = position => {
  
        if ( this.scramble !== null ) return;
        if ( this.state === STILL || ( this.state === ANIMATING && this.gettingDrag === false ) ) return;
  
        const planeIntersect = this.getIntersect( position.current, this.helper, false );
        if ( planeIntersect === false ) return;
  
        const point = this.helper.worldToLocal( planeIntersect.point.clone() );
  
        this.dragDelta = point.clone().sub( this.dragCurrent ).setZ( 0 );
        this.dragTotal.add( this.dragDelta );
        this.dragCurrent = point;
        this.addMomentumPoint( this.dragDelta );
  
        if ( this.state === PREPARING && this.dragTotal.length() > 0.05 ) {
  
          this.dragDirection = this.getMainAxis( this.dragTotal );
  
          if ( this.flipType === 'layer' ) {
  
            const direction = new THREE.Vector3();
            direction[ this.dragDirection ] = 1;
  
            const worldDirection = this.helper.localToWorld( direction ).sub( this.helper.position );
            const objectDirection = this.edges.worldToLocal( worldDirection ).round();
  
            this.flipAxis = objectDirection.cross( this.dragNormal ).negate();
  
            this.selectLayer( this.getLayer( false ) );
  
          } else {
  
            const axis = ( this.dragDirection != 'x' )
              ? ( ( this.dragDirection == 'y' && position.current.x > this.game.world.width / 2 ) ? 'z' : 'x' )
              : 'y';
  
            this.flipAxis = new THREE.Vector3();
            this.flipAxis[ axis ] = 1 * ( ( axis == 'x' ) ? - 1 : 1 );
  
          }
  
          this.flipAngle = 0;
          this.state = ROTATING;
  
        } else if ( this.state === ROTATING ) {
  
          const rotation = this.dragDelta[ this.dragDirection ];
  
          if ( this.flipType === 'layer' ) { 
  
            this.group.rotateOnAxis( this.flipAxis, rotation );
            this.flipAngle += rotation;
  
          } else {
  
            this.edges.rotateOnWorldAxis( this.flipAxis, rotation );
            this.game.cube.object.rotation.copy( this.edges.rotation );
            this.flipAngle += rotation;
  
          }
  
        }
  
      };
  
      this.draggable.onDragEnd = position => {
  
        if ( this.scramble !== null ) return;
        if ( this.state !== ROTATING ) {
  
          this.gettingDrag = false;
          this.state = STILL;
          return;
  
        }
  
        this.state = ANIMATING;
  
        const momentum = this.getMomentum()[ this.dragDirection ];
        const flip = ( Math.abs( momentum ) > 0.05 && Math.abs( this.flipAngle ) < Math.PI / 2 );
  
        const angle = flip
          ? this.roundAngle( this.flipAngle + Math.sign( this.flipAngle ) * ( Math.PI / 4 ) )
          : this.roundAngle( this.flipAngle );
  
        const delta = angle - this.flipAngle;
  
        if ( this.flipType === 'layer' ) {
  
          this.rotateLayer( delta, false, layer => {
  
            this.game.storage.saveGame();
            
            this.state = this.gettingDrag ? PREPARING : STILL;
            this.gettingDrag = false;
  
            this.checkIsSolved();
  
          } );
  
        } else {
  
          this.rotateCube( delta, () => {
  
            this.state = this.gettingDrag ? PREPARING : STILL;
            this.gettingDrag = false;
  
          } );
  
        }
  
      };
  
    }
  
    rotateLayer( rotation, scramble, callback ) {
  
      const config = scramble ? 0 : this.flipConfig;
  
      const easing = this.flipEasings[ config ];
      const duration = this.flipSpeeds[ config ];
      const bounce = ( config == 2 ) ? this.bounceCube() : ( () => {} );
  
      this.rotationTween = new Tween( {
        easing: easing,
        duration: duration,
        onUpdate: tween => {
  
          let deltaAngle = tween.delta * rotation;
          this.group.rotateOnAxis( this.flipAxis, deltaAngle );
          bounce( tween.value, deltaAngle, rotation );
  
        },
        onComplete: () => {
  
          if ( ! scramble ) this.onMove();
  
          const layer = this.flipLayer.slice( 0 );
  
          this.game.cube.object.rotation.setFromVector3( this.snapRotation( this.game.cube.object.rotation.toVector3() ) );
          this.group.rotation.setFromVector3( this.snapRotation( this.group.rotation.toVector3() ) );
          this.deselectLayer( this.flipLayer );
  
          callback( layer );
  
        },
      } );
  
    }
  
    bounceCube() {
  
      let fixDelta = true;
  
      return ( progress, delta, rotation ) => {
  
          if ( progress >= 1 ) {
  
            if ( fixDelta ) {
  
              delta = ( progress - 1 ) * rotation;
              fixDelta = false;
  
            }
  
            this.game.cube.object.rotateOnAxis( this.flipAxis, delta );
  
          }
  
      }
  
    }
  
    rotateCube( rotation, callback ) {
  
      const config = this.flipConfig;
      const easing = [ Easing.Power.Out( 4 ), Easing.Sine.Out(), Easing.Back.Out( 2 ) ][ config ];
      const duration = [ 100, 150, 350 ][ config ];
  
      this.rotationTween = new Tween( {
        easing: easing,
        duration: duration,
        onUpdate: tween => {
  
          this.edges.rotateOnWorldAxis( this.flipAxis, tween.delta * rotation );
          this.game.cube.object.rotation.copy( this.edges.rotation );
  
        },
        onComplete: () => {
  
          this.edges.rotation.setFromVector3( this.snapRotation( this.edges.rotation.toVector3() ) );
          this.game.cube.object.rotation.copy( this.edges.rotation );
          callback();
  
        },
      } );
  
    }
  
    selectLayer( layer ) {
  
      this.group.rotation.set( 0, 0, 0 );
      this.movePieces( layer, this.game.cube.object, this.group );
      this.flipLayer = layer;
  
    }
  
    deselectLayer( layer ) {
  
      this.movePieces( layer, this.group, this.game.cube.object );
      this.flipLayer = null;
  
    }
  
    movePieces( layer, from, to ) {
  
      from.updateMatrixWorld();
      to.updateMatrixWorld();
  
      layer.forEach( index => {
  
        const piece = this.game.cube.pieces[ index ];
  
        piece.applyMatrix( from.matrixWorld );
        from.remove( piece );
        piece.applyMatrix( new THREE.Matrix4().getInverse( to.matrixWorld ) );
        to.add( piece );
  
      } );
  
    }
  
    getLayer( position ) {
  
      const scalar = { 2: 6, 3: 3, 4: 4, 5: 3 }[ this.game.cube.size ];
      const layer = [];
  
      let axis;
  
      if ( position === false ) {
  
        const piece = this.dragIntersect.object.parent;
  
        axis = this.getMainAxis( this.flipAxis );
        position = piece.position.clone() .multiplyScalar( scalar ) .round();
  
      } else {
  
        axis = this.getMainAxis( position );
  
      }
  
      this.game.cube.pieces.forEach( piece => {
  
        const piecePosition = piece.position.clone().multiplyScalar( scalar ).round();
  
        if ( piecePosition[ axis ] == position[ axis ] ) layer.push( piece.name );
  
      } );
  
      return layer;
  
    }
  
    keyboardMove( type, move, callback ) {
  
      if ( this.state !== STILL ) return;
      if ( this.enabled !== true ) return;
  
      if ( type === 'LAYER' ) {
  
        const layer = this.getLayer( move.position );
  
        this.flipAxis = new THREE.Vector3();
        this.flipAxis[ move.axis ] = 1;
        this.state = ROTATING;
  
        this.selectLayer( layer );
        this.rotateLayer( move.angle, false, layer => {
  
          this.game.storage.saveGame();
          this.state = STILL;
          this.checkIsSolved();
  
        } );
  
      } else if ( type === 'CUBE' ) {
  
        this.flipAxis = new THREE.Vector3();
        this.flipAxis[ move.axis ] = 1;
        this.state = ROTATING;
  
        this.rotateCube( move.angle, () => {
  
          this.state = STILL;
  
        } );
  
      }
  
    }
  
    scrambleCube() {
  
      if ( this.scramble == null ) {
  
        this.scramble = this.game.scrambler;
        this.scramble.callback = ( typeof callback !== 'function' ) ? () => {} : callback;
  
      }
  
      const converted = this.scramble.converted;
      const move = converted[ 0 ];
      const layer = this.getLayer( move.position );
  
      this.flipAxis = new THREE.Vector3();
      this.flipAxis[ move.axis ] = 1;
  
      this.selectLayer( layer );
      this.rotateLayer( move.angle, true, () => {
  
        converted.shift();
  
        if ( converted.length > 0 ) {
  
          this.scrambleCube();
  
        } else {
  
          this.scramble = null;
          this.game.storage.saveGame();
  
        }
  
      } );
  
    }
  
    getIntersect( position, object, multiple ) {
  
      this.raycaster.setFromCamera(
        this.draggable.convertPosition( position.clone() ),
        this.game.world.camera
      );
  
      const intersect = ( multiple )
        ? this.raycaster.intersectObjects( object )
        : this.raycaster.intersectObject( object );
  
      return ( intersect.length > 0 ) ? intersect[ 0 ] : false;
  
    }
  
    getMainAxis( vector ) {
  
      return Object.keys( vector ).reduce(
        ( a, b ) => Math.abs( vector[ a ] ) > Math.abs( vector[ b ] ) ? a : b
      );
  
    }
  
    detach( child, parent ) {
  
      child.applyMatrix( parent.matrixWorld );
      parent.remove( child );
      this.game.world.scene.add( child );
  
    }
  
    attach( child, parent ) {
  
      child.applyMatrix( new THREE.Matrix4().getInverse( parent.matrixWorld ) );
      this.game.world.scene.remove( child );
      parent.add( child );
  
    }
  
    addMomentumPoint( delta ) {
  
      const time = Date.now();
  
      this.momentum = this.momentum.filter( moment => time - moment.time < 500 );
  
      if ( delta !== false ) this.momentum.push( { delta, time } );
  
    }
  
    getMomentum() {
  
      const points = this.momentum.length;
      const momentum = new THREE.Vector2();
  
      this.addMomentumPoint( false );
  
      this.momentum.forEach( ( point, index ) => {
  
        momentum.add( point.delta.multiplyScalar( index / points ) );
  
      } );
  
      return momentum;
  
    }
  
    roundAngle( angle ) {
  
      const round = Math.PI / 2;
      return Math.sign( angle ) * Math.round( Math.abs( angle) / round ) * round;
  
    }
  
    snapRotation( angle ) {
  
      return angle.set(
        this.roundAngle( angle.x ),
        this.roundAngle( angle.y ),
        this.roundAngle( angle.z )
      );
  
    }
  
    checkIsSolved() {
  
      const start = performance.now();
  
      let solved = true;
      const sides = { 'x-': [], 'x+': [], 'y-': [], 'y+': [], 'z-': [], 'z+': [] };
  
      this.game.cube.edges.forEach( edge => {
  
        const position = edge.parent
          .localToWorld( edge.position.clone() )
          .sub( this.game.cube.object.position );
  
        const mainAxis = this.getMainAxis( position );
        const mainSign = position.multiplyScalar( 2 ).round()[ mainAxis ] < 1 ? '-' : '+';
  
        sides[ mainAxis + mainSign ].push( edge.name );
  
      } );
  
      Object.keys( sides ).forEach( side => {
  
        if ( ! sides[ side ].every( value => value === sides[ side ][ 0 ] ) ) solved = false;
  
      } );
  
      if ( solved ) this.onSolved();
  
    }
  
  }
  
  class Scrambler {
  
    constructor( game ) {
  
      this.game = game;
  
      this.dificulty = 0;
  
      this.scrambleLength = {
        2: [ 7, 9, 11 ],
        3: [ 20, 25, 30 ],
        4: [ 30, 40, 50 ],
        5: [ 40, 60, 80 ],
      };
  
      this.moves = [];
      this.conveted = [];
      this.pring = '';
  
    }
  
    scramble( scramble ) {
  
      let count = 0;
      this.moves = ( typeof scramble !== 'undefined' ) ? scramble.split( ' ' ) : [];
  
      if ( this.moves.length < 1 ) {
  
        const scrambleLength = this.scrambleLength[ this.game.cube.size ][ this.dificulty ];
  
        const faces = this.game.cube.size < 4 ? 'UDLRFB' : 'UuDdLlRrFfBb';
        const modifiers = [ "", "'", "2" ];
        const total = ( typeof scramble === 'undefined' ) ? scrambleLength : scramble;
  
        while ( count < total ) {
  
          const move =
            faces[ Math.floor( Math.random() * faces.length ) ] +
            modifiers[ Math.floor( Math.random() * 3 ) ];
  
          if ( count > 0 && move.charAt( 0 ) == this.moves[ count - 1 ].charAt( 0 ) ) continue;
          if ( count > 1 && move.charAt( 0 ) == this.moves[ count - 2 ].charAt( 0 ) ) continue;
  
          this.moves.push( move );
          count ++;
  
        }
  
      }
  
      this.callback = () => {};
      this.convert();
      this.print = this.moves.join( ' ' );
  
      return this;
  
    }
  
    convert( moves ) {
  
      this.converted = [];
  
      this.moves.forEach( move => {
  
        const convertedMove = this.convertMove( move );
        const modifier = move.charAt( 1 );
  
        this.converted.push( convertedMove );
        if ( modifier == "2" ) this.converted.push( convertedMove );
  
      } );
  
    }
  
    convertMove( move ) {
  
      const face = move.charAt( 0 );
      const modifier = move.charAt( 1 );
  
      const axis = { D: 'y', U: 'y', L: 'x', R: 'x', F: 'z', B: 'z' }[ face.toUpperCase() ];
      let row = { D: -1, U: 1, L: -1, R: 1, F: 1, B: -1 }[ face.toUpperCase() ];
  
      if ( this.game.cube.size > 3 && face !== face.toLowerCase() ) row = row * 2;
  
      const position = new THREE.Vector3();
      position[ { D: 'y', U: 'y', L: 'x', R: 'x', F: 'z', B: 'z' }[ face.toUpperCase() ] ] = row;
  
      const angle = ( Math.PI / 2 ) * - row * ( ( modifier == "'" ) ? - 1 : 1 );
  
      return { position, axis, angle, name: move };
  
    }
  
  }
  
  class Transition {
  
    constructor( game ) {
  
      this.game = game;
  
      this.tweens = {};
      this.durations = {};
      this.data = {
        cubeY: -0.2,
        cameraZoom: 0.85,
      };
  
      this.activeTransitions = 0;
  
    }
  
    init() {
  
      this.game.controls.disable();
  
      this.game.cube.object.position.y = this.data.cubeY;
      this.game.cube.animator.position.y = 4;
      this.game.cube.animator.rotation.x = - Math.PI / 3;
      this.game.world.camera.zoom = this.data.cameraZoom;
      this.game.world.camera.updateProjectionMatrix();
  
      this.tweens.buttons = {};
      this.tweens.timer = [];
      this.tweens.title = [];
      this.tweens.best = [];
      this.tweens.complete = [];
      this.tweens.prefs = [];
      this.tweens.theme = [];
      this.tweens.stats = [];
  
    }
  
    buttons( show, hide ) {
  
      const buttonTween = ( button, show ) => {
  
        return new Tween( {
          target: button.style,
          duration: 300,
          easing: show ? Easing.Power.Out( 2 ) : Easing.Power.In( 3 ),
          from: { opacity: show ? 0 : 1 },
          to: { opacity: show ? 1 : 0 },
          onUpdate: tween => {
  
            const translate = show ? 1 - tween.value : tween.value;
            button.style.transform = `translate3d(0, ${translate * 1.5}em, 0)`;
  
          },
          onComplete: () => button.style.pointerEvents = show ? 'all' : 'none'
        } );
  
      };
  
      hide.forEach( button =>
        this.tweens.buttons[ button ] = buttonTween( this.game.dom.buttons[ button ], false )
      );
  
      setTimeout( () => show.forEach( button => {
  
        this.tweens.buttons[ button ] = buttonTween( this.game.dom.buttons[ button ], true );
  
      } ), hide ? 500 : 0 );
  
    }
  
    cube( show, theming = false ) {
  
      this.activeTransitions++;
  
      try { this.tweens.cube.stop(); } catch(e) {}
      const currentY = this.game.cube.animator.position.y;
      const currentRotation = this.game.cube.animator.rotation.x;
  
      this.tweens.cube = new Tween( {
        duration: show ? 3000 : 1250,
        easing: show ? Easing.Elastic.Out( 0.8, 0.6 ) : Easing.Back.In( 1 ),
        onUpdate: tween => {
  
          this.game.cube.animator.position.y = show
            ? ( theming ? 0.9 + ( 1 - tween.value ) * 3.5 : ( 1 - tween.value ) * 4 )
            : currentY + tween.value * 4;
  
          this.game.cube.animator.rotation.x = show
            ? ( 1 - tween.value ) * Math.PI / 3
            : currentRotation + tween.value * - Math.PI / 3;
  
        },
      } );
  
      if ( theming ) {
  
        if ( show ) {
  
          this.game.world.camera.zoom = 0.75;
          this.game.world.camera.updateProjectionMatrix();
  
        } else {
  
          setTimeout( () => {
  
            this.game.world.camera.zoom = this.data.cameraZoom;
            this.game.world.camera.updateProjectionMatrix();
  
          }, 1500 );
  
        }
  
      }
  
      this.durations.cube = show ? 1500 : 1500;
  
      setTimeout( () => this.activeTransitions--, this.durations.cube );
  
    }
  
    float() {
  
      try { this.tweens.float.stop(); } catch(e) {}
      this.tweens.float = new Tween( {
        duration: 1500,
        easing: Easing.Sine.InOut(),
        yoyo: true,
        onUpdate: tween => {
  
          this.game.cube.holder.position.y = (- 0.02 + tween.value * 0.04); 
          this.game.cube.holder.rotation.x = 0.005 - tween.value * 0.01;
          this.game.cube.holder.rotation.z = - this.game.cube.holder.rotation.x;
          this.game.cube.holder.rotation.y = this.game.cube.holder.rotation.x;
  
          this.game.controls.edges.position.y =
            this.game.cube.holder.position.y + this.game.cube.object.position.y;
  
        },
      } );
  
    }
  
    zoom( play, time ) {
  
      this.activeTransitions++;
  
      const zoom = ( play ) ? 1 : this.data.cameraZoom;
      const duration = ( time > 0 ) ? Math.max( time, 1500 ) : 1500;
      const rotations = ( time > 0 ) ? Math.round( duration / 1500 ) : 1;
      const easing = Easing.Power.InOut( ( time > 0 ) ? 2 : 3 );
  
      this.tweens.zoom = new Tween( {
        target: this.game.world.camera,
        duration: duration,
        easing: easing,
        to: { zoom: zoom },
        onUpdate: () => { this.game.world.camera.updateProjectionMatrix(); },
      } );
  
      this.tweens.rotate = new Tween( {
        target: this.game.cube.animator.rotation,
        duration: duration,
        easing: easing,
        to: { y: - Math.PI * 2 * rotations },
        onComplete: () => { this.game.cube.animator.rotation.y = 0; },
      } );
  
      this.durations.zoom = duration;
  
      setTimeout( () => this.activeTransitions--, this.durations.zoom );
  
    }
  
    elevate( complete ) {
  
      this.activeTransitions++;
  
      const cubeY = 
  
      this.tweens.elevate = new Tween( {
        target: this.game.cube.object.position,
        duration: complete ? 1500 : 0,
        easing: Easing.Power.InOut( 3 ),
        to: { y: complete ? -0.05 : this.data.cubeY }
      } );
  
      this.durations.elevate = 1500;
  
      setTimeout( () => this.activeTransitions--, this.durations.elevate );
  
    }
  
    complete( show, best ) {
  
      this.activeTransitions++;
  
      const text = best ? this.game.dom.texts.best : this.game.dom.texts.complete;
  
      if ( text.querySelector( 'span i' ) === null )
        text.querySelectorAll( 'span' ).forEach( span => this.splitLetters( span ) );
  
      const letters = text.querySelectorAll( '.icon, i' );
  
      this.flipLetters( best ? 'best' : 'complete', letters, show );
  
      text.style.opacity = 1;
  
      const duration = this.durations[ best ? 'best' : 'complete' ];
  
      if ( ! show ) setTimeout( () => this.game.dom.texts.timer.style.transform = '', duration );
  
      setTimeout( () => this.activeTransitions--, duration );
  
    } 
  
    stats( show ) {
  
      if ( show ) this.game.scores.calcStats();
  
      this.activeTransitions++;
  
      this.tweens.stats.forEach( tween => { tween.stop(); tween = null; } );
  
      let tweenId = -1;
  
      const stats = this.game.dom.stats.querySelectorAll( '.stats' );
      const easing = show ? Easing.Power.Out( 2 ) : Easing.Power.In( 3 );
  
      stats.forEach( ( stat, index ) => {
  
        const delay = index * ( show ? 80 : 60 );
  
        this.tweens.stats[ tweenId++ ] = new Tween( {
          delay: delay,
          duration: 400,
          easing: easing,
          onUpdate: tween => {
  
            const translate = show ? ( 1 - tween.value ) * 2 : tween.value;
            const opacity = show ? tween.value : ( 1 - tween.value );
  
            stat.style.transform = `translate3d(0, ${translate}em, 0)`;
            stat.style.opacity = opacity;
  
          }
        } );
  
      } );
  
      this.durations.stats = 0;
  
      setTimeout( () => this.activeTransitions--, this.durations.stats );
  
    }
  
    preferences( show ) {
  
      this.ranges( this.game.dom.prefs.querySelectorAll( '.range' ), 'prefs', show );
  
    }
  
    theming( show ) {
  
      this.ranges( this.game.dom.theme.querySelectorAll( '.range' ), 'prefs', show );
  
    }
  
    ranges( ranges, type, show ) {
  
      this.activeTransitions++;
  
      this.tweens[ type ].forEach( tween => { tween.stop(); tween = null; } );
  
      const easing = show ? Easing.Power.Out(2) : Easing.Power.In(3);
  
      let tweenId = -1;
      let listMax = 0;
  
      ranges.forEach( ( range, rangeIndex ) => {
      
        const label = range.querySelector( '.range__label' );
        const track = range.querySelector( '.range__track-line' );
        const handle = range.querySelector( '.range__handle' );
        const list = range.querySelectorAll( '.range__list div' );
  
        const delay = rangeIndex * ( show ? 120 : 100 );
  
        label.style.opacity = show ? 0 : 1;
        track.style.opacity = show ? 0 : 1;
        handle.style.opacity = show ? 0 : 1;
        handle.style.pointerEvents = show ? 'all' : 'none';
  
        this.tweens[ type ][ tweenId++ ] = new Tween( {
          delay: show ? delay : delay,
          duration: 400,
          easing: easing,
          onUpdate: tween => {
  
            const translate = show ? ( 1 - tween.value ) : tween.value;
            const opacity = show ? tween.value : ( 1 - tween.value );
  
            label.style.transform = `translate3d(0, ${translate}em, 0)`;
            label.style.opacity = opacity;
  
          }
        } );
  
        this.tweens[ type ][ tweenId++ ] = new Tween( {
          delay: show ? delay + 100 : delay,
          duration: 400,
          easing: easing,
          onUpdate: tween => {
  
            const translate = show ? ( 1 - tween.value ) : tween.value;
            const scale = show ? tween.value : ( 1 - tween.value );
            const opacity = scale;
  
            track.style.transform = `translate3d(0, ${translate}em, 0) scale3d(${scale}, 1, 1)`;
            track.style.opacity = opacity;
  
          }
        } );
  
        this.tweens[ type ][ tweenId++ ] = new Tween( {
          delay: show ? delay + 100 : delay,
          duration: 400,
          easing: easing,
          onUpdate: tween => {
  
            const translate = show ? ( 1 - tween.value ) : tween.value;
            const opacity = 1 - translate;
            const scale = 0.5 + opacity * 0.5;
  
            handle.style.transform = `translate3d(0, ${translate}em, 0) scale3d(${scale}, ${scale}, ${scale})`;
            handle.style.opacity = opacity;
  
          }
        } );
  
        list.forEach( ( listItem, labelIndex ) => {
  
          listItem.style.opacity = show ? 0 : 1;
  
          this.tweens[ type ][ tweenId++ ] = new Tween( {
            delay: show ? delay + 200 + labelIndex * 50 : delay,
            duration: 400,
            easing: easing,
            onUpdate: tween => {
  
              const translate = show ? ( 1 - tween.value ) : tween.value;
              const opacity = show ? tween.value : ( 1 - tween.value );
  
              listItem.style.transform = `translate3d(0, ${translate}em, 0)`;
              listItem.style.opacity = opacity;
  
            }
          } );
  
        } );
  
        listMax = list.length > listMax ? list.length - 1 : listMax;
  
        range.style.opacity = 1;
  
      } );
  
      this.durations[ type ] = show
        ? ( ( ranges.length - 1 ) * 100 ) + 200 + listMax * 50 + 400
        : ( ( ranges.length - 1 ) * 100 ) + 400;
  
      setTimeout( () => this.activeTransitions--, this.durations[ type ] ); 
  
    }
  
    title( show ) {
  
      this.activeTransitions++;
  
      const title = this.game.dom.texts.title;
  
      if ( title.querySelector( 'span i' ) === null )
        title.querySelectorAll( 'span' ).forEach( span => this.splitLetters( span ) );
  
      const letters = title.querySelectorAll( 'i' );
  
      this.flipLetters( 'title', letters, show );
  
      title.style.opacity = 1;
  
      const note = this.game.dom.texts.note;
  
      this.tweens.title[ letters.length ] = new Tween( {
        target: note.style,
        easing: Easing.Sine.InOut(),
        duration: show ? 800 : 400,
        yoyo: show ? true : null,
        from: { opacity: show ? 0 : ( parseFloat( getComputedStyle( note ).opacity ) ) },
        to: { opacity: show ? 1 : 0 },
      } );
  
      setTimeout( () => this.activeTransitions--, this.durations.title );
  
    }
  
    timer( show ) {
  
      this.activeTransitions++;
  
      const timer = this.game.dom.texts.timer;
  
      timer.style.opacity = 0;
      this.game.timer.convert();
      this.game.timer.setText();
  
      this.splitLetters( timer );
      const letters = timer.querySelectorAll( 'i' );
      this.flipLetters( 'timer', letters, show );
  
      timer.style.opacity = 1;
  
      setTimeout( () => this.activeTransitions--, this.durations.timer );
  
    }
  
    splitLetters( element ) {
  
      const text = element.innerHTML;
  
      element.innerHTML = '';
  
      text.split( '' ).forEach( letter => {
  
        const i = document.createElement( 'i' );
  
        i.innerHTML = letter;
  
        element.appendChild( i );
  
      } );
  
    }
  
    flipLetters( type, letters, show ) {
  
      try { this.tweens[ type ].forEach( tween => tween.stop() ); } catch(e) {}
      letters.forEach( ( letter, index ) => {
  
        letter.style.opacity = show ? 0 : 1;
  
        this.tweens[ type ][ index ] = new Tween( {
          easing: Easing.Sine.Out(),
          duration: show ? 800 : 400,
          delay: index * 50,
          onUpdate: tween => {
  
            const rotation = show ? ( 1 - tween.value ) * -80 : tween.value * 80;
  
            letter.style.transform = `rotate3d(0, 1, 0, ${rotation}deg)`;
            letter.style.opacity = show ? tween.value : ( 1 - tween.value );
  
          },
        } );
  
      } );
  
      this.durations[ type ] = ( letters.length - 1 ) * 50 + ( show ? 800 : 400 );
  
    }
  
  }
  
  class Timer extends Animation {
  
    constructor( game ) {
  
      super( false );
  
      this.game = game;
      this.reset();
      
    }
  
    start( continueGame ) {
  
      this.startTime = continueGame ? ( Date.now() - this.deltaTime ) : Date.now();
      this.deltaTime = 0;
      this.converted = this.convert();
  
      super.start();
  
    }
  
    reset() {
  
      this.startTime = 0;
      this.currentTime = 0;
      this.deltaTime = 0;
      this.converted = '0:00';
  
    }
  
    stop() {
  
      this.currentTime = Date.now();
      this.deltaTime = this.currentTime - this.startTime;
      this.convert();
  
      super.stop();
  
      return { time: this.converted, millis: this.deltaTime };
  
    }
  
    update() {
  
      const old = this.converted;
  
      this.currentTime = Date.now();
      this.deltaTime = this.currentTime - this.startTime;
      this.convert();
  
      if ( this.converted != old ) {
  
        localStorage.setItem( 'theCube_time', this.deltaTime );
        this.setText();
  
      }
  
    }
  
    convert() {
  
      const seconds = parseInt( ( this.deltaTime / 1000 ) % 60 );
      const minutes = parseInt( ( this.deltaTime / ( 1000 * 60 ) ) );
  
      this.converted = minutes + ':' + ( seconds < 10 ? '0' : '' ) + seconds;
  
    }
  
    setText() {
  
      this.game.dom.texts.timer.innerHTML = this.converted;
  
    }
  
  }
  
  const RangeHTML = [
  
    '<div class="range">',
      '<div class="range__label"></div>',
      '<div class="range__track">',
        '<div class="range__track-line"></div>',
        '<div class="range__handle"><div></div></div>',
      '</div>',
      '<div class="range__list"></div>',
    '</div>',
  
  ].join( '\n' );
  
  document.querySelectorAll( 'range' ).forEach( el => {
  
    const temp = document.createElement( 'div' );
    temp.innerHTML = RangeHTML;
  
    const range = temp.querySelector( '.range' );
    const rangeLabel = range.querySelector( '.range__label' );
    const rangeList = range.querySelector( '.range__list' );
  
    range.setAttribute( 'name', el.getAttribute( 'name' ) );
    rangeLabel.innerHTML = el.getAttribute( 'title' );
  
    if ( el.hasAttribute( 'color' ) ) {
  
      range.classList.add( 'range--type-color' );
      range.classList.add( 'range--color-' + el.getAttribute( 'name' ) );
  
    }
  
    if ( el.hasAttribute( 'list' ) ) {
  
      el.getAttribute( 'list' ).split( ',' ).forEach( listItemText => {
  
        const listItem = document.createElement( 'div' );
        listItem.innerHTML = listItemText;
        rangeList.appendChild( listItem );
  
      } );
  
    }
  
    el.parentNode.replaceChild( range, el );
  
  } );
  
  class Range {
  
    constructor( name, options ) {
  
      options = Object.assign( {
        range: [ 0, 1 ],
        value: 0,
        step: 0,
        onUpdate: () => {},
        onComplete: () => {},
      }, options || {} );
  
      this.element = document.querySelector( '.range[name="' + name + '"]' );
      this.track = this.element.querySelector( '.range__track' );
      this.handle = this.element.querySelector( '.range__handle' );
      this.list = [].slice.call( this.element.querySelectorAll( '.range__list div' ) );
  
      this.value = options.value;
      this.min = options.range[0];
      this.max = options.range[1];
      this.step = options.step;
  
      this.onUpdate = options.onUpdate;
      this.onComplete = options.onComplete;
  
      this.setValue( this.value );
  
      this.initDraggable();
  
    }
  
    setValue( value ) {
  
      this.value = this.round( this.limitValue( value ) );
      this.setHandlePosition();
  
    }
  
    initDraggable() {
  
      let current;
  
      this.draggable = new Draggable( this.handle, { calcDelta: true } );
  
      this.draggable.onDragStart = position => {
  
        current = this.positionFromValue( this.value );
        this.handle.style.left = current + 'px';
  
      };
  
      this.draggable.onDragMove = position => {
  
        current = this.limitPosition( current + position.delta.x );
        this.value = this.round( this.valueFromPosition( current ) );
        this.setHandlePosition();
        
        this.onUpdate( this.value );
  
      };
  
      this.draggable.onDragEnd = position => {
  
        this.onComplete( this.value );
  
      };
  
    }
  
    round( value ) {
  
      if ( this.step < 1 ) return value;
  
      return Math.round( ( value - this.min ) / this.step ) * this.step + this.min;
  
    }
  
    limitValue( value ) {
  
      const max = Math.max( this.max, this.min );
      const min = Math.min( this.max, this.min );
  
      return Math.min( Math.max( value, min ), max );
  
    }
  
    limitPosition( position ) {
  
      return Math.min( Math.max( position, 0 ), this.track.offsetWidth );
  
    }
  
    percentsFromValue( value ) {
  
      return ( value - this.min ) / ( this.max - this.min );
  
    }
  
    valueFromPosition( position ) {
  
      return this.min + ( this.max - this.min ) * ( position / this.track.offsetWidth );
  
    }
  
    positionFromValue( value ) {
  
      return this.percentsFromValue( value ) * this.track.offsetWidth;
  
    }
  
    setHandlePosition() {
  
      this.handle.style.left = this.percentsFromValue( this.value ) * 100 + '%';
  
    }
  
  }
  
  class Preferences {
  
    constructor( game ) {
  
      this.game = game;
  
    }
  
    init() {
  
      this.ranges = {
  
        size: new Range( 'size', {
          value: this.game.cube.size,
          range: [ 2, 5 ],
          step: 1,
          onUpdate: value => {
  
            this.game.cube.size = value;
  
            this.game.preferences.ranges.scramble.list.forEach( ( item, i ) => {
  
              item.innerHTML = this.game.scrambler.scrambleLength[ this.game.cube.size ][ i ];
  
            } );
  
          },
          onComplete: () => this.game.storage.savePreferences(),
        } ),
  
        flip: new Range( 'flip', {
          value: this.game.controls.flipConfig,
          range: [ 0, 2 ],
          step: 1,
          onUpdate: value => {
  
            this.game.controls.flipConfig = value;
  
          },
          onComplete: () => this.game.storage.savePreferences(),
        } ),
  
        scramble: new Range( 'scramble', {
          value: this.game.scrambler.dificulty,
          range: [ 0, 2 ],
          step: 1,
          onUpdate: value => {
  
            this.game.scrambler.dificulty = value;
  
          },
          onComplete: () => this.game.storage.savePreferences()
        } ),
  
        fov: new Range( 'fov', {
          value: this.game.world.fov,
          range: [ 2, 45 ],
          onUpdate: value => {
  
            this.game.world.fov = value;
            this.game.world.resize();
  
          },
          onComplete: () => this.game.storage.savePreferences()
        } ),
  
        theme: new Range( 'theme', {
          value: { cube: 0, erno: 1, dust: 2, camo: 3, rain: 4 }[ this.game.themes.theme ],
          range: [ 0, 4 ],
          step: 1,
          onUpdate: value => {
  
            const theme = [ 'cube', 'erno', 'dust', 'camo', 'rain' ][ value ];
            this.game.themes.setTheme( theme );
  
          },
          onComplete: () => this.game.storage.savePreferences()
        } ),
  
        hue: new Range( 'hue', {
          value: 0,
          range: [ 0, 360 ],
          onUpdate: value => this.game.themeEditor.updateHSL(),
          onComplete: () => this.game.storage.savePreferences(),
        } ),
  
        saturation: new Range( 'saturation', {
          value: 100,
          range: [ 0, 100 ],
          onUpdate: value => this.game.themeEditor.updateHSL(),
          onComplete: () => this.game.storage.savePreferences(),
        } ),
  
        lightness: new Range( 'lightness', {
          value: 50,
          range: [ 0, 100 ],
          onUpdate: value => this.game.themeEditor.updateHSL(),
          onComplete: () => this.game.storage.savePreferences(),
        } ),
  
      };
  
      this.ranges.scramble.list.forEach( ( item, i ) => {
  
        item.innerHTML = this.game.scrambler.scrambleLength[ this.game.cube.size ][ i ];
  
      } );
      
    }
  
  }
  
  class Confetti {
  
    constructor( game ) {
  
      this.game = game;
      this.started = 0;
  
      this.options = {
        speed: { min: 0.0011, max: 0.0022 },
        revolution: { min: 0.01, max: 0.05 },
        size: { min: 0.1, max: 0.15 },
        colors: [ 0x41aac8, 0x82ca38, 0xffef48, 0xef3923, 0xff8c0a ],
      };
  
      this.geometry = new THREE.PlaneGeometry( 1, 1 );
      this.material = new THREE.MeshLambertMaterial( { side: THREE.DoubleSide } );
  
      this.holders = [
        new ConfettiStage( this.game, this, 1, 20 ),
        new ConfettiStage( this.game, this, -1, 30 ),
      ];
  
    }
  
    start() {
  
      if ( this.started > 0 ) return;
  
      this.holders.forEach( holder => {
  
        this.game.world.scene.add( holder.holder );
        holder.start();
        this.started ++;
  
      } );
  
    }
  
    stop() {
  
      if ( this.started == 0 ) return;
  
      this.holders.forEach( holder => {
  
        holder.stop( () => {
  
          this.game.world.scene.remove( holder.holder );
          this.started --;
  
        } );
  
      } );
  
    }
  
    updateColors( colors ) {
  
      this.holders.forEach( holder => {
  
        holder.options.colors.forEach( ( color, index ) => {
  
          holder.options.colors[ index ] = colors[ [ 'D', 'F', 'R', 'B', 'L' ][ index ] ];
  
        } );
  
      } );
  
    }
  
  }
  
  class ConfettiStage extends Animation {
  
    constructor( game, parent, distance, count ) {
  
      super( false );
  
      this.game = game;
      this.parent = parent;
  
      this.distanceFromCube = distance;
  
      this.count = count;
      this.particles = [];
  
      this.holder = new THREE.Object3D();
      this.holder.rotation.copy( this.game.world.camera.rotation );
  
      this.object = new THREE.Object3D();
      this.holder.add( this.object );
  
      this.resizeViewport = this.resizeViewport.bind( this );
      this.game.world.onResize.push( this.resizeViewport );
      this.resizeViewport();    
  
      this.geometry = this.parent.geometry;
      this.material = this.parent.material;
  
      this.options = this.parent.options;
  
      let i = this.count;
      while ( i-- ) this.particles.push( new Particle( this ) );
  
    }
  
    start() {
  
      this.time = performance.now();
      this.playing = true;
  
      let i = this.count;
      while ( i-- ) this.particles[ i ].reset();
  
      super.start();
  
    }
  
    stop( callback ) {
  
      this.playing = false;
      this.completed = 0;
      this.callback = callback;
  
    }
  
    reset() {
  
      super.stop();
  
      this.callback();
  
    }
  
    update() {
  
      const now = performance.now();
      const delta = now - this.time;
      this.time = now;
  
      let i = this.count;
  
      while ( i-- )
        if ( ! this.particles[ i ].completed ) this.particles[ i ].update( delta );
  
      if ( ! this.playing && this.completed == this.count ) this.reset();
  
    }
  
    resizeViewport() {
  
      const fovRad = this.game.world.camera.fov * THREE.Math.DEG2RAD;
  
      this.height = 2 * Math.tan( fovRad / 2 ) * ( this.game.world.camera.position.length() - this.distanceFromCube );
      this.width = this.height * this.game.world.camera.aspect;
  
      const scale = 1 / this.game.transition.data.cameraZoom;
  
      this.width *= scale;
      this.height *= scale;
  
      this.object.position.z = this.distanceFromCube;
      this.object.position.y = this.height / 2;
  
    }
    
  }
  
  class Particle {
  
    constructor( confetti ) {
  
      this.confetti = confetti;
      this.options = this.confetti.options;
  
      this.velocity = new THREE.Vector3();
      this.force = new THREE.Vector3();
  
      this.mesh = new THREE.Mesh( this.confetti.geometry, this.confetti.material.clone() );
      this.confetti.object.add( this.mesh );
  
      this.size = THREE.Math.randFloat( this.options.size.min, this.options.size.max );
      this.mesh.scale.set( this.size, this.size, this.size );
  
      return this;
  
    }
  
    reset( randomHeight = true ) {
  
      this.completed = false;
  
      this.color = new THREE.Color( this.options.colors[ Math.floor( Math.random() * this.options.colors.length ) ] );
      this.mesh.material.color.set( this.color );
  
      this.speed = THREE.Math.randFloat( this.options.speed.min, this.options.speed.max ) * - 1;
      this.mesh.position.x = THREE.Math.randFloat( - this.confetti.width / 2, this.confetti.width / 2 );
      this.mesh.position.y = ( randomHeight )
        ? THREE.Math.randFloat( this.size, this.confetti.height + this.size )
        : this.size;
  
      this.revolutionSpeed = THREE.Math.randFloat( this.options.revolution.min, this.options.revolution.max );
      this.revolutionAxis = [ 'x', 'y', 'z' ][ Math.floor( Math.random() * 3 ) ];
      this.mesh.rotation.set( Math.random() * Math.PI / 3, Math.random() * Math.PI / 3, Math.random() * Math.PI / 3 );
  
    }
  
    stop() {
  
      this.completed = true;
      this.confetti.completed ++;
  
    }
  
    update( delta ) {
  
      this.mesh.position.y += this.speed * delta;
      this.mesh.rotation[ this.revolutionAxis ] += this.revolutionSpeed;
  
      if ( this.mesh.position.y < - this.confetti.height - this.size )
        ( this.confetti.playing ) ? this.reset( false ) : this.stop();
  
    }
  
  }
  
  class Scores {
  
    constructor( game ) {
  
      this.game = game;
  
      this.data = {
        2: {
          scores: [],
          solves: 0,
          best: 0,
          worst: 0,
        },
        3: {
          scores: [],
          solves: 0,
          best: 0,
          worst: 0,
        },
        4: {
          scores: [],
          solves: 0,
          best: 0,
          worst: 0,
        },
        5: {
          scores: [],
          solves: 0,
          best: 0,
          worst: 0,
        }
      };
  
    }
  
    addScore( time ) {
  
      const data = this.data[ this.game.cube.sizeGenerated ];
  
      data.scores.push( time );
      data.solves++;
  
      if ( data.scores.lenght > 100 ) data.scores.shift();
  
      let bestTime = false;    
  
      if ( time < data.best || data.best === 0 ) {
  
        data.best = time;
        bestTime = true;
  
      }
  
      if ( time > data.worst ) data.worst = time;
  
      this.game.storage.saveScores();
  
      return bestTime;
  
    }
  
    calcStats() {
  
      const s = this.game.cube.sizeGenerated;
      const data = this.data[ s ];
  
      this.setStat( 'cube-size', `${s}<i>x</i>${s}<i>x</i>${s}` );
      this.setStat( 'total-solves', data.solves );
      this.setStat( 'best-time', this.convertTime( data.best ) );
      this.setStat( 'worst-time', this.convertTime( data.worst ) );
      this.setStat( 'average-5', this.getAverage( 5 ) );
      this.setStat( 'average-12', this.getAverage( 12 ) );
      this.setStat( 'average-25', this.getAverage( 25 ) );
  
    }
  
    setStat( name, value ) {
  
      if ( value === 0 ) value = '-';
  
      this.game.dom.stats.querySelector( `.stats[name="${name}"] b` ).innerHTML = value;
  
    }
  
    getAverage( count ) {
  
      const data = this.data[ this.game.cube.sizeGenerated ];
  
      if ( data.scores.length < count ) return 0;
  
      return this.convertTime( data.scores.slice( -count ).reduce( ( a, b ) => a + b, 0 ) / count );
  
    }
  
    convertTime( time ) {
  
      if ( time <= 0 ) return 0;
  
      const seconds = parseInt( ( time / 1000 ) % 60 );
      const minutes = parseInt( ( time / ( 1000 * 60 ) ) );
  
      return minutes + ':' + ( seconds < 10 ? '0' : '' ) + seconds;
  
    }
  
  }
  
  class Storage {
  
    constructor( game ) {
  
      this.game = game;
  
      const userVersion = localStorage.getItem( 'theCube_version' );
  
      if ( ! userVersion || userVersion !== window.gameVersion ) {
  
        this.clearGame();
        this.clearPreferences();
        this.migrateScores();
        localStorage.setItem( 'theCube_version', window.gameVersion );
  
      }
  
    }
  
    init() {
  
      this.loadPreferences();
      this.loadScores();
  
    }
  
    loadGame() {
  
      try {
  
        const gameInProgress = localStorage.getItem( 'theCube_playing' ) === 'true';
  
        if ( ! gameInProgress ) throw new Error();
  
        const gameCubeData = JSON.parse( localStorage.getItem( 'theCube_savedState' ) );
        const gameTime = parseInt( localStorage.getItem( 'theCube_time' ) );
  
        if ( ! gameCubeData || gameTime === null ) throw new Error();
        if ( gameCubeData.size !== this.game.cube.sizeGenerated ) throw new Error();
  
        this.game.cube.loadFromData( gameCubeData );
  
        this.game.timer.deltaTime = gameTime;
  
        this.game.saved = true;
  
      } catch( e ) {
  
        this.game.saved = false;
  
      }
  
    }
  
    saveGame() {
  
      const gameInProgress = true;
      const gameCubeData = { names: [], positions: [], rotations: [] };
      const gameTime = this.game.timer.deltaTime;
  
      gameCubeData.size = this.game.cube.sizeGenerated;
  
      this.game.cube.pieces.forEach( piece => {
  
        gameCubeData.names.push( piece.name );
        gameCubeData.positions.push( piece.position );
        gameCubeData.rotations.push( piece.rotation.toVector3() );
  
      } );
  
      localStorage.setItem( 'theCube_playing', gameInProgress );
      localStorage.setItem( 'theCube_savedState', JSON.stringify( gameCubeData ) );
      localStorage.setItem( 'theCube_time', gameTime );
  
    }
  
    clearGame() {
  
      localStorage.removeItem( 'theCube_playing' );
      localStorage.removeItem( 'theCube_savedState' );
      localStorage.removeItem( 'theCube_time' );
  
    }
  
    loadScores() {
  
      try {
  
        const scoresData = JSON.parse( localStorage.getItem( 'theCube_scores' ) );
  
        if ( ! scoresData ) throw new Error();
  
        this.game.scores.data = scoresData;
  
      } catch( e ) {}
  
    }
  
    saveScores() {
  
      const scoresData = this.game.scores.data;
  
      localStorage.setItem( 'theCube_scores', JSON.stringify( scoresData ) );
  
    }
  
    clearScores() {
  
      localStorage.removeItem( 'theCube_scores' );
  
    }
  
    migrateScores() {
  
      try {
  
        const scoresData = JSON.parse( localStorage.getItem( 'theCube_scoresData' ) );
        const scoresBest = parseInt( localStorage.getItem( 'theCube_scoresBest' ) );
        const scoresWorst = parseInt( localStorage.getItem( 'theCube_scoresWorst' ) );
        const scoresSolves = parseInt( localStorage.getItem( 'theCube_scoresSolves' ) );
  
        if ( ! scoresData || ! scoresBest || ! scoresSolves || ! scoresWorst ) return false;
  
        this.game.scores.data[ 3 ].scores = scoresData;
        this.game.scores.data[ 3 ].best = scoresBest;
        this.game.scores.data[ 3 ].solves = scoresSolves;
        this.game.scores.data[ 3 ].worst = scoresWorst;
  
        localStorage.removeItem( 'theCube_scoresData' );
        localStorage.removeItem( 'theCube_scoresBest' );
        localStorage.removeItem( 'theCube_scoresWorst' );
        localStorage.removeItem( 'theCube_scoresSolves' );
  
      } catch( e ) {}
  
    }
  
    loadPreferences() {
  
      try {
  
        const preferences = JSON.parse( localStorage.getItem( 'theCube_preferences' ) );
  
        if ( ! preferences ) throw new Error();
  
        this.game.cube.size = parseInt( preferences.cubeSize );
        this.game.controls.flipConfig = parseInt( preferences.flipConfig );
        this.game.scrambler.dificulty = parseInt( preferences.dificulty );
  
        this.game.world.fov = parseFloat( preferences.fov );
        this.game.world.resize();
  
        this.game.themes.colors = preferences.colors;
        this.game.themes.setTheme( preferences.theme );
  
        return true;
  
      } catch (e) {
  
        this.game.cube.size = 3;
        this.game.controls.flipConfig = 0;
        this.game.scrambler.dificulty = 1;
  
        this.game.world.fov = 10;
        this.game.world.resize();
  
        this.game.themes.setTheme( 'cube' );
  
        this.savePreferences();
  
        return false;
  
      }
  
    }
  
    savePreferences() {
  
      const preferences = {
        cubeSize: this.game.cube.size,
        flipConfig: this.game.controls.flipConfig,
        dificulty: this.game.scrambler.dificulty,
        fov: this.game.world.fov,
        theme: this.game.themes.theme,
        colors: this.game.themes.colors,
      };
  
      localStorage.setItem( 'theCube_preferences', JSON.stringify( preferences ) );
  
    }
  
    clearPreferences() {
  
      localStorage.removeItem( 'theCube_preferences' );
  
    }
  
  }
  
  class Themes {
  
    constructor( game ) {
  
      this.game = game;
      this.theme = null;
  
      this.defaults = {
        cube: {
          U: 0xfff7ff, // white
          D: 0xffef48, // yellow
          F: 0xef3923, // red
          R: 0x41aac8, // blue
          B: 0xff8c0a, // orange
          L: 0x82ca38, // green
          P: 0x08101a, // piece
          G: 0xd1d5db, // background
        },
        erno: {
          U: 0xffffff,
          D: 0xffd500,
          F: 0xc41e3a,
          R: 0x0051ba,
          B: 0xff5800,
          L: 0x009e60,
          P: 0x08101a,
          G: 0x8abdff,
        },
        dust: {
          U: 0xfff6eb,
          D: 0xe7c48d,
          F: 0x8f253e,
          R: 0x607e69,
          B: 0xbe6f62,
          L: 0x849f5d,
          P: 0x08101a,
          G: 0xE7C48D,
        },
        camo: {
          U: 0xfff6eb,
          D: 0xbfb672,
          F: 0x37241c,
          R: 0x718456,
          B: 0x805831,
          L: 0x37431d,
          P: 0x08101a,
          G: 0xBFB672,
        },
        rain: {
          U: 0xfafaff,
          D: 0xedb92d,
          F: 0xce2135,
          R: 0x449a89,
          B: 0xec582f,
          L: 0xa3a947,
          P: 0x08101a,
          G: 0x87b9ac,
        },
      };
  
      this.colors = JSON.parse( JSON.stringify( this.defaults ) );
  
    }
  
    getColors() {
  
      return this.colors[ this.theme ];
  
    }
  
    setTheme( theme = false, force = false ) {
  
      if ( theme === this.theme && force === false ) return;
      if ( theme !== false ) this.theme = theme;
  
      const colors = this.getColors();
  
      this.game.dom.prefs.querySelectorAll( '.range__handle div' ).forEach( range => {
  
        range.style.background = '#' + colors.R.toString(16).padStart(6, '0');
  
      } );
  
      this.game.cube.updateColors( colors );
  
      this.game.confetti.updateColors( colors );
  
      this.game.dom.back.style.background = '#' + colors.G.toString(16).padStart(6, '0');
  
    }
  
  }
  
  class ThemeEditor {
  
    constructor( game ) {
  
      this.game = game;
  
      this.editColor = 'R';
  
      this.getPieceColor = this.getPieceColor.bind( this );
  
    }
  
    colorFromHSL( h, s, l ) {
  
      h = Math.round( h );
      s = Math.round( s );
      l = Math.round( l );
  
      return new THREE.Color( `hsl(${h}, ${s}%, ${l}%)` );
  
    }
  
    setHSL( color = null, animate = false ) {
  
      this.editColor = ( color === null) ? 'R' : color;
  
      const hsl = new THREE.Color( this.game.themes.getColors()[ this.editColor ] );
  
      const { h, s, l } = hsl.getHSL( hsl );
      const { hue, saturation, lightness } = this.game.preferences.ranges;
  
      if ( animate ) {
  
        const ho = hue.value / 360;
        const so = saturation.value / 100;
        const lo = lightness.value / 100;
  
        const colorOld = this.colorFromHSL( hue.value, saturation.value, lightness.value );
  
        if ( this.tweenHSL ) this.tweenHSL.stop();
  
        this.tweenHSL = new Tween( {
          duration: 200,
          easing: Easing.Sine.Out(),
          onUpdate: tween => {
  
            hue.setValue( ( ho + ( h - ho ) * tween.value ) * 360 );
            saturation.setValue( ( so + ( s - so ) * tween.value ) * 100 );
            lightness.setValue( ( lo + ( l - lo ) * tween.value ) * 100 );
  
            const colorTween = colorOld.clone().lerp( hsl, tween.value );
  
            const colorTweenStyle = colorTween.getStyle();
            const colorTweenHex = colorTween.getHSL( colorTween );
  
            hue.handle.style.color = colorTweenStyle;
            saturation.handle.style.color = colorTweenStyle;
            lightness.handle.style.color = colorTweenStyle;
  
            saturation.track.style.color =
              this.colorFromHSL( colorTweenHex.h * 360, 100, 50 ).getStyle();
            lightness.track.style.color =
              this.colorFromHSL( colorTweenHex.h * 360, colorTweenHex.s * 100, 50 ).getStyle();
  
            this.game.dom.theme.style.display = 'none';
            this.game.dom.theme.offsetHeight;
            this.game.dom.theme.style.display = '';
  
          },
          onComplete: () => {
  
            this.updateHSL();
            this.game.storage.savePreferences();
  
          },
        } );
  
      } else {
  
        hue.setValue( h * 360 );
        saturation.setValue( s * 100 );
        lightness.setValue( l * 100 );
  
        this.updateHSL();
        this.game.storage.savePreferences();
  
      }
  
    }
  
    updateHSL() {
  
      const { hue, saturation, lightness } = this.game.preferences.ranges;
  
      const h = hue.value;
      const s = saturation.value;
      const l = lightness.value;
  
      const color = this.colorFromHSL( h, s, l ).getStyle();
  
      hue.handle.style.color = color;
      saturation.handle.style.color = color;
      lightness.handle.style.color = color;
  
      saturation.track.style.color = this.colorFromHSL( h, 100, 50 ).getStyle();
      lightness.track.style.color = this.colorFromHSL( h, s, 50 ).getStyle();
  
      this.game.dom.theme.style.display = 'none';
      this.game.dom.theme.offsetHeight;
      this.game.dom.theme.style.display = '';
  
      const theme = this.game.themes.theme;
  
      this.game.themes.colors[ theme ][ this.editColor ] = this.colorFromHSL( h, s, l ).getHex();
      this.game.themes.setTheme();
  
    }
  
    colorPicker( enable ) {
  
      if ( enable ) {
  
        this.game.dom.game.addEventListener( 'click', this.getPieceColor, false );
  
      } else {
  
        this.game.dom.game.removeEventListener( 'click', this.getPieceColor, false );
  
      }
  
    }
  
    getPieceColor( event ) {
  
      const clickEvent = event.touches
        ? ( event.touches[ 0 ] || event.changedTouches[ 0 ] )
        : event;
  
      const clickPosition = new THREE.Vector2( clickEvent.pageX, clickEvent.pageY );
  
      let edgeIntersect = this.game.controls.getIntersect( clickPosition, this.game.cube.edges, true );
      let pieceIntersect = this.game.controls.getIntersect( clickPosition, this.game.cube.cubes, true );
  
      if ( edgeIntersect !== false ) {
  
        const edge = edgeIntersect.object;
  
        const position = edge.parent
          .localToWorld( edge.position.clone() )
          .sub( this.game.cube.object.position )
          .sub( this.game.cube.animator.position );
  
        const mainAxis = this.game.controls.getMainAxis( position );
        if ( position.multiplyScalar( 2 ).round()[ mainAxis ] < 1 ) edgeIntersect = false;
  
      }
  
      const name = edgeIntersect ? edgeIntersect.object.name : pieceIntersect ? 'P' : 'G';
  
      this.setHSL( name, true );
  
    }
  
    resetTheme() {
  
      this.game.themes.colors[ this.game.themes.theme ] =
        JSON.parse( JSON.stringify( this.game.themes.defaults[ this.game.themes.theme ] ) );
  
      this.game.themes.setTheme();
  
      this.setHSL( this.editColor, true );
  
    }
  
  }
  
  const States = {
    3: {
      checkerboard: {
        names: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26 ],
        positions: [
          { "x": 1/3, "y": -1/3, "z": 1/3 },
          { "x": -1/3, "y": 1/3, "z": 0 },
          { "x": 1/3, "y": -1/3, "z": -1/3 },
          { "x": -1/3, "y": 0, "z": -1/3 },
          { "x": 1/3, "y": 0, "z": 0 },
          { "x": -1/3, "y": 0, "z": 1/3 },
          { "x": 1/3, "y": 1/3, "z": 1/3 },
          { "x": -1/3, "y": -1/3, "z": 0 },
          { "x": 1/3, "y": 1/3, "z": -1/3 },
          { "x": 0, "y": 1/3, "z": -1/3 },
          { "x": 0, "y": -1/3, "z": 0 },
          { "x": 0, "y": 1/3, "z": 1/3 },
          { "x": 0, "y": 0, "z": 1/3 },
          { "x": 0, "y": 0, "z": 0 },
          { "x": 0, "y": 0, "z": -1/3 },
          { "x": 0, "y": -1/3, "z": -1/3 },
          { "x": 0, "y": 1/3, "z": 0 },
          { "x": 0, "y": -1/3, "z": 1/3 },
          { "x": -1/3, "y": -1/3, "z": 1/3 },
          { "x": 1/3, "y": 1/3, "z": 0 },
          { "x": -1/3, "y": -1/3, "z": -1/3 },
          { "x": 1/3, "y": 0, "z": -1/3 },
          { "x": -1/3, "y": 0, "z": 0 },
          { "x": 1/3, "y": 0, "z": 1/3 },
          { "x": -1/3, "y": 1/3, "z": 1/3 },
          { "x": 1/3, "y": -1/3, "z": 0 },
          { "x": -1/3, "y": 1/3, "z": -1/3 }
        ],
        rotations: [
          { "x": -Math.PI, "y": 0, "z": Math.PI, },
          { "x": Math.PI, "y": 0, "z": 0 },
          { "x": -Math.PI, "y": 0, "z": Math.PI },
          { "x": 0, "y": 0, "z": 0 },
          { "x": 0, "y": 0, "z": Math.PI },
          { "x": 0, "y": 0, "z": 0 },
          { "x": -Math.PI, "y": 0, "z": Math.PI },
          { "x": Math.PI, "y": 0, "z": 0 },
          { "x": -Math.PI, "y": 0, "z": Math.PI },
          { "x": 0, "y": 0, "z": Math.PI },
          { "x": 0, "y": 0, "z": 0 },
          { "x": 0, "y": 0, "z": Math.PI },
          { "x": -Math.PI, "y": 0, "z": 0 },
          { "x": Math.PI, "y": 0, "z": Math.PI },
          { "x": Math.PI, "y": 0, "z": 0 },
          { "x": 0, "y": 0, "z": Math.PI },
          { "x": 0, "y": 0, "z": 0 },
          { "x": 0, "y": 0, "z": Math.PI },
          { "x": Math.PI, "y": 0, "z": Math.PI },
          { "x": -Math.PI, "y": 0, "z": 0 },
          { "x": Math.PI, "y": 0, "z": Math.PI },
          { "x": 0, "y": 0, "z": 0 },
          { "x": 0, "y": 0, "z": Math.PI },
          { "x": 0, "y": 0, "z": 0 },
          { "x": Math.PI, "y": 0, "z": Math.PI },
          { "x": -Math.PI, "y": 0, "z": 0 },
          { "x": Math.PI, "y": 0, "z": Math.PI }
        ],
        size: 3,
      },
    }
  };
  
  class IconsConverter {
  
    constructor( options ) {
  
      options = Object.assign( {
        tagName: 'icon',
        className: 'icon',
        styles: false,
        icons: {},
        observe: false,
        convert: false,
      }, options || {} );
  
      this.tagName = options.tagName;
      this.className = options.className;
      this.icons = options.icons;
  
      this.svgTag = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
      this.svgTag.setAttribute( 'class', this.className );
  
      if ( options.styles ) this.addStyles();
      if ( options.convert ) this.convertAllIcons();
  
      if ( options.observe ) {
  
        const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
        this.observer = new MutationObserver( mutations => { this.convertAllIcons(); } );
        this.observer.observe( document.documentElement, { childList: true, subtree: true } );
  
      }
  
      return this;
  
    }
  
    convertAllIcons() {
  
      document.querySelectorAll( this.tagName ).forEach( icon => { this.convertIcon( icon ); } );
  
    }
  
    convertIcon( icon ) {
  
      const svgData = this.icons[ icon.attributes[0].localName ];
  
      if ( typeof svgData === 'undefined' ) return;
  
      const svg = this.svgTag.cloneNode( true );
      const viewBox = svgData.viewbox.split( ' ' );
  
      svg.setAttributeNS( null, 'viewBox', svgData.viewbox );
      svg.style.width = viewBox[2] / viewBox[3] + 'em';
      svg.style.height = '1em';
      svg.innerHTML = svgData.content;
  
      icon.parentNode.replaceChild( svg, icon );
  
    }
  
    addStyles() {
  
      const style = document.createElement( 'style' );
      style.innerHTML = `.${this.className} { display: inline-block; font-size: inherit; overflow: visible; vertical-align: -0.125em; preserveAspectRatio: none; }`;
      document.head.appendChild( style );
  
    }
  
  }
  
  const Icons = new IconsConverter( {
  
    icons: {
      settings: {
        viewbox: '0 0 512 512',
        content: '<path fill="currentColor" d="M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z" />',
      },
      back: {
        viewbox: '0 0 512 512',
        content: '<path transform="translate(512, 0) scale(-1,1)" fill="currentColor" d="M503.691 189.836L327.687 37.851C312.281 24.546 288 35.347 288 56.015v80.053C127.371 137.907 0 170.1 0 322.326c0 61.441 39.581 122.309 83.333 154.132 13.653 9.931 33.111-2.533 28.077-18.631C66.066 312.814 132.917 274.316 288 272.085V360c0 20.7 24.3 31.453 39.687 18.164l176.004-152c11.071-9.562 11.086-26.753 0-36.328z" />',
      },
      trophy: {
        viewbox: '0 0 576 512',
        content: '<path fill="currentColor" d="M552 64H448V24c0-13.3-10.7-24-24-24H152c-13.3 0-24 10.7-24 24v40H24C10.7 64 0 74.7 0 88v56c0 66.5 77.9 131.7 171.9 142.4C203.3 338.5 240 360 240 360v72h-48c-35.3 0-64 20.7-64 56v12c0 6.6 5.4 12 12 12h296c6.6 0 12-5.4 12-12v-12c0-35.3-28.7-56-64-56h-48v-72s36.7-21.5 68.1-73.6C498.4 275.6 576 210.3 576 144V88c0-13.3-10.7-24-24-24zM64 144v-16h64.2c1 32.6 5.8 61.2 12.8 86.2-47.5-16.4-77-49.9-77-70.2zm448 0c0 20.2-29.4 53.8-77 70.2 7-25 11.8-53.6 12.8-86.2H512v16zm-127.3 4.7l-39.6 38.6 9.4 54.6c1.7 9.8-8.7 17.2-17.4 12.6l-49-25.8-49 25.8c-8.8 4.6-19.1-2.9-17.4-12.6l9.4-54.6-39.6-38.6c-7.1-6.9-3.2-19 6.7-20.5l54.8-8 24.5-49.6c4.4-8.9 17.1-8.9 21.5 0l24.5 49.6 54.8 8c9.6 1.5 13.5 13.6 6.4 20.5z" />',
      },
      cancel: {
        viewbox: '0 0 352 512',
        content: '<path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" />',
      },
      theme: {
        viewbox: '0 0 512 512',
        content: '<path fill="currentColor" d="M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"/>',
      },
      reset: {
        viewbox: '0 0 512 512',
        content: '<path fill="currentColor" d="M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z" />',
      },
      trash: {
        viewbox: '0 0 448 512',
        content: '<path fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z" />',
      },
    },
  
    convert: true,
  
  } );
  
  const STATE = {
    Menu: 0,
    Playing: 1,
    Complete: 2,
    Stats: 3,
    Prefs: 4,
    Theme: 5,
  };
  
  const BUTTONS = {
    Menu: [ 'stats', 'prefs' ],
    Playing: [ 'back' ],
    Complete: [],
    Stats: [],
    Prefs: [ 'back', 'theme' ],
    Theme: [ 'back', 'reset' ],
    None: [],
  };
  
  const SHOW = true;
  const HIDE = false;
  
  class Game {
  
    constructor() {
  
      this.dom = {
        ui: document.querySelector( '.ui' ),
        game: document.querySelector( '.ui__game' ),
        back: document.querySelector( '.ui__background' ),
        prefs: document.querySelector( '.ui__prefs' ),
        theme: document.querySelector( '.ui__theme' ),
        stats: document.querySelector( '.ui__stats' ),
        texts: {
          title: document.querySelector( '.text--title' ),
          note: document.querySelector( '.text--note' ),
          timer: document.querySelector( '.text--timer' ),
          complete: document.querySelector( '.text--complete' ),
          best: document.querySelector( '.text--best-time' ),
          theme: document.querySelector( '.text--theme' ),
        },
        buttons: {
          prefs: document.querySelector( '.btn--prefs' ),
          back: document.querySelector( '.btn--back' ),
          stats: document.querySelector( '.btn--stats' ),
          reset: document.querySelector( '.btn--reset' ),
          theme: document.querySelector( '.btn--theme' ),
        },
      };
  
      this.world = new World( this );
      this.cube = new Cube( this );
      this.controls = new Controls( this );
      this.scrambler = new Scrambler( this );
      this.transition = new Transition( this );
      this.timer = new Timer( this );
      this.preferences = new Preferences( this );
      this.scores = new Scores( this );
      this.storage = new Storage( this );
      this.confetti = new Confetti( this );
      this.themes = new Themes( this );
      this.themeEditor = new ThemeEditor( this );
  
      this.initActions();
  
      this.state = STATE.Menu;
      this.newGame = false;
      this.saved = false;
  
      this.storage.init();
      this.preferences.init();
      this.cube.init();
      this.transition.init();
  
      this.storage.loadGame();
      this.scores.calcStats();
  
      setTimeout( () => {
  
        this.transition.float();
        this.transition.cube( SHOW );
  
        setTimeout( () => this.transition.title( SHOW ), 700 );
        setTimeout( () => this.transition.buttons( BUTTONS.Menu, BUTTONS.None ), 1000 );
  
      }, 500 );
  
    }
  
    initActions() {
  
      let tappedTwice = false;
  
      this.dom.game.addEventListener( 'click', event => {
  
        if ( this.transition.activeTransitions > 0 ) return;
        if ( this.state === STATE.Playing ) return;
  
        if ( this.state === STATE.Menu ) {
  
          if ( ! tappedTwice ) {
  
            tappedTwice = true;
            setTimeout( () => tappedTwice = false, 300 );
            return false;
  
          }
  
          this.game( SHOW );
  
        } else if ( this.state === STATE.Complete ) {
  
          this.complete( HIDE );
  
        } else if ( this.state === STATE.Stats ) {
  
          this.stats( HIDE );
  
        } 
  
      }, false );
  
      this.controls.onMove = () => {
  
        if ( this.newGame ) {
          
          this.timer.start( true );
          this.newGame = false;
  
        }
  
      };
  
      this.dom.buttons.back.onclick = event => {
  
        if ( this.transition.activeTransitions > 0 ) return;
  
        if ( this.state === STATE.Playing ) {
  
          this.game( HIDE );
  
        } else if ( this.state === STATE.Prefs ) {
  
          this.prefs( HIDE );
  
        } else if ( this.state === STATE.Theme ) {
  
          this.theme( HIDE );
  
        }
  
      };
  
      this.dom.buttons.reset.onclick = event => {
  
        if ( this.state === STATE.Theme ) {
  
          this.themeEditor.resetTheme();
  
        }
        
      };
  
      this.dom.buttons.prefs.onclick = event => this.prefs( SHOW );
  
      this.dom.buttons.theme.onclick = event => this.theme( SHOW );
  
      this.dom.buttons.stats.onclick = event => this.stats( SHOW );
  
      this.controls.onSolved = () => this.complete( SHOW );
  
    }
  
    game( show ) {
  
      if ( show ) {
  
        if ( ! this.saved ) {
  
          this.scrambler.scramble();
          this.controls.scrambleCube();
          this.newGame = true;
  
        }
  
        const duration = this.saved ? 0 :
          this.scrambler.converted.length * ( this.controls.flipSpeeds[0] + 10 );
  
        this.state = STATE.Playing;
        this.saved = true;
  
        this.transition.buttons( BUTTONS.None, BUTTONS.Menu );
  
        this.transition.zoom( STATE.Playing, duration );
        this.transition.title( HIDE );
  
        setTimeout( () => {
  
          this.transition.timer( SHOW );
          this.transition.buttons( BUTTONS.Playing, BUTTONS.None );
  
        }, this.transition.durations.zoom - 1000 );
  
        setTimeout( () => {
  
          this.controls.enable();
          if ( ! this.newGame ) this.timer.start( true );
  
        }, this.transition.durations.zoom );
  
      } else {
  
        this.state = STATE.Menu;
  
        this.transition.buttons( BUTTONS.Menu, BUTTONS.Playing );
  
        this.transition.zoom( STATE.Menu, 0 );
  
        this.controls.disable();
        if ( ! this.newGame ) this.timer.stop();
        this.transition.timer( HIDE );
  
        setTimeout( () => this.transition.title( SHOW ), this.transition.durations.zoom - 1000 );
  
        this.playing = false;
        this.controls.disable();
  
      }
  
    }
  
    prefs( show ) {
  
      if ( show ) {
  
        if ( this.transition.activeTransitions > 0 ) return;
  
        this.state = STATE.Prefs;
  
        this.transition.buttons( BUTTONS.Prefs, BUTTONS.Menu );
  
        this.transition.title( HIDE );
        this.transition.cube( HIDE );
  
        setTimeout( () => this.transition.preferences( SHOW ), 1000 );
  
      } else {
  
        this.cube.resize();
  
        this.state = STATE.Menu;
  
        this.transition.buttons( BUTTONS.Menu, BUTTONS.Prefs );
  
        this.transition.preferences( HIDE );
  
        setTimeout( () => this.transition.cube( SHOW ), 500 );
        setTimeout( () => this.transition.title( SHOW ), 1200 );
  
      }
  
    }
  
    theme( show ) {
  
      this.themeEditor.colorPicker( show );
      
      if ( show ) {
  
        if ( this.transition.activeTransitions > 0 ) return;
  
        this.cube.loadFromData( States[ '3' ][ 'checkerboard' ] );
  
        this.themeEditor.setHSL( null, false );
  
        this.state = STATE.Theme;
  
        this.transition.buttons( BUTTONS.Theme, BUTTONS.Prefs );
  
        this.transition.preferences( HIDE );
  
        setTimeout( () => this.transition.cube( SHOW, true ), 500 );
        setTimeout( () => this.transition.theming( SHOW ), 1000 );
  
      } else {
  
        this.state = STATE.Prefs;
  
        this.transition.buttons( BUTTONS.Prefs, BUTTONS.Theme );
  
        this.transition.cube( HIDE, true );
        this.transition.theming( HIDE );
  
        setTimeout( () => this.transition.preferences( SHOW ), 1000 );
        setTimeout( () => {
  
          const gameCubeData = JSON.parse( localStorage.getItem( 'theCube_savedState' ) );
  
          if ( !gameCubeData ) {
  
            this.cube.resize( true );
            return;
  
          }
  
          this.cube.loadFromData( gameCubeData );
  
        }, 1500 );
  
      }
  
    }
  
    stats( show ) {
  
      if ( show ) {
  
        if ( this.transition.activeTransitions > 0 ) return;
  
        this.state = STATE.Stats;
  
        this.transition.buttons( BUTTONS.Stats, BUTTONS.Menu );
  
        this.transition.title( HIDE );
        this.transition.cube( HIDE );
  
        setTimeout( () => this.transition.stats( SHOW ), 1000 );
  
      } else {
  
        this.state = STATE.Menu;
  
        this.transition.buttons( BUTTONS.Menu, BUTTONS.None );
  
        this.transition.stats( HIDE );
  
        setTimeout( () => this.transition.cube( SHOW ), 500 );
        setTimeout( () => this.transition.title( SHOW ), 1200 );
  
      }
  
    }
  
    complete( show ) {
  
      if ( show ) {
  
        this.transition.buttons( BUTTONS.Complete, BUTTONS.Playing );
  
        this.state = STATE.Complete;
        this.saved = false;
  
        this.controls.disable();
        this.timer.stop();
        this.storage.clearGame();
  
        this.bestTime = this.scores.addScore( this.timer.deltaTime );
  
        this.transition.zoom( STATE.Menu, 0 );
        this.transition.elevate( SHOW );
  
        setTimeout( () => {
  
          this.transition.complete( SHOW, this.bestTime );
          this.confetti.start();
  
        }, 1000 );
  
      } else {
  
        this.state = STATE.Stats;
        this.saved = false;
  
        this.transition.timer( HIDE );
        this.transition.complete( HIDE, this.bestTime );
        this.transition.cube( HIDE );
        this.timer.reset();
  
        setTimeout( () => {
  
          this.cube.reset();
          this.confetti.stop();
  
          this.transition.stats( SHOW );
          this.transition.elevate( 0 );
  
        }, 1000 );
  
        return false;
  
      }
  
    }
  
  }
  
  window.version = '0.99.2';
  window.game = new Game();