uccser / dt-puzzle-journey Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://uccser.github.io/dt-puzzle-journey/
License: MIT License
Home Page: https://uccser.github.io/dt-puzzle-journey/
License: MIT License
This prevents the user being able to start the stages
Relates to #31
Sound files still be to supplied.
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.
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:
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
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
This allows specific content to be displayed for uLearn users.
Audio file still to be supplied.
This should be implemented after #22 is completed.
This includes:
This is a minor change that makes the puzzle simpler, since the order is unimportant.
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.
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.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.