move from uppstart to workbox

package.json

@@ -3,13 +3,23 @@
   "version": "1.0.0",
   "description": "",
   "main": "",
-  "dependencies": {},
+  "dependencies": {
+    "three": "^0.128.0"
+  },
   "devDependencies": {
-    "rollup-plugin-babel-minify": "^5.0.0"
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "autoprefixer": "^10.2.5",
+    "postcss": "^8.2.14",
+    "rollup": "^2.47.0",
+    "rollup-plugin-scss": "^3.0.0-rc1",
+    "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.32.12",
+    "vercel": "^20.1.4",
+    "workbox-cli": "^6.1.5"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c rollup.config.build.js && cp upup.min.js export/ && cp upup.sw.min.js export/ && cp index.html export/ && cp -R assets export/"
+    "build": "rollup -c rollup.config.build.js && mkdir -p export && cp -r static/* export/ && workbox generateSW"
   },
   "repository": {
     "type": "git",

rollup.config.build.js

@@ -1,14 +1,23 @@
-import minify from 'rollup-plugin-babel-minify';
+import { terser } from 'rollup-plugin-terser';
+import resolve from "@rollup/plugin-node-resolve"
+import scss from 'rollup-plugin-scss'
+import postcss from "postcss";
+import autoprefixer from "autoprefixer";
 
 export default {
   input: './src/js/Game.js',
   plugins: [
-    minify({ comments: false, sourceMap: false }),
+    resolve(),
+    scss({sourceMap: true, sass: require('sass'),
+      processor: css =>
+        postcss([autoprefixer()]),
+    }),
+    terser(),
   ],
   output: {
       format: 'iife',
-      file: './assets/js/cube.js',
+      file: './export/cube.js',
       indent: '\t',
-      sourceMap: false,
+      sourcemap: true,
   },
 };

rollup.config.dev.js

@@ -3,7 +3,7 @@ export default {
   plugins: [],
   output: {
       format: 'iife',
-      file: './assets/js/cube.js',
+      file: './static/assets/js/cube.js',
       indent: '\t',
       sourceMap: false,
   },

src/js/Confetti.js

@@ -1,3 +1,5 @@
+import {PlaneGeometry, MeshLambertMaterial, DoubleSide, Object3D, Vector3, MathUtils, Mesh, Color} from 'three';
+
 import { Animation } from './Animation.js';
 
 class Confetti {
@@ -14,8 +16,8 @@ class Confetti {
       colors: [ 0x41aac8, 0x82ca38, 0xffef48, 0xef3923, 0xff8c0a ],
     }
 
-    this.geometry = new THREE.PlaneGeometry( 1, 1 );
-    this.material = new THREE.MeshLambertMaterial( { side: THREE.DoubleSide } );
+    this.geometry = new PlaneGeometry( 1, 1 );
+    this.material = new MeshLambertMaterial( { side: DoubleSide } );
 
     this.holders = [
       new ConfettiStage( this.game, this, 1, 20 ),
@@ -85,10 +87,10 @@ class ConfettiStage extends Animation {
     this.count = count;
     this.particles = [];
 
-    this.holder = new THREE.Object3D();
+    this.holder = new Object3D();
     this.holder.rotation.copy( this.game.world.camera.rotation );
 
-    this.object = new THREE.Object3D();
+    this.object = new Object3D();
     this.holder.add( this.object );
 
     this.resizeViewport = this.resizeViewport.bind( this );
@@ -150,7 +152,7 @@ class ConfettiStage extends Animation {
 
   resizeViewport() {
 
-    const fovRad = this.game.world.camera.fov * THREE.Math.DEG2RAD;
+    const fovRad = this.game.world.camera.fov * MathUtils.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;
@@ -174,13 +176,13 @@ class Particle {
     this.confetti = confetti;
     this.options = this.confetti.options;
 
-    this.velocity = new THREE.Vector3();
-    this.force = new THREE.Vector3();
+    this.velocity = new Vector3();
+    this.force = new Vector3();
 
-    this.mesh = new THREE.Mesh( this.confetti.geometry, this.confetti.material.clone() );
+    this.mesh = new 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.size = MathUtils.randFloat( this.options.size.min, this.options.size.max );
     this.mesh.scale.set( this.size, this.size, this.size );
 
     return this;
@@ -191,16 +193,16 @@ class Particle {
 
     this.completed = false;
 
-    this.color = new THREE.Color( this.options.colors[ Math.floor( Math.random() * this.options.colors.length ) ] );
+    this.color = new 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.speed = MathUtils.randFloat( this.options.speed.min, this.options.speed.max ) * - 1;
+    this.mesh.position.x = MathUtils.randFloat( - this.confetti.width / 2, this.confetti.width / 2 );
     this.mesh.position.y = ( randomHeight )
-      ? THREE.Math.randFloat( this.size, this.confetti.height + this.size )
+      ? MathUtils.randFloat( this.size, this.confetti.height + this.size )
       : this.size;
 
-    this.revolutionSpeed = THREE.Math.randFloat( this.options.revolution.min, this.options.revolution.max );
+    this.revolutionSpeed = MathUtils.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 );
 

src/js/Controls.js

@@ -1,3 +1,5 @@
+import {Raycaster, MeshBasicMaterial, Object3D, Mesh, PlaneBufferGeometry, BoxBufferGeometry, Vector3, Matrix4, Vector2} from 'three';
+
 import { Tween, Easing } from './Tween.js';
 import { Draggable } from './Draggable.js';
 
@@ -17,24 +19,24 @@ class Controls {
     this.flipEasings = [ Easing.Power.Out( 3 ), Easing.Sine.Out(), Easing.Back.Out( 1.5 ) ];
     this.flipSpeeds = [ 125, 200, 300 ];
 
-    this.raycaster = new THREE.Raycaster();
+    this.raycaster = new Raycaster();
 
-    const helperMaterial = new THREE.MeshBasicMaterial( { depthWrite: false, transparent: true, opacity: 0, color: 0x0033ff } );
+    const helperMaterial = new MeshBasicMaterial( { depthWrite: false, transparent: true, opacity: 0, color: 0x0033ff } );
 
-    this.group = new THREE.Object3D();
+    this.group = new Object3D();
     this.group.name = 'controls';
     this.game.cube.object.add( this.group );
 
-    this.helper = new THREE.Mesh(
-      new THREE.PlaneBufferGeometry( 200, 200 ),
+    this.helper = new Mesh(
+      new 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 ),
+    this.edges = new Mesh(
+      new BoxBufferGeometry( 1, 1, 1 ),
       helperMaterial.clone(),
     );
 
@@ -103,7 +105,7 @@ class Controls {
 
       } else {
 
-        this.dragNormal = new THREE.Vector3( 0, 0, 1 );
+        this.dragNormal = new Vector3( 0, 0, 1 );
         this.flipType = 'cube';
 
         this.helper.position.set( 0, 0, 0 );
@@ -116,7 +118,7 @@ class Controls {
       if ( planeIntersect === false ) return;
 
       this.dragCurrent = this.helper.worldToLocal( planeIntersect.point );
-      this.dragTotal = new THREE.Vector3();
+      this.dragTotal = new Vector3();
       this.state = ( this.state === STILL ) ? PREPARING : this.state;
 
     };
@@ -142,7 +144,7 @@ class Controls {
 
         if ( this.flipType === 'layer' ) {
 
-          const direction = new THREE.Vector3();
+          const direction = new Vector3();
           direction[ this.dragDirection ] = 1;
 
           const worldDirection = this.helper.localToWorld( direction ).sub( this.helper.position );
@@ -158,7 +160,7 @@ class Controls {
             ? ( ( this.dragDirection == 'y' && position.current.x > this.game.world.width / 2 ) ? 'z' : 'x' )
             : 'y';
 
-          this.flipAxis = new THREE.Vector3();
+          this.flipAxis = new Vector3();
           this.flipAxis[ axis ] = 1 * ( ( axis == 'x' ) ? - 1 : 1 );
 
         }
@@ -345,9 +347,10 @@ class Controls {
 
       const piece = this.game.cube.pieces[ index ];
 
-      piece.applyMatrix( from.matrixWorld );
+      piece.applyMatrix4( from.matrixWorld );
       from.remove( piece );
-      piece.applyMatrix( new THREE.Matrix4().getInverse( to.matrixWorld ) );
+      piece.applyMatrix4( new Matrix4().copy( to.matrixWorld ).invert())
+      // piece.applyMatrix4( new Matrix4().getInverse( to.matrixWorld ) );
       to.add( piece );
 
     } );
@@ -395,7 +398,7 @@ class Controls {
 
       const layer = this.getLayer( move.position );
 
-      this.flipAxis = new THREE.Vector3();
+      this.flipAxis = new Vector3();
       this.flipAxis[ move.axis ] = 1;
       this.state = ROTATING;
 
@@ -410,7 +413,7 @@ class Controls {
 
     } else if ( type === 'CUBE' ) {
 
-      this.flipAxis = new THREE.Vector3();
+      this.flipAxis = new Vector3();
       this.flipAxis[ move.axis ] = 1;
       this.state = ROTATING;
 
@@ -437,7 +440,7 @@ class Controls {
     const move = converted[ 0 ];
     const layer = this.getLayer( move.position );
 
-    this.flipAxis = new THREE.Vector3();
+    this.flipAxis = new Vector3();
     this.flipAxis[ move.axis ] = 1;
 
     this.selectLayer( layer );
@@ -485,15 +488,16 @@ class Controls {
 
   detach( child, parent ) {
 
-    child.applyMatrix( parent.matrixWorld );
+    child.applyMatrix4( parent.matrixWorld );
     parent.remove( child );
     this.game.world.scene.add( child );
 
   }
 
   attach( child, parent ) {
 
-    child.applyMatrix( new THREE.Matrix4().getInverse( parent.matrixWorld ) );
+    child.applyMatrix4( new Matrix4().copy( parent.matrixWorld ).invert())
+    // child.applyMatrix4( new Matrix4().getInverse( parent.matrixWorld ) );
     this.game.world.scene.remove( child );
     parent.add( child );
 
@@ -512,7 +516,7 @@ class Controls {
   getMomentum() {
 
     const points = this.momentum.length;
-    const momentum = new THREE.Vector2();
+    const momentum = new Vector2();
 
     this.addMomentumPoint( false );
 

src/js/Cube.js

@@ -1,3 +1,5 @@
+import {Object3D, Vector3, Mesh, MeshLambertMaterial} from 'three';
+
 import { RoundedBoxGeometry } from './plugins/RoundedBoxGeometry.js';
 import { RoundedPlaneGeometry } from './plugins/RoundedPlaneGeometry.js';
 
@@ -15,9 +17,9 @@ class Cube {
 			edgeDepth: 0.01,
 		};
 
-		this.holder = new THREE.Object3D();
-		this.object = new THREE.Object3D();
-		this.animator = new THREE.Object3D();
+		this.holder = new Object3D();
+		this.object = new Object3D();
+		this.animator = new Object3D();
 
 		this.holder.add( this.animator );
 		this.animator.add( this.object );
@@ -105,7 +107,7 @@ class Cube {
 			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 position = new Vector3(first + x, first + y, first + z);
 		  		let edges = [];
 
 		  		if ( x == 0 ) edges.push(0);
@@ -131,9 +133,9 @@ class Cube {
 
 		const pieceSize = 1 / 3;
 
-		const mainMaterial = new THREE.MeshLambertMaterial();
+		const mainMaterial = new MeshLambertMaterial();
 
-		const pieceMesh = new THREE.Mesh(
+		const pieceMesh = new Mesh(
 			new RoundedBoxGeometry( pieceSize, this.geometry.pieceCornerRadius, 3 ),
 			mainMaterial.clone()
 		);
@@ -146,7 +148,7 @@ class Cube {
 
 		this.positions.forEach( ( position, index ) => {
 
-			const piece = new THREE.Object3D();
+			const piece = new Object3D();
 			const pieceCube = pieceMesh.clone();
 			const pieceEdges = [];
 
@@ -157,7 +159,7 @@ class Cube {
 
 			position.edges.forEach( position => {
 
-				const edge = new THREE.Mesh( edgeGeometry, mainMaterial.clone() );
+				const edge = new Mesh( edgeGeometry, mainMaterial.clone() );
 				const name = [ 'L', 'R', 'D', 'U', 'B', 'F' ][ position ];
 				const distance = pieceSize / 2;
 

src/js/Draggable.js

@@ -1,3 +1,5 @@
+import {Vector2} from 'three';
+
 window.addEventListener( 'touchmove', () => {} );
 document.addEventListener( 'touchmove',  event => { event.preventDefault(); }, { passive: false } );
 
@@ -6,11 +8,11 @@ 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(),
+      current: new Vector2(),
+      start: new Vector2(),
+      delta: new Vector2(),
+      old: new Vector2(),
+      drag: new Vector2(),
     };
 
     this.options = Object.assign( {
@@ -41,8 +43,8 @@ class Draggable {
 
         this.onDragStart( this.position );
 
-        window.addEventListener( ( this.touch ) ? 'touchmove' : 'mousemove', this.drag.move, false );
-        window.addEventListener( ( this.touch ) ? 'touchend' : 'mouseup', this.drag.end, false );
+        window.addEventListener( ( this.touch ) ? 'touchmove' : 'mousemove', this.drag.move, {capture: false, passive: true} );
+        window.addEventListener( ( this.touch ) ? 'touchend' : 'mouseup', this.drag.end, {capture: false, passive: true} );
 
       },
 
@@ -92,17 +94,17 @@ class Draggable {
 
   enable() {
 
-    this.element.addEventListener( 'touchstart', this.drag.start, false );
-    this.element.addEventListener( 'mousedown', this.drag.start, false );
+    this.element.addEventListener( 'touchstart', this.drag.start, {capture: false, passive: true} );
+    this.element.addEventListener( 'mousedown', this.drag.start, {capture: false, passive: true} );
 
     return this;
 
   }
 
   disable() {
 
-    this.element.removeEventListener( 'touchstart', this.drag.start, false );
-    this.element.removeEventListener( 'mousedown', this.drag.start, false );
+    this.element.removeEventListener( 'touchstart', this.drag.start, {capture: false, passive: true} );
+    this.element.removeEventListener( 'mousedown', this.drag.start, {capture: false, passive: true} );
 
     return this;