Game to API

game_to_api.js

// import html2canvas from 'html2canvas';

// on button click
document.querySelector("#btnShare").addEventListener("click", (e) => { 
  
  // convert #preamble to canvas
  html2canvas(document.querySelector("#preamble"), {
    useCORS: true, 
    allowTaint: true
  }).then(canvas => {
    // get url
    const imgData = canvas.toDataURL('image/png');

    // send to api
    console.log('sending to api ...');
    const gameId = 'ABCD';
    const now = new Date().toISOString();
    console.log(now);

    // preamble image
    fetch(`https://frozen-forest-36963.herokuapp.com/save-image?gameId=${gameId}&ts=${now}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'text/plain'
      },
      body: imgData
    }).then(function(res) {
      res.text().then(function (text) {
        console.log(text)
      })
    }).catch(function(err) {
      console.log(err);
    });

    // game params
    // sample below:
    const analyticsObject = {
      scenario: 3, 
      choices: [1, 4, 5], 
      preambleStats: [1, 3, 4, 5, 7, 3, 2]
    }

    fetch(`https://frozen-forest-36963.herokuapp.com/save-parameters?gameId=${gameId}&ts=${now}`, {
      method: 'POST', 
      mode: 'no-cors', 
      headers: {
        'Content-Type': 'application/json'
      }, 
      body: JSON.stringify(analyticsObject)
    }).then(function(res) {
      console.log(res.status)
    }).catch(function(err) {
      console.log(err)
    })
  });
});