<p>I am going into this series with nearly no knowledge of the <em>Ahsoka Tano</em> character, nor any other <em>Star Wars</em> lore outside of the movies and a few live-action shows.</p>
<blockquote>
<p>The first in a series of posts on <a href="/series/star-wars-commentary">'My Thoughts on <em>Ahsoka</em>'</a> and other <em>Star Wars</em> series. A new thread after each season!</p>
</blockquote>
<h2>Part One: Master and Apprentice</h2>
<ul>
<li>"I'm calling their bluff." I like this captain! "Signal them to come aboard." You fool - I hate you.</li>
<li>I'm getting strong Jonathan Frakes fibes from Baylan.</li>
<li>I appreciate that very early in the show, we learn exactly how to pronounce "Ahsoka".</li>
<li>Requisite epic green-screen special effects set with the cloaked protagonist seeking out something underground.</li>
<li>This puzzle is straight out of a video game - turning pedastels, glowing success indicators, revealing the treasure, an ambush after retrieval.</li>
<li>Queue the "this is a badass protagonist, watch!"</li>
<li>Why would the self-destruct take so long and why couldn't the robots give chase while the explosives charge?</li>
<li>A little bit of exposition and then a new waypoint on the quest hub.</li>
<li>It's almost like I'm supposed to know that's a Mandalorian helmet? Or maybe a helmet that the idiots like me think is Mandalorian but true fans know what it really is?</li>
<li>Why would a member of the Sith have a braided strand of hair? It serves no practical purpose; she gains no tactical advantage having it; idleness or affection would cause its creation. It's an unnecessary and distracting character flourish. I hope there is some backstory about that braid in a future episode.</li>
<li>Are you surprised that the (ex-?)apprentice who doesn't listen to authority absconded off with the map she was told to keep in the ship? Shocking turn of events.</li>
<li>Oh snap! Anakin!!!</li>
<li>I literally fell asleep during the next 10 minutes. No idea what happened in the show. I'm sure I didn't miss anything important.</li>
<li>If it's a fancy Rubic cube, couldn't they have just had a robot work all the permutations really quickly and brute force that rock open?</li>
<li>Does anyone, and I mean <em>anyone</em>, actually believe that Sabine is dead?</li>
</ul>
<h2>Part Two: Toil and Trouble</h2>
<p>Reflecting back on the first episode, why does it take an old, encoded map, buried in an ancient puzzle, to find the location of a recently exiled Imperial leader? The protagonists aren't searching for some long-hidden treasure or some old-god in hiding. These settings aren't congruous with the reality of the modern world they actually live in.</p>
<ul>
<li>The easiest story to tell in sci-fantasy is to say some ancient civilization built a thing and somehow no one else knows about it but the antagonist using the device.</li>
<li>As Ahsoka's ship lands on another planet, I am reminded how good Star Wars is at portraying the large and vast planets and worlds that its character inhabit - even if the stories keep coming down to a handful of people that decide the outcome of all the key conflicts.</li>
<li>The cut to a random dude standing at a control panel of some kind, and he has... maybe 10 buttons he could push. This is what Star Wars is so absolutely terrible at - with all these advancements in androids, spaceships, AI, and they haven't developed a functional control panel with labels and descriptions and utility?!</li>
<li>Well that was a really bland episode. On to the next one, I guess.</li>
</ul>
<h2>Part Three: Time to Fly</h2>
<ul>
<li>If Anakin was too old to start training when he was a little boy, how has Sabine not just aged out of the program? Why all of these inconsistencies in a vast crazy world?!</li>
<li>Well I'm glad Huyang made that same frickin' point!</li>
<li>Why were these six craft so far away from the planet? In the vast expanse of the solar system, they just happened to be in an area behind where Ahsoka dropped out of hyperspace?</li>
<li>She put on that suit really damn fast - like Clark Kent in a phone booth fast.</li>
<li>Flying whales, eh? It certainly tracks with Star Wars' creature creativity.</li>
<li>"Ah yes, standard operating procedure." I feel the same way, Huyang.</li>
<li>Remember when Darth Vader could detect Luke from half an orbit away - how powerful does each Force user need to be to sense the other?</li>
<li>How is a minute or two enough time to confidentally turn power back on?</li>
</ul>
<p>Another bland episode; maybe next one will give us something unique to be excited about.</p>
<h2>Part Four: Fallen Jedi</h2>
<ul>
<li>When they got to the system, their transmissions were jammed. Why would bringing comms back up have any different effect on their ability to communicate?</li>
<li>With all this talk of Thran, there's been no indication - even apocryphal - about why his return would effect so much change.</li>
<li>Removal of cloaks is a good touch - I am forever reminded of Edna's "no capes!" edict.</li>
<li>I think it would have been much cooler if the ring ship had sucked them all into its hyperspace jump and now we're in this Star Trek Voyager / Stargate Universe situation halfway across the universe.</li>
<li>Oh Anakin... blah.</li>
</ul>


Ahsoka: Season One

