uccser / dt-puzzle-journey Goto Github PK

This prevents the user being able to start the stages

Relates to #31

Sound files still be to supplied.

• Align the artwork with existing pieces.
• Add pieces of rope to scene.
• Animate water.

• Final scene needs to be brighter.
• Door should be on left side, and rectangular in shape.
• Animate smoke.

Provides short stage before end.

This task involves converting the audio to several formats for compatibility.

This is due to the morphing animation of the library not animating between these two points. Have a zero distance will prevent any jumping of paths on a morph.

This allows the user to control the audio independently to their system audio, so they can share it via Zoom etc easily.

Since this puzzle can be computational hard (and hard to facilitate through), at a hint mode that locks one of the correct rope pieces into each row. This will also unload all the existing pieces of rope on the bridge.

• Add more detail to river banks.
• Increase eel thickness.
• Add motion to eel path, to stick close to river bank.

When I reach the end of the instruction set and the arrow is in the correct place, the final animation doesn't play so the stage cannot be finished.

This would allow going backwards and forwards between levels, also possibly a way to transfer user data.

See list of required features at top of main.js.

It can be hard to see when new UI elements appear so use a three pronged approach:

1. Movement - Animate the element.
2. Colour - Change the colour of the element.
3. Sound - Play a sound effect.

When dragging an instruction into the box there is no background highlight/silhouette of the instruction in the box. However there is on the plains-1 and plains-3 stages.

Happens on all pages that have ants. 🐜

Relates to #31

• Add weka and their nests.

plains-1:

plains-2

plains-3:

Relates to #31

An odd bug has been encountered that I cannot figure out. If playing the full puzzle experience, when you get a plains level (any level), the arrow doesn't move in any direction, only rotates.

I'm able to replicate it 100% of the time when a user goes through stage river-crossing. I've edited the stage order to the following to test it.

Start on before-river -> river-crossing -> before-plains -> plains-1 = Bug occurs ✖️
Start on before-river -> river-crossing -> plains-1 = Bug occurs ✖️
Start on before-river -> plains-1 = No issues ✔️
Start on river-crossing -> before-plains -> plains-1 = Bug occurs ✖️
Start on river-crossing -> plains-1 = Bug occurs ✖️
Start on before-plains -> plains-1 = No issues ✔️
Start on plains-1 = No issues ✔️

This makes it appear that the issue is something to do with river-crossing but I cannot figure out what do the modular nature of each JS file.

Background info: The way the avatar moves is to translate two elements, one for X movement, one for Y (applying both on the same element along with rotation has undesired effects). The translation uses AnimeJS's relative values to move the element 100% more or less than it's current position. Since all grid cells are the same size this works great and is simple to understand (until the bug was encountered).

In an attempt to understand things better I worked directly on plains-1 to try applying the logic in another way. I had some success using AnimeJS's from-to values with using the current value as the from value, and then applying the existing relative value as the to value. However a greater bug then exposed itself.

Currently the avatar starts inside the starting cell of the grid, and is moved relative to this element. I changed the initial positioning of the avatar to always be in the top left cell which then allows me to translate to a specific x or y coord when multiplied by 100. Setting the initial value should work with the following code:

anime({
        target: document.getElementById('grid-avatar-container'),
        duration: 0,
        translateX: `${grid_data.starting_location.x_coord * 100}%`,
    });
    anime({
        target: document.getElementById('grid-avatar'),
        duration: 0,
        translateY: `${grid_data.starting_location.y_coord * 100}%`,
    });

However no translations are applied to the elements, the same issue occurring when the timeline is executed when instructions are run. However by setting these transforms inline with standard JS it applies correctly:

    var x_transform = `${grid_data.starting_location.x_coord * 100}%`;
    avatar_container.style.transform = `translateX(${x_transform})`;
    var y_transform = `${grid_data.starting_location.y_coord * 100}%`;
    avatar.style.transform = `translateY(${y_transform})`;

This also appears to allow AnimeJS to then manipulate these values during the timeline, in all situations unlike above.

Issue: Why is AnimeJS not working in this situation?

Relates to #31

For example, if loading half way through the interactive, the first half of SVGs do not need to be loaded

See: https://caniuse.com/#feat=mdn-api_svgelement_load_event

This allows specific content to be displayed for uLearn users.

• Add event logo.
• Add reminder about asking for help in breakout rooms.
• Show Kia Takatū ā-Matihiko pīkau suggestions

Audio file still to be supplied.

This should be implemented after #22 is completed.

This includes:

• Narrative text
• Instruction text
• Buttons

This is a minor change that makes the puzzle simpler, since the order is unimportant.

It is time to return home to my whanau after a long time away:

This implies "I" haven't left yet, but the next message says I've been on my way home for days. More appropriate options could be

After a long time away, I'll finally return home to my whanau.
Today I get back to my home and whanau after a long time away.

I have to cross the plains... ...a river... but first I have to ...

It's a three item list, but written as a two item list with more sentence strapped on the end:

I have to cross the plains, a river, but first I have to find the correct path through the forest.

It'd be better to say:

...and a river...

And maybe even a full stop, to get:

I have to cross the plains and a river, but first I have to find the correct path through the forest.
I'll have to cross the plains and a river. But first I have to find the correct path through the forest.

My whanau told me I will come across a secret message informing me which rimu tree to look for to find the river crossing.

This is a complicated sentence with a time limit on reading and no punctuation to help guide the reader. It'd be better split in two:

My whanau told me I will come across a secret message:
Which rimu tree to look for to find the river crossing.

For the same sentence on the screen immediately after, maybe reduce the complexity:

Could this be related to the secret message my whanau told me about?

This should start the stage without requiring confirmation.

You can also see the white behind the green.
The fern that represents the number 16 flips to white initially then will change to green after half a second.

Relates to #31

This should prevent delayed loading of branches on stage load.

Mostly a problem on plains-3 where the user might wait for the whole sequence to complete.

• Update artwork (see #20)
• Update text.
• Hide detail text in modals.
• Add sound if available.

This is a puzzle I was given

This is the result after running the instructions I put in:

Because the last instruction is a turn, it doesn't recognise that I've reached the end.

That was on Firefox. Conveniently my runthrough on Chrome game me the opportunity to experiment.
This solution will put the arrow at the end, but the last motion is a turn and the puzzle fails:

If I make the last motion a straight, the result is exactly the same but the puzzle is solved.

For example, the ants continually animate when the stage is not in view.

Early tests show this would work correctly, for example, the landscape-view svg would move down around -82vh.

Add guide for facilitators once release occurs.