JSFiddle - React, Tailwind, and code Playground

by Zevan

HTML

<canvas id="canvas" width="346px" height="371px"></canvas>
<script src="https://unpkg.com/@rive-app/[email protected]">
</script>
<script>
  window.message = "";

 

  window.addEventListener("message", function(event) {
    let data = event.data;

    if (data.length > 4 && data != "incorrectTrigger" && data !=
      "correctTrigger") {
      changeTextRun("correctTrigger", event.data);
    } else {
      changeState(event.data);
    }

  });

  var inputs;
  var correctTrigger;
  var incorrectTrigger;
  var percentageTrigger;
  let _riveStr = "Rive in Storyline!";
  let _riveProgressNum;
  let perc;

  const r = new rive.Rive({

    src: 'https://public.rive.app/hosted/204711/199476/6mmlU4V9q0WNY5iJoCIYyg.riv',
    canvas: document.getElementById('canvas'),
    autoplay: true,
    stateMachines: 'State Machine 1',
    
    fit: rive.Fit.CONTAIN,  
    alignment: rive.Alignment.CENTER,
    onLoad: (_) => {
      inputs = r.stateMachineInputs('State Machine 1');
      correctTrigger = inputs.find(i => i.name === 'Correct');
      incorrectTrigger = inputs.find(i => i.name === 'Incorrect');
      percentageTrigger = inputs.find(i => i.name === 'perc');

      inputs.forEach(i => {
        const inputName = i.name;
        const inputType = i.type;
        console.log("name: " + i.name + " type: " + i.type);
        switch (inputType) {
          case rive.StateMachineInputType.Trigger:
            i.fire();
            break;
          case rive.StateMachineInputType.Number:
            i.value = _riveProgressNum;
            break;
          case rive.StateMachineInputType.Boolean:
            i.value = true;
            break;
        }
      });

    },
    onStateChange: (_) => {
      r.setTextRunValue("dText", _riveStr);
    },


  });

   onresize = () => {

    const size = Math.min(innerWidth, innerHeight) - 20
    canvas.width = canvas.height = size
    console.log('reszie')
    r.resizeToCanvas(); 
  }
  onresize()



  function changeState(_state) {

   ...