-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
227 lines (194 loc) · 9.9 KB
/
index.html
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Super Smash Bros. Ultimate Character Name Modifier</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HomebrewHeroes/smashrenamer/style.css">
<link rel="icon" href="https://raw.githubusercontent.com/HomebrewHeroes/smashrenamer/main/assets/favicon.ico">
<style>
#characterBox {
display: flex;
align-items: flex-start;
margin-bottom: 20px; /* Add margin to the bottom of the character box */
}
#characterDropdowns {
flex: 1;
margin-right: 20px; /* Add margin to the right of the dropdowns */
}
#characterPortraitContainer {
margin-top: 10px; /* Add margin to the top of the portrait container */
}
#characterPortrait {
width: 150px; /* Adjust the width as needed */
height: auto;
margin-left: 20px; /* Add margin to the left of the portrait */
}
.queueItem {
display: flex;
align-items: center;
margin-bottom: 5px; /* Add margin between queue items */
}
.emblemImg {
width: 32px; /* Set emblem image width */
height: 32px; /* Set emblem image height */
margin-right: 10px; /* Add margin to the right of the emblem image */
}
</style>
</head>
<body>
<h1>Super Smash Bros. Ultimate Character Name Modifier</h1>
<div id="characterBox">
<div id="characterDropdowns">
<form id="nameChangeForm">
<label for="characterName">Select the character:</label>
<select id="characterName" name="characterName" required>
<!-- Dropdown options will be dynamically populated -->
</select><br>
<label for="costume">Select the costume:</label>
<select id="costume" name="costume" required>
<!-- Costume options will be dynamically populated -->
</select><br>
<label for="newCharacterName">Enter the new character name:</label>
<input type="text" id="newCharacterName" name="newCharacterName" required><br>
<button type="submit">Apply Changes</button>
</form>
<div id="queue">
<h2>Renaming Queue</h2>
<ul id="queueList"></ul>
<button id="exportButton">Export Queue</button>
</div>
<div id="result"></div>
<div id="console" style="border: 1px solid #ccc; padding: 10px; margin-top: 10px;"></div>
</div>
<div id="characterPortraitContainer">
<img id="characterPortrait" src="" alt="Character Portrait">
</div>
</div>
<script>
$(document).ready(function() {
var renameQueue = [];
var charactersMap = {}; // Store character names and corresponding code names
// Fetch character data from GitHub
fetch('https://raw.githubusercontent.com/HomebrewHeroes/smashrenamer/main/characters.json')
.then(response => response.json())
.then(data => {
// Populate character dropdown and store character names and codes
var characterDropdown = document.getElementById('characterName');
data.characters.forEach(function(character) {
var option = document.createElement('option');
option.value = character.code;
option.text = character.name;
characterDropdown.appendChild(option);
charactersMap[character.name] = character.code; // Store character name and code
});
})
.catch(error => console.error('Error fetching character data:', error));
// Populate costume dropdown
var costumeDropdown = document.getElementById('costume');
for (var i = 0; i < 8; i++) {
var option = document.createElement('option');
var costumeNumber = i.toString().padStart(2, '0');
option.value = costumeNumber;
option.text = "Costume " + costumeNumber;
costumeDropdown.appendChild(option);
}
// Function to update the character portrait
function updateCharacterPortrait(characterName, costume) {
var characterPortrait = document.getElementById('characterPortrait');
characterPortrait.src = `https://raw.githubusercontent.com/HomebrewHeroes/smashrenamer/main/assets/Stock%20Icons/chara_2_${characterName}_${costume}.png`;
}
// Handle character selection change
document.getElementById('characterName').addEventListener('change', function() {
var selectedCharacterName = this.value;
var selectedCostume = document.getElementById('costume').value;
updateCharacterPortrait(selectedCharacterName, selectedCostume);
});
// Handle costume selection change
document.getElementById('costume').addEventListener('change', function() {
var selectedCharacterName = document.getElementById('characterName').value;
var selectedCostume = this.value;
updateCharacterPortrait(selectedCharacterName, selectedCostume);
});
// Handle form submission
document.getElementById('nameChangeForm').addEventListener('submit', function(event) {
event.preventDefault();
var characterCodeName = document.getElementById('characterName').value;
var costume = document.getElementById('costume').value;
var newCharacterName = document.getElementById('newCharacterName').value;
// Check if the selected costume is already in the queue
var replaceIndex = renameQueue.findIndex(item => item.costume === costume);
if (replaceIndex !== -1) {
var replaceConfirm = confirm("There is already an item in the queue with the same costume. Do you want to replace it?");
if (replaceConfirm) {
console.log("Replacing item in queue: " + renameQueue[replaceIndex].character + " " + renameQueue[replaceIndex].costume);
renameQueue.splice(replaceIndex, 1);
} else {
return; // Do nothing if cancel is clicked
}
}
// Log actions to console on the website
var consoleDiv = document.getElementById('console');
consoleDiv.innerHTML += "<p>Renaming " + characterCodeName + " " + costume + " to " + newCharacterName + "</p>";
// Add action to rename queue
renameQueue.push({
character: characterCodeName,
costume: costume,
newName: newCharacterName
});
// Update queue display
updateQueueDisplay();
});
// Function to update the display of the renaming queue
function updateQueueDisplay() {
var queueList = document.getElementById('queueList');
queueList.innerHTML = '';
renameQueue.forEach(function(item, index) {
var li = document.createElement('li');
li.textContent = item.character + ' ' + item.costume + ' -> ' + item.newName;
// Add Remove button
var removeButton = document.createElement('button');
removeButton.textContent = 'Remove';
removeButton.dataset.index = index;
removeButton.addEventListener('click', function() {
removeQueueItem(index);
});
li.appendChild(removeButton);
// Add emblem image
var emblemImg = document.createElement('img');
emblemImg.src = charactersMap[item.character].emblem; // Get emblem URL from charactersMap
emblemImg.alt = 'Character Emblem';
emblemImg.classList.add('emblemImg');
li.appendChild(emblemImg);
queueList.appendChild(li);
});
}
// Function to remove a queue item
function removeQueueItem(index) {
console.log("Removing item from queue: " + renameQueue[index].character + " " + renameQueue[index].costume);
renameQueue.splice(index, 1);
updateQueueDisplay();
}
// Handle export button click
document.getElementById('exportButton').addEventListener('click', function() {
exportQueue();
});
// Function to export the renaming queue
function exportQueue() {
console.log("Renaming Queue:", renameQueue); // Check the contents of the renameQueue array
var data = JSON.stringify(renameQueue, null, 2);
var blob = new Blob([data], { type: 'application/json' });
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'rename_queue.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
});
</script>
</body>
</html>