{"id":16,"date":"2020-06-01T06:01:40","date_gmt":"2020-06-01T04:01:40","guid":{"rendered":"https:\/\/blogs.scummvm.org\/ar28\/?p=16"},"modified":"2022-04-15T06:33:31","modified_gmt":"2022-04-15T04:33:31","slug":"official-coding-starts-my-first-task-polished","status":"publish","type":"post","link":"https:\/\/blogs.scummvm.org\/ar28\/2020\/06\/01\/official-coding-starts-my-first-task-polished\/","title":{"rendered":"Official coding starts, my first task &#8211; polished!"},"content":{"rendered":"<p>Hello again, it&#8217;s been a while!<\/p>\n<p>The last time I wrote this, I felt like I was getting pretty close to the completion of my first task. But, whenever I&#8217;d complete one thing, another thing popped up and so on and so forth it went.<\/p>\n<p>These past 3 weeks,<\/p>\n<ul>\n<li>I worked on the positioning of tabs and dialogs which overlapped each other.<\/li>\n<li>I then worked on some individual widgets and added the support to flip them internally.<br \/>\nHave a look at some of them!<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<h4><b>DropDownButtons:<\/b><\/h4>\n<figure id=\"attachment_17\" aria-describedby=\"caption-attachment-17\" style=\"width: 117px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/dropdown-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-17\" src=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/dropdown-1.png\" alt=\"\" width=\"117\" height=\"71\" \/><\/a><figcaption id=\"caption-attachment-17\" class=\"wp-caption-text\">Flipped<\/figcaption><\/figure>\n<figure id=\"attachment_18\" aria-describedby=\"caption-attachment-18\" style=\"width: 120px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/dropdown-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-18\" src=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/dropdown-2.png\" alt=\"\" width=\"120\" height=\"63\" \/><\/a><figcaption id=\"caption-attachment-18\" class=\"wp-caption-text\">Original<\/figcaption><\/figure>\n<h4><b>Lists:<\/b><\/h4>\n<figure id=\"attachment_19\" aria-describedby=\"caption-attachment-19\" style=\"width: 320px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/lists-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-19\" src=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/lists-2.png\" alt=\"\" width=\"320\" height=\"253\" srcset=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/lists-2.png 320w, https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/lists-2-300x237.png 300w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/a><figcaption id=\"caption-attachment-19\" class=\"wp-caption-text\">Original<\/figcaption><\/figure>\n<figure id=\"attachment_20\" aria-describedby=\"caption-attachment-20\" style=\"width: 312px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/lists.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-20\" src=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/lists.png\" alt=\"\" width=\"312\" height=\"245\" srcset=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/lists.png 312w, https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/lists-300x236.png 300w\" sizes=\"auto, (max-width: 312px) 100vw, 312px\" \/><\/a><figcaption id=\"caption-attachment-20\" class=\"wp-caption-text\">Flipped<\/figcaption><\/figure>\n<h4><b>Sliders:<\/b><\/h4>\n<figure id=\"attachment_21\" aria-describedby=\"caption-attachment-21\" style=\"width: 200px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/volume-sliders.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-21\" src=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/volume-sliders.png\" alt=\"\" width=\"200\" height=\"66\" \/><\/a><figcaption id=\"caption-attachment-21\" class=\"wp-caption-text\">Original<\/figcaption><\/figure>\n<figure id=\"attachment_22\" aria-describedby=\"caption-attachment-22\" style=\"width: 200px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/10-updated-sliders.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-22\" src=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/10-updated-sliders.png\" alt=\"\" width=\"200\" height=\"62\" \/><\/a><figcaption id=\"caption-attachment-22\" class=\"wp-caption-text\">Flipped<\/figcaption><\/figure>\n<p>These involved majorly working with the XML theme-based layout system that ScummVM uses, and it feels so awesome that all of them now have the support to be viewed as in RTL!<\/p>\n<p>I worked on extending this RTL based support to the 3 existing themes, as well as extending support for RTL based on the resolution. Have a look!<\/p>\n<figure id=\"attachment_23\" aria-describedby=\"caption-attachment-23\" style=\"width: 976px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/big-screen.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-23\" src=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/big-screen.png\" alt=\"\" width=\"976\" height=\"638\" srcset=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/big-screen.png 976w, https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/big-screen-300x196.png 300w, https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/big-screen-768x502.png 768w\" sizes=\"auto, (max-width: 976px) 100vw, 976px\" \/><\/a><figcaption id=\"caption-attachment-23\" class=\"wp-caption-text\">High res: 960&#215;600<\/figcaption><\/figure>\n<figure id=\"attachment_24\" aria-describedby=\"caption-attachment-24\" style=\"width: 336px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/small-screens.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-24\" src=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/small-screens.png\" alt=\"\" width=\"336\" height=\"238\" srcset=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/small-screens.png 336w, https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/small-screens-300x213.png 300w\" sizes=\"auto, (max-width: 336px) 100vw, 336px\" \/><\/a><figcaption id=\"caption-attachment-24\" class=\"wp-caption-text\">Small res: 320&#215;200<\/figcaption><\/figure>\n<p>If you&#8217;ve ever played IGI, this gives some sort of relevance to it. I love this theme, so classy!<\/p>\n<figure id=\"attachment_25\" aria-describedby=\"caption-attachment-25\" style=\"width: 656px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/classic.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-25 size-full\" src=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/classic.png\" alt=\"ScummVM classic theme\" width=\"656\" height=\"438\" srcset=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/classic.png 656w, https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/classic-300x200.png 300w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/a><figcaption id=\"caption-attachment-25\" class=\"wp-caption-text\">ScummVM classic theme<\/figcaption><\/figure>\n<div>I also worked on making the text look right aligned and easy to see for RTL users<\/div>\n<div>\n<figure id=\"attachment_27\" aria-describedby=\"caption-attachment-27\" style=\"width: 656px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/save-lists.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-27\" src=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/save-lists.png\" alt=\"\" width=\"656\" height=\"438\" srcset=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/save-lists.png 656w, https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/save-lists-300x200.png 300w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/a><figcaption id=\"caption-attachment-27\" class=\"wp-caption-text\">Load game lists &#8211; the numbers are on the right<\/figcaption><\/figure>\n<p>While working on these, I also found a problem with the grid-based loading and saving of games. Notice how the middle row shows icons correctly, but the other rows don&#8217;t? I spent a lot of time looking for this (2 days!), but couldn&#8217;t figure it out!<\/p>\n<figure id=\"attachment_26\" aria-describedby=\"caption-attachment-26\" style=\"width: 657px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/4-Load-Game-P2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-26\" src=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/4-Load-Game-P2.png\" alt=\"\" width=\"657\" height=\"443\" srcset=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/4-Load-Game-P2.png 657w, https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/4-Load-Game-P2-300x202.png 300w\" sizes=\"auto, (max-width: 657px) 100vw, 657px\" \/><\/a><figcaption id=\"caption-attachment-26\" class=\"wp-caption-text\">Load game icons glitched<\/figcaption><\/figure>\n<div class=\"separator\">I asked for help and eventually saw what was causing the issue. It was because my code &#8211; while flipping the icons, did not modify the widths of the image basically. I didn&#8217;t study the backends code related to this, which was causing me more time to understand what was going wrong.<\/div>\n<div class=\"separator\">I thought my work would be abstracted away from the backend (and for the most part it was), but having at least a basic knowledge of how everything works internally can be very helpful, as you can see in situations like this. Below is the issue resolved!<\/div>\n<div><a href=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/save-lists-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-28\" src=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/save-lists-1.png\" alt=\"\" width=\"667\" height=\"453\" srcset=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/save-lists-1.png 667w, https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/save-lists-1-300x204.png 300w\" sizes=\"auto, (max-width: 667px) 100vw, 667px\" \/><\/a><\/div>\n<div>Lastly, I worked on the input-able text:<\/div>\n<div>\n<figure id=\"attachment_29\" aria-describedby=\"caption-attachment-29\" style=\"width: 656px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/editing.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-29\" src=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/editing.png\" alt=\"\" width=\"656\" height=\"438\" srcset=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/editing.png 656w, https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/editing-300x200.png 300w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/a><figcaption id=\"caption-attachment-29\" class=\"wp-caption-text\">Adding text<\/figcaption><\/figure>\n<p>From the last week, I am polishing up on this task, and making everything pitch-perfect. For the most part, I am so happy to say this &#8211; It is complete!<\/p>\n<p>Except for one small thing, you see the search bar above? It does not have the ability to view the previous chars if the text expands beyond the region it is drawn&#8230; at least, not yet :)<br \/>\nTonight is the night I plan to finish this and have my PR feature ready and enabled for use!<\/p>\n<p>It was a pleasure talking! The coding period might officially start now, but my schedule will stay the same, as I started my tasks right after my acceptance. I&#8217;ll be blogging more often now, so &#8211; I&#8217;ll see you in a week!<\/p>\n<p><a href=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/anime-thumbs-up.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-30\" src=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/anime-thumbs-up.jpg\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/anime-thumbs-up.jpg 640w, https:\/\/blogs.scummvm.org\/ar28\/wp-content\/uploads\/sites\/13\/2022\/04\/anime-thumbs-up-300x169.jpg 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<\/div>\n<\/div>\n<div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hello again, it&#8217;s been a while! The last time I wrote this, I felt like I was getting pretty close to the completion of my first task. But, whenever I&#8217;d complete one thing, another thing popped up and so on and so forth it went. These past 3 weeks, I worked on the positioning of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-16","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blogs.scummvm.org\/ar28\/wp-json\/wp\/v2\/posts\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.scummvm.org\/ar28\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.scummvm.org\/ar28\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.scummvm.org\/ar28\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.scummvm.org\/ar28\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":5,"href":"https:\/\/blogs.scummvm.org\/ar28\/wp-json\/wp\/v2\/posts\/16\/revisions"}],"predecessor-version":[{"id":99,"href":"https:\/\/blogs.scummvm.org\/ar28\/wp-json\/wp\/v2\/posts\/16\/revisions\/99"}],"wp:attachment":[{"href":"https:\/\/blogs.scummvm.org\/ar28\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.scummvm.org\/ar28\/wp-json\/wp\/v2\/categories?post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.scummvm.org\/ar28\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}