diff --git a/src/main/webapp/buy_pixel.js b/src/main/webapp/buy_pixel.js deleted file mode 100644 index d0bce12..0000000 --- a/src/main/webapp/buy_pixel.js +++ /dev/null @@ -1,61 +0,0 @@ -var urlPixel = "http://localhost:8080/api/pixel"; - -// var pixelsJSON; - -// const updatePixelsJSON = async () => { -// var reponse = await fetch(urlPixel); -// pixelsJSON = await reponse.json(); -// } - -// Initialize pixel index -function initBuyPixel() { - var pixel_index = 0; - - var pixel = pixelsJSON[pixel_index]; - updatePixelBuyPreview(pixel); -} - -// Compute next pixel index -function nextBuyPixel() { - var pixel_index = document.getElementById("buy-pixel-index").value; - - var table = document.getElementById("pixelTable"); - var number_rows = table.rows.length; - - pixel_index++; - if (pixel_index > number_rows * number_rows - 1) { - pixel_index = 0; - } - - var pixel = pixelsJSON[pixel_index]; - updatePixelBuyPreview(pixel); -} - -// Compute previous pixel index -function previousUserPixel() { - var pixel_index = document.getElementById("buy-pixel-index"); - - var table = document.getElementById("pixelTable"); - var number_rows = table.rows.length; - - pixel_index--; - if (pixel_index < 0) { - pixel_index = number_rows * number_rows - 1; - } - - var pixel = pixelsJSON[pixel_index]; - updatePixelBuyPreview(pixel); -} - -function updatePixelBuyPreview(pixel) { - document.getElementById("buy-pixel-index").value = pixel.id - 1; - document.getElementById("buy-pixel-owner").innerHTML = pixel.owner_username; - document.getElementById("buy-pixel-description").innerHTML = pixel.description; - document.getElementById("buy-pixel-price").innerHTML = pixel.price; -} - -// updatePixelsJSON(); -initBuyPixel(); - -// setInterval(updatePixelsJSON, 10000); - diff --git a/src/main/webapp/index2.html b/src/main/webapp/index2.html index 40997c9..7881c9f 100644 --- a/src/main/webapp/index2.html +++ b/src/main/webapp/index2.html @@ -53,7 +53,6 @@ } - @@ -182,10 +181,10 @@
- +
- +
@@ -212,8 +211,6 @@ - - diff --git a/src/main/webapp/modify_pixel.js b/src/main/webapp/modify_pixel.js deleted file mode 100644 index cbb847f..0000000 --- a/src/main/webapp/modify_pixel.js +++ /dev/null @@ -1,118 +0,0 @@ -var urlPixel = "http://localhost:8080/api/pixel"; -var urlUser = "http://localhost:8080/api/user"; - -var pixelsJSON; -var userJSON; - -const updatePixelsJSON = async () => { - var reponse = await fetch(urlPixel); - pixelsJSON = await reponse.json(); -} - -const updateUserJSON = async () => { - var reponse = await fetch(urlUser); - userJSON = await reponse.json(); -} - -function hexToRgb(hex) { - var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - console.log(result); - return result ? { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16) - } : null; -} - -// Initialize pixel index -function initUserPixel() { - var user_pixel_index = 0; - var pixel_index = userJSON.pixels[user_pixel_index].id - 1; - - document.getElementById("user-pixel-index").innerHTML = user_pixel_index; - document.getElementById("pixel-index").innerHTML = pixel_index; - - updatePixelPreview(); -} - -// Compute next pixel index -function nextUserPixel() { - var user_pixel_index = parseInt(document.getElementById("user-pixel-index").innerHTML); - - user_pixel_index++; - if (user_pixel_index > userJSON.pixels.length - 1) { - user_pixel_index = 0; - } - - var pixel_index = userJSON.pixels[user_pixel_index].id - 1; - - document.getElementById("user-pixel-index").innerHTML = user_pixel_index; - document.getElementById("pixel-index").innerHTML = pixel_index; - - updatePixelPreview(); -} - -// Compute previous pixel index -function previousUserPixel() { - var user_pixel_index = parseInt(document.getElementById("user-pixel-index").innerHTML); - - user_pixel_index--; - if (user_pixel_index < 0) { - user_pixel_index = userJSON.pixels.length - 1; - } - - var pixel_index = userJSON.pixels[user_pixel_index].id - 1; - - document.getElementById("user-pixel-index").innerHTML = user_pixel_index; - document.getElementById("pixel-index").innerHTML = pixel_index; - - updatePixelPreview(); -} - -function updatePixelPreview() { - var colorDiv = document.getElementById("color"); - - var index = parseInt(document.getElementById("pixel-index").innerHTML); - var pixel = pixelsJSON[index]; - - // Update price - var price = document.getElementById("price"); - price.value = pixel.price; - - // Update color - var red = document.getElementById("red"); - var green = document.getElementById("green"); - var blue = document.getElementById("blue"); - - var color = hexToRgb(pixel.color); - - red.value = color.r; - green.value = color.g; - blue.value = color.b; - - updateUserColorPreview(); - - // Update description - var description = document.getElementById("description"); - description.value = pixel.description; - -} - -// Update preview's color -function updateUserColorPreview() { - var red = document.getElementById("red").value * 255 / 100; - var green = document.getElementById("green").value * 255 / 100; - var blue = document.getElementById("blue").value * 255 / 100; - - var color = document.getElementById("color"); - color.style.background = "rgb(" + red + "," + green + "," + blue + ")"; -} - -updatePixelsJSON(); -updateUserJSON(); - -initUserPixel(); - -setInterval(updatePixelsJSON, 10000); -setInterval(updateUserJSON, 10000); - diff --git a/src/main/webapp/pixels.js b/src/main/webapp/pixels.js index fc2ab73..5141c38 100644 --- a/src/main/webapp/pixels.js +++ b/src/main/webapp/pixels.js @@ -1,6 +1,44 @@ -var url = "http://localhost:8080/api/pixel"; +////////////////// +// Update loops // +////////////////// -function setPixels(pixelsJSON) { +var urlPixel = "http://localhost:8080/api/pixel"; +var urlUser = "http://localhost:8080/api/user"; + +var pixelsJSON; +var userJSON; + +const updatePixelsJSON = async () => { + var reponse = await fetch(urlPixel); + pixelsJSON = await reponse.json(); +} + +const updateUserJSON = async () => { + var reponse = await fetch(urlUser); + userJSON = await reponse.json(); +} + + +function updateSolde() { + var div = document.getElementById("solde"); + div.innerHTML = userJSON.solde + '$'; +} + +updateSolde(); +updateUserJSON(); +updatePixelsJSON(); +setInterval(updateSolde, 10000); +setInterval(updateUserJSON, 10000); +setInterval(updatePixelsJSON, 10000); + + + + +//////////////// +// Pixel grid // +//////////////// + +function setPixels() { var table = document.getElementById("pixelTable"); var num_rows = table.rows.length; @@ -25,11 +63,161 @@ function setPixels(pixelsJSON) { } } -const updatePixels = async () => { - const reponse = await fetch(url); - const pixelsJSON = await reponse.json(); - setPixels(pixelsJSON); + + +////////////////////// +// Modify my pixels // +////////////////////// + +function hexToRgb(hex) { + var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + console.log(result); + return result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : null; } -updatePixels(); -setInterval(updatePixels, 10000); +// Initialize pixel index +function initUserPixel() { + var user_pixel_index = 0; + var pixel_index = userJSON.pixels[user_pixel_index].id - 1; + + document.getElementById("user-pixel-index").innerHTML = user_pixel_index; + document.getElementById("pixel-index").innerHTML = pixel_index; + + updatePixelPreview(); +} + +// Compute next pixel index +function nextUserPixel() { + var user_pixel_index = parseInt(document.getElementById("user-pixel-index").innerHTML); + + user_pixel_index++; + if (user_pixel_index > userJSON.pixels.length - 1) { + user_pixel_index = 0; + } + + var pixel_index = userJSON.pixels[user_pixel_index].id - 1; + + document.getElementById("user-pixel-index").innerHTML = user_pixel_index; + document.getElementById("pixel-index").innerHTML = pixel_index; + + updatePixelPreview(); +} + +// Compute previous pixel index +function previousUserPixel() { + var user_pixel_index = parseInt(document.getElementById("user-pixel-index").innerHTML); + + user_pixel_index--; + if (user_pixel_index < 0) { + user_pixel_index = userJSON.pixels.length - 1; + } + + var pixel_index = userJSON.pixels[user_pixel_index].id - 1; + + document.getElementById("user-pixel-index").innerHTML = user_pixel_index; + document.getElementById("pixel-index").innerHTML = pixel_index; + + updatePixelPreview(); +} + +function updatePixelPreview() { + var colorDiv = document.getElementById("color"); + + var index = parseInt(document.getElementById("pixel-index").innerHTML); + var pixel = pixelsJSON[index]; + + // Update price + var price = document.getElementById("price"); + price.value = pixel.price; + + // Update color + var red = document.getElementById("red"); + var green = document.getElementById("green"); + var blue = document.getElementById("blue"); + + var color = hexToRgb(pixel.color); + + red.value = color.r; + green.value = color.g; + blue.value = color.b; + + updateUserColorPreview(); + + // Update description + var description = document.getElementById("description"); + description.value = pixel.description; + +} + +// Update preview's color +function updateUserColorPreview() { + var red = document.getElementById("red").value * 255 / 100; + var green = document.getElementById("green").value * 255 / 100; + var blue = document.getElementById("blue").value * 255 / 100; + + var color = document.getElementById("color"); + color.style.background = "rgb(" + red + "," + green + "," + blue + ")"; +} + +initUserPixel(); + + + + + +/////////////// +// Buy pixel // +/////////////// + +// Initialize pixel index +function initBuyPixel() { + var pixel_index = 0; + + var pixel = pixelsJSON[pixel_index]; + updatePixelBuyPreview(pixel); +} + +// Compute next pixel index +function nextBuyPixel() { + var pixel_index = document.getElementById("buy-pixel-index").value; + + var table = document.getElementById("pixelTable"); + var number_rows = table.rows.length; + + pixel_index++; + if (pixel_index > number_rows * number_rows - 1) { + pixel_index = 0; + } + + var pixel = pixelsJSON[pixel_index]; + updatePixelBuyPreview(pixel); +} + +// Compute previous pixel index +function previousBuyPixel() { + var pixel_index = document.getElementById("buy-pixel-index").value; + + var table = document.getElementById("pixelTable"); + var number_rows = table.rows.length; + + pixel_index--; + if (pixel_index < 0) { + pixel_index = number_rows * number_rows - 1; + } + + var pixel = pixelsJSON[pixel_index]; + updatePixelBuyPreview(pixel); +} + +function updatePixelBuyPreview(pixel) { + document.getElementById("buy-pixel-index").value = pixel.id - 1; + document.getElementById("buy-pixel-owner").innerHTML = pixel.owner_username; + document.getElementById("buy-pixel-description").innerHTML = pixel.description; + document.getElementById("buy-pixel-price").innerHTML = pixel.price; +} + +initBuyPixel(); diff --git a/src/main/webapp/userinfo.js b/src/main/webapp/userinfo.js deleted file mode 100644 index a69baa8..0000000 --- a/src/main/webapp/userinfo.js +++ /dev/null @@ -1,15 +0,0 @@ -var url = "http://localhost:8080/api/user"; - -function setSolde(userJSON) { - var div = document.getElementById("solde"); - div.innerHTML = userJSON.solde + '$'; -} - -const updateSolde = async () => { - const reponse = await fetch(url); - const userJSON = await reponse.json(); - setSolde(userJSON); -} - -updateSolde(); -setInterval(updateSolde, 10000);