Post by Kirill Live in Tuesday JS Relese 3.1 International Women's Day comments

Tuesday JS Relese 3.1 International Women's Day » Comments

Viewing post in Tuesday JS Relese 3.1 International Women's Day comments

Probably the best way is to manually reset all variables to their initial state (specify the value that should be initially) when clicking on the select button with the "Start block" option.

An easier way is to use a JavaScript command to reload the page. but in this option you need to disable the autosave function and it probably won't work in preview

document.location.reload();

another option will work, if you don't allow the user to save progress on their own, then you can "Save stage" at start and use the "Load stage" function at the restart location

jsmonzani2 years ago

Ha! reload of course! This makes perfect sense! I thought about some "reset_game" function your API but clearly reload is what I need! Thank you!!
Now I just need to figure out some CSS so that, if I want to go with sprites ("art") over a background, everything stays in place and is visible while adapting to the window's size (making sure percent positioning works for this) . Actually I should look at what you've done with maps.
Have a nice day!

Kirill Live2 years ago

I forgot to say that sprites can be used on buttons.

what you described i think it will help you

https://www.w3schools.com/cssref/pr_background-position.asp

and

https://www.w3schools.com/cssref/css3_pr_background-size.asp

jsmonzani2 years ago(+1)

Oh, sprites on buttons! Interesting!
Thanks for the positioning reference this works for the background but sprites are moved according to the container size (my background is usually on contain, because I want to see it all, but sprites take the whole container size rather than staying on the background, obviously).

My current workaround is to set a fixed aspect ratio but I'll investigate other solutions as well

#tuesday {

aspect-ratio: 1 / 1;

height:auto !important;

}

jsmonzani2 years ago (1 edit) (+1)

OK, in case somebody wants to do the same thing than me, and assuming here a square aspect ratio, this CSS will ensure that both "contain" background images and percent sprites are always visible and stay at the same place, whatever the screensize is :)

#tuesday {

aspect-ratio: 1 / 1;

height:auto !important;

max-width: min(100vw,100vh);

margin: 0 auto;

}

jsmonzani2 years ago (1 edit) (+1)

Thanks again Kirill, I've just completed and published my game if you wanna check it.
https://jsmonzani.itch.io/silent-voices

I had to use a lot of !important in my CSS to override the default CSS styles but other than that, I think it's good.

Kirill Live2 years ago

Wow, this is amazing! great job!
Can I add a link to this game to the Tuesday JS page?

jsmonzani2 years ago

Thank you! Yes, sure!

I've also designed another short story some weeks ago with Tuesday js if you wanna try, with a different art style https://jsmonzani.itch.io/fushimi-inari-a

Kirill Live2 years ago

very nicely done, good colors

jsmonzani2 years ago

👍 thanks again! It's thanks to your tool that I've started enjoying to create these little stories 👏