PixelPaws

Overview and Summary

PixelPaws is an interactive web application designed to bring comfort, creativity, and companionship into the digital space. The application allows users to create and care for a customizable virtual pet that reacts to real-world weather conditions. On a sunny day, the pet might appear cheerful and eager to play. On a rainy afternoon, it may curl up for a nap. These small, reactive details make the pet feel alive and encourage users to take short breaks during the day to interact with their virtual companion.

Inspired by the positive impact that pets can have on mental health, PixelPaws provides a fun, low-stress way to relax and recharge while experiencing some of the emotional benefits of pet ownership without the challenges of cost, time, or housing restrictions.

Project Information

Key Features

• Weather Integration: Pet mood and appearance respond to real-world weather conditions through API integration
• Pet Customization: Users can personalize their pet by choosing ears, eyes, tail, color, and name
• Interactive Care: Feed, play with, and interact with your pet through simple and enjoyable actions
• Local Data Persistence: All pet data saved in localStorage keeps the pet consistent across sessions
• Responsive Design: Fully responsive interface that works seamlessly on desktop and mobile devices

Technologies and Skills

Implementation Highlights

Learning Outcomes

• Deepened understanding of JavaScript OOP principles and object-oriented design patterns
• Gained experience with Canvas API and graphics programming for interactive animations
• Learned effective state management techniques for complex application logic
• Improved UX/UI design skills through iterative user feedback and refinement
• Practiced responsive web design patterns for cross-device compatibility
• Strengthened version control and Git workflows for solo project development

Future Enhancements and Features

• Pet Personalities: Give each pet unique personality traits that influence their behavior and interactions
• Holiday and Seasonal Themes: Implement rotating themes and special events tied to holidays and seasons
• Pet Experience Levels: Allow pets to level up with continued interaction, unlocking new customization options
• Mini-Games: Develop interactive games (Memory Match, Tic-Tac-Toe, Rock Paper Scissors) to boost pet happiness
• Study Buddy Timer: Implement a Pomodoro-style timer that encourages work-life balance with pet interaction breaks

Code Segments

Here are examples of code from the PixelPaws project demonstrating various aspects of the application:

HTML - Pet Display Structure

andlt;div class="pet-container"andgt;
    andlt;div class="pet-display sunny"andgt;
        andlt;div class="weather-effects"andgt;
            andlt;div class="star-bg"andgt;andlt;/divandgt;
        andlt;/divandgt;

        andlt;div class="pet"andgt;
            andlt;!-- Ears --andgt;
            andlt;div class="ears"andgt;
                andlt;div class="ear left"andgt;andlt;/divandgt;
                andlt;div class="ear right"andgt;andlt;/divandgt;
            andlt;/divandgt;

            andlt;!-- Face --andgt;
            andlt;div class="face"andgt;
                andlt;div class="eyes"andgt;
                    andlt;div class="eye left"andgt;andlt;/divandgt;
                    andlt;div class="eye right"andgt;andlt;/divandgt;
                andlt;/divandgt;
                andlt;div class="nose"andgt;andlt;/divandgt;
                andlt;div class="mouth"andgt;andlt;/divandgt;
            andlt;/divandgt;
        andlt;/divandgt;
    andlt;/divandgt;
andlt;/divandgt;

CSS - Pet Color Customization

:root {
    --primary-purple: #660066;
    --light-purple: #DFCDE7;
    --pet-gray: #C0C0C0;
    --pet-pink: #FFB6C1;
    --pet-ear-inner: #FFC0CB;
    --sunny-bg: #FFE5B4;
    --rainy-bg: #B0E0E6;
}

.pet-display {
    background-color: var(--sunny-bg);
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    position: relative;
    transition: background-color 0.5s ease;
}

.pet-display.rainy {
    background-color: var(--rainy-bg);
}

.pet {
    width: 150px;
    height: 150px;
    position: relative;
}

JavaScript - Customization State Management

const petCustomization = {
    color: 'gray',
    ears: 'triangles',
    face: 'default',
    eyes: 'default',
    tail: 'default',
    name: 'Pixel'
};

const customizationHistory = {
    undoStack: [],
    redoStack: [],
    maxHistorySize: 50,

    saveState(state) {
        this.undoStack.push(JSON.parse(JSON.stringify(state)));
        if (this.undoStack.length > this.maxHistorySize) {
            this.undoStack.shift();
        }
        this.redoStack = [];
    },

    undo() {
        if (this.undoStack.length === 0) return null;
        this.redoStack.push(JSON.parse(JSON.stringify(petCustomization)));
        const previousState = this.undoStack.pop();
        Object.assign(petCustomization, previousState);
        return previousState;
    }
};