JSFiddle - React, Tailwind, and code Playground

by Pratik Galoria

HTML

<div class={style.falling}
             oncreate={(e) => {
               Example.ragdoll(e, 'Result');
             }}/>

CSS

.falling {
  height: 700px;
  margin: 0;
  order: 1;
  position: absolute;
  width: 100%;
  z-index: 1;

  @include bp-narrow {
    height: 400px;
    width: 400px;
  }

  @include bp-wide {
    order: 2;
  }

  > canvas {
    height: 100%;
    width: 100%;
  }
}

JavaScript

import Matter from 'matter-js';

const Example = Example || {};

Example.ragdoll = function(el, currentStep) {
  const screenWidth = el.offsetWidth,
    screenHeight = el.offsetHeight;

  const Engine = Matter.Engine,
    Events = Matter.Events,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Body = Matter.Body,
    Common = Matter.Common,
    Composite = Matter.Composite,
    World = Matter.World,
    Bodies = Matter.Bodies;

  // create engine
  const engine = Engine.create(),
    world = engine.world;

  // create renderer
  const render = Render.create({
    element: el,
    engine: engine,
    options: {
      width: screenWidth,
      height: screenHeight,
      background: 'transparent',
      wireframes: false,
    },
  });

  Render.run(render);

  // create runner
  const runner = Runner.create();
  Runner.run(runner, engine);

  Math.radians = function(degrees) {
    return degrees * Math.PI / 180;
  };

  //const repos = window.innerWidth > 1024;
  const centerX = window.innerWidth / 2;

  const reposition = {
    pushX: centerX,
    pushY: 0,
    scaled: null,
    peoplePos: {
      x1: null,
      x2: null,
    },
  };

  // create left & right slopes
  const leftSlopeContiner = Composite.create();
  const rightSlopeContiner = Composite.create();

  if (currentStep === 'Result') {
    const leftSlope1 = Bodies.rectangle(0, 40, 15, 150, {isStatic: true, render: {fillStyle: 'rgba(200, 200, 200)'}}),
      leftSlope2 = Bodies.rectangle(-5, 123, 15, 120, {isStatic: true, render: {fillStyle: 'rgba(200, 200, 200)'}}),
      leftSlope3 = Bodies.rectangle(0, 310, 15, 280, {isStatic: true, render: {fillStyle: 'rgba(200, 200, 200)'}});

    Body.rotate(leftSlope2, Math.radians(70), {x: 0, y: 180});

    Composite.add(leftSlopeContiner, [leftSlope1, leftSlope2, leftSlope3]);

    const rightSlope1 = Bodies.rectangle(0, 130, 15, 330, {isStatic: true, render: {fillStyle: 'rgba(200, 200, 200)'}}),
      rightSlope2 = Bodies.rectangle(3, 302, 15, 120,...