<p>Bullet-pointed ramblings about <em>The Mandalorian</em> might be my favorite part of having a <em>Disney+</em> subscription. There's no real point about all this other than that I'm having fun doing it. There are spoilers, but I don't care; this is best understood if you have already watched the season.</p>
<blockquote>
<p>The third in a series of posts on <a href="/series/star-wars-commentary">'My Thoughts on <em>The Mandalorian</em>'</a> and other <em>Star Wars</em> series. A new thread after each season!</p>
</blockquote>
<h2>Chapter 17: The Apostle, err Apostil, no wait Apostate!</h2>
<ul>
<li><em>Last time on</em>, only it was in a different series, so... um... <a href="/posts/2022/the-book-of-boba-fett-season-1">go watch that</a>, then come back here.</li>
<li>Do IRL blacksmiths get chubbies watching these forging scenes or do they groan in frustration at the inaccuracies?</li>
<li>Giant crocodiles are so damn annoying. But also delicious!</li>
<li>The toot when deus-ex-Mando appears is just perfect sound editing. This <a href="https://www.emmys.com/shows/mandalorian#awards">show needs an Emmy</a> just for that.</li>
<li>I love a good <a href="https://rpgmuseum.fandom.com/wiki/Rules_lawyer">rules lawyer</a>.</li>
<li>'Hey... who did the makeup and costumes for Pirates of the Carribean - can we get them for an episode to do up a couple aliens?'</li>
<li>Sure - "respectable and not to be trifled with"; the humiliated foe definitely won't come back with more friends and cause havoc.</li>
<li>"That's using your head." Some writer was really proud of that line.</li>
<li>Pirates?! Shocking!! Who could have possibly seen this coming?</li>
<li>Katee Sackhoff is always a win; however brief, I'm glad for the appearance.</li>
</ul>
<h2>Chapter 18: The Maybe This Show Isn't Terrible of Mandalore</h2>
<p>I am starting to appreciate the narrative that this season is going about. The Mandalorian is on the grand quest, which we all think is pretty stupid (and maybe he does, too), but it is clearly important to him to be an accepted member of his tribe. At the same time, we are getting this training in <em>The Way of the Mandalorian</em>; not too dissimilar in how we, the audience, have been taught <em>The Way of the Jedi</em> over the decades. This season has a lot of potential and I hope that it doesn't squander this good opening.</p>
<ul>
<li>It's a throwaway line about the pressurized helment and Grogu getting into his pod, and I am glad it didn't get cut; I appreciate the little details.</li>
<li>If an audience member hadn't seen <em>The Book of Boba Fett</em>, they would be really confused about why he was struggling to use the Dark Saber; they should have referenced that in the Previously On segment for this episode.</li>
<li>Well that's a really fucking creepy droid / biological hybrid thing!</li>
<li>Does Bo-Katan just spend all day in her armor brooding on her throne? Or did they only have the budget for one set piece and one day's worth of filming for all her scenes for the season?</li>
<li>Okay, so I paused after the Bo-Katan rescue fight. The way I understand it, if the Dark Saber can only be rightly won in combat, and that bug-machine stole it from Mando, then it's now officially hers to wield and rule with? Let's see what loophole I missed.</li>
<li>Wait?! He just pockets the Dark Saber and no one says anything about it?</li>
<li>If saving his life once forever puts him in her debt, what does saving his life twice entail?</li>
</ul>
<h2>Chapter 19: The Convert (Are they talking about me?)</h2>
<ul>
<li>When I have to deliberately stop remind myself to pause the show at the title card and make a comment here, I guess that means the episode is going well so far.</li>
<li>"Empire, Rebels, New Republic, I can't keep track" - I feel you, dude.</li>
<li>The scientist scene has strong "this guy is going to die" vibes; which quickly turned into strong "she a mole" vibes.</li>
<li>What in the hell is going on with this episode? I WAS STARTING TO FEEL GOOD ABOUT THIS SHOW, YOU ASSHOLES.</li>
<li>"It was a trap" Really?! - you went there, writers? I am back to dislike-watching this show (not quite hate-watching).</li>
<li>This episode just makes me angry, now. The writers wasted a lot of time setting up the fact that there's one person who still harbors active sympathy for the Empire and for some reason killed the clone scientist. Guess what - don't care! The gunslinger, his quest, and Katee Sackhoff are the only reasons we're here. Cut out all the other bullshit, please and thank you.</li>
</ul>
<h2>Chapter 20: The Found The</h2>
<ul>
<li>
<p>They really wanted to film a Top Gun scene, didn't they?</p>
</li>
<li>
<p>They hit the engine, so I only have a bunch more flying I can do before the engine gives out at just the right time.</p>
</li>
<li>
<p>All that bullshit in the previous episode so that we can experience a quick shot of that stupid rock?</p>
</li>
<li>
<p>As far as flashback intros and outros go, I'm not upset about that one.</p>
</li>
<li>
<p>I appreciate the costume choice of having several members with mismatching armor pieces; gives a solid sense of the ragtag nature of this crew.</p>
</li>
<li>
<p>I'm glad the writers allow Bo-Katan to respect the local customs and ask questions about how to follow them.</p>
</li>
<li>
<p>Don't shoot the raptor or use your jetpack, but I'm going to climb with my bigass gun and jetpack on. That seems to make sense.</p>
</li>
<li>
<blockquote>
<p>Once upon a time, there was a mom<br>
Her name was Mrs. Pteranadon<br>
Sitting on her nest she heard scratching and said<br>
'Oh boy, my eggs are hatching'<br>
One by one her kids popped free<br>
Baby Pteranadons, one two three<br>
'I'll name you Tiny, Shiny, and Don'</p>
</blockquote>
</li>
<li>
<p>"There's always a bigger fish." I wonder if anyone has <a href="https://www.youtube.com/watch?v=bjQRTFX1Lp4">said that before</a>.</p>
</li>
<li>
<p>The rescue scene was fun and I hope that they didn't blow their SFX budget on that at the expense of the rest of the season.</p>
</li>
<li>
<p>"Mythosaur" reminds me of "unobtainium" and "handwavium" - let's just be blunt about how the audience is suppose to perceive this plot device.</p>
</li>
<li>
<p>We're back to "mildly-dislike-watching"; this hasn't fully redeemed the sins of the last episode, but it's made up some ground.</p>
</li>
</ul>
<h2>Chapter 21: Yarrrrr, Pirates</h2>
<ul>
<li>He couldn't even put the useless parts he took and put them back on the statue? Feels a bit disgraceful.</li>
<li>Getting feelings of "help me, ~~Oni-Wan Kenobi~~Captain Teva, you're my only hope."</li>
<li>"Don’t hail me again unless it’s to surrender" - but... but... Gorian hailed Greef.</li>
<li>Is that... a Tim Meadows sighting?! I shall join the fans in this delighting.</li>
<li>These pirates are the worst sort of incompentence.</li>
<li>What's with this consistent approach of lassoing a target, then beating/shooting it? If you can grappling hook it, can't you just shoot it first?!</li>
<li>These needs a "I am Heavy Weapons Guy, and this is my new weapon." oh, or "Vzzzzzt! Rahrahrahrah! Vrrrrr! Wahahahaaaaaa!"</li>
<li>Never fuck with a mama bear armorer, this is the way.</li>
<li>The show seems to have tried to portray this whole pirate incident as a one-and-done, but also hint that Pirate King Gorian Shard has a boss and probably a boss's boss.</li>
<li>If no one really cares about a glassed planet, does it really need to be "retaken", as if there is a looming battle? Isn't it more of a "fund the rebuilding" effort?</li>
<li>Taken by Mandalorians or framed the Mandalorians? dun dun dun!</li>
</ul>
<h2>Chapter 22: Guns, Lots of Guns (for Hire)</h2>
<ul>
<li>The Previously On talked about the Dark Saber, so can we get back to that little hiccup?</li>
<li>The cold open was a cute little vingiette; I do hope that it gets tied into the greater story somehow later.</li>
<li>"...taking back Mandalor" - But who <strong>has</strong> Mandalor?? I'm still trying to understand that.</li>
<li>Nothing good happens when entering a banquet with chirpy, classical, background music.</li>
<li><strong>Lizzo and Jack Black</strong>: it actually pulls me out of the scene with this cameo. Hilarious to see them, but completely distracting.</li>
<li>Katee Sackhoff's repeated look of "this can't be right" is wonderful. Why isn't there a meme of this expression?</li>
<li>Hahaha - we can't have weapons, but since weapons are part of your religion, then you get to carry the weapons and pewpew all the things.</li>
<li><strong>Christopher Lloyd</strong>? This 'guns for hire' seems to be more like 'cameos for hire'.</li>
<li>This side-quest of theirs feels like it's pulled directly from a video game.
<ol>
<li>Go talk to this person.</li>
<li>Initiate dialog, ignore most of what he says, wait for quest waypoint to update.</li>
<li>Go to new area and stumble around until you find the correct triggering action.</li>
<li>Get updated quest waypoint; travel there.</li>
<li>Interrogate another NPC, triggering a chase event.</li>
<li>Catch up to fleeing object and defeat it in battle. Collect loot and trigger next waypoint.</li>
<li>Quest plot twist dialog.</li>
<li>Surprise short battle to keep player enagaged.</li>
<li>Random backstory that players will ignore all the details of, eventually leading to a waypoint update.</li>
<li>Confront the true antagonist of the quest chain.</li>
<li>Head back to original quest giver to close things out and receive that sweet loot.</li>
<li>Go back to main quest line.</li>
</ol>
</li>
<li>I know I may sometimes fanboi on Katee Sackhoff (yes, it's her whole name, every time) - she adds more depth to the character than any other actor does to any other character in this show.</li>
<li>I FUCKING CALLED IT!!! I was right all along about the dark saber shenanigan. I feel better now.</li>
</ul>
<h2>Chapter 23: Tinker, Tailor, Soldier, Spy</h2>
<ul>
<li>So many pointless guards just standing there, doing nothing.</li>
<li>Grand Admiral Thrawn... cool... another random person that I guess I'm supposed to know? And what kind of a codename is "Project Necromancer"?</li>
<li>Post "Long Live the Empire!", I expected a "now how do I hang up on this call, again?", in true Zoom fashion.</li>
<li>How does the city not have sensors to say a vessel is approaching long before it starts hovering over the city?</li>
<li>Kids are the worst.</li>
<li>Bo-Katan, Din Djarin, Grogu, and The Armorer - that's quite the Mandalorian VIP ship.</li>
<li>Falling out of a ship and landing gracefully using a rocket pack might be on my list of life goals.</li>
<li>How have we gotten into hand-to-hand combat and there's no dark saber action?!</li>
<li>I expected an ambush, but I didn't expect Din Djarin to be isolated as a part of it.</li>
<li>"Next generation dark trooper suit"... /sigh... naming things is hard. I get it.</li>
<li>The death scene needed a good final one-liner. Paz Vizsla deserved at least that much and I'm a little surprised that Jon Favreau's ego let him get killed off without a good sign off.</li>
</ul>
<h2>Chapter 24: The Return of the Aimless Plot</h2>
<ul>
<li>A 42 minute episode and they use the first three minutes on the disappointing recap.</li>
<li>In a previous episode, we saw that the jetpacks have a limited range when flying at high speeds while traversing the canyon. How can the jetpack, going full blast, make it all the way into space? This seems like a terrible oversite.</li>
<li>Din Djarin is a prize capture and they leave just two peons to escort him? Even if there's internal tracking sensors, it seems like a waste of guards. Either let him run free and save the two lackey's lives or send more guards to escort and keep him contained.</li>
<li>Jetpacks sure make ship-to-ship transfers a whole lot easier! That scene was a nice touch.</li>
<li>No really?! How much jetpack fuel do they have??</li>
<li>The Armorer charging in with hammer and wrench is hot.</li>
<li>Did they learn nothing from the last ambush? Going after the primary antagonist, <em>in his private lair</em>, is always going to lead to bad things.</li>
<li>The Din Djarin vs red suits really needed better gun-fu fight choregraphy. Having recently rewatched the <em>John Wick</em> series, I can only dream of how awesome that fight would have been.</li>
<li>He has a super suit and they didn't show a corpse. What are the odds that Moff Gideon isn't actually dead?</li>
<li>I understand the whole thing with not taking off his helmet for anyone, but isn't he allowed to take off the armor on his day off?</li>
</ul>
<h2>What comes next?</h2>
<p>It seems there was a nice little bow tied around this series, even if it di wander a fair amount from episode to episode. I don't remember exactly how I felt about the previous two seasons as a distinct set of episodes. Which I am taking to mean that I probably felt the same way at the end of those as I do now. The story wasn't super compelling, but the show had glimpses of promise. The plot was loose and wandering and felt very trope-formulaic. I'll still be back next season, hate-watching and bullet-point ranting.</p>


The Mandalorian: Season Three - All The Rants

<p>I have left the Vue world and embarked on new adventure in learning how to work with React. My first project was to rebuild this website using <a href="https://nextjs.org/">Next.js</a>, keeping <a href="https://tailwindcss.com">Tailwind</a>, <a href="https://fontawesome.com/">Font Awesome</a>, and <a href="https://rovaninet">Netlify</a>. Recognizing that I will probably be continuing to rebuild the front-end, I decided to split out the blog posts into their <a href="https://github.com/drovani/rovaninet-posts">own repo</a> and use <code>git submodule</code> to pull the files into this project. I'm particularly excited about this feature.</p>
<p>There are a couple of <a href="/side-projects">side projects</a> that I have in mind to add some experience with React.</p>
<p>Welcome to the new codebase for <a href="https://rovani.net">Rovani's Sandbox</a>.</p>


Next.js Now Powers Rovani.net

<p>This might be the least appetizing show so far in this extended run of <em>Star Wars</em> shows. It's the life and times of a has-been character, where we already know his fate and the fate of all the important characters of the show. When will the extended universe get back to telling unique stories? In the meantime, maybe you'll enjoy another running list of random thoughts I had while watching the show.</p>
<blockquote>
<p>The first in a series of posts on <a href="/series/star-wars-commentary">'My Thoughts on <em>Obi-Wan Kenobi</em>'</a> and other <em>Star Wars</em> series. A new thread after each season!</p>
</blockquote>
<h2>Part 1</h2>
<ul>
<li>They do a great job of reminding me how absolutely awful the prequel trilogy was; how Anakin was an obvious monster and how Padmé's blindness to it was completely forced.</li>
<li>"Okay, so let's open with an massive Jedi vs Storm Troopers battle. We've not done that in a while!"</li>
<li>I'm so fucking sick of this planet. There are supposedly so many worlds out there, why do we keep coming back to this sand covered hellhole dump.</li>
<li>We are four characters into this show and I'm already spending more eyeballs time on Twitter and coding tutorials than this episode.</li>
<li>Oh, snap! Little girl puts a bully in his place and gets chided for it. Isn't life great?</li>
<li>This entire episode could have been a Star Wars scrolling text intro.</li>
</ul>
<h2>Part II</h2>
<ul>
<li>In "Obi-Wan The Musical", the Stormtroopers get to sing "move bitch, get out the way".</li>
<li>This is probably the best surprise casting in a Star Wars show, yet.</li>
<li>Did you notice how many "7" glyphs there are in the various signs and posters? Or maybe I noticed two and now it's confirmation bias.</li>
<li>The hubris of evil bosses trying to put their overly ambitious underlings in their places by simple verbal berating, only to be stabbed in their back/stomach is a ridiculous trope. Does Star Wars do much of anything that is original, anymore?</li>
</ul>
<h2>Part III</h2>
<ul>
<li>Why would an automated cargo ship have a pressurized atmosphere?</li>
<li>Stormtroopers are so expendable that it's not even suspenseful when they come up against the protagonist.</li>
<li>Just knowing that Obi-Wan and Darth Vader still have to fight in <em>A New Hope</em> takes a lot of suspense out of this chase scene. Neither of these characters can be physically damaged, because it would break canon.</li>
<li>Classic "hit the steam pipe" escape.</li>
<li>I'm still not sure what we're supposed to be getting out of this series. Obi-Wan is an untrusting, whining, curmudgeon. Didn't we kinda know that during <em>A New Hope</em>? And Anakin/Darth Vader is consumed with his quest for revenge - <strong>also not new</strong>.</li>
</ul>
<h2>Part IV</h2>
<ul>
<li>It's a key base, located in Vader's own solar system - but some low/mid-level officer from some other random system thinks she can just waltz right it? How terrible are the Empire's security protocols that this ship doesn't need any kind of preclearance to even arrive in the system?</li>
<li>Oh, so you can land your ship, make up some bullshit about "classified" and keep on walking?</li>
<li>Why get into the water without bringing flippers? At least make your swim a <em>little</em> easier.</li>
<li>She just left her communicator <em>with the sound on</em> at her station?!</li>
<li>SO SUSPENSEFUL!! There are Stormtroopers coming! #notsuspenseful</li>
<li>"I just found the secure sector." Good thing this key I have lets me right in.</li>
<li>Obi-Wan is starting to get his mojo back, eh?</li>
<li>No water made it through that door? And the Stormtroopers died instantly? How do these obvious errors make it through production?</li>
<li>Again - a key base, and no air defenses or orbiting patrols?</li>
<li>Throwing a battery/heavy object at the ship might have been the best use of a force power this whole series.</li>
<li>I'm curious how this intersteller tracker works - does it broadcast to a galactic network of spy transceivers? How secret is this network? How comprehensive is the coverage?</li>
<li>Why does reprogramming a robot mean its visual indicator turns red?</li>
</ul>
<h2>Part V</h2>
<ul>
<li>This is probably the first enjoyable episode of the series. There's some real character development.</li>
<li>She gets a win for "into the breach" command, I'll give her that.</li>
<li>The unfortunate consequence of introducing secondary characters into shows/movies earlier in a timeline is that the audience knows the main characters aren't going to die which means the secondary characters are completely disposable. There's no suspense in their survival.</li>
<li>"You're going to die." No, no he's not. And she won't kill Vader.</li>
<li>How come there aren't ships hovering over those exit doors? It's not like it's a small hatch that's hard to see.</li>
<li>Why scream right as you're about to swing when you could have just turned on the lightsaber while it's pointed right at his back? And again, this isn't a "who is going to win?" dramatic fight. It's just a question of whether Vader decides to keep Third Sister alive; which he won't.</li>
</ul>
<h2>Part VI</h2>
<ul>
<li>This fucking planet again?</li>
<li>How does she recover from a fatal stabbing to the gut, disavowed by the Empire, on a planet without resources for her - and get to that desert hellhole seemingly instantly?</li>
<li>Why couldn't Vader just follow Kenobi in his own ship and leave the destroyer to keep chasing the refugees?</li>
<li>Another fight where we know who can and can't die. The only question is how the writers are going to get out of this.</li>
<li>And yet another battle sequence where the audience already knows that Luke, the uncle, and the aunt can't die.</li>
<li>If Obi-Wan truly meant to win the fight and kill Vader, why didn't he keep pressing his advantage? Oh right - because Vader isn't allowed to die for another 15 (or so) years.</li>
<li>If Obi-Wan acknowledges that Anakin is dead, isn't it his duty as a Jedi to defeat the Sith apprentice?</li>
<li>So it's okay to slaughter an unknown number of Jedi sympathizers in a quest to get close to Vader to revenge kill him, and then all is forgiven because you didn't murder his young son in cold blood.</li>
</ul>


Obi-Wan Kenobi: Season One - Thoughts Have I

<p>Creating a handful of components to render the data that loaded from a JSON file was covered in the <a href="/posts/2022/first-rudimentary-mercenary-components/">previous post</a>. It can feel a little defeating to just have a dump of content without any style to it. This step of the tutorial will cover implementing TailwindCSS to our project and adding some basic styling.</p>
<p><img src="/images/hsmercs-banner-varden.png" alt="No one is as pretty as Varden"></p>
<blockquote>
<p>The fourth in a series of posts on <a href="/series/hsmercs-from-scratch">'HSMercs Helper From Scratch'</a>, a tutorial for recreating <em><a href="https://hsmercs.rovani.net">HSMercs Helper</a></em>.</p>
</blockquote>
<p>The native <a href="https://tailwindcss.com/docs/guides/vite">tutorial for installing</a> Tailwind CSS with Vue 3 and Vite is straightforward and easy to follow. Most of what you'll see in this post is following the steps in that post.</p>
<pre><code>yarn add -D tailwindcss postcss autoprefixer
</code></pre>
<p><em><a href="https://postcss.org/">PostCSS</a></em> is a tool for transforming styles with JS plugins. These plugins can lint the CSS, support variables and mixins, transpile future CSS syntax, create inline images, and more. The <em><a href="https://github.com/postcss/autoprefixer">Autoprefixer</a></em> plugin parses CSS and adds vendor prefixes to CSS rules using values from <em><a href="https://caniuse.com/">Can I Use</a></em>. Together, these provide the functionality that Tailwind uses to pump out the CSS we need it to.</p>
<p>The official tutorial now instructs you to run the command <code>yarn tailwindcss init -p</code> which creates a <code>postcss.config.js</code> file for <em>PostCSS</em> configuration and a <code>tailwind.config.js</code> file for Tailwind specific configuration.</p>
<h4>postcss.config.js</h4>
<pre><code>module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
</code></pre>
<p>This tells <em>PostCSS</em> to utilize the <code>tailwindcss</code> and <code>autoprefixer</code> plugins.</p>
<h4>tailwind.config.js</h4>
<pre><code>module.exports = {
  content: ["./index.html", "./src/**/*.{vue,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
</code></pre>
<p>Additional configuration is provided to <em>TailwindCSS</em> informing it to parse the root <code>/index.html</code> file and all <code>.vue</code> and <code>.ts</code> files anywhere under the <code>src</code> folder.</p>
<h4>src/index.css</h4>
<pre><code>@tailwind base;
@tailwind components;
@tailwind utilities;
</code></pre>
<p>These three layers are where PostCSS and Autoprefixer inject the styles that Tailwind generates.</p>
<h4>src/main.ts</h4>
<pre><code>  import { createApp } from 'vue'
  import App from './App.vue'
+ import './index.css'
  import { store } from './store'
  
  
  createApp(App)
      .use(store)
      .mount('#app')
</code></pre>
<p>The main script file loads the Tailwind generates CSS file into the full app. All of the magic happens behind the scenes, so we won't go into the details on how or why this happens. We're just happy it works.</p>
<h4>src/App.vue</h4>
<pre><code>  &#x3C;template>
+   &#x3C;header class="ml-4 p-4 rounded-bl-md border-l-2 border-b-2">
+     &#x3C;div class="text-2xl font-extrabold">HSMercs Helper&#x3C;/div>
+     &#x3C;div class="font-light">A set of tools for Hearthstone Mercenaries players.&#x3C;/div>
    &#x3C;/header>
    &#x3C;Mercenaries>&#x3C;/Mercenaries>
  &#x3C;/template>
</code></pre>
<p>This applies a little styling to the header section of the app. Eventually, we will be putting navigation to different tools up there, so it is nice to give it some visual separation.</p>
<h4>src/components/Mercenaries.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;section>
+   &#x3C;h1 class="text-xl mx-8">Collectable Mercenaries&#x3C;/h1>
+   &#x3C;div class="flex flex-wrap gap-2 px-2">
      &#x3C;MercenaryCard
        v-for="(merc, mercName) in mercenaries"
        :key="mercName"
        v-bind="merc"
        >{{ mercName }}
      &#x3C;/MercenaryCard>
    &#x3C;/div>
  &#x3C;/section>
&#x3C;/template>
</code></pre>
<p>When there is a set of cards, and we don't particularly care how many are in a row, the best case is to use <code>flex</code> on the container, instructing the browser to place entries next to each other, and wrap (<code>flex-wrap</code>) onto the next line when the block element won't fit in the viewport. <code>px-2</code> means to put a small padding on the left and right side of the container and <code>gap-2</code> instructs flex to keep a small space between elements.</p>
<pre><code>yarn dev
</code></pre>
<p><img src="/images/hsmercs-mercstyled.png" alt="A little style!"></p>
<p>One of this first things I panicked on when I first installed Tailwind was that all of my text was suddenly the same size. What did I screw up?!</p>
<p>Well, fear not; this is intentional. The directive <code>@tailwind base</code> contains reset rules (called <a href="https://tailwindcss.com/docs/preflight">Preflight</a>)that clear all of the browser defaults. Since each browser has slightly different default stylying, the first thing Tailwind does is strip it all out.</p>
<h2>Style Some More Components</h2>
<p>Most of the styling is going to be inside the Mercenary Card or one of its children. We can start by throwing around a couple classes and seeing what happens. Now is a good time to experiment and see what you like. This first pass doesn't involve adding any color or images, it is strictly to improve readability of the basic content.</p>
<h4>src/components/MercenaryCard.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;div
+   class="grid grid-rows-3 w-96 rounded-md border-2 gap-y-1 pb-1"
  >
    &#x3C;div>
      &#x3C;div
+       class="flex justify-between px-2 py-1 text-white bg-gray-700"
      >
+       &#x3C;h2 class="font-bold text-xl whitespace-nowrap">
          &#x3C;slot />
        &#x3C;/h2>
      &#x3C;/div>
+     &#x3C;div class="grid grid-cols-5 justify-around place-items-center px-2">
        &#x3C;Attack :role="role" :attack="attack" />
        &#x3C;Tribe :tribe="tribe" />
        &#x3C;Health :role="role" :health="health" />
+       &#x3C;Rarity class="col-span-2" :rarity="rarity" />
      &#x3C;/div>
    &#x3C;/div>
+   &#x3C;div class="grid grid-cols-3 gap-x-1">
      &#x3C;AbilityStamp
        v-for="(ability, abilityName) in abilities"
        :key="abilityName"
        :ability="ability"
        class="rounded"
        >{{ abilityName }}
      &#x3C;/AbilityStamp>
    &#x3C;/div>
+   &#x3C;div class="grid grid-cols-3 gap-x-1">
      &#x3C;ItemStamp
        v-for="(item, itemName) in equipment"
        :key="itemName"
        :item="item"
        >{{ itemName }}
      &#x3C;/ItemStamp>
    &#x3C;/div>
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<p><strong>This right here</strong> is why I think CSS is so frickin' cool. We made a small adjustment to the CSS and BOOM, it looks so incredibly different. I get excited when I start seeing things really begin to take shape.</p>
<p>I hope you're getting excited, too.</p>
<p><img src="/images/hsmercs-mercs-level1styled.png" alt="HS Mercs - adding style to the MercenaryCard"></p>
<p>Let's do a some touch-up here and there by going into some of the components and applying a little style.</p>
<h4>src/components/AbilityStamp.vue</h4>
<pre><code>&#x3C;template>
+ &#x3C;div class="border rounded text-sm sm:text-base text-center">
    &#x3C;slot />
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<h4>src/components/Attack.vue</h4>
<pre><code>&#x3C;template>
+ &#x3C;div class="text-center font-bold w-10 h-10 text-xl p-2">
    {{ attack }}
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<h4>src/components/Health.vue</h4>
<pre><code>&#x3C;template>
+ &#x3C;div class="text-center font-bold w-10 h-10 text-xl p-2">
    {{ health }}
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<h4>src/components/ItemStamp.vue</h4>
<pre><code>&#x3C;template>
+ &#x3C;div class="border rounded text-sm sm:text-base text-center">
    &#x3C;slot />
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<h4>src/components/Tribe.vue</h4>
<pre><code>&#x3C;template>
+ &#x3C;div class="whitespace-nowrap text-center">
+   &#x3C;span class="align-middle">{{ tribe }}&#x3C;/span>
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<p>Those little touches don't add much, but they set us to for the next stage in styling, which is to start having fun with dynamic colors and images based on properties of the mercenary.</p>
<p><img src="/images/hsmercs-mercs-level2styled.png" alt="HSMercs - level 2 shaping"></p>
<h2>Time For Some Images</h2>
<p>All this grey and white and boxes is getting boring. The excitement is starting to wear off. Time to add some pictures into this. Head over to the repo for this project and download the images from the <a href="https://github.com/drovani/hsmercs-helper/tree/main/assets">"/assets/" folder</a>. It's safe to grab all of the images in that folder, but if you want to be selective, these are the ones we are going to work with first.</p>
<h4>Assets Folder</h4>
<pre><code>├── assets
│   ├── alliance-watermark.png
│   ├── caster-attack.png
│   ├── caster-health.png
│   ├── epic.png
│   ├── fighter-attack.png
│   ├── fighter-health.png
│   ├── horder-watermark.png
│   ├── legendary.png
│   ├── neutral-attack.png
│   ├── neutral-health.png
│   ├── protector-attack.png
│   ├── protector-health.png
│   ├── rare.png
</code></pre>
<p>Be sure to place the <code>assets</code> folder at the root.</p>
<h4>src/components/Attack.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;div
+   class="bg-center bg-contain bg-no-repeat text-center font-bold text-white w-10 h-10 text-xl p-2"
+   :style="{
+     'background-image': `url('/assets/${role.toLowerCase()}-attack.png')`,
+   }"
  >
    {{ attack }}
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<h4>src/components/Health.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;div
+   class="bg-center bg-contain bg-no-repeat text-center font-bold text-white w-10 h-10 text-xl p-2"
+   :style="{
+     'background-image': `url('/assets/${role.toLowerCase()}-health.png')`,
+   }"
  >
    {{ health }}
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<p>If you've left the <code>vite</code> server running, your place should be autorefreshing with the new content when you save the Vue files. If not, go ahead and start it up, now. You can see how the affect of the <code>role</code> property plays out by dynamically setting the URL of the background image.</p>
<h4>src/components/Rarity.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;div>
+   &#x3C;img
+     class="max-h-6 inline"
+     :src="`./assets/${rarity.toLowerCase()}.png`"
+     :alt="rarity"
+   />
    {{ rarity }}
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<p>Tailwind's Preflight sets the <code>img</code> to <code>display:block</code>, so we need to set it back to <code>inline</code> for this instance. The <code>max-h-6</code> is there to keep the image contained. We could also set an explicit height or width, but I prefer telling it the maximum allowed size and if the container shrinks, then the image will scale, too.</p>
<p><img src="/images/hsmercs-mercs-level2images.png" alt="HSMercs - level 2 images"></p>
<h3>Tailwind Custom Colors</h3>
<p>The next style we are going to implement is to color the border and the top bibbon of each card based on the class. Looking through Tailwind's <a href="https://tailwindcss.com/docs/customizing-colors#default-color-palette">default color palette</a>, the colors red-800, green-800, and blue-800 seem to nicely fit with the Mercenaries color palette. However, instead of having to remember which color we picked for each class, and which shade is the right one, Tailwind allows us to create custom named colors.</p>
<h4>tailwind.config.js</h4>
<pre><code>+ const colors = require("tailwindcss/colors");
  
  module.exports = {
    content: ["./index.html", "./src/**/*.{vue,ts}"],
    theme: {
      extend: {
+       colors: {
+         protector: colors.red[800],
+         fighter: colors.green[800],
+         caster: colors.blue[800],
+       },
      },
    },
    plugins: [],
  };
</code></pre>
<p>The Tailwind compiler (and the VSCode Intellisense) now know that "protector", "fighter", and "caster" are valid colors.</p>
<h4>src/components/MercenaryCard.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;div
    class="grid grid-rows-3 w-96 rounded-md border-2 gap-y-1 pb-1"
+   :class="{
+     'border-protector': role == 'Protector',
+     'border-fighter': role == 'Fighter',
+     'border-caster': role == 'Caster',
+   }"
  >
    &#x3C;div>
      &#x3C;div
        class="flex justify-between px-2 py-1 text-white bg-gray-700"
