JE COMMIt

Co-authored-by: Damien <damguillotin@gmail.com>
This commit is contained in:
Laureηt 2022-05-29 13:45:46 +02:00
parent a88525519e
commit 4f9761c771
No known key found for this signature in database
GPG key ID: D88C6B294FD40994
7 changed files with 207 additions and 64 deletions

View file

@ -1,6 +1,7 @@
#pixels { #pixels {
--side: 80px; --side: 5.5rem;
--border-width: 3px; --border-width: 0.2rem;
--border-color: #333;
border-spacing: 0; border-spacing: 0;
table-layout: fixed; table-layout: fixed;
width: calc(10 * var(--side)); width: calc(10 * var(--side));
@ -20,8 +21,7 @@
} }
#pixels td:hover { #pixels td:hover {
--border-color: #333; box-shadow: 0 0 0 var(--border-width) var(--border-color);
box-shadow: 0px 0px 0px var(--border-width) var(--border-color);
} }
.info-pixel { .info-pixel {
@ -30,8 +30,8 @@
width: max-content; width: max-content;
min-width: var(--side); min-width: var(--side);
top: var(--side); top: var(--side);
box-shadow: 0px 0px 0px var(--border-width) var(--border-color); box-shadow: 0 0 0 var(--border-width) var(--border-color);
background: #888; background: #8888;
} }
.pixel:hover .info-pixel { .pixel:hover .info-pixel {
@ -40,7 +40,7 @@
.patch-shadow { .patch-shadow {
display: none; display: none;
width: 3px; width: var(--border-width);
position: relative; position: relative;
height: var(--side); height: var(--side);
left: var(--side); left: var(--side);

View file

@ -1,6 +1,7 @@
.popup { .popup {
display: none; display: none;
background: #fff; background: #fff;
box-shadow: 0px 0px 1rem #3333;
padding: 2rem; padding: 2rem;
width: 40rem; width: 40rem;

View file

@ -17,3 +17,7 @@ nav {
background: #3333; background: #3333;
height: 5rem; height: 5rem;
} }
#username {
color: white;
}

View file

@ -71,6 +71,7 @@
<span class="logged-in"> <span class="logged-in">
<span id="username"></span> <span id="username"></span>
<button onclick="togglePopup('wallet');">Wallet</button>
<button onclick="userLogout()">Logout</button> <button onclick="userLogout()">Logout</button>
</span> </span>
</nav> </nav>
@ -93,6 +94,11 @@
Pixel infos Pixel infos
<div>
<label>Solde</label>
<span class="solde"></span>
</div>
<div> <div>
<label>Owner</label> <label>Owner</label>
<span id="info-owner"></span> <span id="info-owner"></span>
@ -109,7 +115,7 @@
</div> </div>
<form id="buy-form" class="logged-in" method="post"> <form id="buy-form" class="logged-in" method="post">
<button type="submit">Buy</button> <button type="submit" onclick="updateSolde();">Buy</button>
</form> </form>
</div> </div>
@ -121,31 +127,85 @@
<form id="modify-form" method="post"> <form id="modify-form" method="post">
<div class="data"> <div class="data">
<label>Price</label> <label>Price</label>
<input type="number" name="price" id="price" required /> <input
type="number"
name="price"
id="modify-price"
required
/>
</div> </div>
<div> <div>
<label>Red</label> <label>Red</label>
<input type="range" name="red" required /> <input
type="range"
min="0"
max="255"
step="1"
name="red"
id="modify-red"
required
/>
</div> </div>
<div> <div>
<label>Green</label> <label>Green</label>
<input type="range" name="green" required /> <input
type="range"
min="0"
max="255"
step="1"
name="green"
id="modify-green"
required
/>
</div> </div>
<div> <div>
<label>Blue</label> <label>Blue</label>
<input type="range" name="blue" required /> <input
type="range"
min="0"
max="255"
step="1"
name="blue"
id="modify-blue"
required
/>
</div> </div>
<div> <div>
<label>Description</label> <label>Description</label>
<input type="text" name="description" required /> <input
type="text"
name="description"
id="modify-description"
required
/>
</div> </div>
<button type="submit">Modify</button> <button type="submit">Modify</button>
</form> </form>
</div> </div>
<div id="wallet" class="popup">
<button onclick="togglePopup('wallet')" class="close">X</button>
Wallet
<div>
<label>Solde</label>
<span class="solde"></span>
</div>
<form id="pay-form" action="/api/user/pay" method="post">
<div class="data">
<label>Amount</label>
<input type="number" name="amount" required />
</div>
<button type="submit" onclick="updateSolde();">Pay</button>
</form>
</div>
</body> </body>
</html> </html>

View file

@ -1,11 +1,20 @@
// fonction qui s'execute quand la page a finie de charger // fonction qui s'execute quand la page a finie de charger
function pageLoaded() { function pageLoaded() {
// permet d'intercepter la requête post du formulaire et de la changer un peu let forms = document.forms;
for (form of forms) {
form.addEventListener("submit", (event) => {
event.preventDefault();
fetch(event.target.action, {
method: event.target.method,
body: new URLSearchParams(new FormData(event.target)),
});
});
}
document.forms["login-form"].addEventListener("submit", (event) => { document.forms["login-form"].addEventListener("submit", (event) => {
event.preventDefault(); event.preventDefault();
fetch(event.target.action, { fetch(event.target.action, {
method: "POST", method: event.target.method,
body: new URLSearchParams(new FormData(event.target)), body: new URLSearchParams(new FormData(event.target)),
}).then(async (resp) => { }).then(async (resp) => {
if (resp.ok) { if (resp.ok) {
@ -15,12 +24,10 @@ function pageLoaded() {
}); });
}); });
// permet d'intercepter la requête post du formulaire et de la changer un peu
document.forms["signup-form"].addEventListener("submit", (event) => { document.forms["signup-form"].addEventListener("submit", (event) => {
event.preventDefault(); event.preventDefault();
fetch(event.target.action, { fetch(event.target.action, {
method: "POST", method: event.target.method,
body: new URLSearchParams(new FormData(event.target)), body: new URLSearchParams(new FormData(event.target)),
}).then((resp) => { }).then((resp) => {
if (resp.ok) { if (resp.ok) {
@ -33,7 +40,9 @@ function pageLoaded() {
updatePixelGrid(); updatePixelGrid();
setInterval(updatePixelGrid, 10000); setInterval(updatePixelGrid, 10000);
if (localStorage.getItem("logged")) { if (localStorage.getItem("logged") === "true") {
userLogin(); userLogin();
} else {
localStorage.setItem("logged", "false");
} }
} }

View file

@ -10,17 +10,17 @@ const updatePixelGrid = async () => {
}; };
function setPixels(json) { function setPixels(json) {
var table = document.getElementById("pixels"); let table = document.getElementById("pixels");
var num_rows = table.rows.length; let num_rows = table.rows.length;
for (let i = 0; i < num_rows; i++) { for (let i = 0; i < num_rows; i++) {
table.rows[i].innerHTML = ""; table.rows[i].innerHTML = "";
} }
for (i in json) { for (i in json) {
var pixel = json[i]; let pixel = json[i];
var row_id = Math.floor((pixel.id - 1) / num_rows); let row_id = Math.floor((pixel.id - 1) / num_rows);
var row = table.rows[row_id]; let row = table.rows[row_id];
row.innerHTML += row.innerHTML +=
'<td class="pixel" style="background:#' + '<td class="pixel" style="background:#' +
@ -46,33 +46,76 @@ function pixelClick(id) {
if (resp.ok) { if (resp.ok) {
pixel = await resp.json(); pixel = await resp.json();
fetch(urlUser).then(async (resp) => { if (localStorage.getItem("logged") === "true") {
if (resp.ok) { // si le user est connecté
user = await resp.json(); fetch(urlUser).then(async (resp) => {
if (resp.ok) {
// on récupère ses infos
user = await resp.json();
if (user.pixels.includes(pixel.id)) { if (user.pixels.includes(pixel.id)) {
form = document.getElementById("modify-form"); // si le pixel lui appartient
form.action = urlPixel + pixel.id + "/modify"; updateModifyForm(pixel);
togglePopup("modify", "unset");
togglePopup("modify"); } else {
} else { // sinon on affiche le form d'achat
owner = document.getElementById("info-owner"); updateBuyForm(pixel);
owner.innerHTML = pixel.owner_username; togglePopup("buy", "unset");
}
description =
document.getElementById("info-description");
description.innerHTML = pixel.description;
price = document.getElementById("info-price");
price.innerHTML = pixel.price;
form = document.getElementById("buy-form");
form.action = urlPixel + pixel.id + "/buy";
togglePopup("buy");
} }
} });
}); } else {
// si non connecté, on affiche les infos
updateBuyForm(pixel);
togglePopup("buy", "unset");
}
} }
}); });
} }
function updateModifyForm(pixel) {
let form = document.getElementById("modify-form");
form.action = urlPixel + pixel.id + "/modify";
let price = document.getElementById("modify-price");
price.value = pixel.price;
let color = hexToRgb(pixel.color);
let red = document.getElementById("modify-red");
red.value = color.r;
let green = document.getElementById("modify-green");
green.value = color.g;
let blue = document.getElementById("modify-blue");
blue.value = color.b;
let description = document.getElementById("modify-description");
description.value = pixel.description;
}
function updateBuyForm(pixel) {
owner = document.getElementById("info-owner");
owner.innerHTML = pixel.owner_username;
description = document.getElementById("info-description");
description.innerHTML = pixel.description;
price = document.getElementById("info-price");
price.innerHTML = pixel.price;
form = document.getElementById("buy-form");
form.action = urlPixel + pixel.id + "/buy";
}
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result
? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
}
: null;
}

View file

@ -1,20 +1,28 @@
let urlUser = "http://localhost:8080/api/user"; let urlUser = "http://localhost:8080/api/user";
let urlLogout = "http://localhost:8080/api/user/logout"; let urlLogout = "http://localhost:8080/api/user/logout";
function togglePopup(id) { function togglePopup(id, value = "toggle") {
popups = document.getElementsByClassName("popup"); popups = document.getElementsByClassName("popup");
for (popup of popups) { for (popup of popups) {
if (popup.id == id) { if (popup.id != id) {
if (popup.style.display != "unset") {
popup.style.display = "unset";
} else {
popup.style.display = "none";
}
} else {
popup.style.display = "none"; popup.style.display = "none";
continue;
} }
if (value !== "toggle") {
popup.style.display = value;
continue;
}
if (popup.style.display === "unset") {
popup.style.display = "none";
continue;
}
popup.style.display = "unset";
} }
} }
async function userLogin() { async function userLogin() {
fetch(urlUser).then(async (resp) => { fetch(urlUser).then(async (resp) => {
if (resp.ok) { if (resp.ok) {
@ -33,7 +41,9 @@ async function userLogin() {
element.style.display = "flex"; element.style.display = "flex";
} }
localStorage.setItem("logged", true); updateSolde();
localStorage.setItem("logged", "true");
console.log("logged in"); console.log("logged in");
} }
}); });
@ -44,18 +54,34 @@ function userLogout() {
method: "POST", method: "POST",
}).then((resp) => { }).then((resp) => {
if (resp.ok) { if (resp.ok) {
let elements = document.getElementsByClassName("logged-out"); logouts = document.getElementsByClassName("logged-out");
for (element of elements) { for (element of logouts) {
element.style.display = "flex"; element.style.display = "flex";
} }
elements = document.getElementsByClassName("logged-in"); logins = document.getElementsByClassName("logged-in");
for (element of elements) { for (element of logins) {
element.style.display = "none"; element.style.display = "none";
} }
localStorage.setItem("logged", false); localStorage.setItem("logged", "false");
console.log("logged out"); console.log("logged out");
} }
}); });
} }
async function updateSolde() {
fetch(urlUser).then(async (resp) => {
if (resp.ok) {
console.log("ici");
user = await resp.json();
console.log("là");
let soldes = document.getElementsByClassName("solde");
for (element of soldes) {
element.innerHTML = user.balance + " €";
}
console.log("ok");
}
});
}