Background and Overview:

Minion Wars is a Mongo-Express-React-Node (MERN stack) project that is centered around collecting, selling, and battling digital tokens called minions. Each minion is represented by an image and each minion has an assigned trait value upon creation. The website includes interactions between users and a learn more page with instructions on how to play the game. A user has the option of attacking another user's territory in order to gain gold used to buy more minions.

Live Link

Homepage

React Modal

Quick and intuitive react modals are utilized throughout the app to enhance the user's experience.

User Market Place

Upon every market place visit, minions are randomized to enforce better playability.

Functionality and MVP:

• Buying minions
• Selling minions
• Fight other user's minions
• User profile page that shows all the minions
• Splash page
• User authorization: sign up and log in
• Production README

Bonus Features:

• Mating minions to create new child minions
• Randomize minion's characteristics
• User can purchase a random token

Technologies and Technical Challenges

• Working on a single project with multiple collaborators (being able to resolve merge conflicts)
• Mongo
• Express
• React
• Node.js
• HTML5
• CSS3
• Axios
• Postman

Code Snippet

Battle Feature

Implement a battle feature that would result in a different outcome based on the attacking and defending minion's stats.

  attack(minion1, minion2){
    this.attacked = true;
    if (!minion1){
      this.result = this.currentUser.username + " go buy a minion!"
      return;
    }

    if (!minion2){
      this.result = this.currentUser.username + " wins by default"
      this.victoryNotice = "You have earned 100 coins for this victory!";
      this.currentUser.coins += 100;
      this.props.updateUser(this.currentUser);
      return;
    }

    let dmg;
    while (minion1.hp > 0 && minion2.hp > 0){
      dmg = minion1.attack - minion2.defense;
      minion2.hp -= dmg;
      this.result += `${minion1.name} deals ${dmg} to ${minion2.name}, hp left: ${minion2.hp}\n`;
      if (minion2.hp <= 0){
        this.result += this.currentUser.username + "'s " + minion1.name + " wins";
        this.victoryNotice = "You have earned 100 coins for this victory!";
        this.currentUser.coins += 100;
        this.props.updateUser(this.currentUser);
        break
      }

      dmg = minion2.attack - minion1.defense
      minion1.hp -= dmg;
      this.result += `${minion2.name} deals ${dmg} to ${minion1.name}, hp left: ${minion1.hp}\n`;
      if (minion1.hp <= 0) {
        this.result += this.enemy.username + "'s " + minion2.name + " wins";
        break
      }
    }
  }

User Validation

Built user authentication by encrypting user details with JSON Webtoken to be used with Axios to be decrypted with the JWT-Decode library in the frontend.

router.post("/register", (req, res) => {
  const { errors, isValid } = validateRegisterInput(req.body);

  if (!isValid) {
    return res.status(400).json(errors);
  }

  User.findOne({ username: req.body.username }).then(user => {
    if (user) {
      errors.username = "User already exists";
      return res.status(400).json(errors);
    } else {
      const newUser = new User({
        username: req.body.username,
        password: req.body.password
      });

      bcrypt.genSalt(10, (err, salt) => {
        bcrypt.hash(newUser.password, salt, (err, hash) => {
          if (err) throw err;
          newUser.password = hash;
          newUser
            .save()
            .then(user => {
              const payload = { id: user.id, username: user.username };

              jwt.sign(
                payload,
                keys.secretOrKey,
                { expiresIn: 3600 },
                (err, token) => {
                  res.json({
                    success: true,
                    token: "Bearer " + token
                  });
                }
              );
            })
            .catch(err => console.log(err));
        });
      });
    }
  });
});

Included Validator.js library to check model validation for the inclusion of password & email upon login.

function validateLoginInput(data) {
  let errors = {};

  data.username = validText(data.username) ? data.username : "";
  data.password = validText(data.password) ? data.password : "";


  if (Validator.isEmpty(data.username)) {
    errors.username = "username field is required";
  }

  if (Validator.isEmpty(data.password)) {
    errors.password = "Password field is required";
  }

  return {
    errors,
    isValid: Object.keys(errors).length === 0
  };
};

Group Members and Work Breakdown:

• Qixiang: https://github.com/chenq7
• Lawrence: https://github.com/lawrence14701
• John: https://github.com/CsJohnJJ
• Anton: https://github.com/Wayattearp

Day one: Splash page and user backend/frontend

• John: Backend
• Lawrence: Backend
• Anton: Frontend
• Qixiang: Supervising group/research/planning material for next day

Day two: Display (handles window resizing, canvas) AND Game logic

• Qixiang: Backend - User & minion schema, validations, routes
• John: Backend - User & minion schema, validations, routes
• Lawrence: Frontend - splash page
• Anton: Frontend - User profile page

Day three:

• Qixiang: Backend - User, minion association, seeding
• John: Backend - User, minion association, seeding
• Lawrence: Frontend - profile page, and minion index, as well as a footer for all the pages
• Anton: Frontend - profile page, and minion index, as well as a footer for all the pages

Day four:

• Qixiang: Backend - Buy/sell feature
• John: Backend - Buy/sell feature
• Lawrence: Frontend - Update navbar, slash page
• Anton: Frontend - Attack page, profile page

Day five: Test and Update README

• Qixiang: Backend - Attack feature and refactor miscellaneous
• John: Backend - Attack feature and refactor miscellaneous
• Lawrence: Frontend - Update miscellaneous CSS
• Anton: Frontend - Update miscellaneous CSS