+       :class="{
+         'bg-protector': role == 'Protector',
+         'bg-fighter': role == 'Fighter',
+         'bg-caster': role == 'Caster',
+       }"
      >
        &#x3C;h2 class="font-bold text-xl whitespace-nowrap">
          &#x3C;slot />
        &#x3C;/h2>
      &#x3C;/div>
...
    &#x3C;/div>
...
  &#x3C;/div>
&#x3C;/template>
</code></pre>
<p>How cool is that?! Using the <code>role</code> prop, Vue assigns the right border and background class to use. Tailwind knows to generate the appropriate CSS class to match the colors we want.</p>
<h3>Tribe &#x26; Faction</h3>
<p>There is a concept in Mercenaries PVE where some tribes are a part of the "Alliance" faction, others are in the "Horde", and the rest are neutral or without a faction. Instead of doing a long set of logic in the <code>&#x3C;template></code> block, we'll create a <code>computed</code> property that will evaluate the faction based on the mercenary's tribe.</p>
<h4>src/components/Tribe.vue</h4>
<pre><code>  &#x3C;template>
    &#x3C;div
+     class="bg-center bg-no-repeat bg-contain h-10 whitespace-nowrap min-w-[6rem] text-center"
+     :style="{
+       'background-image': backgroundImage,
+     }"
    >
      &#x3C;span class="align-middle">{{ tribe }}&#x3C;/span>
    &#x3C;/div>
  &#x3C;/template>
  &#x3C;script setup lang="ts">
