Something went wrong. Try again.
"Javeen's Place" Source Code tapeykatt.neocities.org
website
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199/* FILL IN THESE VARIABLES BASED ON THE GUIDE AT https://drawbox.nekoweb.org IF YOU HAVE ANY QUESTION, SUGGESTIONS, OR NEED HELP, PLEASE EMAIL ME AT drawbox@jhorn.net OR @MONKEYBATION on DISCORD /`·.¸ /¸...¸`:· ¸.·´ ¸ `·.¸.·´) : © ):´; ¸ { `·.¸ `· ¸.·´\`·¸) `\\´´\¸.·´ */const GOOGLE_FORM_ID = "1FAIpQLScR2Er_MjiVRzHrT1MyqaFU_ZI1eaPKnIZ7Nt9nI9SzyfH_nA";const ENTRY_ID = "entry.71487571";const GOOGLE_SHEET_ID = "1DtFCp3BdkAZdtl7jzHhdALNKvcO-0ggTrSEX0afy50U";const DISPLAY_IMAGES = true;
/* DONT EDIT BELOW THIS POINT IF YOU DONT KNOW WHAT YOU ARE DOING. */
const CLIENT_ID = "b4fb95e0edc434c";const GOOGLE_SHEET_URL = "https://docs.google.com/spreadsheets/d/" + GOOGLE_SHEET_ID + "/export?format=csv";const GOOGLE_FORM_URL = "https://docs.google.com/forms/d/e/" + GOOGLE_FORM_ID + "/formResponse";
let canvas = document.getElementById("drawboxcanvas");let context = canvas.getContext("2d");context.fillStyle = "white";context.fillRect(0, 0, canvas.width, canvas.height);
let restore_array = [];let start_index = -1;let stroke_color = "black";let stroke_width = "2";let is_drawing = false;
function change_color(element) { stroke_color = element.style.background;}
function start(event) { is_drawing = true; context.beginPath(); context.moveTo(getX(event), getY(event)); event.preventDefault();}
function draw(event) { if (!is_drawing) return; context.lineTo(getX(event), getY(event)); context.strokeStyle = stroke_color; context.lineWidth = stroke_width; context.lineCap = "round"; context.lineJoin = "round"; context.stroke(); event.preventDefault();}
function stop(event) { if (!is_drawing) return; context.stroke(); context.closePath(); is_drawing = false; restore_array.push(context.getImageData(0, 0, canvas.width, canvas.height)); start_index++; event.preventDefault();}
function getX(event) { return event.pageX ? event.pageX - canvas.offsetLeft : event.targetTouches[0].pageX - canvas.offsetLeft;}
function getY(event) { return event.pageY ? event.pageY - canvas.offsetTop : event.targetTouches[0].pageY - canvas.offsetTop;}
canvas.addEventListener("touchstart", start, false);canvas.addEventListener("touchmove", draw, false);canvas.addEventListener("touchend", stop, false);canvas.addEventListener("mousedown", start, false);canvas.addEventListener("mousemove", draw, false);canvas.addEventListener("mouseup", stop, false);canvas.addEventListener("mouseout", stop, false);
function Restore() { if (start_index <= 0) { Clear(); } else { start_index--; restore_array.pop(); context.putImageData(restore_array[start_index], 0, 0); }}
function Clear() { context.fillStyle = "white"; context.clearRect(0, 0, canvas.width, canvas.height); context.fillRect(0, 0, canvas.width, canvas.height); restore_array = []; start_index = -1;}
context.drawImage = function() { console.warn("noo >:(");};
document.getElementById("submit").addEventListener("click", async function () { const submitButton = document.getElementById("submit"); const statusText = document.getElementById("status");
submitButton.disabled = true; statusText.textContent = "Uploading...";
const imageData = canvas.toDataURL("image/png"); const blob = await (await fetch(imageData)).blob(); const formData = new FormData(); formData.append("image", blob, "drawing.png");
try { const response = await fetch("https://api.imgur.com/3/image", { method: "POST", headers: { Authorization: `Client-ID ${CLIENT_ID}` }, body: formData, });
const data = await response.json(); if (!data.success) throw new Error("Imgur upload failed");
const imageUrl = data.data.link; console.log("Uploaded image URL:", imageUrl);
const googleFormData = new FormData(); googleFormData.append(ENTRY_ID, imageUrl);
await fetch(GOOGLE_FORM_URL, { method: "POST", body: googleFormData, mode: "no-cors", });
statusText.textContent = "Upload successful!"; alert("Image uploaded and submitted successfully ☻"); location.reload(); } catch (error) { console.error(error); statusText.textContent = "Error uploading image."; alert("Error uploading image or submitting to Google Form."); } finally { submitButton.disabled = false; }});
async function fetchImages() { if (!DISPLAY_IMAGES) { console.log("Image display is disabled."); return; }
try { const response = await fetch(GOOGLE_SHEET_URL); const csvText = await response.text(); const rows = csvText.split("\n").slice(1);
const gallery = document.getElementById("gallery"); gallery.innerHTML = ""; rows.reverse().forEach((row) => { const columns = row.split(","); if (columns.length < 2) return;
const timestamp = columns[0].trim(); const imgUrl = columns[1].trim().replace(/"/g, "");
if (imgUrl.startsWith("http")) { const div = document.createElement("div"); div.classList.add("image-container");
div.innerHTML = ` <img src="${imgUrl}" alt="drawing"> <p>${timestamp}</p> `; gallery.appendChild(div); } }); } catch (error) { console.error("Error fetching images:", error); document.getElementById("gallery").textContent = "Failed to load images."; }}
fetchImages();