Units and terrain have 2-6 animation "pictures". Usually in order to animate said images with would simply use the .gif format. Nonetheless, .gif will make our units and terrain look god awful. Animating them ourselves with some quick image switching should be pretty easy to achieve.

Using .gif

Animating it ourselves

Do you see the crisp difference in the lines of the units?

We need to have an account registration page. All we need is email, username and password.

Maybe we can use Discord as our Oauth2 provider? Like when an app asks you to log in with google or facebook...

Be able to input your information correctly, typing username and password (or clicking in discord) and be able to log in correctly.

Create a home page with basic information, images and other related stuff to AW. Make an emphasis on competitive play

Create a page where the user can see the games they are currently part of, something around these lines. We don't need to include every single piece of data here, mostly a picture of the map, which players are there, etc

Use dumb data and create 1-2 template matches until real data is able to come in

Please display full characters! Lets make this look good!

Add in all terrain images/gifs to a folder in the website images. https://awbw.fandom.com/wiki/Terrain

Website needs to have 1-2 brand colors. Like lets say white and blue for example. This will impact our navbar, home page, button and so on because everything will follow the colors laid out in our brand.

Lookup the Advance Wars unit files somewhere and bring them here, we need at least/minimum: Infantry, Mech, recon, tank, artillery, medium tank. But please if possible bring all land units just in case. https://awbw.fandom.com/wiki/Units

See how the tank can't move into the water or mountain squares? Yeah our units need to respect the terrain / not be able to perfectly move. They need to be able to move and not move depending on what terrain there is, the battlefield isn't a perfectly flat place.

As it says, we need to make sure we can correctly save users registering. Maybe we could use Discord as our Oauth provider instead of us having to deal with people making passwords and stuff?

So in order to save us a big headache with all the password saving, email verification, etc etc. We can make our users use Discord or some other social media (prefer Discord) to log in. We'd save their data and we wouldn't need to worry about making sure we don't have to create all the infrastructure for user verification.

We need a constant background for the website, something simple or a pattern would work wonders. Here's an example of what AWBW uses, as you can see its the same image just being repeated.

Before someone creates a match, we should have a page to select our character, country color, CO (Commanding Officer). The CO should be displayed full art and have the country colors looking nice as well.

This is what AWBW has but I want us to use the small icons to select and the full art as display. Also show the map we are playing in!

We need two CO/Character from the same tier for our demo, I'd choose something along the lines of Adder and Jess (T4) or Sasha and Hawke (t1). We need their small square image and their full art plus whatever description of them would be good as well.

Use the standard tier list!!!

https://awbw.fandom.com/wiki/Tier_List

So basically, ignore any design frontend stuff, what I care about is simply functionality.

Create game

Create a button that allows a player to create a game. In order to access this route, the user needs to be logged in.

how to check if user is logged in?

in our server.js, we have a function called loggedIn, it cheks if the request/req being sent is Authenticated (logged in) by doing req.isAuthenticated(), if that comes out true, the user is indeed logged in. We can use this function as a middleware (meaning before we start our request, we check this function) like this:

app.get("/protectRoute",  ----> loggedIn <-----, (req, res) => {
    console.log('you accessed our route')
    res.redirect("/game")
})

Obviously the ---> <---- arrows arent meant to be there

user is logged, lets create the game!

When we create this game we are going to be sending an object to the database in a collection/folder called "startGames"

_id: amount of items in startGames + 1
players: {
   player 1: {
    _id: _id of user that just create button
    co: users' favorite CO
    armyColor" user's set color
  },
  player2: false (false because we still dont have a second player)
}
map: "causticFinale" (for now the default map is Caustic, maybe later it will change)
creationDate: "01/01/2000" (whatever the actual date is, in this format or something similar, we dont need hour and minutes)

Show startGames in page

So after we create a game, we add our item to the collection "startGames", then we visit a page like /startGames, we should make an axios.get request to the db for startGames and just console log the available items (the object shown above). It would be amazing if you can render this data into a super basic html but I understand if not possible

