Free Hype Templates 🏗

Template Gallery
104

Hi @Photics Michael.
That was a very comprehensive tutorial of you, giving a lot of useful building blocks for added functionalities. Since I am fairly new to JS, I would like to ask how to add/append a function
that would trigger a named timeline (e.g. hypeDocument.continueTimelineNamed from Hype's JS API) on game completion to your flipping-a-card game's "web10"-function?

function
function686×1029 88.8 KB

Having troubles to come up with a viable solution due to the lack of JS-literacy. Any advice much appreciated.

1 Like
105

The project like this one was intentionally left incomplete, similar to the Jigsaw puzzle. It's a problem that people can figure out to learn JavaScript.

…or bring the community closer together when someone else solves the problem, like here…

Try solving the problem. That's a great way to learn. Here are some clues to get you started…

  • Think of the logic — How would you define a game over?
  • Hype has an API — Looks like you have a little head start, as you mentioned the… hypeDocument.continueTimelineNamed('timelineName', hypeDocument.kDirectionForward, false) API. You know what you want to run.
  • Understand the events — Which JavaScript event causes a card to flip?
  • Building — Is there an event that could be used to “Check” the state of the game?
  • Does the Check happen instantly — Do you need a delay before checking? If so, how is that done with JavaScript efficiently?

If you get stuck, then post here where you're having trouble.

1 Like
106

Hi Michael.Thank you for giving me some clues and directions. It's for sure an engaging method for learning those cryptic interrelationships and logics of js-functions.

107

It's not so cryptic. At least it's in English. Look…

document.getElementById("Group").addEventListener("click", click)

First word… document …that is a JavaScript thing, but basically it's saying “this web page”.

Then it says… getElementById …camelcase, so it's separate words, but it means what it says. Look for the HTML element with the ID of “Group”. I put all the cards in an element called “group”. It's a Hype group, which is essentially a "div" tag. Basically, only work with this group, not other stuff on the page.

The main part is this… addEventListener …again, that's JavaScript thing, but it means what it says. When a specific "Event" happens inside this "Group" element (in this case… click …is the event) then run the "click" function.

I use a lot of the same words… I called my Hype Group element "group" and I called my function for clicks… "Click".

So, if you can understand how click events work… how can that be expanded to end the game? :thinking:

1 Like
109

At least you're trying, so here's another hint.

Look at line 53. :eyes:

It says…

console.log("Match! 🙂");

It's not about counting clicks. Because if two different cards are clicked, that doesn't bring you closer to winning the game. You need to count matches.

So, by carefully reading the code, you can see where that happens. I added little messages for that. Are you using the developer tools in your web browser? You can see when those messages are being displayed…

console
console1144×1308 52 KB

If you're not using the developer tools / inspector, that's probably why you're struggling with JavaScript.

So, what's next?

Well…

  • You'd need to know how many matches were found.
  • You'd need to know many matches are needed to win the game.
  • You'd need a way to check if the cards matched is equal to the cards needed to win the game. (Win condition)
  • Once the win condition has been met, you'd use the Hype JavaScript API to load a new scene or play a timeline.
  • You'd also need to know how to delay running JavaScript code, to create a more game-like experience. (You don't want to end the game while the cards are still flipping.)

Believe in yourself! This is mostly in English. Try to see the logic and take the time to translate what is being said in JavaScript.

4 Likes
110

Well, it only took over two years, but I finally added another video to the Tumult Hype series… https://www.youtube.com/watch?v=BrAnhM1HLtg&list=PLORkPhKfIRglpDfk0PcLCnC4a1SiRDbaX

2 Likes
111

Just a side note… I've been trying to build a Jigsaw puzzle without Hype. Whew, the JavaScript part is certainly more difficult. :smile:

112

With the “Looking” template, there's a problem…

— Free Template Tuesday #2 – Tumult Hype “Looking” – Photics.com

There's a graphical glitch with the newer version of Safari. I fixed it with some CSS in the main HTML…

      #lefty,
      #righty {
           will-change: transform;
      }

I'm not sure if this should be considered a Hype issue. I'm thinking perhaps, since the SVG elements were created in Hype and it's using Hype's JavaScript API. Although, I had the same problem with the widget version in the sidebar of Photics.com.

@jonathan — I don't want to leave the problem live on my website. But if you wanted to test this out, you can just remove the styles in the Hype Template and test it from there.

1 Like
113

Thanks. I'm not sure specifically why your workaround works other than it may put the browser in some sort of different rendering mode. I need to investigate further as it makes me wonder if this method could solve some other rendering problems (and what the tradeoffs would be). I also found checking "position with left/top CSS" will workaround the bug.

It is definitely a Safari/WebKit bug though. I was able to isolate it by a lot and filed it here:

Thank you very much for noticing and reporting this issue!

1 Like
114

What?! They fixed it? So quickly? :astonished_face:

That's sus! :thinking:

What are you up to Mr. Deutsch?! :grinning_face_with_smiling_eyes:

1 Like
115

I don't think there's rhyme or reason to it - sometimes they never look at a bug, other times they look but don't fix, and sometimes like this they look and fix immediately!

I'll tell that what I won't be up to is making a workaround for it, thankfully :smile:.

116

The “filters” template was updated because the reset button wasn't working.

@jonathan — maybe the units should be consistent? Some use percentages (Sepia & Brightness) while others use 0-1 (Saturation / Contrast) to represent 0% - 100%.

filter-effects
filter-effects516×496 9.38 KB

1 Like
117

Huh, good call. I am pretty sure there was some reason why it was done this way... the filter effects when they came out were wildly inconsistent between browsers and still in flux a bit. But I'm sure that reason no longer would even apply and these should definitely be consistent at the UI level one way or another.

1 Like