Hello.

I want the compass to go crazy in a certain room. (Something is not quite right in that location.)

I want it to act as if the needle were just spinning around (slowly or quickly, either way).

I have thought of two ways to handle this:

• An animated GIF, which has a layer for each compass direction. (Each layer would be a screenshot of the compass pane, with only one direction available.) I would use JS to replace the content of the actual compass pane with this GIF while in the room.
• Use a setInterval() with an ASLEvent() in JS to call a function which makes the available exit invisible and makes the next exit on a list visible. (I'm thinking this one isn't a great plan. And I think I'd need to set the interval at 60 seconds, to keep from upsetting Quest. (I think 60 is the safe interval. I know I read that 1 second is not good.)

I'm leaning towards the GIF. None of the exits will actually be available, anyway. So, it seems like the second option would be overkill.

Anyone have any thoughts or suggestions?

How about using CSS animation to spin the compass round?

An excellent idea!

Randomize the exits...
When the player "goes North", they take a random exit instead...
Works best when "lost in a forest"...

That's a good one, too, DL.

I will be stealing that.

...but I was wanting to emulate a spinning needle, like on Predators when they figure out they're on a strange planet.

I ended up with this:

JS.addText ("<style>#compassTable table:first-child{-webkit-animation: spin 4s infinite linear;}@-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); }}@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }}@keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);}}}</style>")

Video(very short):

https://drive.google.com/open?id=1mM9pmyyDOKTuO84q1N4wGF0gO0GQb1SD

Now I've got to find out how to stop it! (Ha-ha!)

Probably something like: document.getElementById('compassTable').firstChild.style.-webkit-animation = '';. (This doesn't work, but I think it may be close. I will update this post when I get it working.)

EDIT

This stops it:

JS.addText ("<style>#compassTable  table:first-child{-webkit-animation: none;}</style>")

I missed this post. That's very cool.