{"id":127,"date":"2024-06-07T08:21:44","date_gmt":"2024-06-07T08:21:44","guid":{"rendered":"https:\/\/webaffair.net\/blog\/?p=127"},"modified":"2025-01-30T00:42:19","modified_gmt":"2025-01-30T00:42:19","slug":"learn-css-discord-activity-game","status":"publish","type":"post","link":"https:\/\/webaffair.net\/blog\/portfolio\/current\/learn-css-discord-activity-game\/","title":{"rendered":"Learn CSS Discord Activity Game"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">I&#8217;ll name it something cool eventually, hopefully.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bored and unable to sleep one day, I decided: what the heck, I want to figure out this discord app\/activity thing, and I need to learn REACT, and I&#8217;ve somehow acquired this group of people who are looking at me to explain web coding&#8230; How about I make a game. Or at least, put together some components that would be used in a game, because the typical examples\/exercises you find trying to learn things are always too simplistic for me to actually understand how things actually work and how to use them properly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Three days later I had built a game. It didn&#8217;t have working multi-player yet, and it only had one level, but I could <em>play<\/em> it. Oh, and now I know REACT. Obviously not fully fluent, yet, but at a conversational level at least. (It&#8217;s a <em>language<\/em>, I can phrase it like that if I want.) <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Back end is node.js running Fastly; probably easier to use Express, which I&#8217;ve used a bunch before, but supposedly this is the new better thing so why not try it out.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"669\" src=\"https:\/\/webaffair.net\/blog\/wp-content\/uploads\/2024\/06\/Screen-Shot-2024-06-04-at-1.26.33-AM-1024x669.png\" alt=\"\" class=\"wp-image-128\" srcset=\"https:\/\/webaffair.net\/blog\/wp-content\/uploads\/2024\/06\/Screen-Shot-2024-06-04-at-1.26.33-AM-1024x669.png 1024w, https:\/\/webaffair.net\/blog\/wp-content\/uploads\/2024\/06\/Screen-Shot-2024-06-04-at-1.26.33-AM-300x196.png 300w, https:\/\/webaffair.net\/blog\/wp-content\/uploads\/2024\/06\/Screen-Shot-2024-06-04-at-1.26.33-AM-768x502.png 768w, https:\/\/webaffair.net\/blog\/wp-content\/uploads\/2024\/06\/Screen-Shot-2024-06-04-at-1.26.33-AM-1536x1003.png 1536w, https:\/\/webaffair.net\/blog\/wp-content\/uploads\/2024\/06\/Screen-Shot-2024-06-04-at-1.26.33-AM-2048x1338.png 2048w, https:\/\/webaffair.net\/blog\/wp-content\/uploads\/2024\/06\/Screen-Shot-2024-06-04-at-1.26.33-AM-1568x1024.png 1568w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ll name it something cool eventually, hopefully. Bored and unable to sleep one day, I decided: what the heck, I want to figure out this discord app\/activity thing, and I need to learn REACT, and I&#8217;ve somehow acquired this group of people who are looking at me to explain web coding&#8230; How about I make&#8230; <a class=\"read-more\" href=\"https:\/\/webaffair.net\/blog\/portfolio\/current\/learn-css-discord-activity-game\/\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":128,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-127","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-current"],"jetpack_featured_media_url":"https:\/\/webaffair.net\/blog\/wp-content\/uploads\/2024\/06\/Screen-Shot-2024-06-04-at-1.26.33-AM.png","jetpack-related-posts":[{"id":137,"url":"https:\/\/webaffair.net\/blog\/code\/basics\/ajax-and-images\/","url_meta":{"origin":127,"position":0},"title":"AJAX and Images","author":"Jay","date":"June 22, 2024","format":false,"excerpt":"Okay so I recently figured this out, fixed it on my scripts, forgot about it, was just reminded, realized I ought to document\/share. So this is getting posted here and a couple other places. When you do a fetch() or $.get() the browser only fetches that specific page, and doesn't\u2026","rel":"","context":"In &quot;Basics&quot;","block_context":{"text":"Basics","link":"https:\/\/webaffair.net\/blog\/category\/code\/basics\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":250,"url":"https:\/\/webaffair.net\/blog\/code\/basics\/responsive-font-sizes-title-bars\/","url_meta":{"origin":127,"position":1},"title":"Responsive Font Sizes &amp; Title Bars","author":"Jay","date":"November 20, 2025","format":false,"excerpt":"Let's say we want a reall big, chunky main title for our forum skin. Here's, I think, the simplest way to do it, I see this a lot: .maintitle { height: 160px; line-height: 160px; text-align: center; font-size: 40px; } If we add that to the stylesheet and check it on\u2026","rel":"","context":"In &quot;Basics&quot;","block_context":{"text":"Basics","link":"https:\/\/webaffair.net\/blog\/category\/code\/basics\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/11\/responsive-font-sizes-step10-desktop.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/11\/responsive-font-sizes-step10-desktop.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/11\/responsive-font-sizes-step10-desktop.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/11\/responsive-font-sizes-step10-desktop.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/11\/responsive-font-sizes-step10-desktop.jpg?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":115,"url":"https:\/\/webaffair.net\/blog\/code\/basics\/using-svg-filters-in-css\/","url_meta":{"origin":127,"position":2},"title":"Using SVG Filters in CSS","author":"Jay","date":"June 2, 2024","format":false,"excerpt":"Firstly, you'll need the svg itself. <svg style=\"height:0; overflow:hidden;\"> <defs> <filter id=\"wavy2\"> <feTurbulence x=\"0\" y=\"0\" baseFrequency=\"0.02\" numOctaves=\"5\" seed=\"1\"><\/feTurbulence> <feDisplacementMap in=\"SourceGraphic\" scale=\"20\"><\/feDisplacementMap> <\/filter> <filter id=\"goo\"><feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"8\" result=\"blur\"><\/feGaussianBlur> <feColorMatrix in=\"blur\" mode=\"matrix\" values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9\"\u2026","rel":"","context":"In &quot;Basics&quot;","block_context":{"text":"Basics","link":"https:\/\/webaffair.net\/blog\/category\/code\/basics\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2024\/06\/filter2.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2024\/06\/filter2.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2024\/06\/filter2.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":9,"url":"https:\/\/webaffair.net\/blog\/code\/basics\/funky-cursor-colours\/","url_meta":{"origin":127,"position":3},"title":"Changing the Colors of Input Elements","author":"Jay","date":"September 16, 2021","format":false,"excerpt":"Ever been on a forum site with a really nice dark theme, but then you go to make a post, and are presented with a large blindingly white text area to type in? Maybe with tiny, hard to read font? Of course you have. But this is a 100% fixable\u2026","rel":"","context":"In &quot;Basics&quot;","block_context":{"text":"Basics","link":"https:\/\/webaffair.net\/blog\/category\/code\/basics\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":317,"url":"https:\/\/webaffair.net\/blog\/code\/basics\/introduction-to-browser-development-tools\/","url_meta":{"origin":127,"position":4},"title":"Introduction to Browser Development Tools","author":"Jay","date":"December 18, 2025","format":false,"excerpt":"All modern desktop browsers now have integrated browser tools, however, there are subtle (and sometimes less subtle) differences between each. I find that Firefox has the best overall, though I do switch to Chrome for some specific debugging tasks. I personally only use Edge or Safari when trying to isolate\u2026","rel":"","context":"In &quot;Basics&quot;","block_context":{"text":"Basics","link":"https:\/\/webaffair.net\/blog\/category\/code\/basics\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/12\/DevToolsSettingsFirefox-1-scaled.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/12\/DevToolsSettingsFirefox-1-scaled.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/12\/DevToolsSettingsFirefox-1-scaled.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/12\/DevToolsSettingsFirefox-1-scaled.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/12\/DevToolsSettingsFirefox-1-scaled.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2025\/12\/DevToolsSettingsFirefox-1-scaled.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":11,"url":"https:\/\/webaffair.net\/blog\/portfolio\/current\/the-book-of-traceable-heraldic-art\/","url_meta":{"origin":127,"position":5},"title":"The Book of Traceable Heraldic Art","author":"Jay","date":"September 16, 2021","format":false,"excerpt":"This is a complete rebuild of the back end of an existing website. The old site had a complex build process was but then serving static html pages. I am rebuilding it as a node.js site with a MongoDB back end.","rel":"","context":"In &quot;Current Projects&quot;","block_context":{"text":"Current Projects","link":"https:\/\/webaffair.net\/blog\/category\/portfolio\/current\/"},"img":{"alt_text":"Book of Traceable Heraldic Art","src":"https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2021\/09\/cover-page.pdf.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2021\/09\/cover-page.pdf.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2021\/09\/cover-page.pdf.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2021\/09\/cover-page.pdf.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2021\/09\/cover-page.pdf.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/webaffair.net\/blog\/wp-content\/uploads\/2021\/09\/cover-page.pdf.png?resize=1400%2C800&ssl=1 4x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/posts\/127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/comments?post=127"}],"version-history":[{"count":1,"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/posts\/127\/revisions"}],"predecessor-version":[{"id":129,"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/posts\/127\/revisions\/129"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/media\/128"}],"wp:attachment":[{"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/media?parent=127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/categories?post=127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/tags?post=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}