+ import { computed } from "vue";

  const props = defineProps({
    tribe: {
      type: String,
    },
  });

+ const horde = ["Blood Elf", "Goblin", "Half-Orc", "Orc", "Tauren", "Troll", "Undead"];
+ const alliance = ["Draenei", "Dwarf", "Gnome", "High Elf", "Human", "Night Elf"];
+ 
+ const faction = computed(() => {
+   return horde.find(t => t === props.tribe)
+     ? "Horde"
+     : alliance.find(t => t === props.tribe)
+     ? "Alliance"
+     : "Neutral";
+ });

+ const backgroundImage = computed((): string => {
+   if (faction.value === "Horde" || faction.value === "Alliance") {
+     return `url('/assets/${faction.value.toLowerCase()}-watermark.png')`;
+   }
+   return "unset";
+ });
  &#x3C;/script>
</code></pre>
<p>The two arrays tell us which tribes are in which factions and the <code>faction</code> computed property does a quick look-up. We then utilize that value to drive the <code>background-image</code> style for the <code>div</code>.</p>
<p><img src="/images/hsmercs-mercs-level1dynamic.png" alt="HSMercs - Round 1 Styling Complete"></p>


Adding Some Style

<p>As I watched the first two seasons of <em>The Mandalorian</em>, I had <strong><em>a lot</em></strong> of thoughts on the matter. Mostly that the show was derivative, loaded with tropes and cliches, monotonous in pacing, but with a stellar score. As <em>The Book of Boba Fett</em> was being pitched, I had a feeling that I would also have Thoughts on the Matter. In the immortal words of Rick O'Connell, "here we go again."</p>
<p><img src="/images/mummy3-here-we-go-again.gif" alt="Here we go again."></p>
<blockquote>
<p>The first in a series of posts on <a href="/series/star-wars-commentary">'My Thoughts on <em>TBoBF</em>'</a> and other <em>Star Wars</em> series. A new thread after each season!</p>
</blockquote>
<h2>Chapter 1: Stranger in a Strange Series</h2>
<ul>
<li>Talk about a bad case of heartburn.</li>
<li>Wow... such original cinematogray, a hand shooting out of the ground! First off, the impracticality of being able to shove your arm past the elbow into the air without having disturbed any other part of the ground, especially with a big-ass helmet covering your dumb noggin'.</li>
<li>I always thought the tiny t-shaped visor slot was just for show - that they actually had broad visibility in the helmet. But that shot tells me the Mandalorians really have shitty visibility.</li>
<li>How can he have such perfectly white teeth having been malnourished, dehydrated, and nearly dead for... however long it's been. Even if this was just one day - there's no way he has a porcelain grill.</li>
<li>It seems like we're being told that there are less-bad-guys (like his captors) and very-bad-guys (like these brigands that beat up a farmer and tagged his abode). Who are we rooting for again?</li>
<li>If you're the crime boss, why do you think <em>anyone</em> would keep their word; especially old bodyguards.</li>
<li>I can't even describe how uninteresting this fight scene is... how do they manage to make it so boring?</li>
<li>Space parkour ninjas! They're all the rage.</li>
<li>I get pretty pissed off, too, when someone disturbs my slumber.</li>
<li>A simple act of kindness always sparks another.</li>
</ul>
<p>At first, I thought this episode was going to be tolerable; the longer it went on, it dipped into terrible. By the time the episode was over... well, <a href="https://www.sfgate.com/culture-columns/article/The-Book-Of-Boba-Fett-Premiere-Was-The-Worst-16738851.php">Drew Magary</a> was much more eloquent about what an abysmal failure this episode was.</p>
<h2>Chapter 2: The Trying Times of Carry About Tattooine</h2>
<ul>
<li>Something that consistently bothers me about these wide shots is that shows the broad expanse of land around the characters; how small these travelers are compared to the openness around this enormous building. And yet, on the close-up shot, it looks like they just got off their speeder/wagon/horse and these last two miles of footsteps in-frame have been a leisurely stroll.</li>
<li>Already really frikkin' predictable with the threaten-the-big-monster-haha-it's-not-really-there trope.</li>
<li>Marching your prize through the square is a nice touch.</li>
<li>Boba Fett has a (supposedly) internationally reknown assissin and two generic goblin guards, with seemingly no really support otherwise. Why does he seem to think he has a whole network of goons that'll back him in a power challenge? Clearly, I don't understand these power dynamics.</li>
<li>"Bloodshed is bad for business." I need to find a way to work that into my next Ted talk.</li>
<li>Those are some impressive sniper shots, moving on a train that quick, hitting prone humanoids, and missing very few shots.</li>
<li>Now we're supposed to feel sorry for the dessert pirates because they are treating the protagonist well and one of the dead is a kid?</li>
<li>Talk about a low risk bet: "wait, wait... so for the low cost of one rifle and one stick, you'll take out that train that just sniped several of our people? haha... ok, buddy. Best of luck!"</li>
<li>The poor bartender/inn keeper: while these guys were assholes, they probably spent more money than they cost the place, and they were probably regular patrons. Now they're gonna be pissed off and take it out on the place.</li>
<li>There has been no hit at why this train is bad, why it's so important to risk all these lives to stop it, or why I should care about this heist. Did the "Motivation?" card on the storyboard just disappear?</li>
<li>Are we supposed to be drawing comparison to the "vision quest" trope, here? And did they just send a lizard up his nose, then let him wander off, tripping balls? What the actual fuck?</li>
<li>How come he doesn't get a funky mask and other acoutrimonts?</li>
</ul>
<p>It's a nice little touch to add some culture and sense of depth into the dessert raiders. This whole backstory part of the episode feels very <em>A Man Called Horse</em> or <em>Dances with Wolves</em>.</p>
<h2>Chapter 3: I Tried So Hard To Not Hate This</h2>
<p>I sat down to watch the episode without my notepad open, to see if I could enjoy the show more without task switching back and forth. Maybe if I saved all my thoughts for the end, I would have less of them in general, but they would be more meaningful because only the parts I could remember would be worth ranting about. I lasted almost 23 minutes, but it got too terrible for me to not go back and write this shit down. I don't have the full words for how bad it is.</p>
<ul>
<li>Why is Boba <em>just now</em> getting a debriefing on the current state of claimed control of the city? Shouldn't that be the first thing you do before you go out (not once, but at least twice!) and start collecting tribute?</li>
<li>Cyberpunk without goggles? Posers.</li>
<li>I still don't care about the Tuskan people. The writers haven't given me reason to care about <em>anyone</em> in this show so far.</li>
<li>The little cameo of the repair lady with her droids was a nice touch. I still don't care about anyone on Tatooine.</li>
<li>That fight scene with the kids should have never happened. The wookie had the element of surprise, so why couldn't he just open the water tank and fucking stab Boba Fett right then and there. Or shoot him with a blaster. Or lock the tank shut and cut off his air supply. Lots of options that are better than "open the tank, punch Boba, then yank him out the tank." Then the fight itself was so amatuer that I wonder if the director just told the actors "ok, fight", called in his lunch order, then came back to the scene and said "move into the room with the trap door and capture the wookie that way. The audience will love it." <strong>So fucking bad</strong></li>
<li>The Huts travel by litter. They travel really fucking slowly. How does someone not alert Boba earlier about the Huts approaching. Like "hey boss, there are two slugs approaching from town, looks like it'll take them about a week for their slaves to walk them here. Just letting you know." Nope, it's "hey boss, the Huts are here. Dunno how they just suddenly appeared at our remote fortress."</li>
<li>Danny Trejo is always a win.</li>
<li>Droid: "Excuse me, sir."
Boba: "Not now."
Droid: blahblahblah unimportant, nonurgent matters</li>
<li>Are you kidding me?! The kids have Power Ranger bikes! Just need a black and pink bike to round out the full team.</li>
<li>You know what would be great to have in a desert while chasing another vehicle? Goggles.</li>
<li>I think the most tragic part of this chase scene is the poor intern who had to go get that Jabba print made, only to see it then get broken in half. I'm sure it'll still sell for a stupid amount on ebay to some fanboi.</li>
<li>Was answering the question really so hard? What would have been bad about saying "hey, it wasn't my choice, so don't kill me - the mayor isn't here because he's talking to the Pikes right now. See - his office is empty."</li>
</ul>
<h2>Chapter 4: Boba Fett and the Chamber of Flashbacks</h2>
<p>I was so bored through this episode that I didn't even both writing anything down until the bar scene.</p>
<ul>
<li>Oh Disney+, where you can rip an alien's arm off, but you can show any blood splatter.</li>
<li>So that tune that sounds awfully like <em>The Mandalorian</em>'s theme, is supposed to tip off fans that she's talking about pulling in some more armored suits?</li>
</ul>
<p>When I first watched the scene with the Sarlacc, I kept thinking "did I miss something? I know I was bored and probably checked out, but they must have mentioned so reason why Boba thought his armor would be inside the pit, even though he used its weapons to get out and crawled out of the pit with it still on, and then had it stripped off of him in broad daylight. huh." Turns out that no, I didn't miss anything, there was just a giant, sloppy plot hole. <em>This show is so awful.</em></p>
<h2>Chapter 5: Thank God the Mandalorian Returns</h2>
<ul>
<li>I was sour on <em>The Mandalorian</em> for a while and over time it grew on me. This opening scene was easily the best scene this show has seen so far. The cool, calm, cliche swagger; the sigh of resignation that these henchmen are going to die protecting the bounty target like so many others; the self-injury caused by using a weapon he doesn't have a lot of experience with; and the reasonable statements to get through another crowd ("if you'll do me the honor of letting me pass"). Just fantastic writing, directing, and acting (by BoBF standards).</li>
<li>A Dyson ring! Fantastic sci-fi reference.</li>
<li>Can he not catch a taxi?</li>
<li>Well that shot has Judgement Day written all over it.</li>
<li>"Okay, this Boba Fett centered show just isn't working, is it. How about we do an episode of <em>The Mandalorian</em>?"</li>
<li>Deposit all your weapons, but the jetpack is fine?</li>
<li>Was this a 'lost episode' of <em>The Mandalorian</em> that the-powers-that-be decided would be great for fans to get a break from Boba? Because it worked. I'll tune in next week.</li>
</ul>
<h2>Chapter 6: From the Desert Comes Timothy Olyphant</h2>
<ul>
<li>Timothy Olyphant is always a win. Gunslinger Timothy Olyphant is a double win.</li>
<li>This seems like a very inefficient way to build a building; it also seems like cheating to build a building that looks handmade while utilizing a colony of robotic ants.</li>
<li>The kid has PTSD induced amnesia, and you're just gonna retraumatize him?</li>
<li>"Don't try; do" baaaaaaarf fanservice.</li>
<li>Apparently Cylon-cam is going to be a regular thing, now.</li>
<li>Is anyone allowed to just fly their ship into the garage and casually get out before challenged by an orge with an axe? Nobody told the doorman they were expecting friendly visitors?</li>
<li>They are building an army; we've got a wookie and a Mandalorian.</li>
<li>Timothy Olyphant (you have the say the whole name every time) could pierce beskar armor with that look.</li>
<li>Every time they repeat "The Syndicate" I get confused about which show we're in. So many shows have used this <a href="https://tvtropes.org/pmwiki/pmwiki.php/Main/TheSyndicate">trope</a> that it is tiresome.</li>
<li>Does this fancy new/old building get destroyed in an upcoming movie? I clearly wasn't paying enough attention to those movies.</li>
<li>Armor or Weapon - seems like a pretty asshole choice to force the kid to make.</li>
<li>Is Groku going to get his own series, too?</li>
<li>If Timothy Olyphant is for real dead, this show is officially the worst timeline.</li>
<li>If Jennifer Beals is for real dead, this show is most definitely officially the worst timeline.</li>
</ul>
<p>Ok, so <em>The Mandalorian</em> Season 2.5 seems to be going well enough. It's a little weird that the producers decided to pad BoBF Season 1 by splicing Mando into it, but I'm okay with getting off of Boba for a few episodes.</p>
<h2>Chapter 7: Season Finale Already?! That's Fantastic</h2>
<ul>
<li>Nothing like being a puppet who thinks he has no strings.</li>
<li>Oooh... heist-style montage explaining how the operations are progressing.</li>
<li>Boba Fett is in beskar armor, which can supposedly take the hits from those "backshooters". Why not just pop off the asshole and be done with it?</li>
<li>Why would you use hand-to-hand weapons on the wookie when you can just shoot him from multiple angles?</li>
<li>Same question with the body guards.</li>
<li>How do you write "fuck all the way off" in Star Wars-eeze?</li>
<li>Knee-cap gun?! That's something unique.</li>
<li>Oh look, the two Mandalorians are at the lowest, almost being defeated by the horde of villians. Who ever will save the day?</li>
<li>Are you surprised that Freetown came to the rescue? I'm just shocked.</li>
<li>You mean the battle just escalated with the big-evil Syndicate bringing in heavy firepower? How could we have seen that coming?</li>
<li>I will never understand how advanced machines can miss their shots. Weapon firings are all calculations which it is doing in real-time. These aren't terribly complication for the computer - so how in the hell can they have terrible aim?</li>
<li>Case in point - it <em>missed a Rancor</em>!!!</li>
<li>Strafing maneuver; well played. Something every FPS gamer knows is key to beating a slow turning turret.</li>
<li>After all the josseling and <em>that's</em> what knocks Boba off his ride.</li>
<li>There was a moment where I was really hoping that <em>The Book of Boba Fett</em> was a one-and-done novella. Kill off the dude, then let someone else take the Boba Fett mantle. But then again, they can't do that to the fans.</li>
<li>Between the Rancor and <em>Gigantosaurus</em>, there's this theme of big, loud, angries just being misunderstood.</li>
<li>Is <em>The Story of Groku</em> finally done with Tatooine? Because this is a really boring planet that the Star Wars cinematic universe keeps coming back to.</li>
</ul>


