Tamagotchi Web App

Comparative Analysis

Technical Development

This was our Tamagotchi Web App database scheme diagram. In our database we have it so the user can only have one pet at a time and a pet can only belong to one user. This is useful as if the user does not have a pet currently they are redirected to the adoption screen, so there will never be an instance where the user can access the home menu without a pet. The same logic applies to the graveyard and inventory except these are initialized when the user first interacts with them for the first time, being when a pet dies or an item is purchased respectively.

Due to our reliance on an object related mapping style database it made dynamic conditional routing very easy. If a user attempts to access any pet required page without being signed in they will be redirected to the sign in page where they can register or sign in. On top of this we all query our database to check if the current user has a pet every time they try to access a page requiring one, if they don't we will reroute them to the adoption page where they will start the adoption process. We have other dynamic reroutes that adapt to your pet's status such as when their health goes below zero we will have a pop up appear informing you they have passed away before rerouting you to the appropriate death screen. We also have API routes that map URL paths to server side logic without directly loading another page, such as our feed, clean and play functions. This allows us to alter data upon user interaction without a full page reload allowing us to cohesively update the page without interruption. All these API functions utilize POST requests to manipulate data allowing the JavaScript on the frontend to directly interact with our backend routing. Here we have a routes diagram that displays the connections between all our pages. Some screens are only accessible if a variable is in a certain state such as a dead pet so I could not map that relation. Other relationships would have over cluttered it such as the bottom 3 buttons connecting to back, graveyard and log out respectively.

Key Code Implementation

One of the most important pieces of code for our project were the dynamic API functions which changed the status of the Tamagotchi in real time. The function would be called upon clicking its respective button in the home menu and alters the user's pet's stats that are being requested through a POST request. It evaluates if that pet's stats are able to be altered right now and updates the database if the request is successful through the dump stats function which operates through JSON.

@app.route('/api/feed', methods=['POST'])
@login_required
def api_feed():
    pet = Pet.query.filter_by(user_id=current_user.id).first()
    if not pet:
        return jsonify({"error": "No pet found!"}), 400

    if pet.hunger > 80:
        return jsonify({
            **(_dump_stats(current_user)),
            "message": "Tamagotchi is not hungry!"
        })

    pet.hunger = max(0, pet.hunger + 20)
    current_user.currency += 2
    db.session.commit()

    return jsonify(_dump_stats(current_user))

As these API routes are intended to alter the look of the front end we have JavaScript which recognizes when these functions are called and alters the front end. This is displayed below when the front end recognizes when the clean function is called, which sends a request to the server which alters the database as well as displays a short clean animation to give user feedback. This also calls the refresh bars function which checks the current pets stats after the database change and reflects that to the front end. The refresh bars function also checks if the stats are below a certain point and alter the user view if they are.

document.getElementById('cleanBtn').addEventListener('click', async () => {
    const bubbles = document.getElementById('bubbles-effect');
    const stink = document.getElementById('stink');

    bubbles.style.opacity = '1';
    stink.style.opacity = '0';

    const data = await callApi('/api/clean');

    setTimeout(() => {
        bubbles.style.opacity = '0';
    }, 2000);

    if (data.message) {
        alert(data.message);
    }
    refreshBars(data);
});

For how we update the user's pets over time we used an asynchronous function which calls itself every 1000 ms, sped up for the sake of demonstration, this function calls the API decay function as well as checks the alive status of the pet. The aforementioned decay function is what alters the tamagotchi's stats and does multiple checks of the pet's current status. At the end of the function the updated data is returned to the front end and committed to the database so the user can visually see the Tamagotchi's status changing in real time.

@app.route('/api/decay', methods=['POST'])
@login_required
def api_decay():
    pet = Pet.query.filter_by(user_id=current_user.id).first()

    if not pet:
        return redirect(url_for('adopt'))

    if pet.health <= 0:
        kill_pet(pet)
        db.session.commit()
        return jsonify({
            "status": "dead",
            "message": f"{pet.username} has passed away",
            "redirect": url_for('death_screen')
        })

    pet.cleanliness = max(0, pet.cleanliness - 1)
    pet.happiness = max(0, pet.happiness - 1)
    pet.hunger = max(0, pet.hunger - 1)

    if pet.cleanliness < 20:
        pet.health = max(0, pet.health - 1)
    elif pet.cleanliness > 20:
        pet.health = min(100, pet.health + 1)

    if pet.happiness < 20:
        pet.health = max(0, pet.health - 1)
        if pet.mood != 'Sad':
            pet.mood = 'Sad'
    elif pet.happiness > 20:
        if pet.mood == 'Sad':
            pet.mood = 'Happy'
        pet.health = min(100, pet.health + 1)

    if pet.hunger < 20:
        pet.health = max(0, pet.health - 1)
    elif pet.hunger > 20:
        pet.health = min(100, pet.health + 1)


    db.session.commit()

    return jsonify(_dump_stats(current_user))

Future Development Potential