yoyle.city
1let angleIndex = 0;
2let angleToggleIndex = 0;
3let outfitIndex = 0;
4const titleArea = document.getElementById("title")
5const dataSection = document.getElementById("dataSection")
6const infoTable = document.getElementById("infoTable")
7const colorTable = document.getElementById("colorTable")
8const anglePic = document.getElementById("angleguy")
9const angleForm = document.getElementById("angleToggles")
10const outfitPic = document.getElementById("outfitguy")
11const angleTxt = document.getElementById("anglesText")
12const outfitTxt = document.getElementById("outfitsText")
13const angleSel = document.getElementById("angleSelector")
14const outfitSel = document.getElementById("outfitSelector")
15const hideMyAss = document.getElementById("hidetext")
16const titles = [
17 document.getElementById("anglesTitle"),
18 document.getElementById("outfitsTitle"),
19 document.getElementById("dataTitle"),
20]
21
22function preloadEverything() {
23 var images = [];
24 function preload() {
25 for (var i = 0; i < arguments.length; i++) {
26 images[i] = new Image();
27 images[i].src = preload.arguments[i];
28 }
29 }
30 for (let i = 0; i < angles.length; i++) {
31 preload(angles[i][1]);
32 for (let j = 1; j < angleToggles.length; j++) {
33 preload(`${(angles[i][1]).slice(0, -4)}_${angleToggles[j]}.png`);
34 }
35 }
36 for (let i = 0; i < outfits.length; i++) {
37 preload(outfits[i][1]);
38 }
39}
40
41function changeAngleToggle(val) {
42 angleToggleIndex = val;
43 updateImages();
44}
45function spawnInThings() {
46 updateImages();
47 for (let i = 0; i < 3; i++) {
48 console.log(titles[i]);
49 console.log(headers[i]);
50 if (headers[i] == "") {
51 titles[i].style.display = "none";
52 } else {
53 titles[i].innerText = headers[i];
54 }
55 }
56 if (angles.length == 1) {
57 document.getElementById("butt1").style.display = "none";
58 document.getElementById("butt2").style.display = "none";
59 angleSel.classList.add("single-item")
60 }
61 if (outfits.length == 1) {
62 document.getElementById("butt3").style.display = "none";
63 document.getElementById("butt4").style.display = "none";
64 outfitSel.classList.add("single-item")
65 }
66 for (let i = 0; i < (info.length); i++) {
67 if (info[i][1] == "h") {
68 const newRow = document.createElement("tr");
69 const newHeading = document.createElement("td");
70 newHeading.colSpan = 2;
71 newHeading.classList.add("tableSeparator")
72 const newHeadingContent = document.createTextNode(info[i][0]);
73 newHeading.appendChild(newHeadingContent);
74 newRow.appendChild(newHeading);
75 infoTable.appendChild(newRow);
76 } else if (info[i][1] == "l") {
77 const tr = document.createElement("tr");
78 const th = document.createElement("th");
79 th.innerText = info[i][0];
80 tr.appendChild(th);
81 const td = document.createElement("td");
82 const list = document.createElement("ul");
83 for (let j = 0; j < info[i][2].length; j++) {
84 const listItem = document.createElement("li");
85 listItem.innerText = info[i][2][j];
86 list.appendChild(listItem);
87 }
88 td.appendChild(list);
89 tr.appendChild(td);
90 infoTable.appendChild(tr);
91 } else if (info[i][1] == "n") {
92 const tr = document.createElement("tr");
93 const td = document.createElement("td");
94 td.innerText = info[i][0];
95 td.colSpan = 2;
96 tr.appendChild(td);
97 infoTable.appendChild(tr);
98 }
99 else {
100 const newInfoRow = document.createElement("tr");
101 const newInfoType = document.createElement("th");
102 const newInfoTypeContent = document.createTextNode(info[i][0]);
103 newInfoType.classList.add("rowfit");
104 newInfoType.appendChild(newInfoTypeContent);
105 const newInfoDesc = document.createElement("td");
106 const newInfoDescContent = document.createTextNode(info[i][1]);
107 newInfoDesc.appendChild(newInfoDescContent);
108 newInfoRow.appendChild(newInfoType);
109 newInfoRow.appendChild(newInfoDesc);
110 infoTable.appendChild(newInfoRow);
111 }
112 }
113 const createdUsingMessage = document.createElement("h6");
114 createdUsingMessage.innerHTML = "<a href='https://puzzylpiece.xyz/reftek/'>Created using Reftek (alpha II)</a>"
115 dataSection.appendChild(createdUsingMessage)
116
117 if (angleToggles.length != 1) {
118 for (let i = 0; i < (angleToggles.length); i++) {
119 const newToggle = document.createElement("input");
120 const newToggleLabel = document.createElement("label");
121 newToggle.setAttribute('type', 'radio');
122 newToggle.setAttribute('name', 'angle_toggles');
123 if (angleToggles[i] == "") {
124 newToggle.id = "normal";
125 } else {
126 newToggle.id = angleToggles[i];
127 }
128 newToggle.addEventListener('click', function () {
129 changeAngleToggle(i);
130 });
131 angleForm.appendChild(newToggle);
132 newToggleLabel.setAttribute('for', angleToggles[i])
133 if (angleToggles[i] == "") {
134 newToggleLabel.innerText = "none";
135 } else {
136 newToggleLabel.innerText = angleToggles[i];
137 }
138 angleForm.appendChild(newToggleLabel);
139 angleForm.appendChild(document.createElement("br"))
140 }
141 if (headers[3] == "") {
142 hideMyAss.style.display = "none";
143 } else {
144 hideMyAss.innerText = headers[3];
145 }
146 } else {
147 hideMyAss.style.display = "none";
148 }
149 for (let i = 0; i < (colors.length); i++) {
150 if (colors[i][1] == "h") {
151 const newRow = document.createElement("tr");
152 const newHeading = document.createElement("td");
153 newHeading.colSpan = 4;
154 newHeading.classList.add("tableSeparator")
155 const newHeadingContent = document.createTextNode(colors[i][0]);
156 newHeading.appendChild(newHeadingContent);
157 newRow.appendChild(newHeading);
158 colorTable.appendChild(newRow)
159 } else {
160 const newColorRow = document.createElement("tr");
161 const newColorPreview = document.createElement("td");
162 newColorPreview.style.backgroundColor = `#${colors[i][0]}`;
163 const newColorDesc = document.createElement("td");
164 const newColorDescContent = document.createTextNode(colors[i][1]);
165 newColorDesc.appendChild(newColorDescContent);
166 const newColorHex = document.createElement("td");
167 const newColorHexContent = document.createTextNode(colors[i][0]);
168 newColorHex.classList.add("hex");
169 newColorHex.appendChild(newColorHexContent);
170 const newColorCopy = document.createElement("td");
171 const newColorCopyButton = document.createElement("button");
172 newColorCopyButton.innerText = "COPY"
173 newColorCopyButton.addEventListener('click', function () {
174 copyColorToClipboard(i);
175 });
176 newColorCopy.appendChild(newColorCopyButton);
177 newColorRow.appendChild(newColorPreview);
178 newColorRow.appendChild(newColorDesc);
179 newColorRow.appendChild(newColorHex);
180 newColorRow.appendChild(newColorCopy);
181 colorTable.appendChild(newColorRow);
182 }
183 }
184}
185
186
187if (title[0] == "t") {
188 titleArea.innerHTML = `<h2>${title[1]}</h2>`;
189} else if (title[0] == "i") {
190 titleArea.innerHTML = `<img src="${title[1]}" width="200">`;
191}
192preloadEverything();
193spawnInThings();
194
195function updateImages() {
196 preloadEverything();
197 if (angleToggleIndex == 0) {
198 anglePic.style.backgroundImage = `url(${angles[angleIndex][1]})`;
199 } else {
200 anglePic.style.backgroundImage = `url(${(angles[angleIndex][1]).slice(0, -4)}_${angleToggles[angleToggleIndex]}.png)`;
201 }
202 angleTxt.innerText = angles[angleIndex][0];
203 outfitPic.style.backgroundImage = `url(${outfits[outfitIndex][1]})`;
204 outfitTxt.innerText = outfits[outfitIndex][0];
205}
206
207
208function prevAngle() {
209 if (angleIndex == 0) {
210 angleIndex = (angles.length - 1);
211 } else {
212 angleIndex--;
213 }
214 anglePic.animate(keyframesLeft, options);
215 updateImages();
216}
217
218function nextAngle() {
219 if (!(angleIndex >= (angles.length - 1))) {
220 angleIndex++;
221 } else {
222 angleIndex = 0;
223 }
224 anglePic.animate(keyframesRight, options);
225 updateImages();
226}
227
228function prevOutfit() {
229 if (outfitIndex == 0) {
230 outfitIndex = (outfits.length - 1);
231 } else {
232 outfitIndex--;
233 }
234 outfitPic.animate(keyframesLeft, options);
235 updateImages();
236}
237
238function nextOutfit() {
239 if (!(outfitIndex >= (outfits.length - 1))) {
240 outfitIndex++;
241 } else {
242 outfitIndex = 0;
243 }
244 outfitPic.animate(keyframesRight, options);
245 updateImages();
246}
247
248function copyColorToClipboard(colorIndex) {
249 navigator.clipboard.writeText(colors[colorIndex][0]);
250}