JE COMMIt
Co-authored-by: Damien <damguillotin@gmail.com>
This commit is contained in:
parent
a88525519e
commit
4f9761c771
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -17,3 +17,7 @@ nav {
|
||||||
background: #3333;
|
background: #3333;
|
||||||
height: 5rem;
|
height: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#username {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue