<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
    <channel>
      <title></title>
      <link>https://emilien.sh</link>
      <description></description>
      <generator>Zola</generator>
      <language>en</language>
      <atom:link href="https://emilien.sh/rss.xml" rel="self" type="application/rss+xml"/>
      <lastBuildDate>Wed, 27 May 2026 00:00:00 +0000</lastBuildDate>
      <item>
          <title>openset</title>
          <pubDate>Wed, 27 May 2026 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://emilien.sh/projects/openset/</link>
          <guid>https://emilien.sh/projects/openset/</guid>
          <description xml:base="https://emilien.sh/projects/openset/">&lt;p&gt;OpenSet is a full-stack platform I developed with my friend over the course of about three months (June-August 2025). I&#x27;m writing this now as the official end of the project.&lt;&#x2F;p&gt;
&lt;p&gt;OpenSet was born out of frustration with the lacrosse management systems used by local teams I played with. Most teams used the same outdated platform. I saw an opportunity to build a better platform when my former coach started his own association. I was to build the platform, and they would be my first customer.&lt;&#x2F;p&gt;
&lt;p&gt;Over the summer of 2025, I grinded out the initial release of OpenSet, just in time for the fall lacrosse season. In total, the website handled a few dozen registration, and processed over $9000 in player fees successfully.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;tech-stack-architecture&quot;&gt;tech stack &#x2F; architecture&lt;&#x2F;h2&gt;
&lt;p&gt;Since OpenSet was to be a real production platform, we needed to make careful architecture decisions. We also decided to support multiple tenants out of the box, even though this never happened--we only had one customer. That meant choosing our architecture before starting to build.&lt;&#x2F;p&gt;
&lt;p&gt;We decided to use Vercel for hosting, mostly because we have no DevOps experience. Vercel is amazing to get things up and running quickly, provides amazing features out of the box, and just works. However, I would end up slightly regretting this decision later on: Vercel was quite expensive for our project, as we had the pro tier for 2 team members; this was also a failed opportunity to learn some DevOps and build on a more complex cloud platform. At the end of the day, we wanted something that worked out of the box, and that&#x27;s what we got.&lt;&#x2F;p&gt;
&lt;p&gt;For our database, we used Supabase. So easy to set up, great developer experience, and free. We didn&#x27;t have a large amount of data so this was perfect. We used the Drizzle ORM on the backend, which was an absolute pleasure to use. Modern webdev feels a little too easy. Just make sure not to get supply-chain-attacked by NPM though ;). The Supabase buckets API was also amazing. Having image storage alongside Postgres made development almost trivial.&lt;&#x2F;p&gt;
&lt;p&gt;With Vercel and Supabase, the only remaining tool to complete the larp stack is NextJS. However, we decided to go with SvelteKit, because we have more experience with it and it&#x27;s also much more enjoyable to use. Svelte has to be the greatest framework: it&#x27;s incredibly intuitive--most of the time; it&#x27;s lightweight and not bloated at all; it supports vanilla typescript&#x2F;javascript--all the svelte files are just HTML + JS + Svelte add-ons.&lt;&#x2F;p&gt;
&lt;p&gt;For payments, we went with Stripe--pretty obviously. I had heard of how well it worked, but never really used it. The DX was amazing.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;challenges&quot;&gt;challenges&lt;&#x2F;h2&gt;
&lt;p&gt;The biggest challenges we faced building OpenSet were the following:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Building a platform with multiple tenants, each with their own subdomain, theming, and customization.&lt;&#x2F;li&gt;
&lt;li&gt;Implementing payments to third-party bank accounts with Stripe.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;The first was mostly an issue with subdomains--we wanted each team to be able to pick their subdomain on our platform. That ended up being awkward, especially because we built on Vercel with a single SvelteKit project. We ended up with a pretty hacky solution: a server-side hook that parses URLs and checks for tenants.&lt;&#x2F;p&gt;
&lt;p&gt;The second challenge was more severe: working with webhooks rapidly turned into a headache, and the stakes were much higher--as I mentioned earlier, we automatically transferred more than $9k in player fees to our customer. Webhooks, while they are obviously the right way to approach payments on Stripe, felt hard to work with: it seemed as though pointing them to &lt;code&gt;localhost&lt;&#x2F;code&gt; didn&#x27;t result in successful delivery of the payloads. That meant I had to set up a test environment on Vercel and made it feel much more like a real project: I actually needed a staging environment alongside production.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;Even though the project was kind of a financial flop--I only got one customer and lost money overall--the experience building real software I gained was absolutely worth it. Deploying a quality product that was going to handle thousands of dollars proved to be much harder than simply spinning up &lt;code&gt;localhost&lt;&#x2F;code&gt;. A great experience.&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>summer of math exposition 4</title>
          <pubDate>Tue, 26 Aug 2025 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://emilien.sh/projects/some4/</link>
          <guid>https://emilien.sh/projects/some4/</guid>
          <description xml:base="https://emilien.sh/projects/some4/">&lt;p&gt;Fully homomorphic encryption (FHE) is a novel encryption method first developed in 2009 by Dr. Craig Gentry. FHE allows arbitrary computation on encrypted data. Think, an AI model provider that can&#x27;t see your prompts or the model&#x27;s output. Or a CRUD app that can&#x27;t read your data.&lt;&#x2F;p&gt;
&lt;p&gt;For the 4th edition of the &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;some.3b1b.co&#x2F;&quot;&gt;Summer of Math Exposition (SoME)&lt;&#x2F;a&gt;, I presented an overview of FHE. I covered the basic math concepts behind FHE and a brief history of the developments and techniques.&lt;&#x2F;p&gt;
&lt;p&gt;The highlight was definitely interviewing Dr. Craig Gentry, the creator of the first FHE scheme in 2009. I talked with him for 2 hours, and the video features many highlights of that conversation.&lt;&#x2F;p&gt;
&lt;p&gt;In the end, I did pretty good in the competition, finishing 48th out of 187 video entries. The biggest problem with my video is that I didn&#x27;t understand the math behind FHE enough. Honestly, it&#x27;s very complicated. I was also short on time when producing the video--I recorded it in two days, if I recall correctly. I started late in the contest. That means my video doesn&#x27;t go very deep into the math.&lt;&#x2F;p&gt;
&lt;p&gt;If I participate in SoME next summer, I&#x27;ll try to make a video with more advanced math. Specifically, I&#x27;d like to explore bootstrapping, the technique that enabled the first FHE scheme.&lt;&#x2F;p&gt;
&lt;p&gt;Watch the video here!&lt;&#x2F;p&gt;
&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;embed&#x2F;K4ebxQNimis?si=x89yN27XjSvsUa3f&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; allowfullscreen&gt;&lt;&#x2F;iframe&gt;
</description>
      </item>
      <item>
          <title>corne keyboard</title>
          <pubDate>Sun, 01 Dec 2024 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://emilien.sh/blog/corne/</link>
          <guid>https://emilien.sh/blog/corne/</guid>
          <description xml:base="https://emilien.sh/blog/corne/">&lt;p&gt;My latest ergonomic build (December 2024)! This is the Corne keyboard. And I think this one is &lt;em&gt;the&lt;&#x2F;em&gt; one. The design is super clean, the keys feels super nice and the 50% layout is perfect. Everything is open-source and configurable, of course. I got the kit from a small web store called &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;splittype.com&#x2F;&quot;&gt;SplitType&lt;&#x2F;a&gt;. The kit was super convenient (no soldering required, it&#x27;s hotswap) and worked out of the box after a quick 5 minute build. This is by far the best keyboard I ever had and I hope to use it for a very long time.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;emilien.sh&#x2F;blog&#x2F;corne&#x2F;corne1.jpg&quot; alt=&quot;keyboard image 1&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;emilien.sh&#x2F;blog&#x2F;corne&#x2F;corne2.jpg&quot; alt=&quot;keyboard image 2&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>epoxy table</title>
          <pubDate>Tue, 20 Aug 2024 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://emilien.sh/projects/epoxytable/</link>
          <guid>https://emilien.sh/projects/epoxytable/</guid>
          <description xml:base="https://emilien.sh/projects/epoxytable/">&lt;p&gt;Here is a small epoxy resin table I built with my aunt. I&#x27;ve always been fascinated with the transparent material and the idea of casting objects inside of it.