The Book of Boba Fett: Season One - A Few Thoughts

<p>In the previous step, we took the first pass at the Vuex store by creating a <code>getter</code> and a <code>mutation</code> to interact with the <code>state</code>. For the next step, we will load the data and create and initial round of components to render the data to the client.</p>
<p><img src="/images/hsmercs-banner-alexstrasza.png" alt="Alexstrasza is alphabetically first"></p>
<blockquote>
<p>The third in a series of posts on <a href="/series/hsmercs-from-scratch">'HSMercs Helper From Scratch'</a>, a tutorial for recreating <em><a href="https://hsmercs.rovani.net">HSMercs Helper</a></em>.</p>
</blockquote>
<h2>Minimum Renderable Mercenaries</h2>
<p>There are a lot of directions that we could go to get something renderable. The goal is to have as little "temporary" code that is in place just to have <em>something</em> display, which then gets deleted or overwritten later.</p>
<h4>static/mercenaries.json</h4>
<pre><code>{
    "mercenaries": {
        "Alexstrasza": {
            "role": "Protector",
            "rarity": "Legendary",
            "tribe": "Dragon",
            "attack": 7,
            "health": 76,
            "abilities": {
                "Dragon Breath": {},
                "Flame Buffet": {},
                "Dragonqueen's Gambit": {}
            },
            "equipment": {
                "Dragonflight Talisman": {},
                "Alexstrasza's Brooch": {},
                "Amulet of Swiftness": {}
            },
            "tasks": [
                {}
            ]
        }
    }
}
</code></pre>
<p>This JSON sample is a minimal view of what the entire file looks like. The complete <a href="https://raw.githubusercontent.com/drovani/hsmercs-helper/main/src/static/mercenaries.json">mercenaries.json</a> file can be found at the Github repo for the HSMercs Helper project, and I suggest you download that to the <code>src/static</code> folder. At 18,000+ lines of JSON, it is a sizable file.</p>
<h4>src/components/Mercenaries.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;section>
    &#x3C;h1>Collectable Mercenaries&#x3C;/h1>
    &#x3C;div>
      &#x3C;MercenaryCard
        v-for="(merc, mercName) in mercenaries"
        :key="mercName"
        v-bind="merc"
        >{{ mercName }}
      &#x3C;/MercenaryCard>
    &#x3C;/div>
  &#x3C;/section>
