Forem: joespaf

Magic: The Gathering Explained With JavaScript Classes

joespaf — Mon, 13 Oct 2025 06:58:43 +0000

Magic: The Gathering is a classic trading card game, with millions of players playing every day. It's a game with fantastic depth, built with systems allowing players to play in unexpected and exciting ways. In Commander, one of the most popular formats, four players fight in a free for all with 100 card decks, each of which has no repeating cards (with the notable exception of basic lands). To someone unfamiliar with Magic, this might sound like an outrageous amount of information; with up to 400 different cards between all the players, how could they possibly be expected to understand how to play? Are they supposed to simply memorize the over 27,000 Magic cards in existence? What sort of maniac would want to play a game like that?

Fortunately, Magic's cards are designed with strict parameters and formatting, allowing players to get at least a general idea of what a card does with only a glance. This formatting can be transcribed to JavaScript's classes, allowing us to describe the structure of a card, and demonstrate how each card can be read and interpreted. Following is what a top level "Card" class might look like. (For the sake of simplicity, we will ignore cards which cannot be included in a deck)

class Card {
  constructor() {
    this.name = "Card Name";
    this.type = null;
    this.subTypes = [];
    this.manaCost = null;
    this.colors = null;
    this.rulesText = "";
    this.loreText = "";
    this.keyWords = [];
    this.abilities = [];
  }
}

This is the basic structure which all Magic: The Gathering cards will follow. Not every one of those fields will be filled on every card, but those are all the attributes which are common to all types of cards. Each type can be understood as a subclass of the "Card" class. For example, we can transcribe one of the simplest card types in the game; the Land Type.

class Land extends Card {
  constructor(name, subTypes, colors, abilities) {
    super();
    this.name = name;
    this.type = "Land";
    this.subTypes = subTypes
    this.colors = colors;
    this.abilities = abilities;
  }
}

The systems of Magic apply many more rules, abilities, and conditions to each card, but this Land class allows us to create a simple Land Card. If we wanted to recreate the Plains Basic Land, we would call our Land Class as follows:

const Plains = new Land(
"Plains", // card name
["Basic", "Plains"], // types
["White"], // color identity
["Tap: Add 1 White mana"] // ability
)

/* 
  The resulting Card should look something like this:

  {
    name: "Plains",
    type: "Land",
    subTypes: [ "Basic", "Plains" ],
    colors: [ "White" ],
    rulesText = "",
    loreText = "",
    keyWords = [],
    abilities = [ "Tap: Add 1 White mana" ],
  }

*/

This newly constructed card provides us with some essential information about how it interacts with the game. This information is usually put in the same position on every card. Basic Lands are actually one of the rare examples of a card where it is common for the abilities to not be explicitly printed on the card. This is because of a rule Wizards of the Coast added that tied the ability to tap for mana to the "Basic" typing. So let's try a non-basic Land; Tranquil Expanse.

On this card, we can identify several attributes which neatly fit within our class. We have the name ("Tranquil Expanse"), the type ("Land"), some rules text ("This land enters the battlefield tapped"), an ability ("Tap: Add 1 Green or White mana"), and some lore text ("Despite the chaos ..."). Notably this card is lacking subtypes, which is common for non-basic Lands.

Another type of card is the Creature card. Creatures are among the most iconic and versatile card types in Magic: The Gathering. They represent characters, monsters, and entities that enter the battlefield and can attack your opponents or defend against their creatures. Just like Lands, Creature cards follow a predictable structure that we can extend from our base Card class.

Let’s define what a Creature subclass might look like in JavaScript:

class Creature extends Card {
  constructor(name, manaCost, colors, subTypes, power, toughness, rulesText, keyWords, abilities, loreText) {
    super();
    this.name = name;
    this.type = "Creature";
    this.subTypes = subTypes;
    this.manaCost = manaCost;
    this.colors = colors;
    this.power = power;
    this.toughness = toughness;
    this.rulesText = rulesText;
    this.keyWords = keyWords;
    this.abilities = abilities;
    this.loreText = loreText;
  }
}

This class can be used to describe most creatures in the game. We can use the card Savannah Lions for example;

const SavannahLions = new Creature(
  "Savannah Lions",
  "W", // W = 1 white mana
  ["White"],
  ["Cat"],
  2, // power
  1, // toughness
  "", // no special rules
  [], // no keywords
  [], // no abilities
  "Once they ruled the savannah. Now they scrabble for territory at the fringes of civilization."
);

In Magic, even a simple creature like Savannah Lions follows the same consistent card structure. This makes it easier for players to understand new cards. As a rule of thumb, creatures always have power and toughness, and often have keywords like "Flying", "Trample", or "First Strike"—shortcuts for specific abilities defined by the rules of the game.

If you want to learn more about the anatomy of Magic cards, this is a great source from Wizards itself.

Building a Bot With Discord.js

joespaf — Tue, 30 Sep 2025 14:02:34 +0000

A quick guide on how to build and launch a Discord bot with Discord.js

By the end of this guide, you will have a Discord bot which will be able to respond to text commands, as well as an idea of how to implement more complicated and interesting features.

