Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="grid"></div>

function forward() {
    tween.stop().to({
      value: 2000
    }, 3000).startFromCurrentValues();
  }

function animate(time) {
    tween.update(time)
    requestAnimationFrame(animate)
  }
  requestAnimationFrame(animate)
</script>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
$shamrock: #16dfaa;
@import url("https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap");

body {
  margin: 0;
  padding: 0;
}

#grid {
  width: 100vw;
  height: 100vh;
  background: $shamrock;
}

.k-hold {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 354px;
  height: 354px;
  margin-left: -177px;
  margin-top: -177px;
  cursor: pointer;
}

.k-black {
  display: block;
  width: 354px;
  height: 354px;
  position: absolute;
  top: 0;
  left: 0;
}

.k-enter {
  display: block;
  width: 354px;
  height: 354px;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #fff;
  font-size: 40px;
  text-transform: uppercase;
  font-family: "PT Sans Narrow", Impact, sans-serif;
  font-weight: 700;
}

.k-stroke {
  opacity: 1;
  stroke-linecap: round;
  stroke-linejoin: mitter;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.k-black__stroke {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: translateZ(100px) scaleX(-1);
  transform: translateZ(100px) scaleX(-1);
}

.k-black__stroke svg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

console.log("Event Fired")
const scene = new vg.Scene(
  {
    element: document.getElementById("grid"),
    light: new THREE.DirectionalLight(0x16dfaa, 0.2),
    lightPosition: {
      x: 0,
      y: 0,
      z: 0
    },
    cameraPosition: {
      x: 0,
      y: 10,
      z: 0
    }
  },
  false
); // false to OrbitControls

const tweenCameraY = new TWEEN.Tween(scene.camera.position)
  .to({ y: 500 }, 3000)
  .start();

// this constructs the cells in grid coordinate space
const grid = new vg.HexGrid({
  cellSize: 18 // size of individual cells
});

grid.generate({
  size: 36 // size of the board
});

const mouse = new vg.MouseCaster(scene.container, scene.camera);
const board = new vg.Board(grid);

// this will generate extruded hexagonal tiles
board.generateTilemap({
  tileScale: 0.945,
  material: new THREE.MeshPhongMaterial({
    color: 0x080808
  })
});

scene.add(board.group);
scene.focusOn(board.group);
mouse.signal.add(function (evt, tile) {
  if (evt === vg.MouseCaster.OVER) {
    let cell = board.grid.pixelToCell(mouse.position);
    if (cell) {
      (function (cell) {
        let cells = board.grid.getNeighbors(cell, false);
        cells.forEach((item, index) => {
          let t = board.getTileAtCell(item);
          let tween = new TWEEN.Tween(t.position)
            .easing(TWEEN.Easing.Quadratic.Out)
            .to({ y: [10, 0] }, 500 + index * 80)
            .start();
        });
      })(cell);
    }
  }
}, this);

function bumpCells(cell) {
  let cells = [];

let l = board.grid._directions.length;
  let f = Math.floor(Math.random() * l); // from
  let t = Math.floor(Math.random() * (l - 2)) + 3; // total

for (let i = 0; i < t; i++) {
    let c = new vg.Cell();

let j = i + f;
    if (j >= l) {
      j -= l;
    }

c.copy(cell);
    c.add(board.grid._directions[j]);
    let n = board.grid.cells[board.grid.cellToHash(c)] || null;
    if (n) {
      cells.push(n);
    }
  }

// add central cell
  cells.push(cell);

cells.forEach((item, index) => {
    let t = board.getTileAtCell(item);
    if (t) {
      let tween = new TWEEN.Tween(t.position)
        .easing(TWEEN.Easing.Quadratic.Out)
        .to({ y: [20, 0] }, 600 + index * 80)
        .start();
    }
  });
}

let _time = 0;

update();

function update(time) {
  if (time - _time > 2000) {
    for (let i = 0; i < 2; i++) {
      let cell = board.grid.getRandomCell();
      (function (cell) {
        bumpCells(cell);
      })(cell);
    }

_time = time;
  }

mouse.update();
  scene.render();
  TWEEN.update();
  requestAnimationFrame(update);
}

Frontend Forever App