&#x3C;/template>
&#x3C;script lang="ts">
import { defineComponent } from "vue";
import { MercCollection } from "../models/mercCollection";
import mercjson from "../static/mercenaries.json";
import { SET_MERCENARIES } from "../store/types";

export default defineComponent({
  computed: {
    mercenaries(): MercCollection {
      return this.$store.getters.getMercenaries;
    },
  },
  mounted(): void {
    if (Object.keys(this.mercenaries ?? {}).length === 0) {
      this.$store.commit(SET_MERCENARIES, mercjson.mercenaries);
    }
  },
});
&#x3C;/script>
</code></pre>
<p>We have created a component that, when it is mounted, will check to see if there is data in the <code>store</code> and if not, commit a write. The computed property <code>mercenaries</code> returns an object that looks like a <code>MercCollection</code> and retrieves it from the store. The component iterates over the collection and renders a <code>MercenaryCard</code> component.</p>
<h4>tsconfig.json</h4>
<pre><code>{
    "compilerOptions": {
        "module": "CommonJS",
        "moduleResolution": "Node",
        "esModuleInterop": true,
+       "resolveJsonModule": true,
    },
    "exclude": [
        "./node_modules/",
        "./dist/"
    ]
}
</code></pre>
<p>TypeScript allows for importing modules with a '.json' extension, which is common practice in Node projects. To <a href="https://www.typescriptlang.org/tsconfig#resolveJsonModule">enable this option</a>, though, we need to update the configuration file. TypeScript's reasoning for explicitly enabling this is because it can result in memory intensive delays if the JSON file is too large or complicated. By forcing a developer to opt-in, the presumption is that the developer understands these risks.</p>
<h4>src/main.ts</h4>
<pre><code>  import { createApp } from 'vue'
  import App from './App.vue'
