This is a cache, so it is a disk space vs. performance issue. If thumbnails are not included then scenes need to be fully loaded and rendered when the document opens. This can potentially take a lot of time, CPU power and RAM, so we favor maintaining a cache. You're welcome to delete the thumbnails if you do not want to incur the costs of disk or transfer.
That's too bad. This seems like it could be a user preference, or even one of those cool terminal commands.
1 Like
Maybe try an Automator Folder Action that runs a script to rm *.hype/Thumbnails/* or something like that.
Hah, those two little characters look so innocent and they are so long as you know how to use them.
If you are not familiar with its usage and there is a small typo, it could lead to very unexpected Permanent Deletions. (even for the familiar )
Personally I would use something like this which moves them to the Trash bin.
1, find Finder items
- set where to look
-set kind is other and to Hype Document Template
2, Get folder contents
3, Applescript
- will filter and move to trash.
on run {input, parameters}
repeat with i from 1 to the number of input
set this_item to (item i of input)
set this_info to info for this_item
if name of this_info is "Thumbnails" then
tell application "Finder" to delete this_item (* moves to trash *)
end if
end repeat
end run
2 Likes
Just a heads up! I didn't forget about the Tumult Hype series of videos on Photics.TV. I'm planning to launch the “Captials” video on Veterans Day, since that template has a big American flag. 
UPDATE: The video is scheduled to launch on 2021-11-11T13:00:00Z and here's the link…
The “Capitals” template was updated too.
- Uses Hype's customData API instead of “window” Global Variables
- Switched one stray innerHTML to innerText
- Changed hover style, as it was blurry in Safari when scaled
1 Like
The “Multilingual” video should be on Photics.TV soon. In preparing for the video, I updated the code.
3 Likes
Recently I got a comment on my YouTube channel which suggests that I've been making too many video game videos. 
So…
Are you interested in another Photics.TV video about Hype?
- Yes, I would watch that!
- Nah, I already know everything about Hype.
0
voters
2 Likes
Unanimous, huh? Well, it looks like I should make a new Hype video.
I also got a new comment on one of the previous videos that asks a good question. The answer is best delivered as a new Hype Template.
@jonathan — If you get around to updating Hype again… 
…here's something that should be really easy to add that would make Hype more useful in creating card games…
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
You might even be able to drop the “webkit” prefix eventually too. The next major version of Hype should drop support for Internet Explorer 6-9. Therefore, the browser support is excellent…
Basically, what that does is hide elements when they're flipped upside-down… such as with Y rotation…
More info here…
That CSS style is perfect for cards games, as it can be used to create a nice card flipping technique. That's a big part of what the next template and video is about.
2 Likes
It so happens we have another bug relating to backface-visibility so that might bump this up. (but that said, I'd like to consider how this will add extra UI complexity for something not frequently changed, so it may be harder than just adding a checkbox).
Well, I found a bug. Apparently it doesn't work well with scaling. It will make enlarged elements look blurry.
Perhaps it could be an “Advanced” section that expands because I don't use “Rotation follows motion path” often either. I don't think you have an interface type like that already though.
Something like Apple's Numbers… Cell… Fill…
I'm not sure if that's possible to nest checkboxes within collapsible sections though. 
1 Like
This doesn't surprise me. There's a minefield of things that will change rendering modes (not to mention fighting Hype's own choices on trying to force render modes to avoid certain rendering bugs...). You can try toggling Use WebKit graphics acceleration/position with css left/top and see if that coaxes anything better.
1 Like
I already converted the Hype document size to 4K. Now it will likely scale down. If you're using 8K monitors to play a card game full screen… that's not supported.
…but I tested it out anyway. The scaling was still blurry.
Also, I just realized that "rotateY" is not supported with hypeDocument.setElementProperty().
It might depend on the "pipeline" for when/where it is being scaled. You're welcome to send a zip that repros the issue if you want which might help me figure out a workaround hopefully for such a feature (just note there's a good chance there's not a solution 
)
The design part of the project is working now. I solved the card flipping issue by switching to CSS positioning and I solved the blurry problem by making the scene size 4K and scaling down.
I'll send over some templates though, as that information might lead to improving Hype. I'm not sure where the blurriness is coming from.
3 Likes
Interesting! 
I didn't realize that so much time had passed since the poll was created.
Anyway, a new Hype template is online…
A video is on the way too. There will be a separate topic about that. Basically, it's part Whisk and part Hype, as a vanilla JavaScript of “Web #10” is available too.
One of the things I noticed while making the video was that Whisk would have been a lot better with tabs. Switching between HTML, CSS, and JavaScript didn't look as nice as Visual Studio Code. But, I think it can still work with just Whisk if the CSS and JavaScript is added to the main HTML file.
I still prefer Visual Studio Code for code formatting too… as it smites those pesky tabs and the way it shows invisibles is not so dark. (If there's a way to auto format code, I'm not seeing it. Also, I didn't see how to make invisibles lighter.)
Something like…
rgba(128,128,128,0.25)
But with previewing, Whisk was pretty sweet. It was nice to have a browser, with an inspector, and the HTML page all together. I could show what happened when classes were added or removed, which was nice way to show how classList.toggle works.
1 Like
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?
Having troubles to come up with a viable solution due to the lack of JS-literacy. Any advice much appreciated.
1 Like
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
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.
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?
1 Like
At least you're trying, so here's another hint.
Look at line 53. 
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…
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.
3 Likes