Hugging Face's logo

Spaces:
Mistral-AI-Game-Jam
/
le-mot
Running

App Files Community
5
le-mot
File size: 4,879 Bytes 
2ce42d3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8160d44
2ce42d3
 
 
 
 
8160d44
2ce42d3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
 
// personality_allocation.js

// Personality and color mappings with additional visual properties
const personalityConfig = {
    normal: {
        color: '#227c9d', // cerulean
        name: 'normal',
        icon: 'mdi:account-circle',
        backgroundColor: 'cerulean',
        borderColor: 'border-blue-600'
    },
    genuine_friend: {
        color: '#17c3b2', // light-sea-green
        name: 'genuine friend',
        icon: 'mdi:account-heart',
        backgroundColor: 'light-sea-green',
        borderColor: 'border-teal-600'
    },
    sensitive_to_compliments: {
        color: '#ffcb77', // sunset
        name: 'sensitive to compliments',
        icon: 'mdi:account-star',
        backgroundColor: 'sunset',
        borderColor: 'border-yellow-600'
    },
    /* rebellious: {
        color: '#fe6d73', // light-red
        name: 'rebellious',
        icon: 'mdi:account-alert',
        backgroundColor: 'light-red',
        borderColor: 'border-red-600'
    } */
};

// Get random personality
function getRandomPersonality() {
    const personalities = Object.keys(personalityConfig);
    const randomIndex = Math.floor(Math.random() * personalities.length);
    return personalities[randomIndex];
}

// Create player square with personality
function createPlayerSquare(personality) {
    const config = personalityConfig[personality];
    
    // Create the square container
    const square = document.createElement('div');
    square.className = `w-16 h-16 rounded-md shadow-lg flex flex-col items-center justify-center text-white font-medium pop-in ${config.backgroundColor}`;
    
    // Add icon and label
    square.innerHTML = `
        <span class="iconify mb-1" data-icon="${config.icon}" data-width="24" data-height="24"></span>
        <span class="text-xs">You</span>
    `;
    
    return square;
}

// Initialize personality system
function initializePersonalitySystem() {
    // Get DOM elements
    const personalitySelect = document.getElementById('personality-select');
    const gridContainer = document.getElementById('grid-container');
    const gameInfo = document.getElementById('game-info');
    
    // Get random personality
    const selectedPersonality = getRandomPersonality();
    const config = personalityConfig[selectedPersonality];
    
    // Set the select value programmatically
    personalitySelect.value = selectedPersonality;
    
    // Create personality display
    const personalityDisplay = document.createElement('div');
    personalityDisplay.className = 'bg-white rounded-lg p-4 shadow-md mb-4';
    personalityDisplay.innerHTML = `
        <div class="text-sm text-gray-600 mb-2">Your Personality:</div>
        <div class="flex items-center gap-2">
            <div class="w-3 h-3 rounded-full" style="background-color: ${config.color}"></div>
            <span class="font-medium capitalize">${config.name.replace(/_/g, ' ')}</span>
        </div>
    `;
    
    // Add personality info to game info
    if (gameInfo) {
        gameInfo.insertBefore(personalityDisplay, gameInfo.firstChild);
    }
    
    // Create and add player square to grid
    const playerSquare = createPlayerSquare(selectedPersonality);
    if (gridContainer) {
        // Clear existing squares if any
        gridContainer.innerHTML = '';
        gridContainer.appendChild(playerSquare);
    }
    
    // Update game state with personality
    window.playerPersonality = selectedPersonality;
    
    // Add to chat history
    const chatContent = document.getElementById('chat-content');
    if (chatContent) {
        const personalityMessage = document.createElement('div');
        personalityMessage.className = 'text-gray-600 text-sm italic mb-4';
        personalityMessage.textContent = `You joined as a ${config.name.replace(/_/g, ' ')}`;
        chatContent.appendChild(personalityMessage);
    }
}

// Expose necessary functions and data
window.personalitySystem = {
    config: personalityConfig,
    getRandomPersonality,
    createPlayerSquare,
    initialize: initializePersonalitySystem
};

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', initializePersonalitySystem);

// Handle personality updates in the game logic
document.addEventListener('personalityUpdated', (event) => {
    const newPersonality = event.detail.personality;
    const config = personalityConfig[newPersonality];
    
    // Update the player square
    const playerSquare = document.querySelector('#grid-container > div');
    if (playerSquare) {
        Object.keys(personalityConfig).forEach(personality => {
            const pConfig = personalityConfig[personality];
            playerSquare.classList.remove(pConfig.backgroundColor);
        });
        playerSquare.classList.add(config.backgroundColor);
        playerSquare.querySelector('.iconify').setAttribute('data-icon', config.icon);
    }
});