{"id":40,"date":"2021-06-20T18:12:04","date_gmt":"2021-06-20T18:12:04","guid":{"rendered":"https:\/\/blogs.scummvm.org\/av-dx\/?p=40"},"modified":"2021-06-20T18:12:04","modified_gmt":"2021-06-20T18:12:04","slug":"syncing-the-scroll-week-2-progress","status":"publish","type":"post","link":"https:\/\/blogs.scummvm.org\/av-dx\/2021\/06\/20\/syncing-the-scroll-week-2-progress\/","title":{"rendered":"Syncing the scroll (Week 2 progress)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Task 1: Fix the scrolling<\/h2>\n\n\n\n<p>The initial implementation of scrolling was really buggy, visible entries would become desynced at points, and wrong entries would be displayed. Scrolling far enough down would break the scrolling, and resizing was janky as well. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"615\" src=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-3-1024x615.png\" alt=\"\" class=\"wp-image-41\" srcset=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-3-1024x615.png 1024w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-3-300x180.png 300w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-3-768x461.png 768w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-3.png 1186w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Photo : What even happened here?<\/figcaption><\/figure>\n\n\n\n<p>Other than scroll issues, also seen in above picture is that the items are always at constant distance from each other. So I went ahead and made the entries justify themselves in a row. UI related variables such as how close or far the columns can get, how big each entry is, what is the background color of thumbnail etc, will be exposed for user customisation through the Theme engine in due time. For now, these values remain hardcoded.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1006\" height=\"696\" src=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-4.png\" alt=\"\" class=\"wp-image-42\" srcset=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-4.png 1006w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-4-300x208.png 300w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-4-768x531.png 768w\" sizes=\"auto, (max-width: 1006px) 100vw, 1006px\" \/><figcaption>Justify Align grid items.<\/figcaption><\/figure>\n\n\n\n<p>Also, the previous images\/videos would not show this, but really the scrolling only worked when you scrolled on the &#8220;empty space&#8221; in the grid, as otherwise the scroll event was &#8220;caught&#8221; by the various component widgets of the items. This was also fixed.<\/p>\n\n\n\n<p>Apart from logic changes in how scrolling works, and how the grid knows what games are visible, there were a few more things.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Interlude : The Invisible Change<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"651\" src=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-5-1024x651.png\" alt=\"\" class=\"wp-image-43\" srcset=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-5-1024x651.png 1024w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-5-300x191.png 300w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-5-768x488.png 768w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-5-1536x976.png 1536w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-5-1568x996.png 1568w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-5.png 1700w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Don&#8217;t try to spot the difference, this change is literally invisible<\/figcaption><\/figure>\n\n\n\n<p>I changed what the composition of a Grid Item is, so instead of containing child Widgets, the Item instead just draws the components on its own, which means that there is a potential to change the look of components like Thumbnails and Title without affecting other GraphicsWidgets or StaticTextWidgets. Of course, there is no change in how the items will look, I have just cut the bloat of creating 4 additional objects per grid item.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Task 2: Improving the look of items<\/h2>\n\n\n\n<p>Now that we have a bit more flexibility over how we draw our grid item, perhaps we can add a bit of flair to it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"763\" height=\"349\" src=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-6.png\" alt=\"\" class=\"wp-image-44\" srcset=\"https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-6.png 763w, https:\/\/blogs.scummvm.org\/av-dx\/wp-content\/uploads\/sites\/6\/2021\/06\/image-6-300x137.png 300w\" sizes=\"auto, (max-width: 763px) 100vw, 763px\" \/><figcaption>Invisible change leads to something visible<\/figcaption><\/figure>\n\n\n\n<p>The above image shows few additions :-<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>A highlight on hovering over a grid item.<\/li><li>Language display replaced by flags.<\/li><li>A &#8220;tray&#8221; dialog that appears below the entry to perform the most common actions. Icons can later be placed instead of words.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">In other news&#8230;<\/h3>\n\n\n\n<p>I got a new AC for my room ?.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Task 1: Fix the scrolling The initial implementation of scrolling was really buggy, visible entries would become desynced at points, and wrong entries would be displayed. Scrolling far enough down would break the scrolling, and resizing was janky as well. Other than scroll issues, also seen in above picture is that the items are always&hellip; <a class=\"more-link\" href=\"https:\/\/blogs.scummvm.org\/av-dx\/2021\/06\/20\/syncing-the-scroll-week-2-progress\/\">Continue reading <span class=\"screen-reader-text\">Syncing the scroll (Week 2 progress)<\/span><\/a><\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-40","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/posts\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":1,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/posts\/40\/revisions"}],"predecessor-version":[{"id":45,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/posts\/40\/revisions\/45"}],"wp:attachment":[{"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/media?parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/categories?post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.scummvm.org\/av-dx\/wp-json\/wp\/v2\/tags?post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}