Join game

make a post request to some route like /joinGame that checks for a specific _id in our startGames collection and adds a second player. Test this by creating another user and join the game.

Then if thats done, express NEEDS to check there are two valid players in a match, then move/send to a new collection called "currentGames", its going to push the game with those players in it, sending the map name, and all that other data stuff. (This would also have a "gameState" object that contains the actual gameState of the game but thats something I can take care of, for now you can just do this thing)

Then DELETE the previous startGame since it already started and now we hold it in currentGames.

When the user clicks on a factory, a menu very similar to this should pop up

It only lets the user select units it can afford with their current funds and greys out other options

Create a navigation bar component for the website.

You see how here we have a regular navigation bar (on the top) and a user specific navigation bar? we need both. Take AWBW navbar as inspiration, not as a carbon copy of what you must do. For example, we need at the top a Home, Games, FAQ, our Github and discord if we make one and a login/register section.

For the user page, mostly a profile page and my games (games you are part of)

read the chess notation and render the terrain correctly. This means rendering the plains, mountains, forests, bases and so on of different maps.

So when we select a unit, and we click on an empty tile, we have a set of options. To wait, capture a building, to delete the unit in case it hasn't moved and so on. Below are some examples

Create footer with links to our github, different pages, etc. A basic footer. Make sure to put the copyright notice seen in this link that says "Advance Wars is (c) 1990-2001 Nintendo and (c) 2001 Intelligent Systems. All images are copyright their respective owners."

Maybe even double check if this would be the correct copyright notice since we will be using the character, unit and terrain designs from the original advance wars game made by Nintendo. I don't believe we have enough time/money to hire someone to create at least 2 new characters, create 20ish units and 10ish terrain tiles. But its a possibility to keep in mind if we want to avoid the Nintendo copyright notice

When player A passes their turn, player B's units should all become free/available, they should receive their income in funds, and a small animation should let us know the turn has passed/"its not player B turn"

Can use inspiration from the https://awbw.amarriner.com/ advance wars logo or create something similar to the advance wars logo. Don't get too close to copying the exact same logo but do follow close to the blue and wrench. Its okay if you have a creative/different idea, it is welcomed as well.

Be able to send and save a JSON gamestate to mongoDB and be able to pull it out too later.

Our units have movement limitations, tanks can't go through mountains or rivers but soldiers/infantry can.

Therefore, we need to make sure we can render those blue squares correctly or the user will not know how far can their tank move

Again, everytime there is an action, we must update the gamestate/json file the server has. Otherwise, if you do just one action, close your browser and then open it again, there isnt a place that saved that action/gamestate.

When an user registers, they should be set an armyColor and favoriteCO qualities plus an empty array with their currentGames. The defaults can be orangeStar and Sami for the qualities.

so we would have an object like this:

_id: the id number / 0
username: username they used to registers / "banana"
password: hashed password/ "$2a$10$JtJNY2pjVmFqvjzPcUGiH.sKeF0cQAE3CX7Ac6tLgaUqu35QegVye"
armyColor: "orangeStar"
favoriteCO: "Sami"
currentGames: []

Checking if there is a req.user/user is logged

Then we need to visit other routes and see if we can get the user. Getting the user matters because from that we can check whether to display login/register or display the username and show the account settings, logout option, etc when the user hovers over their username.

I recommend trying to use cookies, seeing if we can send a cookie with the user, this is done already in our passport session maybe? but Im not sure how easy to access it is in the frontend since there seems to be some inconsistencies with it. Otherwise, we can use local.storage as a way to store it but this isnt very safe

before login

when an user is logged

As you may know, this is a war strategy game. Units will attack each other. Therefore, when an infantry hits another infantry, lets say it deals 5 damage. But when it attacks a tank, it deals 0.5 damage. These calculations need to take into account the terrain (roads have no defensive bonuses/stars while attacking something in a city has 3 defense bonuses/stars) and unit Health (its not the same for 10 tanks to shoot than 5 tanks).