When my aunt offered to help me build one, I couldn&#x27;t resist. I decided to cast a motherboard from an old Dell PC I bought at a flea market. I love the way
cast circuit boards look. Their intricate details are perfect for resin casting.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;emilien.sh&#x2F;projects&#x2F;epoxytable&#x2F;epoxytable1.jpg&quot; alt=&quot;First table image&quot; &#x2F;&gt;
&lt;em&gt;A picture of the resin table&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;For the feet, I went with &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;a.co&#x2F;d&#x2F;a8yX4mw&quot;&gt;these&lt;&#x2F;a&gt; from Amazon. In my opinion, they look very nice with resin and are very simple to install.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;emilien.sh&#x2F;projects&#x2F;epoxytable&#x2F;epoxytable2.jpg&quot; alt=&quot;Second table image&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>summer of math exposition π</title>
          <pubDate>Fri, 16 Aug 2024 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://emilien.sh/projects/somepi/</link>
          <guid>https://emilien.sh/projects/somepi/</guid>
          <description xml:base="https://emilien.sh/projects/somepi/">&lt;p&gt;In the summer of 2024, my friend Torge and I participated in the &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;some.3b1b.co&#x2F;&quot;&gt;Summer of Math Exposition&lt;&#x2F;a&gt; Pi edition. This is a math explainer contest. We used the awesome &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;www.manim.community&#x2F;&quot;&gt;Manim CE&lt;&#x2F;a&gt; library to explain E. F. Codd&#x27;s relational model. This model, first published in the 1970s, is the precursor to SQL. E. F. Codd&#x27;s work, while it isn&#x27;t as well-known as SQL, was hugely influential. We explored the model and its mathematical query languages, relational algebra and relational calculus.&lt;&#x2F;p&gt;
&lt;p&gt;Watch the video here!&lt;&#x2F;p&gt;
&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;embed&#x2F;LmqHv-2OlGE?si=lky8BbloROSoim7C&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; allowfullscreen&gt;&lt;&#x2F;iframe&gt;
</description>
      </item>
      <item>
          <title>dactyl skeletyl keyboard</title>
          <pubDate>Thu, 01 Aug 2024 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://emilien.sh/projects/dactyl/</link>
          <guid>https://emilien.sh/projects/dactyl/</guid>
          <description xml:base="https://emilien.sh/projects/dactyl/">&lt;p&gt;In August 2024, I built the &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;Bastardkb&#x2F;Skeletyl&quot;&gt;Bastard Dactyl Skeletyl&lt;&#x2F;a&gt;, a split ergonomic, curved mechanical keyboard.
This entire keyboard is open source: I 3D printed the case with my FDM printer, and I got the keys printed in MJF nylon from &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;jlc3dp.com&#x2F;&quot;&gt;JLC3DP&lt;&#x2F;a&gt;.
The keyboard comes pre-flashed with &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;usevia.app&#x2F;&quot;&gt;VIA&lt;&#x2F;a&gt;, so I can easily customize the four-layer layout to my liking and add complex macros.
It&#x27;s a 40% layout, meaning it only has 36 keys, including six thumb keys. While that&#x27;s not a lot of keys, it drastically reduces the distance my fingers need to travel.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;emilien.sh&#x2F;projects&#x2F;dactyl&#x2F;ergokeeb1.png&quot; alt=&quot;Keyboard image&quot; &#x2F;&gt;
&lt;em&gt;The Dactyl Skeletyl on my desk&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;h2 id=&quot;thoughts-on-the-keyboard&quot;&gt;Thoughts on the keyboard&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;Open-source: The open-source aspect is fantastic. You can either buy a prebuilt keyboard or build it yourself by just purchasing the PCB kit. I chose the latter because I wanted to learn soldering.&lt;&#x2F;li&gt;
&lt;li&gt;VIA: Customizing the keyboard with VIA is super intuitive and effortless. With only 36 keys, it&#x27;s crucial to be able to choose which shortcuts to include in the layout.&lt;&#x2F;li&gt;
&lt;li&gt;Curvature: The curved design wasn’t a hit for me. It makes my fingers travel a bit more than a staggered key layout would.&lt;&#x2F;li&gt;
&lt;li&gt;Instability: Due to the 3D printing, the keyboard’s base is very light and tends to move around on my desk while typing. It&#x27;s quite annoying, so I’m considering getting a metal base.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;emilien.sh&#x2F;projects&#x2F;dactyl&#x2F;ergokeeb2.jpg&quot; alt=&quot;Keyboard image&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;&lt;em&gt;I ended up replacing the thumb keys with some Guy Fawkes keycaps. They came in a Vim keycap set.&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>8bit Duels Devlog Part 8 - Final Devlog</title>
          <pubDate>Mon, 21 Aug 2023 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://emilien.sh/projects/8bit duels/8bd-final/</link>
          <guid>https://emilien.sh/projects/8bit duels/8bd-final/</guid>
          <description xml:base="https://emilien.sh/projects/8bit duels/8bd-final/">&lt;p&gt;Hey everyone,&lt;&#x2F;p&gt;
&lt;p&gt;8bit Duels has finally been released! After one year, I am proud to have completed it. I have explained everything in a release YouTube video. Watch it here: &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=maKARl89Qos&quot;&gt;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=maKARl89Qos&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;p&gt;I will now move on to other projects, probably not game development. It&#x27;s been a really fun experience.&lt;&#x2F;p&gt;
&lt;p&gt;Bye for now,&lt;&#x2F;p&gt;
&lt;p&gt;- ThousandthStar&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>8bit Duels Devlog Part 7</title>
          <pubDate>Mon, 24 Jul 2023 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://emilien.sh/projects/8bit duels/8bd-part7/</link>
          <guid>https://emilien.sh/projects/8bit duels/8bd-part7/</guid>
          <description xml:base="https://emilien.sh/projects/8bit duels/8bd-part7/">&lt;p&gt;Hey, welcome to yet another 8bit Duels devlog. It has been almost 4 MONTHS since my last post, mainly because I was
