User talk:Mardeg

Welcome to Wikimedia Commons, Mardeg!

First steps tutorial Our first steps tour and our frequently asked questions will help you a lot after registration. They explain how to customize the interface (for example the language), how to upload files and our basic licensing policy (Wikimedia Commons only accepts free content). You don't need technical skills in order to contribute here. Be bold when contributing and assume good faith when interacting with others. This is a wiki. Getting help More information is available at the community portal. You may ask questions at the help desk, village pump or on IRC channel #wikimedia-commons (webchat). You can also contact an administrator on their talk page. If you have a specific copyright question, ask at the copyright village pump.

Goodies, tips, and tricks Put Babel boxes on your user page so others know what languages you can speak and indicate your graphic abilities. You can find the files you have uploaded in your Uploads. Please sign your name on Talk pages by typing ~~~~. To link to an image page without embedding the image, type: [[:File:Foo.jpg]], which produces: File:Foo.jpg. You may enable gadgets (custom features) for your account. There are several tools to upload files. Have you edited Wikipedia before? This guide might be useful. Made a mistake? Do you want to have a file renamed or moved? Use the move link and wait for an authorized user to rename it. Do you want to have your recently uploaded picture removed? Tag it as {{speedy|reason here}}. For more information read the deletion guidelines.

Interactive SVG game

Hi Mardeg,

I came across your amazing playable SVG File:Playable_Fox_Chook_Corn_puzzle.svg and am intrigued by how you managed to implement a timer that stops counting when the puzzle is solved.

I've made several and would like to have something similar, in particular for File:Mapquiz_USA_states_SMIL.svg.

May I ask you for some pointers?

Thanks,
cmɢʟee ⋅τaʟκ 11:26, 28 November 2021 (UTC)

It's CSS animation based combined with the illusion of game state using 37 view tags all of which are same size of the entire play area, just all stacked on top of each other, and each view is one possible game stage represented by its ID and as anchor tags are used for each the CSS uses the :target pseudoclass to trigger animations.

The timer minutes, seconds and tens are all the number digits for each column arranged in a vertical strip, with the only visible clock part being shown by mask="url(#tiMask)" and they are all seperately vertically CSS animated using transform:translateY() height-of-the-text values by the same number of steps() as there are digits in each column.

The timer starts in animation-play-state: paused; state with no anchor target as nothing has been clicked on yet, and I just set it to animation-play-state: running; using the CSS :target pseudoclass again for every view game stage except for the last #⌛ view which is a bit of a cheat, and there's no non-javascript way that I could come up with when I wrote it to reset the clock for restarting the game.

I'm not sure if this method is translatable to a SMIL based game like yours (which looks way more sophisticated with 3 lives), and I think the only SMIL animation in mine is at the #👨🏽‍🌾 stage if you click on the Farmer in the boat to try sending him across the river alone instead of with the chook.

Hope that helps and apologies for the delayed response,

Mardeg (talk) 04:32, 4 February 2022 (UTC)

Update: I just uploaded a new version which now resets the clock when the "Restart" button is hovered over, I just needed CSS that assigns a non-existent animation name (resetimer) to the minutes, seconds and tens on the :hover pseudoclass of #restart which upon unhovering it re-assigns the original animations as if they never ran. Also the order of the SVG elements matter for the purpose of CSS selectors, so the restart button had to be moved above the timer in the source.

Also I took advantage of wikimedia's non-SMIL processing thumbnailer by putting a 90x45 thumbnail image in the SVG that vanishes via SMIL at 0s.

Mardeg (talk) 11:32, 17 February 2022 (UTC)