---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
}