Reviving old macro for Sugarcube?

---Using Twine 2 local/downloaded version, Sugarcube 2.2 (I think), Firefox 45.0.2,---

I am using Twine 2.0, Sugarcube 2.2 (I think), and Firefox 45.0.2

I am trying to use this old Twine 1 screen-shaking macro in Twine 2 with Sugarcube 2.2. I suspect the issue lies in how v2.0 defines things, and thus probably requires far more knowledge of Javascript that I have (next to none) to fix.

What's worse, when I copy/pasted the macro's javascript into the story's javascript section (don't pity me), it actually broke the Sugarcube Cyclinglink package, so that things such as <<timedinsert>> no longer worked until I removed the old code.

I suspect this macro was a little too obscure to get updated for the new versions of twine/sugarcube.

Any help in resuscitating this poor old macro would be much appreciated!

-Liyamu

(Original macro source: https://gist.github.com/dariusk/4651698)

Here's the screenShake Javascript:

function screenShake(time) {
  console.log(document);
  var el = document.getElementsByClassName('content');
  baz = el;
  console.log(baz[0]);
  el[0].className = el[0].className + ' shake';
  if (time > 0) {
    setTimeout(function () {
      el[0].className = 'content';
    }, time);
  }
};

// the screenShake macro. Adapted from Emmanuel Turner's article on creating Twine macros. http://eturnerx.blogspot.com/2012/12/how-to-create-custom-macros-in-twine.html
try {
  version.extensions['screenShakeMacro'] = {
    major: 1,
    minor: 0,
    revision: 0
  };
  macros['screenShake'] = {
    handler: function (place, macroName, params, parser) {
      var time = parseInt(params[0]);
      if (typeof time !== 'number') {
        time = 1000;
      }
      
      // we're overriding the fade function. It behaves as usual except it runs screenShake() if time >= 0.
      fade = function (el, options) {
        var current;
        var proxy = el.cloneNode(true);
        var direction = (options.fade == 'in') ? 1 : -1;

        el.parentNode.replaceChild(proxy, el);

        if (options.fade == 'in') {
          current = 0;
          proxy.style.visibility = 'visible';
        } else current = 1;

        setOpacity(proxy, current);
        var interval = window.setInterval(tick, 25);

        function tick() {
          current += 0.05 * direction;

          setOpacity(proxy, Math.easeInOut(current));

          if (((direction == 1) && (current >= 1)) || ((direction == -1) && (current <= 0))) {
            console.log('swapping fader proxy out');
            el.style.visibility = (options.fade == 'in') ? 'visible' : 'hidden';
            proxy.parentNode.replaceChild(el, proxy);
            delete proxy;
            window.clearInterval(interval);

            if (options.onComplete) options.onComplete();

            if (time >= 0) {
              screenShake(time);
              time = -1;
            }

          }
        };

        function setOpacity(el, opacity) {
          var percent = Math.floor(opacity * 100);

          // IE
          el.style.zoom = 1;
          el.style.filter = 'alpha(opacity=' + percent + ')';

          // CSS 3
          el.style.opacity = opacity;
        };
      };
    },
    init: function () {},
  };
} catch (e) {
  throwError(place, "screenShake Setup Error: " + e.message);
}

And here's the screenShake default CSS:

@keyframes shakeit {
  0% { transform: translate(2px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(0px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(2px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(2px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@-o-keyframes shakeit {
	0% { -o-transform: translate(2px, 1px) rotate(0deg); }
	10% { -o-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -o-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -o-transform: translate(0px, 2px) rotate(0deg); }
	40% { -o-transform: translate(1px, -1px) rotate(1deg); }
	50% { -o-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -o-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -o-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -o-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -o-transform: translate(2px, 2px) rotate(0deg); }
	100% { -o-transform: translate(1px, -2px) rotate(-1deg); }
}

@-webkit-keyframes shakeit {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

@-moz-keyframes shakeit {
	0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
	10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
	40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
	50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
	100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}

.shake {
	-webkit-animation-name: shakeit;
	-webkit-animation-duration: 0.8s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
  -moz-animation-name: shakeit;
	-moz-animation-duration: 0.8s;
	-moz-transform-origin:50% 50%;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
  -o-animation-name: shakeit;
	-o-animation-duration: 0.8s;
	-o-transform-origin:50% 50%;
	-o-animation-iteration-count: infinite;
	-o-animation-timing-function: linear;
  animation-name: shakeit;
	animation-duration: 0.8s;
	transform-origin:50% 50%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.shake{
	display:inline-block
}