+ import { store } from './store'


createApp(App)
+   .use(store)
    .mount('#app')

</code></pre>
<p>While we had created the Vuex store, we haven't yet made it available to the Vue application. Popping it in like this is the easiest way to get it globally accessible. Vue and Vuex work together to make the store available as a <code>$store</code> property on every component.</p>
<h4>src/env.d.ts</h4>
<pre><code>  /// &#x3C;reference types="vite/client" />
  
+ import { DefineComponent } from 'vue'
+ import { Store } from 'vuex'
+ import { State } from './store/state'
  
  declare module '*.vue' {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
      const component: DefineComponent&#x3C;{}, {}, any>
      export default component
  }
  
+ declare module '@vue/runtime-core' {
+     interface ComponentCustomProperties {
+         $store: Store&#x3C;State>
+     }
+ }
</code></pre>
<p>This is another one of those Tooling Updates that occassionally needs to be added so TypeScript doesn't freak out whenever it sees <code>this.$store</code> in the code. All components extend the <code>ComponentCustomProperties</code> interface that Vue exposes through the <code>@vue/runtime-core</code> module. Because TypeScript allows interfaces to be extended by just redeclaring it, developers are able to describe the custom properties of components by building on this interface. Thus, we can inform TypeScript that <code>$store</code> is an instance of the <code>Store&#x3C;State></code> that we created (found in "src/store/index.ts").</p>
<h4>src/App.vue</h4>
<pre><code>  &#x3C;script setup lang="ts">
+ import Mercenaries from "./components/Mercenaries.vue";
  &#x3C;/script>
  
  &#x3C;template>
    &#x3C;header>
      &#x3C;div>HSMercs Helper&#x3C;/div>
      &#x3C;div>A set of tools for Hearthstone Mercenaries players.&#x3C;/div>
    &#x3C;/header>