Therefore, we need to have some sort of calculation to determine how much damage do units receive and take depending on terrain, health and units involved in combat.

https://awbw.amarriner.com/damage.php

How does this work in-game?

So when we select unit A and make it attack unit B, the user needs to know how much damage it can deal and then receive before doing said action.

Here is an example of who is the attacker (left) and who is the defender (right). This means the Anti Air (left) will deal between 27% and 35% damage or between 2.7 and 3.5 which the difference between these values is mixed with terrain defenses, health and the types of units fighting. Its not a certain number because the game has a "luck/error" factor. In real life, war isn't a I shoot my tank and always hit your tank, there are misses, sometimes a soldier fatally shoots another soldier, sometimes they shoot them in the leg. This accounts for the percent difference that our units arent robots with perfect accuracy.

Be able to produce land units from land factory, air units from airport and so on. Only be able to produce units you can afford and viceversa.

Some maps are 20 by 20 (a square) some are 32 by 22 (a rectangle). Our program should be able to read our notation correctly and place the correct amount of columns and rows depending on map size.

In order for us to be able to save a game state (where units are located, whats their health, whats the players income, etc) we need a notation of sorts, what comes to mind is chess notation.

What is chess notation?

According to chess.com, Chess notation is the act of recording or writing down the moves of a chess game. Over the years various methods and ways have been used to record the moves, but they have all disappeared except for the current standard for chess notation: algebraic notation.

You see those letters and numbers? they mean chess pieces, where did they move to and so on. Its a way to save a chess game without having someone go "the white knight moved from A3 to B5 and capture a pawn" but instead "Nxb5" where N means Knight, x means it captured a piece, b5 means where it ended up moving.

So how would we implement this chess/algebraic notation

In simple terms, we can do something with objects, I don't have a concrete idea but I'm thinking that since we have a grid with terrain, we can assign unit spaces to the grid as well! Here's an example

{
    a0: { // Tile space row A column 0
      terrain: 'plains', //the terrain
      hasUnit: { // can be true or false to determine if unit is there
        unitType: 'infantry', //type of unit to display
        unitHealth: '100', //Unit current health
        unitColor: 'red', //unit color/which team is it part of
        unitStatus: 'free', // free or waited depending if unit has moved or not
      }
    }
  };

it could also be something tigther than a whole object, could be

{
    a0: 'p00100rf'
  };

What the heck does this mean?
p = plains, the terrain its in.
00 = infantry (we'd have unit ID so 00 infantry, 01 mech, 02 recon, etc)
100 = current health status
r = red, team color
f = free

I'm not sure which one would end up being better. I'm moving towards the formal example just because I'm prioritizing performance, remember we need to have the program read the whole JSON file and put stuff out as fast as possible, if it takes a long time sorting out the algebraic notation or reading the object, our user will not have a good experience.

Plus with this, our program can read different maps and different game states easily since JSON files are very lightweight and it'd be easy to update the server everytime a unit moves or changes.

Create the CO/Character tab with income, army value and unit count. It would be something like this.

The timer, green circle and arrow aren't necessary. But we should have something to show the active player (player who has to play their turn).

It can have dummy values until the backend/real data part is finished

Once we have our damage calculator done, this is something we will be able to work on. Otherwise, we can't render damage possibilities if we can't even calculate them!

So when we select unit A and make it attack unit B, the user needs to know how much damage it can deal and then receive before doing said action.

Here is an example of who is the attacker (left) and who is the defender (right). This means the Anti Air (left) will deal between 27% and 35% damage or between 2.7 and 3.5 which the difference between these values is mixed with terrain defenses, health and the types of units fighting. Its not a certain number because the game has a "luck/error" factor. In real life, war isn't a I shoot my tank and always hit your tank, there are misses, sometimes a soldier fatally shoots another soldier, sometimes they shoot them in the leg. This accounts for the percent difference that our units arent robots with perfect accuracy.