waiting to have completed the UI (menus) before releasing another devlog. However, I am not quite done, so I thought I&#x27;d
share my progress so far. I have also implemented the debug mode setting, have added my chiptune song to the main menu,
and have improved my workflow through Github Issues.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;ui-library&quot;&gt;UI Library&lt;&#x2F;h2&gt;
&lt;p&gt;To build the whole UI, I initially decided to go with the default &lt;code&gt;bevy_ui&lt;&#x2F;code&gt; crate. I tried to use &lt;code&gt;egui&lt;&#x2F;code&gt; for a bit, then experimented with
&lt;code&gt;kayak_ui&lt;&#x2F;code&gt;. In the end, I settled with the default UI crate, since, while being extremely verbose and requiring a lot of boilerplate,
it is simple in all its aspects.&lt;&#x2F;p&gt;
&lt;p&gt;However, I have just discovered the &lt;code&gt;belly&lt;&#x2F;code&gt; crate which leverages the power of Rust macros to provide
a declarative UI framework that is directly translated to &lt;code&gt;bevy&lt;&#x2F;code&gt; components. I will rewrite my whole UI
using &lt;code&gt;belly&lt;&#x2F;code&gt;, as it removes all of the boilerplate associated with the &lt;code&gt;bevy_ui&lt;&#x2F;code&gt; crate. It is also extremely simple
to use, and UIs are declared using &lt;code&gt;eml&lt;&#x2F;code&gt; syntax (similar to &lt;code&gt;html&lt;&#x2F;code&gt;).&lt;&#x2F;p&gt;
&lt;h2 id=&quot;ui-changes&quot;&gt;UI Changes&lt;&#x2F;h2&gt;
&lt;h4 id=&quot;main-menu&quot;&gt;Main Menu&lt;&#x2F;h4&gt;
&lt;p&gt;For the main menu, I drew an animated background with the four characters currently implemented in the game (Skeleton, Reaper,
Kraken and Spider).&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;&#x2F;ui_main_menu.png&quot; alt=&quot;Main Menu UI&quot; &#x2F;&gt;
&lt;em&gt;Image of the main menu UI&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;h4 id=&quot;settings-menu&quot;&gt;Settings Menu&lt;&#x2F;h4&gt;
&lt;p&gt;The settings now are stored inside the &lt;code&gt;config.ron&lt;&#x2F;code&gt; file (inside the assets folder). This isn&#x27;t ideal, as I load the file
with standard IO. I may change it in the future by creating a custom Bevy asset type for the settings. Anyways, here is the
settings menu:&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;&#x2F;ui_settings.png&quot; alt=&quot;Settings Menu UI&quot; &#x2F;&gt;
&lt;em&gt;Image of the settings menu UI&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;h4 id=&quot;in-game-ui&quot;&gt;In-Game UI&lt;&#x2F;h4&gt;
&lt;p&gt;The in-game UI is by far the longest to implement. I have laid out most of the UI widgets, but I still have to connect it to the
logic (so the buttons can... you know... do their buttoning).&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;&#x2F;ui_in_game.png&quot; alt=&quot;In-Game UI&quot; &#x2F;&gt;
&lt;em&gt;Image of the in-game UI&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;h2 id=&quot;that-s-it&quot;&gt;That&#x27;s it!&lt;&#x2F;h2&gt;
&lt;p&gt;Yes, that&#x27;s it! 4 months of work, and only this! I agree it isn&#x27;t much progress, but I was extremely busy with some other projects,
and school of course. Now, I just decided to rebuild the whole UI, *sigh*. It should be much faster though. The &lt;code&gt;belly&lt;&#x2F;code&gt; crate is
awesome, and I highly recommend it to all my fellow game developers using &lt;code&gt;bevy&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;pixel-artist&quot;&gt;Pixel Artist&lt;&#x2F;h2&gt;
&lt;p&gt;I am not exactly an artist, and I am slightly unsatisfied about the pixel art in 8bit Duels (someone else made it, but they aren&#x27;t
going to continue helping out with the project). I am considering AI art (using Stable Diffusion) to redo all the art, but
AI isn&#x27;t quite ready to do pixel art (from what I can tell). If any pixel artists are reading this and would like to contribute some
art (there isn&#x27;t much to do, as the characters don&#x27;t have animations), please join the &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;discord.com&#x2F;invite&#x2F;NbBcF4bGU5&quot;&gt;Discord server&lt;&#x2F;a&gt; so we can talk.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;contributions&quot;&gt;Contributions&lt;&#x2F;h2&gt;
&lt;p&gt;If anyone is interested in contributing code to 8bit Duels, please join the Discord or open&#x2F;comment on issues on the &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;ThousandthStar&#x2F;8bit-duels&quot;&gt;Github Repository&lt;&#x2F;a&gt;.
Many new features could be implemented, and I am open to feedback. For example, the Discord community told me that a dark mode
may be preferable for the UI. It would be great if others implemented suggestions such as this, as my main focus is to add the missing features to 8bit Duels.
There is no documentation in the repository, and barely any comments, but if anyone asks me about how my messy code works, I will
gladly guide them so they can contribute.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;As I always write, if you made it this far, thank you. I will try to finish a minimum version of 8bit Duels before the end of the summer.
This is mostly a learning project, and it has absolutely succeeded in this regard. I am grateful for all of you following my progress.
I may switch over to web development using Rust of Javascript after I am done with 8bit Duels. Anyways, I am not quite done. I will see you in the next devlog, hopefully soon!&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>8bit Duels Devlog Part 6</title>
          <pubDate>Wed, 29 Mar 2023 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://emilien.sh/projects/8bit duels/8bd-part6/</link>
          <guid>https://emilien.sh/projects/8bit duels/8bd-part6/</guid>
          <description xml:base="https://emilien.sh/projects/8bit duels/8bd-part6/">&lt;p&gt;Hey again 👋 ! I&#x27;m back with another devlog for my game 8bit Duels!
This is devlog #6 and it includes some pretty interesting bits. Let&#x27;s get into it!
Also, to discuss the game and follow the development more closely, you can join the &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;discord.com&#x2F;invite&#x2F;NbBcF4bGU5&quot;&gt;Discord&lt;&#x2F;a&gt;.
A Revolt bridge is also available, please message me privately if you want to join that instead.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;changes&quot;&gt;Changes&lt;&#x2F;h2&gt;
&lt;p&gt;This devlog includes mostly gameplay polish change, to make the game easier to understand and to follow.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Indicator for stunned troops&lt;&#x2F;li&gt;
&lt;li&gt;Selected troop indicator&lt;&#x2F;li&gt;
&lt;li&gt;Ownership indicators&lt;&#x2F;li&gt;
&lt;li&gt;Movement animations&lt;&#x2F;li&gt;
&lt;li&gt;Attack animations&lt;&#x2F;li&gt;
&lt;li&gt;In-game chat feature&lt;&#x2F;li&gt;
&lt;li&gt;Settings menu&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h3 id=&quot;indicator-for-stunned-troops&quot;&gt;Indicator for Stunned Troops&lt;&#x2F;h3&gt;
&lt;p&gt;Before, the only way to tell if a troop was stunned was to click it and look on the sidebar UI.
Now, a simple yellow outline will tell you without you needing to click the troop.
It looks like this:&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;&#x2F;stun_indicator.png&quot; alt=&quot;stun_indicator&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;h3 id=&quot;selected-troop-indicator&quot;&gt;Selected Troop Indicator&lt;&#x2F;h3&gt;
&lt;p&gt;Now, the selected troop is highlighted with black square corners like this:&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;&#x2F;select_indicator.png&quot; alt=&quot;select_indicator&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;h3 id=&quot;ownership-indicators&quot;&gt;Ownership Indicators&lt;&#x2F;h3&gt;
&lt;p&gt;Now, if you own a troop, it will have a blue background.
Enemy troops on the otherhand, have a red background, just like this:&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;&#x2F;ownership_indicators.png&quot; alt=&quot;ownership&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;h3 id=&quot;movement-animations&quot;&gt;Movement Animations&lt;&#x2F;h3&gt;
&lt;p&gt;These are the new movement animations for the troops.
I had to rewrite the code for ownership indicators for the animations to work correctly.
The method I was using before was very dumb: I assigned ownership indicators to troops every frame, and that lead to some bizarre bugs.
Instead, I now just spawn them as children of the troop they indicate the ownership of.
That way, it is a lot simpler to control them (making them invisible when the troop is performing an animation).&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;&#x2F;movement_animations.gif&quot; alt=&quot;movement_anims&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;Note:&lt;&#x2F;strong&gt; this is a GIF, and the pixel art is a bit weird. I wasn&#x27;t able to get normal videos to work,
so I stuck with this. If anyone know how to add an MP4 video to Hugo, please send me a message.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;attack-animations&quot;&gt;Attack Animations&lt;&#x2F;h3&gt;
&lt;p&gt;These are the new attack animations:&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;&#x2F;attack_animations.gif&quot; alt=&quot;attack_anims&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;h3 id=&quot;in-game-chat-feature&quot;&gt;In-Game Chat Feature&lt;&#x2F;h3&gt;
&lt;p&gt;The game now has a chat in game! This means you may discuss with your opponent while player.
Usernames are also coming soon (although they will just be local, there is no account system yet).&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;&#x2F;static&#x2F;chat.png&quot; alt=&quot;chat&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;h3 id=&quot;settings-menu&quot;&gt;Settings Menu&lt;&#x2F;h3&gt;
&lt;p&gt;Here is the new settings menu:&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;&#x2F;settings_menu.png&quot; alt=&quot;settings&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;The server address is the only working setting at the moment though.
As mentioned before, usernames are coming in the future.
Also, while debug mode is technically working, it doesn&#x27;t show anything else more than the usually game.
That is also coming in the future.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h3&gt;
&lt;p&gt;If you made it this far, as always, thanks for reading!
I pour a ton of time into this project and hope to see it be played soon.
You can test the game locally by downloading the code (&lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;ThousandthStar&#x2F;8bit-duels&quot;&gt;Github&lt;&#x2F;a&gt;). Just remember to add &lt;code&gt;-- dev&lt;&#x2F;code&gt; when using &lt;code&gt;cargo run&lt;&#x2F;code&gt; to not make the game crash when running two instances.&lt;&#x2F;p&gt;
&lt;p&gt;Finally, &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;drive.google.com&#x2F;file&#x2F;d&#x2F;1lnzNvxDk5PSc_qFp1iYzUJ3Ekx4i0ESM&#x2F;view?usp=share_link&quot;&gt;here&lt;&#x2F;a&gt; is a little chiptune song I&#x27;ve been working on.&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>8bit Duels Devlog Part 5</title>
          <pubDate>Mon, 02 Jan 2023 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://emilien.sh/projects/8bit duels/8bd-part5/</link>
          <guid>https://emilien.sh/projects/8bit duels/8bd-part5/</guid>
          <description xml:base="https://emilien.sh/projects/8bit duels/8bd-part5/">&lt;p&gt;👋 Hi again! This is part 5 of my devlog where I code my multiplayer turn-based strategy game.
It&#x27;s been a while since I made a devlog, so there&#x27;s quite a bit to unpack here.
Priorities have changed for the better, gameplay mechanics have been established, a community chat has been created, and an artist has joined forces with me to create the game!
There&#x27;s been quite a bit of progress made in the code as well. Without any further ado, let&#x27;s get into it!&lt;&#x2F;p&gt;
&lt;h3 id=&quot;announcements&quot;&gt;Announcements&lt;&#x2F;h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;h4 id=&quot;testing-community&quot;&gt;Testing Community&lt;&#x2F;h4&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;I knewly created a Discord server (&lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;discord.gg&#x2F;NbBcF4bGU5&quot;&gt;link&lt;&#x2F;a&gt;) for anyone interested in testing the game.
There, I will post updates on the development of 8bit Duels, and I&#x27;ll set a server up when the game will be in MVP stage.
The game is almost ready to be played, so join if you want to be notified of that!&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;h4 id=&quot;new-artist&quot;&gt;New Artist&lt;&#x2F;h4&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;One of my friends agreed to make pixel art for my game! He is way more talented than me, so the art is much better and detailed with his help.
You will see more of his work down below.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;prioritizing-gameplay&quot;&gt;Prioritizing Gameplay&lt;&#x2F;h3&gt;
&lt;p&gt;After I left off the devlog last time, I started working on the game&#x27;s UI. However, this just detracted me from the gameplay coding.
I also had issues with the UI library I was using, and wasn&#x27;t making any real progress.
However, once I started focusing more on the gameplay, things started to pick up rapidly.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;gameplay-elements&quot;&gt;Gameplay Elements&lt;&#x2F;h3&gt;
&lt;p&gt;Since my last devlog, I have added many things, the most important of which being the turn system.
Now, players each take turns placing troops, moving them and attacking with them.
I also added the ability to spawn troops, and to win the game with them (if the are on the last row of the board and have the ability to move, then you can use them to win the game).
When a player spawns troops, it is automatically stunned for one turn. While stunned, it can&#x27;t attack or move.&lt;&#x2F;p&gt;
&lt;p&gt;I also added the two game currencies. The first is the number of pawns, which determines how many troops a single player can have on the board at the same time.
When placing a troop, you loose one pawn. When one of your troops dies, you gain one.
One interesting mechanic this brings is the possibility to make troops that require more than one pawn to be placed, and they might be more powerful.
Another possibility would be to add a card ability that would increase your total number of troops.
The other currency in my game will be the number of spirits. These are used to buy troops.
The initial concept behind them was the idea that you would make pawns become alive by being infused with spirits.
The more powerful the troop, the more spirits it needs to be spawned. Also, when you defeat an enemy troop, you gain half of the spirits that were spent to spawn that troop, rounded down to an integer.
Players also gain one spirit every turn.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;troop-abilities&quot;&gt;Troop Abilities&lt;&#x2F;h4&gt;
&lt;p&gt;To make the gameplay more interesting, I added these new abilities (they haven&#x27;t been fully implemented yet):&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Spirit Collector&lt;&#x2F;strong&gt;: When the troop that has this ability defeats an enemy, the player receives all of the spirits spent to spawn the enemy, instead of half.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Multi Attack&lt;&#x2F;strong&gt;: When a troop has this ability, it can attack multiple times per turn (the amount of maximum attacks changes per troop).&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Stun&lt;&#x2F;strong&gt;: This troop has the ability to stun enemy troops when attacking them.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;There are many more abilities to come.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;troops&quot;&gt;Troops&lt;&#x2F;h4&gt;
&lt;h5 id=&quot;skeleton-the-skeleton-got-a-new-sprite-which-looks-like-this&quot;&gt;&lt;strong&gt;Skeleton&lt;&#x2F;strong&gt;: The skeleton got a new sprite, which looks like this:&lt;&#x2F;h5&gt;
&lt;p&gt;&lt;img src=&quot;&#x2F;skeleton.png&quot; alt=&quot;skeleton&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Here are the stats for the skeleton:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Health Points&lt;&#x2F;strong&gt;: 5&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Attack Damage&lt;&#x2F;strong&gt;: 3&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Spirit Cost&lt;&#x2F;strong&gt;: 2&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Abilities&lt;&#x2F;strong&gt; None&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h5 id=&quot;reaper-here-is-the-new-reaper&quot;&gt;&lt;strong&gt;Reaper&lt;&#x2F;strong&gt;: Here is the new reaper!&lt;&#x2F;h5&gt;
&lt;p&gt;&lt;img src=&quot;&#x2F;reaper.png&quot; alt=&quot;reaper&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Here are his stats:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Health Points&lt;&#x2F;strong&gt;: 6&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Attack Damage&lt;&#x2F;strong&gt;: 4&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Spirit Cost&lt;&#x2F;strong&gt;: 5&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Abilities&lt;&#x2F;strong&gt;: Spirit Collector&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h5 id=&quot;kraken-here-is-the-new-kraken&quot;&gt;&lt;strong&gt;Kraken&lt;&#x2F;strong&gt;: Here is the new kraken!&lt;&#x2F;h5&gt;
&lt;p&gt;&lt;img src=&quot;&#x2F;kraken.png&quot; alt=&quot;kraken&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Here are its stats:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Health Points&lt;&#x2F;strong&gt;: 12&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Attack Damage&lt;&#x2F;strong&gt;: 1&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Spirit Cost&lt;&#x2F;strong&gt;: 5&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Abilities&lt;&#x2F;strong&gt;: Multi Attack 3&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h5 id=&quot;spider-here-is-the-new-spider&quot;&gt;&lt;strong&gt;Spider&lt;&#x2F;strong&gt;: Here is the new spider!&lt;&#x2F;h5&gt;
&lt;p&gt;&lt;img src=&quot;&#x2F;spider.png&quot; alt=&quot;spider&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Here are its stats:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Health Points&lt;&#x2F;strong&gt;: 4&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Attack Damage&lt;&#x2F;strong&gt;: 2&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Spirit Cost&lt;&#x2F;strong&gt;: 4&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Abilities&lt;&#x2F;strong&gt;: Stun 1&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h3 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h3&gt;
&lt;p&gt;If you&#x27;ve read this far, thank you! This devlog was pretty long, and I think I will no longer be showing snippets of code in the future.
The code, as always, is available on &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;ThousandthStar&#x2F;8bit-duels&quot;&gt;Github&lt;&#x2F;a&gt;.
That is all for me, I will see you in the next one!&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>8bit Duels Devlog Part 4</title>
          <pubDate>Fri, 25 Nov 2022 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://emilien.sh/projects/8bit duels/8bd-part4/</link>
          <guid>https://emilien.sh/projects/8bit duels/8bd-part4/</guid>
          <description xml:base="https://emilien.sh/projects/8bit duels/8bd-part4/">&lt;p&gt;Hello! Welcome to the fourth part of my devlog where I develop my multiplayer turn-based game. I previously didn&#x27;t have a name, but I have decided to name it 8bit Duels! I think this fits the theme pretty nicely. Anyways, on with the devlog!&lt;&#x2F;p&gt;
&lt;h3 id=&quot;refactoring&quot;&gt;Refactoring&lt;&#x2F;h3&gt;
&lt;p&gt;This devlog is all about refactoring, and how I made my code cleaner. I did this by creating a workspace shared between the client and the server. This allows me to directly serialize and deserialize packets into &lt;code&gt;ClientMessage&lt;&#x2F;code&gt; and &lt;code&gt;ServerMessage&lt;&#x2F;code&gt; enum variants. One reason I adore Rust is because you can pass parameters to some enums. This is great in my case, as I need to send some data between the client and the server. These changes were suggested by a user in the Rust gamedev Discord server (&lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;gamedev.rs&#x2F;&quot;&gt;link to their website&lt;&#x2F;a&gt;).&lt;&#x2F;p&gt;
&lt;p&gt;This refactoring was done over most of the networking code, so I won&#x27;t show everything here. The code is on Github &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;ThousandthStar&#x2F;8bit-duels&quot;&gt;here&lt;&#x2F;a&gt; if you want to check it out (stars are greatly appreciated).&lt;&#x2F;p&gt;
&lt;p&gt;The main thing is that I now need less logic to handle packets. Before, I was creating some raw JSON in the client and putting a &lt;code&gt;packet-type&lt;&#x2F;code&gt; value in the object. I was then matching that value on the server-side, and vice-versa. This is an extremely bad practice, and it resulted in longer tedious code, since I needed to also get the other variables in the packets by their name in the JSON object. Now, I&#x27;ve just created a shared &lt;code&gt;common&lt;&#x2F;code&gt; package along with the client and server packages. It contains these simple API packets:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #E1E4E8; background-color: #24292E;&quot;&gt;&lt;code data-lang=&quot;rust&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;#[derive(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Serialize&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Deserialize&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Debug&lt;&#x2F;span&gt;&lt;span&gt;)]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;pub enum&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; ServerMessage&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;    &#x2F;&#x2F; 1st param: whether or not the player is player_1&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;    StartGame&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;bool&lt;&#x2F;span&gt;&lt;span&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;    StartTurn&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;    &#x2F;&#x2F; 1st param: the `CardEntity` to spawn&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;    SpawnCard&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;CardEntity&lt;&#x2F;span&gt;&lt;span&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;    &#x2F;*&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;    1st param: the initial x position&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;    2nd param: the initial y position&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;    3rd param: the final   x position&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;    4th param: the final   y position&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;    *&#x2F;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;    MoveTroop&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;i32&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; i32&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; i32&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; i32&lt;&#x2F;span&gt;&lt;span&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;    AttackTroop&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;i32&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; i32&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; i32&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; i32&lt;&#x2F;span&gt;&lt;span&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;#[derive(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Serialize&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Deserialize&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Debug&lt;&#x2F;span&gt;&lt;span&gt;)]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;pub enum&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; ClientMessage&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;    Deck&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Vec&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Card&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;    MoveTroop&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;i32&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; i32&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; i32&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; i32&lt;&#x2F;span&gt;&lt;span&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;    AttackTroop&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;i32&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; i32&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; i32&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; i32&lt;&#x2F;span&gt;&lt;span&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Using &lt;code&gt;serde_json&lt;&#x2F;code&gt;, a great JSON library, I can just serialize and deserialize packets into enum variants. These are handled like so on the client (I removed, the logic, since it&#x27;s very straightforward):&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #E1E4E8; background-color: #24292E;&quot;&gt;&lt;code data-lang=&quot;rust&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;if let&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Some&lt;&#x2F;span&gt;&lt;span&gt;(message)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; guard&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;pop_front&lt;&#x2F;span&gt;&lt;span&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;        match&lt;&#x2F;span&gt;&lt;span&gt; message {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;            ServerMessage&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;StartGame&lt;&#x2F;span&gt;&lt;span&gt;(is_player_1)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;                &#x2F;&#x2F; Starting the game&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;            }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;            ServerMessage&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;SpawnCard&lt;&#x2F;span&gt;&lt;span&gt;(card_entity)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;                &#x2F;&#x2F; Spawning troops&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;            }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;            ServerMessage&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;MoveTroop&lt;&#x2F;span&gt;&lt;span&gt;(start_x, start_y, end_x, end_y)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;                &#x2F;&#x2F; Moving troops&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;            }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;            ServerMessage&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;AttackTroop&lt;&#x2F;span&gt;&lt;span&gt;(start_x, start_y, end_x, end_y)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;                &#x2F;&#x2F; Attacking troops&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;            }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;            _&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; {}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;On the server, we have something similar, but with &lt;code&gt;ClientMessage&lt;&#x2F;code&gt; instead.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h3&gt;
&lt;p&gt;If you made it this far, thanks again for reading! This devlog was pretty short since there wasn&#x27;t much to explain. I do plan on finishing this game as soon as possible, but I am very busy at the moment, so progress is very slow. With that, I hope you enjoyed and are somewhat hoping to try out my game in the future. See you next time!&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;Special thanks to the user who helped me improve my code. Hints on grammar and best practices are always greatly appreciated.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>8bit Duels Devlog Part 3</title>
          <pubDate>Sun, 09 Oct 2022 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://emilien.sh/projects/8bit duels/8bd-part3/</link>
          <guid>https://emilien.sh/projects/8bit duels/8bd-part3/</guid>
          <description xml:base="https://emilien.sh/projects/8bit duels/8bd-part3/">&lt;p&gt;Hello Readers! Welcome to the third devlog on this series where I code a multiplayer turn-based strategy game! If you haven&#x27;t read the three previous posts, go check them out! This week, I created a simple and exciting selecting system for my troops. Without further ado, let&#x27;s get into it. Hope you enjoy!&lt;&#x2F;p&gt;
&lt;h2 id=&quot;troop-selecting&quot;&gt;Troop selecting&lt;&#x2F;h2&gt;
&lt;p&gt;In the last devlog, I talk about how I implemented the spawning mechanism in my game. Essentially, placing some troops on the board. This went very well and is now fully functional. However, we still need to be able to select those troops and move them. This is what it looks like after this week:&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;dev-to-uploads.s3.amazonaws.com&#x2F;uploads&#x2F;articles&#x2F;maxl2s37d9nuw1zwri65.png&quot; alt=&quot;ss 1&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Here the skeleton is not clearly distinguishable, so I&#x27;ll make sure to change some colors for next time.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;dev-to-uploads.s3.amazonaws.com&#x2F;uploads&#x2F;articles&#x2F;0agwjxjjun2losdc3npg.png&quot; alt=&quot;ss 2&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;The code for this was actually quite long, so I&#x27;ll simply sum it up for you. Essentially, we spawn on every board tile two entities, one for movement interactions and one for attack interactions. These both have their own separate components named &lt;code&gt;MoveInteraction&lt;&#x2F;code&gt; and &lt;code&gt;AttackInteraction&lt;&#x2F;code&gt;. They are always invisible, except when the &lt;code&gt;SelectedCardEntity&lt;&#x2F;code&gt; resource (which is an &lt;code&gt;Option&amp;lt;CardEntity&amp;gt;&lt;&#x2F;code&gt;) contains an entity. When that happens, if they are close enough to that entity, we show them. Pretty simple, right? Well, this took around about 200 lines of code. However, I think the result is definitely worth it.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;meme-of-the-week&quot;&gt;Meme of the week&lt;&#x2F;h4&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;dev-to-uploads.s3.amazonaws.com&#x2F;uploads&#x2F;articles&#x2F;oloxwgnxkl3719rdqj8g.jpg&quot; alt=&quot;meme&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;h4 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h4&gt;
&lt;p&gt;In conclusion, this was a very short devlog for this week, and it&#x27;s a bit late. Normally, I would post on Friday, but I think I&#x27;ll start doing it on the weekends. I may even only post every other week, since I don&#x27;t have enough progress to show for after a week.&lt;&#x2F;p&gt;
&lt;p&gt;In addition, the code is now on Github for everyone to see! You can find it at &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;ThousandthStar&#x2F;multiplayer_game&quot;&gt;here&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Finally, I would like to say thank you if you read this post all the way. This was a short one.&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>8bit Duels Devlog Part 2</title>
          <pubDate>Sat, 01 Oct 2022 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://emilien.sh/projects/8bit duels/8bd-part2/</link>
          <guid>https://emilien.sh/projects/8bit duels/8bd-part2/</guid>
          <description xml:base="https://emilien.sh/projects/8bit duels/8bd-part2/">&lt;p&gt;Hello readers! This is my progress for week 2 of coding my multiplayer game with Rust and Bevy. This post is a bit late, and should’ve been out yesterday, but I wasn&#x27;t able to make it in time. Anyways, here is my progress this week. As a reminder, this is only a side project, and I don&#x27;t work on it for extended periods of time, so progress is slow.&lt;&#x2F;p&gt;
&lt;p&gt;In this post, we will cover three things:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Asset loading&lt;&#x2F;strong&gt;: how I load the sprites for my game and access them throughout the code.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Spawning troops&lt;&#x2F;strong&gt;: how I send the packets required to place troops on the board, which needs to be slightly different for each client.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Game art progress&lt;&#x2F;strong&gt;: my two new sprites for the game.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;In this post, I will also show an image of how the game looks at the moment so you can give feedback in the comments, and maybe even come up with a name for the game (it still doesn&#x27;t have one). Without further ado, let&#x27;s get into it!&lt;&#x2F;p&gt;
&lt;h3 id=&quot;asset-loading&quot;&gt;Asset loading&lt;&#x2F;h3&gt;
&lt;p&gt;I have decided that all my character sprites will be 8x pixel art tiles. The best way to handle that is to put them all in a sprite sheet and use Bevy&#x27;s &lt;code&gt;TextureAtlas&lt;&#x2F;code&gt; struct and store it in a resource (&lt;code&gt;Res&lt;&#x2F;code&gt;) for our systems to use. This is done as such in the &lt;code&gt;game&#x2F;card.rs&lt;&#x2F;code&gt; file:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #E1E4E8; background-color: #24292E;&quot;&gt;&lt;code data-lang=&quot;rust&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;&#x2F;&#x2F; game&#x2F;card.rs&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;pub&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;crate&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; struct&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; CardSprites&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;    pub&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;crate&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Handle&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;TextureAtlas&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;    pub&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;crate&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; HashMap&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;String&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; usize&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; load_card_sprites&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;    mut&lt;&#x2F;span&gt;&lt;span&gt; commands&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Commands&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    asset_server&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Res&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;AssetServer&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;    mut&lt;&#x2F;span&gt;&lt;span&gt; texture_atlases&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; ResMut&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Assets&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;TextureAtlas&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;&amp;gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;    let&lt;&#x2F;span&gt;&lt;span&gt; sprite_sheet&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; asset_server&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;load&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;&amp;quot;sprite_sheet.png&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;    let&lt;&#x2F;span&gt;&lt;span&gt; atlas&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; TextureAtlas&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; TextureAtlas&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;from_grid&lt;&#x2F;span&gt;&lt;span&gt;(sprite_sheet,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Vec2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;splat&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt;8&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;    let&lt;&#x2F;span&gt;&lt;span&gt; atlas_handle&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; texture_atlases&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;add&lt;&#x2F;span&gt;&lt;span&gt;(atlas);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;    let mut&lt;&#x2F;span&gt;&lt;span&gt; card_sprite_map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; HashMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;new&lt;&#x2F;span&gt;&lt;span&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    card_sprite_map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;insert&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;&amp;quot;skeleton&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;to_string&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    commands&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;insert_resource&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;CardSprites&lt;&#x2F;span&gt;&lt;span&gt;(atlas_handle, card_sprite_map));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Here, we load the sprite_sheet.png file, which is in our assets folder. We tell Bevy to parse it as a grid of 8x8 tiles. This gives us a &lt;code&gt;TextureAtlas&lt;&#x2F;code&gt;, from which we store a &lt;code&gt;Handle&lt;&#x2F;code&gt; (sort of reference struct for Bevy) into our &lt;code&gt;CardSprites&lt;&#x2F;code&gt; resource. This resource also contains a map that allows us to get the index of a character&#x27;s texture with its name. This makes it very simple to add more characters later on. In other systems that need to access these sprites, we can just add &lt;code&gt;Res&amp;lt;CardSprites&amp;gt;&lt;&#x2F;code&gt; to the function arguments. That is very helpful, as we will see later on.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;spawning-troops&quot;&gt;Spawning troops&lt;&#x2F;h3&gt;
&lt;p&gt;Now for the interesting part. We can finally start putting some stuff on the game board! To do this, we first have to go into the server side and code a way for it to send spawning packets to the clients.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #E1E4E8; background-color: #24292E;&quot;&gt;&lt;code data-lang=&quot;rust&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;&#x2F;&#x2F; net&#x2F;packets.rs&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;pub fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; spawn_troop&lt;&#x2F;span&gt;&lt;span&gt;(card&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;: &amp;amp;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Card&lt;&#x2F;span&gt;&lt;span&gt;, x_pos&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; i32&lt;&#x2F;span&gt;&lt;span&gt;, y_pos&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; i32&lt;&#x2F;span&gt;&lt;span&gt;, flip_board&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; bool&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; -&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Packet&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;        let mut&lt;&#x2F;span&gt;&lt;span&gt; json&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; serde_json&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;from_str&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;            r#&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;            {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;                &amp;quot;packet-type&amp;quot;: &amp;quot;spawn-card&amp;quot;        &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;            }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;        &amp;quot;#&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        )&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;        .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;        if let&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Object&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;ref mut&lt;&#x2F;span&gt;&lt;span&gt; map)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; json {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;            let&lt;&#x2F;span&gt;&lt;span&gt; card_entity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; CardEntity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;new&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;                card,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;                if&lt;&#x2F;span&gt;&lt;span&gt; flip_board {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt; 4&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; -&lt;&#x2F;span&gt;&lt;span&gt; x_pos }&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; else&lt;&#x2F;span&gt;&lt;span&gt; { x_pos },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;                if&lt;&#x2F;span&gt;&lt;span&gt; flip_board {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt; 8&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; -&lt;&#x2F;span&gt;&lt;span&gt; y_pos }&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; else&lt;&#x2F;span&gt;&lt;span&gt; { y_pos },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;            );&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;            map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;insert&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;                &amp;quot;troop&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;to_string&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;                serde_json&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;to_value&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;&amp;amp;&lt;&#x2F;span&gt;&lt;span&gt;card_entity)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;            );&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;        Packet&lt;&#x2F;span&gt;&lt;span&gt; { data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; json }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is mostly some simple JSON object creation. However, notice there is an argument called &lt;code&gt;flip_board&lt;&#x2F;code&gt;. If it is set to true, this boolean makes it so we flip the x and y positions of the troop on the board (it&#x27;s a 5x9 board, that&#x27;s why there&#x27;s the 4 and the 8). This is necessary to insure that both clients see their perspective of the game. Here is what the handling of this packet looks like on the client side:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #E1E4E8; background-color: #24292E;&quot;&gt;&lt;code data-lang=&quot;rust&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;&#x2F;&#x2F; net&#x2F;packet_handler.rs&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;&amp;quot;spawn-card&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;    if !&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;matches!&lt;&#x2F;span&gt;&lt;span&gt;(packet[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;&amp;quot;troop&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;clone&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Null&lt;&#x2F;span&gt;&lt;span&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;        let&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;            serde_json&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;from_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;CardEntity&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;(packet[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;&amp;quot;troop&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;clone&lt;&#x2F;span&gt;&lt;span&gt;());&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;        if&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;is_ok&lt;&#x2F;span&gt;&lt;span&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;            let&lt;&#x2F;span&gt;&lt;span&gt; card_entity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;            let mut&lt;&#x2F;span&gt;&lt;span&gt; sprite&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; TextureAtlasSprite&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;new&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;                card_sprites&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;                    .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt;1&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;                    .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;get&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;&amp;amp;&lt;&#x2F;span&gt;&lt;span&gt;card_entity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;card&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;get_name&lt;&#x2F;span&gt;&lt;span&gt;())&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;                    .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;                    .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;clone&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;            );&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;            sprite&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;custom_size &lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Some&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Vec2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;splat&lt;&#x2F;span&gt;&lt;span&gt;(tile_size&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; *&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt; 0.8&lt;&#x2F;span&gt;&lt;span&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;            commands&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;                .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;spawn_bundle&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;SpriteSheetBundle&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;                    sprite,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;                    texture_atlas&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; card_sprites&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt;0.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;clone&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;                    transform&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Transform&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;from_xyz&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt; 500&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;                    ..&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Default&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;default&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;                })&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;                .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;insert&lt;&#x2F;span&gt;&lt;span&gt;(card_entity);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;strong&gt;Note:&lt;&#x2F;strong&gt; we need to add &lt;code&gt;card_sprites: Res&amp;lt;CardSprites&amp;gt;,&lt;&#x2F;code&gt; to the function arguments so that we can access the sprites we loaded earlier.&lt;&#x2F;p&gt;
&lt;p&gt;Here, we get the troop data from the packet if it exists. This returns a &lt;code&gt;CardEntity&lt;&#x2F;code&gt; (if you don&#x27;t know what this is, go check out the the week 1 devlog) that we can use to spawn the new troop. Here, it is placed at the (0, 0) coordinates. This is because we have another simple system that takes care of positioning the entities. This is what is looks like if we spawn a skeleton at (0, 0).&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;dev-to-uploads.s3.amazonaws.com&#x2F;uploads&#x2F;articles&#x2F;wjswoazqscm5fyoz3e1o.png&quot; alt=&quot;sneak peak&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;h3 id=&quot;game-art-progress&quot;&gt;Game art progress&lt;&#x2F;h3&gt;
&lt;p&gt;This week, I drew two very simple sprites that I&#x27;ll hopefully  using by next week for character interactions. The blue tile is for movement and the red one is for attack.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;dev-to-uploads.s3.amazonaws.com&#x2F;uploads&#x2F;articles&#x2F;vwmouyeeymp4b9pa513p.png&quot; alt=&quot;movement&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;dev-to-uploads.s3.amazonaws.com&#x2F;uploads&#x2F;articles&#x2F;lpjsr7yen2kn4ifz78vb.png&quot; alt=&quot;attack&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;h3 id=&quot;meme-of-the-week&quot;&gt;Meme of the week&lt;&#x2F;h3&gt;
&lt;p&gt;It&#x27;s that time again!&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;dev-to-uploads.s3.amazonaws.com&#x2F;uploads&#x2F;articles&#x2F;ejb76yq97w0d2prnapq4.jpg&quot; alt=&quot;java devs be like&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Once again, if you made it this far, thank you so much for reading. As for me, I&#x27;m out, and I hope to have some good progress to show for next week!&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>8bit Duels Devlog Part 1</title>
          <pubDate>Sat, 24 Sep 2022 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://emilien.sh/projects/8bit duels/8bd-part1/</link>
          <guid>https://emilien.sh/projects/8bit duels/8bd-part1/</guid>
          <description xml:base="https://emilien.sh/projects/8bit duels/8bd-part1/">&lt;p&gt;Hello readers! Welcome to the week 1 devlog of my multiplayer game using Rust and the Bevy game engine. In this post, I will talk about my progress for the first week. This isn&#x27;t the beginning of the project, but rather my first devlog. Without further ado, let&#x27;s get into it!&lt;&#x2F;p&gt;
&lt;p&gt;Please note that you are more than welcome to comment on my code. Hints on how to make it more efficient, performant, etc. are greatly appreciated.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;packet-handling-and-bug-fixes&quot;&gt;Packet handling and bug fixes&lt;&#x2F;h2&gt;
&lt;p&gt;I have just started the networking between the client and the server, and I already have had to fix two small but impactful  and hard to find bugs (one was hiding in plain sight but I was too stupid to see it). But first, we have to take a look at how the networking in managed on both the client and server side. They both make use of threads to read and write to each other via TCP. They also use the &lt;code&gt;std::sync::Mutex&lt;&#x2F;code&gt; class wrapped in a &lt;code&gt;std::sync::Arc&lt;&#x2F;code&gt; to safely manage mutable references to the packet queues (more on them later).&lt;&#x2F;p&gt;
&lt;h4 id=&quot;client-side&quot;&gt;Client-side&lt;&#x2F;h4&gt;
&lt;h6 id=&quot;related-files&quot;&gt;Related files:&lt;&#x2F;h6&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;client&#x2F;src&#x2F;net&#x2F;mod.rs&lt;&#x2F;strong&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;client&#x2F;src&#x2F;net&#x2F;input.rs&lt;&#x2F;strong&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;client&#x2F;src&#x2F;net&#x2F;out.rs&lt;&#x2F;strong&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;client&#x2F;src&#x2F;net&#x2F;packet_handler.rs&lt;&#x2F;strong&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Because of how the Bevy engine works, to get our packets to be read by the game, we need to pass them as resources to our App (Bevy uses the &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Entity_component_system&quot;&gt;ECS&lt;&#x2F;a&gt; architectural pattern). These resources can then be used by the systems that run on every time the game updates. These resources typically are tuple structs, because Bevy needs every different resource to be a different struct. We use a &lt;code&gt;VecDeque&lt;&#x2F;code&gt; object to make a queue for the packets, because it allows us to push data to the end of the queue, and then pop the front of it. Hence, we declare the queues as&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #E1E4E8; background-color: #24292E;&quot;&gt;&lt;code data-lang=&quot;rust&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;&#x2F;&#x2F; mod.rs&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;pub&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;crate&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; struct&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; QueueIn&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;pub&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;crate&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Arc&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Mutex&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;VecDeque&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;String&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;&amp;gt;&amp;gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;pub&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;crate&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; struct&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; QueueOut&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;pub&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;crate&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Arc&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Mutex&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;VecDeque&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;String&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;&amp;gt;&amp;gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;These create a way for our &lt;code&gt;handle_packets&lt;&#x2F;code&gt; to process and write packets.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #E1E4E8; background-color: #24292E;&quot;&gt;&lt;code data-lang=&quot;rust&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;&#x2F;&#x2F; packet_handler.rs&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; handle_packets&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;    mut&lt;&#x2F;span&gt;&lt;span&gt; queue_in&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; ResMut&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;QueueIn&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;    mut&lt;&#x2F;span&gt;&lt;span&gt; queue_out&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; ResMut&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;QueueOut&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;    mut&lt;&#x2F;span&gt;&lt;span&gt; commands&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Commands&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;    mut&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; ResMut&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;State&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;GameState&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;&amp;gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;    let mut&lt;&#x2F;span&gt;&lt;span&gt; guard&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; queue_in&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt;0.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;lock&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;    if !&lt;&#x2F;span&gt;&lt;span&gt;guard&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;is_empty&lt;&#x2F;span&gt;&lt;span&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;        let&lt;&#x2F;span&gt;&lt;span&gt; packet_to_read&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; guard&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;pop_front&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;        let&lt;&#x2F;span&gt;&lt;span&gt; packet&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;            serde_json&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;from_str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Value&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;(packet_to_read&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;as_str&lt;&#x2F;span&gt;&lt;span&gt;())&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;unwrap_or&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Null&lt;&#x2F;span&gt;&lt;span&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;        if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; matches!&lt;&#x2F;span&gt;&lt;span&gt;(packet,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Object&lt;&#x2F;span&gt;&lt;span&gt;(_)) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;            if let&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;String&lt;&#x2F;span&gt;&lt;span&gt;(string)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; packet[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;&amp;quot;packet-type&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;clone&lt;&#x2F;span&gt;&lt;span&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;                match&lt;&#x2F;span&gt;&lt;span&gt; string&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;as_str&lt;&#x2F;span&gt;&lt;span&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;                    &amp;quot;server-start-game&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;                        state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;GameState&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Playing&lt;&#x2F;span&gt;&lt;span&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;                    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;                    &amp;quot;none&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;                        println!&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;&amp;quot;bad packet from the server!&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;                    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;                    &amp;amp;&lt;&#x2F;span&gt;&lt;span&gt;_&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; {}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;                }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;            }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;    drop&lt;&#x2F;span&gt;&lt;span&gt;(guard);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Here, we get the first packet (which is a &lt;code&gt;String&lt;&#x2F;code&gt; read from the TcpStream) in the queue and deserialize it using the &lt;code&gt;serde_json&lt;&#x2F;code&gt; crate. This parses it into a &lt;code&gt;Value&lt;&#x2F;code&gt; object, which represents JSON data. We then get the &lt;code&gt;&quot;packet-type&quot;&lt;&#x2F;code&gt; field from the JSON object, and if it exists, we use a simple &lt;code&gt;match&lt;&#x2F;code&gt; statement to handle the packet. You can also see that in the declaration of the function (functions represent systems in Bevy) that we tell Bevy to get the &lt;code&gt;QueueIn&lt;&#x2F;code&gt; and &lt;code&gt;QueueOut&lt;&#x2F;code&gt; resources, which is where the packets are located. We also need to &lt;code&gt;drop()&lt;&#x2F;code&gt; the &lt;code&gt;MutexGuard&lt;&#x2F;code&gt; (which gives us control over the queue) at the end of the function to let the rest of the code access it.&lt;&#x2F;p&gt;
&lt;p&gt;To read the packets from the server and to send the packets to it, we have too very basic threads that are spawned in &lt;code&gt;input.rs&lt;&#x2F;code&gt; and &lt;code&gt;out.rs&lt;&#x2F;code&gt;:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #E1E4E8; background-color: #24292E;&quot;&gt;&lt;code data-lang=&quot;rust&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;&#x2F;&#x2F;input.rs&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;pub&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;crate&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; spawn_input_thread&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    queue_in_ref&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Arc&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Mutex&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;VecDeque&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;String&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;&amp;gt;&amp;gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;    mut&lt;&#x2F;span&gt;&lt;span&gt; reader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; BufReader&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;TcpStream&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;    thread&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;spawn&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;move ||&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;        let mut&lt;&#x2F;span&gt;&lt;span&gt; buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;u8&lt;&#x2F;span&gt;&lt;span&gt;;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt; 1024&lt;&#x2F;span&gt;&lt;span&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt; 1024&lt;&#x2F;span&gt;&lt;span&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;        let mut&lt;&#x2F;span&gt;&lt;span&gt; received_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; usize&lt;&#x2F;span&gt;&lt;span&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;        loop&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;            received_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; reader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;read&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;&amp;amp;mut&lt;&#x2F;span&gt;&lt;span&gt; buffer)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;unwrap_or&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;            if&lt;&#x2F;span&gt;&lt;span&gt; received_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; &amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;                if let&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Ok&lt;&#x2F;span&gt;&lt;span&gt;(string)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; std&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;from_utf8_mut&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;&amp;amp;mut&lt;&#x2F;span&gt;&lt;span&gt; buffer) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;                    let mut&lt;&#x2F;span&gt;&lt;span&gt; guard&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; queue_in_ref&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;lock&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;                    guard&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;push_back&lt;&#x2F;span&gt;&lt;span&gt;(string&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;replace&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt;\0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt; &amp;quot;&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;to_string&lt;&#x2F;span&gt;&lt;span&gt;());&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;                    drop&lt;&#x2F;span&gt;&lt;span&gt;(guard);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;                    buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt; 1024&lt;&#x2F;span&gt;&lt;span&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;                }&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; else&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;                    println!&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;&amp;quot;Got an invalid UTF-8 packet!&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;                }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;            }&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; else&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;                break&lt;&#x2F;span&gt;&lt;span&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;            }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We are using a 1024 character buffer, which should be more than enough for the packets we will receive. One thing to note, and which caused a lot of headaches, is that we need to remove every &lt;code&gt;\0&lt;&#x2F;code&gt; (whitespace) character. This happens because the buffer is always larger than the packet, which causes it to add unnecessary characters to the end of the &lt;code&gt;String&lt;&#x2F;code&gt;. This causes &lt;code&gt;serde_json&lt;&#x2F;code&gt; to fail to parse the packet.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #E1E4E8; background-color: #24292E;&quot;&gt;&lt;code data-lang=&quot;rust&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;&#x2F;&#x2F; out.rs&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;pub&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;crate&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; spawn_output_thread&lt;&#x2F;span&gt;&lt;span&gt;(queue_out_ref&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Arc&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Mutex&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;VecDeque&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;String&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;&amp;gt;&amp;gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; mut&lt;&#x2F;span&gt;&lt;span&gt; stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; TcpStream&lt;&#x2F;span&gt;&lt;span&gt;){&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;    thread&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;spawn&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;move ||&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;        loop&lt;&#x2F;span&gt;&lt;span&gt;{&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;            let mut&lt;&#x2F;span&gt;&lt;span&gt; guard&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; queue_out_ref&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;lock&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;            if&lt;&#x2F;span&gt;&lt;span&gt; guard&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;is_empty&lt;&#x2F;span&gt;&lt;span&gt;() {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;drop&lt;&#x2F;span&gt;&lt;span&gt;(guard);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt; continue&lt;&#x2F;span&gt;&lt;span&gt;;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;            if&lt;&#x2F;span&gt;&lt;span&gt; stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;write&lt;&#x2F;span&gt;&lt;span&gt;(guard&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;pop_front&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;as_bytes&lt;&#x2F;span&gt;&lt;span&gt;())&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;is_err&lt;&#x2F;span&gt;&lt;span&gt;(){&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;                panic!&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9ECBFF;&quot;&gt;&amp;quot;Error Writing to the server!&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;            }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;            drop&lt;&#x2F;span&gt;&lt;span&gt;(guard);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h4 id=&quot;server-side&quot;&gt;Server-side.&lt;&#x2F;h4&gt;
&lt;p&gt;On the server side, we use a similar technique with the packet queues. However, here, they are managed by a &lt;code&gt;Game&lt;&#x2F;code&gt; struct which owns and operates on them (a &lt;code&gt;Game&lt;&#x2F;code&gt; represents a duel between two players). There isn&#x27;t much to see here, since it&#x27;s more of a simplified version of the client side, and we don&#x27;t use Bevy for the server.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;common-protocol&quot;&gt;Common protocol&lt;&#x2F;h4&gt;
&lt;p&gt;I haven&#x27;t started coding the gameplay yet, but I&#x27;ve established a way to communicate the &lt;code&gt;Card&lt;&#x2F;code&gt; (or Troop, haven&#x27;t decided on the name) data over the network. On both the client and the server, we have a &lt;code&gt;game&lt;&#x2F;code&gt; module, which contains the file &lt;code&gt;card.rs&lt;&#x2F;code&gt;. In this file, we define the structs that represent our &lt;code&gt;Card&lt;&#x2F;code&gt; data:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #E1E4E8; background-color: #24292E;&quot;&gt;&lt;code data-lang=&quot;rust&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #6A737D;&quot;&gt;&#x2F;&#x2F; card.rs&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;#[derive(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Serialize&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Deserialize&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Clone&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Debug&lt;&#x2F;span&gt;&lt;span&gt;)]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;pub struct&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Card&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; String&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    type_&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; CardType&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    hp&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; f32&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    attack&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; f32&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    cost&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; i32&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    abilities&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Vec&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;CardAbility&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;#[derive(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Serialize&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Deserialize&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Clone&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Debug&lt;&#x2F;span&gt;&lt;span&gt;)]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;enum&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; CardType&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt;    TROOP&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt;    SPELL&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #79B8FF;&quot;&gt;    BUILDING&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;#[derive(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Serialize&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Deserialize&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Clone&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Debug&lt;&#x2F;span&gt;&lt;span&gt;)]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;pub struct&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; CardEntity&lt;&#x2F;span&gt;&lt;span&gt;{&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    card&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Card&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    current_hp&lt;&#x2F;span&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; i32&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;} &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;#[derive(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;Serialize&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Deserialize&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Clone&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; Debug&lt;&#x2F;span&gt;&lt;span&gt;)]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #F97583;&quot;&gt;enum&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt; CardAbility&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;    ProduceGold&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #B392F0;&quot;&gt;i32&lt;&#x2F;span&gt;&lt;span&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;As you can see, we have two &lt;code&gt;Card&lt;&#x2F;code&gt; structs and two enums. The &lt;code&gt;Card&lt;&#x2F;code&gt; struct defines the troops&#x27; stats, including their abilities, which are defined in the &lt;code&gt;CardAbility&lt;&#x2F;code&gt; enum (more abilities will be added later). This will be useful when we need to code the game logic and check a troop&#x27;s properties. The &lt;code&gt;CardType&lt;&#x2F;code&gt; struct does not yet serve a specific purpose, but I still included it. Finally, the &lt;code&gt;CardEntity&lt;&#x2F;code&gt; struct represents a troop that is on the game board. It needs an additional hp (health points) property.&lt;&#x2F;p&gt;
&lt;p&gt;That concludes the brief coding progress progress made during this week.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;game-art-progress&quot;&gt;Game art progress&lt;&#x2F;h4&gt;
&lt;p&gt;I&#x27;ve finally decided on my color palette, and made this simple 8x skeleton pixel art, which I hope will be in the game at some point. I&#x27;m truly a beginner when it comes to art, however.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;dev-to-uploads.s3.amazonaws.com&#x2F;uploads&#x2F;articles&#x2F;dlectqe8cjh7k3bopxer.png&quot; alt=&quot;skelly&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;h4 id=&quot;meme-of-the-week&quot;&gt;Meme of the week&lt;&#x2F;h4&gt;
&lt;p&gt;It&#x27;s time for the meme of the week:
&lt;img src=&quot;https:&#x2F;&#x2F;dev-to-uploads.s3.amazonaws.com&#x2F;uploads&#x2F;articles&#x2F;qzaxb5orjql1hbh05p79.jpg&quot; alt=&quot;meme&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;h4 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h4&gt;
&lt;p&gt;If you made it this far, thank you very much for reading. This has been the week #1 of my multiplayer game devlog. I hope to continue this series and post updates every week.&lt;&#x2F;p&gt;
</description>
      </item>
      <item>
          <title>8bit Duels Devlog Intro</title>
          <pubDate>Sat, 17 Sep 2022 00:00:00 +0000</pubDate>
          <author>Unknown</author>
          <link>https://emilien.sh/projects/8bit duels/8bd-intro/</link>
          <guid>https://emilien.sh/projects/8bit duels/8bd-intro/</guid>
          <description xml:base="https://emilien.sh/projects/8bit duels/8bd-intro/">&lt;p&gt;Hello readers! This is a short post introducing my first blog series, where I will document my process creating a multiplayer turn-based game. The game is not named yet.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;below-is-what-i-ll-explore-in-this-post&quot;&gt;Below is what I&#x27;ll explore in this post:&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;What I&#x27;m making: in this section, I&#x27;ll tell a bit more about what kind of game I&#x27;m making as well as what are my expectations and goals for this project.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;Language and tools: I will cover the technology stack behind my game. This includes the programming language and the game engine as well as how the game will work. I will also cover the code editor I&#x27;m using.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;My schedule: I&#x27;ll explain briefly what my expectations are regarding post frequency.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;The content. I&#x27;ll detail what my posts will include.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Without any further ado, let&#x27;s get started!&lt;&#x2F;p&gt;
&lt;h2 id=&quot;what-i-m-making&quot;&gt;What I&#x27;m making&lt;&#x2F;h2&gt;
&lt;p&gt;I&#x27;m making a multiplayer turn-based game. The game is inspired by chess, because you will be able to move your troops across the board, but it is more heavily inspired by Clash Mini, a game from Supercell (&lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;clash.com&quot;&gt;link to the clash website&lt;&#x2F;a&gt;). With this project, I aim to learn more about game development. I also hope to discover the wonderful (or rather awful) world of networking and all the bugs that will come with it. There is no deadline for the game, as progress is very slow and inconsistent. In the end, I hope to make the code open source, depending on how proud of it I am 😅.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;what-i-m-using&quot;&gt;What I&#x27;m using&lt;&#x2F;h2&gt;
&lt;p&gt;I&#x27;m using Rust for this project, along with the Bevy game engine (an amazing open source ECS game engine that you can find &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;bevyengine.org&quot;&gt;here&lt;&#x2F;a&gt;). I am currently coding a server from scratch using, you guessed it, Rust. Currently, there is only one server for all the clients, but this game is more of a proof-of-concept than a game I consider will actually get a player base. However, things are subject to change in the future. To edit code, I use Vim (which I&#x27;ve just started using but already adore) with Rust-Analyzer and coc.nvim, which are a must for Rust development.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;my-schedule&quot;&gt;My schedule&lt;&#x2F;h2&gt;
&lt;p&gt;As mentioned before, progress on the game is very slow, as it is only a side project and is not on my list of priorities. I do plan on making a post per week regarding the game, though this is subject to change. These posts will come during the weekend, but the schedule is subject to change and I may of course miss some weekly posts. This is more of a way to document my game development experience instead of a serious content series. However, I will appreciate any comments and interaction if you, the reader, is interested.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;my-content&quot;&gt;My content&lt;&#x2F;h2&gt;
&lt;p&gt;In my weekly posts, I plan to cover my weekly progress on my game, as well as a dive into some of the code. I will also show small sneak peaks in the form of images or videos. Finally, I will try to include a programming related meme that I made in each of my posts. I usually also post these on Reddit &lt;a rel=&quot;external&quot; href=&quot;https:&#x2F;&#x2F;www.reddit.com&#x2F;r&#x2F;ProgrammerHumor&#x2F;&quot;&gt;here&lt;&#x2F;a&gt;. This is this post&#x27;s one:
&lt;img src=&quot;https:&#x2F;&#x2F;dev-to-uploads.s3.amazonaws.com&#x2F;uploads&#x2F;articles&#x2F;abl6whibzuuwm9hvql6y.jpg&quot; alt=&quot;Modal editing&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;That about wraps up my first ever blog post! Thank you for reading, and I will see you in the next one!&lt;&#x2F;p&gt;
</description>
      </item>
    </channel>
</rss>