Prerequisites

A machine with Node.js installed
Some familiarity with JavaScript and Node.js
A Discord account with 2FA enabled
A Discord server in which you have admin privileges

Create your application in the Developer Portal
Go to https://discord.com/developers/applications and log in.
Click New Application, give it a name, and hit Create.
In the sidebar, select Bot and then Add Bot.
Under TOKEN, click Copy—you’ll need this in a sec.
Keep your token secret. Never commit it to a public repo!
Set up your project files
In your discord-bot directory, create the following files:
config.json
index.js

Create a config.json with your bot token and a command prefix:

{
  "token": "YOUR_BOT_TOKEN_HERE",
  "prefix": "!"
}

Install and import Discord.js Run:

npm install discord.js

Then, in index.js, bring in Discord.js and your config:

const { Client, Intents } = require('discord.js');
const { token, prefix } = require('./config.json');

Initialize your client In index.js, set up a client that listens for messages:

const client = new Client({
  intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MESSAGES]
});

client.once('ready', () => {
  console.log(`Logged in as ${client.user.tag}`);
});

This logs a confirmation when your bot comes online.

Handle text commands Add a messageCreate listener to parse and respond to commands:

client.on('messageCreate', message => {
  if (!message.content.startsWith(prefix) || message.author.bot) return;

  const args = message.content
    .slice(prefix.length)
    .trim()
    .split(/ +/);
  const command = args.shift().toLowerCase();

  if (command === 'ping') {
    message.channel.send('Pong!');
  } else if (command === 'say') {
    const text = args.join(' ');
    if (!text) return message.reply('You need to tell me what to say!');
    message.channel.send(text);
  }
});

client.login(token);

Then, in your terminal start your bot:

node index.js

You should see Logged in as YourBotName in your terminal.

Invite your bot to your server
Back in the Developer Portal, go to OAuth2 → URL Generator.
Under SCOPES (the first section), check bot.
Under BOT PERMISSIONS (the second), select the permissions your bot needs. For the above code, we should only need the "Send Messages" permission.
Copy the generated URL, open it in your browser, and choose your server. Your bot will appear in your server’s member list.

Congratulations! You've now created a Discord bot!

React Native for Web Developers

joespaf — Mon, 08 Sep 2025 13:41:17 +0000

One of the libraries that new web developers quickly become familiar with is React. Its integration of HTML and JavaScript into one document can supercharge development, allowing developers to quickly and clearly block out and implement features to webpages. However, as mobile usage continues to eclipse desktop, the need for native mobile apps has become paramount. Luckily for web developers, a simple bridge between web and native development exists in React Native.

What is React Native?

"React Native brings the best parts of developing with React to native development." -React Native Docs

React Native is a library that translates the straightforward syntax of React into a native app, allowing your projects to be run seamlessly within a user's device. It avoids the hiccups of running a browser by cutting it out entirely.

No browser? How does the app render?

Instead of a browser, React Native uses the native API's of the device it is running on to display the app. This does require a number of changes from your typical React code, but much of the basic logic and structure remains the same. The most notable difference is the lack of a traditional DOM.

What replaces the DOM?

In a web app, the browser creates a DOM to represent the whole of the page, all its elements, and all attributes of those elements. In React, the DOM is populated with components, represented by HTML tags. React Native keeps the style and structure of these tags, but switches the HTML out for its own components.

HTML tags and their React Native counterparts;

<span> => <Text>
<img> => <Image>
<div> => <View>

Styling without CSS

React Native does not have a built in way to use CSS. Instead, styling is provided to components as a JavaScript object. It can be provided inline, with the declaration of the component, or the StyleSheet module can be used to provide styles to components.

Example styling

// inline
<View style={{ padding : 15 }} />

// using StyleSheet
import { StyleSheet } from 'react-native'

const styles = StyleSheet.create({
  container: {
    padding: 15
    backgroundColor: '#fff'
  }
});

<View style={styles.container} />

Navigation without a browser

One of the most significant differences between React and React Native is navigation. In a React web app, navigation is often handled with changes to the URL, which libraries like react-router take full advantage of. A native app handles displays in a fundamentally different way. Both iOS and Android phones display Screens, and they handle navigation between Screens as a stack, where a new Screen enters on top of the previous one. From a Screen, a user can go back down the stack to previous Screens.

Where does the JavaScript go?

JavaScript in React Native behaves much the same as it does in a browser environment, just with a few exceptions. Most notably, it loses access to values and APIs that the browser would provide, like document, window, and workers. Other than that, JavaScript can be used similarly to how it is used in any other React app.

Community support

React famously has countless officially supported and community maintained libraries that expand its capabilities. Similarly, React Native has a plethora of options for almost any use case.

Final Thoughts

React Native is a familiar yet powerful tool that web developers can use to apply their existing skills to app development. Its widespread usage, unopinionated framework, and community support make it invaluable for any developer looking to dip their feet into native apps.

Tapping into Mobile Design

joespaf — Mon, 02 Jun 2025 13:58:24 +0000