+   &#x3C;Mercenaries>&#x3C;/Mercenaries>
  &#x3C;/template>
</code></pre>
<p>Now that the <code>Mercenaries</code> component has been built, the <code>App</code> component needs to be informed of it and told where to place it. And that's it!</p>
<h4>src/components/MercenaryCard.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;h2>
    &#x3C;slot />
  &#x3C;/h2>
&#x3C;/template>
&#x3C;script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    role: String,
    tribe: String,
    rarity: String,
    attack: Number,
    health: Number,
    abilities: Object,
    equipment: Object,
    tasks: Array,
  }
});
&#x3C;/script>
</code></pre>
<p>Since we already know what properties are coming with each <code>Mercenary</code>, we can create the components props right away.</p>
<pre><code>yarn test
yarn dev
</code></pre>
<p>Now is a good time to validate that everything works. We should now have a list of all of the mercenaries!</p>
<p><img src="/images/hsmercs-mercnames.png" alt="HSMercs Helper - Mercenaries, plus the names of all the mercs"></p>
<h3>Lots of New Components!</h3>
<p>It can be important to develop a common language when creating sets of components so that future developers (including yourself) know the purpose of everything that is developed. Otherwise, components may get remade as teams forget what is out there and end up recreating existing functionality.</p>
<ul>
<li><code>[Component].vue</code> is for an atomic piece of data or presentation element.</li>
<li><code>[Component]Stamp.vue</code> is a small version of a data object. It doesn't have an much information as a full details view would, but it isn't useful to stand alone.</li>
<li><code>[Component]Card.vue</code> displays a compact set of information, made up of multiple <code>Component</code> or <code>ComponentStamp</code> components.</li>
<li><code>[Component]Details.vue</code> contains an indepth display of the object, consiting of <code>Component</code>, <code>ComponentStamp</code>, and perhaps some <code>ComponentCard</code> components.</li>
</ul>
<h4>src/components/Role.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;div>
    {{ role }}
  &#x3C;/div>
&#x3C;/template>

&#x3C;script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    role: {
      type: String,
      required: true,
    },
  },
});
&#x3C;/script>
</code></pre>
<p>There are going to be a lot of components that all look extremely similar. There is a single <code>div</code> that holds the one <code>prop</code> being passed to the component. We specify the <code>type</code> of the <code>prop</code> and whether it is required. By having all of these as individual components now, we will be able to add styling, computation, and features in the future without having to refactor the parent component by extracting this information later.</p>
<h4>src/components/Tribe.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;div>
    {{ tribe }}
  &#x3C;/div>
&#x3C;/template>

&#x3C;script setup lang="ts">
defineProps({
  tribe: {
    type: String,
    required: true,
  },
});
&#x3C;/script>
</code></pre>
<h4>src/components/Rarity.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;div>
    {{ rarity }}
  &#x3C;/div>
&#x3C;/template>

&#x3C;script setup lang="ts">
defineProps({
  rarity: {
    type: String,
    require: true,
  },
});
&#x3C;/script>
</code></pre>
<h4>src/components/Attack.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;div>
    {{ attack }}
  &#x3C;/div>
&#x3C;/template>

&#x3C;script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    attack: {
      type: Number,
      required: true,
    },
    role: {
      type: String,
      default: "Neutral",
    },
  },
});
&#x3C;/script>
</code></pre>
<p>The <code>attack</code> and <code>health</code> components will also accept a <code>role</code> string <code>prop</code> because we know there will be different styling based on that value. In order to accomodate non-mercenaries (i.e. summoned minions), the <code>prop</code> comes with a default value. It is better to specify the default value in the component than expect all consumers of the component to remember to set and spell a default correctly.</p>
<h4>src/components/Health.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;div>
    {{ health }}
  &#x3C;/div>
&#x3C;/template>

&#x3C;script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    health: {
      type: Number,
      required: true,
    },
    role: {
      type: String,
      default: "Neutral",
    },
  },
});
&#x3C;/script>
</code></pre>
<h3>Stub Components</h3>
<p>The <code>ability</code> and <code>item</code> components will be the most complicated components. They have descriptions, tiers of affects, different ways equipped items affect abilities, and other features that will get added piecemeal. However, in order to get to our Minimum Renderable Mercenary, the first pass is just going to display the name of the ability and item.</p>
<h4>src/components/AbilityStamp.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;div>
    &#x3C;slot />
  &#x3C;/div>
&#x3C;/template>

&#x3C;script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    ability: {
      type: Object,
      required: true,
    },
  },
});
&#x3C;/script>
</code></pre>
<h4>src/components/ItemStamp.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;div>
    &#x3C;slot />
  &#x3C;/div>
&#x3C;/template>

&#x3C;script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    item: {
      type: Object,
      require: true,
    },
  },
});
&#x3C;/script>
</code></pre>
<h3>Displaying Mercenary Data</h3>
<p>All of the initial components have now been built. Heading back to the mercenary card component, we import each of these components and give them a place.</p>
<h4>src/components/MercenaryCard.vue</h4>
<pre><code>&#x3C;template>
  &#x3C;div>
    &#x3C;div>
      &#x3C;div>
        &#x3C;h2>
          &#x3C;slot />
        &#x3C;/h2>
        &#x3C;Role :role="role" />
      &#x3C;/div>
      &#x3C;div>
        &#x3C;Attack :role="role" :attack="attack" />
        &#x3C;Tribe v-if="tribe" :tribe="tribe" />
        &#x3C;Health :role="role" :health="health" />
        &#x3C;Rarity :rarity="rarity" />
      &#x3C;/div>
    &#x3C;/div>
    &#x3C;div>
      &#x3C;AbilityStamp
        v-for="(ability, abilityName) in abilities"
        :key="abilityName"
        :ability="ability"
        >{{ abilityName }}
      &#x3C;/AbilityStamp>
    &#x3C;/div>
    &#x3C;div>
      &#x3C;ItemStamp
        v-for="(item, itemName) in equipment"
        :key="itemName"
        :item="item"
        >{{ itemName }}
      &#x3C;/ItemStamp>
    &#x3C;/div>
  &#x3C;/div>
&#x3C;/template>
&#x3C;script lang="ts">
import { defineComponent } from "vue";
import AbilityStamp from "./Ability.vue";
import Attack from "./Attack.vue";
import Health from "./Health.vue";
import ItemStamp from "./Item.vue";
import Rarity from "./Rarity.vue";
import Role from "./Role.vue";
import Tribe from "./Tribe.vue";

export default defineComponent({
  props: {
    role: String,
    tribe: String,
    rarity: String,
    attack: Number,
    health: Number,
    abilities: Object,
    equipment: Object,
    tasks: Array,
  },
  components: {
    AbilityStamp,
    Attack,
    Health,
    ItemStamp,
    Rarity,
    Role,
    Tribe,
  },
});
&#x3C;/script>
</code></pre>
<p>Everything is in place. Save the files and start the dev server back up!</p>
<pre><code>yarn dev
</code></pre>
<p><img src="/images/hsmercs-mercprops.png" alt="HSMercs - Mercenaries and more data"></p>
<h2>Step 4: <a href="/posts/2022/adding-some-style/">Adding Some Style</a></h2>
<p>The output is boring to look at and requires a very long scroll. Let's add some styling to this project using <a href="https://tailwindcss.com/">Tailwind CSS</a>.</p>


Rovani's Sandbox

Blog Posts - Page 1

Ahsoka: Season One

The Mandalorian: Season Three - All The Rants

Next.js Now Powers Rovani.net

Obi-Wan Kenobi: Season One - Thoughts Have I

HSMercs From Scratch 4:Adding Some Style

The Book of Boba Fett: Season One - A Few Thoughts

HSMercs From Scratch 3:First Rudimentary Mercenary Components