Session 13 -- Updated

Here's the code from Session 13 - plus my attempt to complete the exercise.

Exercise#

When the OnLoad handler executes at application start-up, we can retrieve that array object (as a string) and use the parse method of the JSON object to 'reconstitute' it. I.e. to turn it back into a proper array object (this is only a temporary object, we do not use it to do the actual animation).

Your code in the OnLoad function needs to iterate through that array and re-populate the Objs array using each data-packet in the temporary array. This needs a loop that will iterate through the temporary array.

My issues#

In this section of the code below, I have re-made the Objs array with the SavedState information (or at least when I do console.log(Objs) everything seems correct).

My issue here is I don't know what's next? I have been wondering if I should be able to pass it to the CreateObject function, but I don't understand how, or I might be barking up the wrong tree entirely.

let SavedState = localStorage.getItem('AnimationState');
if (SavedState) {
  SavedState = JSON.parse(SavedState);
  let idx = 0;
  Objs = [];
  let length = SavedState.length;
  while (idx < length) {
    Objs.push(SavedState[idx]);
    console.log(Objs);
    idx++;
  }
  // I've added the SavedState objects to an array called Objs
  // Now i need to reconstruct the objects onto the page. Can i do this with CreateObject or do I need a new function that parses the Obj array?
}

The code in full#

function CreateObject(XVec, YVec, Red, Green, Blue) {
  let XPos = 0;
  let YPos = 0;
  let Ref = document.createElement('div');
  Ref.style.backgroundColor = 'rgb(' + Red + ',' + Green + ',' + Blue + ')';
  document.body.appendChild(Ref);
  let ObjectInterface = {
    UpdatePosition: function () {
      if (XPos < 0 || XPos > ViewportWidth) {
        XVec *= -1;
      }
      if (YPos < 0 || YPos > ViewportHeight) {
        YVec *= -1;
      }
      XPos += XVec;
      YPos += YVec;
      Ref.style.left = XPos + 'px';
      Ref.style.top = YPos + 'px';
    },
    GetProperties: function () {
      return {
        XPos: XPos,
        YPos: YPos,
        XVec: XVec,
        YVec: YVec,
        Red: Red,
        Green: Green,
        Blue: Blue,
      };
    },
  };
  return ObjectInterface;
}
//----------------------------------
let ViewportWidth = 250;
let ViewportHeight = 250;
//----------------------------------
let Objs = [];
function onLoad() {
  function UpdateAnimation() {
    let Idx = 0;
    let Len = Objs.length;
    while (Idx < Len) {
      Objs[Idx++].UpdatePosition();
    }
  }
  //--------------------------------
  let Timer = null;
  let SavedState = localStorage.getItem('AnimationState');
  if (SavedState) {
    SavedState = JSON.parse(SavedState);
    let idx = 0;
    Objs = [];
    let length = SavedState.length;
    while (idx < length) {
      Objs.push(SavedState[idx]);
      console.log(Objs);
      idx++;
    }
    // I've added the SavedState objects to an array called Objs
    // Now i need to reconstruct the objects onto the page. Can i do this with CreateObject or do I need a new function that parses the Obj array?
  }
  //--------------------------------
  function makeRandomNum(min, max) {
    return Math.random() * (max - min) + min;
  }
  //--------------------------------
  document.getElementById('Btn_Start').onclick = function () {
    Timer = setInterval(UpdateAnimation, 20);
  };
  document.getElementById('Btn_Stop').onclick = function () {
    clearInterval(Timer);
  };
  document.getElementById('Btn_Add').onclick = function () {
    Objs.push(
      CreateObject(
        makeRandomNum(0, 8),
        makeRandomNum(0, 8),
        makeRandomNum(1, 255),
        makeRandomNum(1, 255),
        makeRandomNum(1, 255)
      )
    );
  };
  window.addEventListener('beforeunload', function () {
    let idx = 0;
    let length = Objs.length;
    let ObjectProperties = [];
    try {
      while (idx < length) {
        ObjectProperties.push(Objs[idx].GetProperties());
        idx++;
      }
      let StateStr = JSON.stringify(ObjectProperties);
      localStorage.setItem('AnimationState', StateStr);
    } catch (ExceptionObject) {
      localStorage.setItem('ShutdownException', ExceptionObject.message);
    }
  });
}
//--------------------------------

The html#

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Session Code - Part 2</title>
    <script src="animation.js"></script>
    <style>
      div {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        position: absolute;
        left: 0;
        top: 0;
      }
      #Obj_0 {
        background-color: #ff0000;
      }
      #Obj_1 {
        background-color: #00ff00;
      }
      #Obj_2 {
        background-color: #0000ff;
      }
      #Enclosure {
        width: 550px;
        height: 250px;
      }
      button {
        position: absolute;
        top: 300px;
      }
      #Btn_Start {
        left: 90px;
      }
      #Btn_Stop {
        left: 135px;
      }
    </style>
  </head>
  <body onload="onLoad()">
    <button id="Btn_Add">Add Object</button>
    <button id="Btn_Start">Start</button>
    <button id="Btn_Stop">Stop</button>
  </body>
</html>