A quick guide on making a site mobile friendly

Over the past decade, mobile users have begun to represent more and more of the global web traffic. Mobile traffic has doubled its share, climbing from around 30% in 2015 to over 60% in 2024. With such a large share of users, it is important for developers to design their sites with special attention on compatibility and ease of use on mobile devices.

Think Vertically

Unlike desktop screens, mobile displays are narrow and vertically oriented, meaning horizontal layouts with multiple columns can become a highly unpleasant experience. A single-column design is ideal, ensuring that text, images, and other elements stack neatly without forcing users to scroll sideways or zoom in. If necessary, more columns can be included, but really shouldn't go above 2, as it can be verry difficult to include all of them without destroying the legibility of their contents.
A vertical approach also improves scannability, helping users find information quickly. Lists, short paragraphs, and distinct sections keep content concise and digestible.

Use Larger Font Sizes

Small text can be difficult to read on mobile screens, so increasing the font size does a lot to improve usability. As a general rule, body text should be at least 16px, with headlines and important information even larger.
Headers are equally crucial: they provide visual hierarchy, guiding users through sections effortlessly. By using clear, bold headers, you break up dense information into structured, easy-to-read sections. This is particularly helpful for users scanning rather than reading every word.

Optimize Touch Interactions with Pointer Events

Mobile users rely on touchscreens, making traditional mouse-based interactions (such as hover effects) ineffective. Instead of designing around hover states or precise mouse clicks, use pointer events, which are more adaptable.
Pointer events recognize touch, stylus, and mouse inputs, making interactions smoother for all users—including those using assistive technologies. This ensures buttons, links, and interactive elements respond instantly without needing a cursor.

Ensure Visually Responsive Elements

A mobile-friendly site must adapt dynamically to different screen sizes, resolutions, and orientations. This means:

Using fluid grid layouts that resize automatically.
Ensuring images are scalable and do not distort.
Testing buttons and forms to guarantee they remain usable on smaller screens. CSS media queries allow developers to define specific rules for different screen sizes. Testing responsiveness across various devices prevents common issues, such as cut-off images, unreadable text, or misplaced buttons. Implementing sliding animations can also improve how responsive a site feels. A menu or other sidebar item that slides in correspondence with the user's swipe will help them to understand where the element is coming from, as well as how to access it.

Final Thoughts

A site that isn’t optimized for mobile risks losing engagement and frustrating a large portion of users. By prioritizing vertical layouts, legible fonts, touch-based interactions, and responsive design, developers create a seamless experience tailored to modern browsing habits.
Think of mobile optimization as essential, not optional—your users will thank you for it.

Basic Git Commands

joespaf — Wed, 20 Nov 2024 23:46:28 +0000

Git repositories are files that track changes made to projects, allowing users to access alternative versions of their code. This has many useful applications, including collaborative coding, debugging, and drafting code before a final product. To be able to make use of these features, you must know what commands to call and in what order to do so.

Before you can make use of any git features, you need to give it a name for you as a user and an email to associate with your user.
Use the following commands to do so:
git config --global user.name "(insert name here)"
git config --global user.email "(insert email here)"

Now you can create a repository. Navigate to the directory containing your project and enter this command:
git init
This will create your repository, but it does not automatically fill it with the contents of the directory. To do so, you will need to stage them with the add command, which looks like this:
git add (file)
Or, if you want to add all files in the current directory:
git add --all

If you decide you don't actually want to add a file, or mistakenly added one you don't want tracked, you can use the restore command to remove it from staging. This command can also be used to restore a file to how it was in a previous commit.
git restore (file)
It can also be called with --staged in the place of (file) to remove all staged changes

Now these files are staged to be committed to the repository. You can see a list of all the files that the repository is tracking with the status command:
git status
This will also show the status of those files; whether or not they have changed since the last time they were committed.
That brings us to the commit command. This command will save the staged changes to the repository. Notably this does not overwrite any previous commits, so you can and should commit frequently. The command also takes a message to label the commit with, which should be used to describe the changes made since the last commit.
The commit command looks like:
git commit -m "(description)"

After there is at least one commit in the repository, you can use the log command to see a list of all commits, along with their messages, authors, and when they were committed.
git log

The log command also provides a hash associated to each commit, allowing you to navigate to older commits with the checkout command. You could use the entire hash, but only the first seven characters are necessary.
git checkout (hash)

Another useful feature is branching. Branching allows you to work without affecting the main codebase. This can be useful for chasing down specific bugs or problems without messing with the main branch.
To create a branch, use the following code:
git branch (branch name)
Once you've made a branch, you can navigate to it with the checkout command
git checkout (branch name)

After a branch's purpose has been fulfilled, it should be merged back into the main branch. Doing so will usually create conflicts, which you will need to go through your code and resolve.
Before you merge a branch, you need to navigate to the branch it originally split from. In this case it will be the main branch.
git checkout main
Next, you need to use the merge command with the branch name.
git merge (branch name)
After resolving all conflicts in a merge, you can stage and commit the files.
git add .
`git commit -m "merged (branch name) to main"