{"id":1788,"date":"2025-05-15T12:50:31","date_gmt":"2025-05-15T12:50:31","guid":{"rendered":"https:\/\/sites.wsagames.com\/ms22g23\/?page_id=1788"},"modified":"2025-05-15T13:31:41","modified_gmt":"2025-05-15T13:31:41","slug":"final-ui","status":"publish","type":"page","link":"https:\/\/sites.wsagames.com\/ms22g23\/final-ui\/","title":{"rendered":"Final UI"},"content":{"rendered":"\n<div style=\"height:38px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"563\" src=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-24-1024x563.png\" alt=\"\" class=\"wp-image-1793\" srcset=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-24-1024x563.png 1024w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-24-300x165.png 300w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-24-768x423.png 768w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-24-1536x845.png 1536w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-24.png 1919w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<div style=\"height:36px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This is how the final version of the UI looks. It is slightly different from the final design I planned and the reason for that is difficulties with coding. Still, majority of the design is the same.<\/p>\n\n\n\n<div style=\"height:36px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"563\" src=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-25-1024x563.png\" alt=\"\" class=\"wp-image-1794\" srcset=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-25-1024x563.png 1024w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-25-300x165.png 300w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-25-768x423.png 768w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-25-1536x845.png 1536w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-25.png 1919w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<div style=\"height:13px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The final love meter which I coded in is fully functional.<\/p>\n\n\n\n<div style=\"height:36px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"570\" src=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-27-1024x570.png\" alt=\"\" class=\"wp-image-1797\" srcset=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-27-1024x570.png 1024w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-27-300x167.png 300w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-27-768x427.png 768w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-27-1536x855.png 1536w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-27.png 1919w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<div style=\"height:6px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">\u21e9<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"563\" src=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-26-1024x563.png\" alt=\"\" class=\"wp-image-1796\" srcset=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-26-1024x563.png 1024w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-26-300x165.png 300w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-26-768x423.png 768w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-26-1536x845.png 1536w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-26.png 1919w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<div style=\"height:13px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">For the final playtest I&#8217;ve also changed the position, size and colours of the dialogue choices. In order to do that, I had to replace the source images for choice buttons in idle and hover state. I did that by repainting them in Photoshop. <\/p>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"651\" height=\"470\" src=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ss1-1.png\" alt=\"\" class=\"wp-image-1802\" srcset=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ss1-1.png 651w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ss1-1-300x217.png 300w\" sizes=\"(max-width: 651px) 100vw, 651px\" \/><\/figure>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"664\" height=\"246\" src=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ss2-1.png\" alt=\"\" class=\"wp-image-1803\" srcset=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ss2-1.png 664w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ss2-1-300x111.png 300w\" sizes=\"(max-width: 664px) 100vw, 664px\" \/><\/figure>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"767\" height=\"145\" src=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/obraz_2025-05-15_141120810.png\" alt=\"\" class=\"wp-image-1804\" srcset=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/obraz_2025-05-15_141120810.png 767w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/obraz_2025-05-15_141120810-300x57.png 300w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"562\" src=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ss4-1024x562.png\" alt=\"\" class=\"wp-image-1806\" srcset=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ss4-1024x562.png 1024w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ss4-300x165.png 300w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ss4-768x421.png 768w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ss4-1536x843.png 1536w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ss4.png 1919w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<div style=\"height:43px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">With this code I&#8217;ve changed the position, size and colours of the dialogue choice boxes and the size and colour of the font on top of them.<\/p>\n\n\n\n<div style=\"height:28px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"487\" height=\"323\" src=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-29.png\" alt=\"\" class=\"wp-image-1810\" srcset=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-29.png 487w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/image-29-300x199.png 300w\" sizes=\"(max-width: 487px) 100vw, 487px\" \/><\/figure>\n\n\n\n<div style=\"height:42px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><a href=\"https:\/\/sites.wsagames.com\/ms22g23\/final-product\/\" data-type=\"page\" data-id=\"1813\">See Final Product \u2192<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is how the final version of the UI looks. It is slightly different from the final design I planned and the reason for that is difficulties with coding. Still, majority of the design is the same. The final love meter which I coded in is fully functional. \u21e9 For the final playtest I&#8217;ve also &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/sites.wsagames.com\/ms22g23\/final-ui\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Final UI&#8221;<\/span><\/a><\/p>\n","protected":false},"author":27,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1788","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/ms22g23\/wp-json\/wp\/v2\/pages\/1788","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/ms22g23\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.wsagames.com\/ms22g23\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/ms22g23\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/ms22g23\/wp-json\/wp\/v2\/comments?post=1788"}],"version-history":[{"count":6,"href":"https:\/\/sites.wsagames.com\/ms22g23\/wp-json\/wp\/v2\/pages\/1788\/revisions"}],"predecessor-version":[{"id":1817,"href":"https:\/\/sites.wsagames.com\/ms22g23\/wp-json\/wp\/v2\/pages\/1788\/revisions\/1817"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/ms22g23\/wp-json\/wp\/v2\/media?parent=1788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}