ENSEEIHT/projet-application-web
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: pixels full JS

Browse source
This commit is contained in:
gdamms 2022-05-20 10:58:26 +02:00
parent 466b7e654f
commit db7dcfce60
6 changed files with 73 additions and 1087 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

730
src/front/index.html
View file

@ -85,726 +85,16 @@
</div> </div>
<div class="pixel-container"> <div class="pixel-container">
<table id="pixelTable"> <table id="pixelTable">
<tr> <tr></tr>
<td class="pixel" id="r0c0"> <tr></tr>
<div class="info-pixel"> <tr></tr>
<div class="username">Moi</div> <tr></tr>
<div class="description">Petit desc oklm</div> <tr></tr>
</div> <tr></tr>
<div class="patch-shadow"></div> <tr></tr>
</td> <tr></tr>
<td class="pixel" id="r0c1"> <tr></tr>
<div class="info-pixel"> <tr></tr>
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r0c2">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r0c3">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r0c4">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r0c5">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r0c6">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r0c7">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r0c8">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r0c9">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
</tr>
<tr>
<td class="pixel" id="r1c0">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r1c1">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r1c2">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r1c3">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r1c4">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r1c5">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r1c6">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r1c7">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r1c8">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r1c9">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
</tr>
<tr>
<td class="pixel" id="r2c0">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r2c1">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r2c2">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r2c3">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r2c4">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r2c5">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r2c6">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r2c7">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r2c8">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r2c9">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
</tr>
<tr>
<td class="pixel" id="r3c0">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r3c1">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r3c2">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r3c3">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r3c4">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r3c5">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r3c6">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r3c7">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r3c8">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r3c9">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
</tr>
<tr>
<td class="pixel" id="r4c0">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r4c1">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r4c2">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r4c3">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r4c4">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r4c5">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r4c6">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r4c7">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r4c8">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r4c9">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
</tr>
<tr>
<td class="pixel" id="r5c0">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r5c1">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r5c2">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r5c3">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r5c4">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r5c5">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r5c6">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r5c7">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r5c8">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r5c9">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
</tr>
<tr>
<td class="pixel" id="r6c0">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r6c1">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r6c2">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r6c3">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r6c4">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r6c5">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r6c6">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r6c7">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r6c8">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r6c9">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
</tr>
<tr>
<td class="pixel" id="r7c0">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r7c1">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r7c2">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r7c3">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r7c4">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r7c5">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r7c6">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r7c7">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r7c8">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r7c9">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
</tr>
<tr>
<td class="pixel" id="r8c0">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r8c1">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r8c2">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r8c3">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r8c4">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r8c5">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r8c6">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r8c7">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r8c8">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r8c9">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
</tr>
<tr>
<td class="pixel" id="r9c0">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r9c1">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r9c2">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r9c3">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r9c4">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r9c5">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r9c6">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r9c7">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r9c8">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
<td class="pixel" id="r9c9">
<div class="info-pixel">
<div class="username">Moi</div>
<div class="description">Petit desc oklm</div>
</div>
<div class="patch-shadow"></div>
</td>
</tr>
</table> </table>
</div> </div>
</body> </body>

301
src/front/pix.css
View file

@ -1,301 +0,0 @@
#r0c0 {
background: #bd8226; }
#r0c1 {
background: #6ad2bb; }
#r0c2 {
background: #ac6816; }
#r0c3 {
background: #f0e5ad; }
#r0c4 {
background: #9b7ae2; }
#r0c5 {
background: #fc4b16; }
#r0c6 {
background: #493562; }
#r0c7 {
background: #597b58; }
#r0c8 {
background: #f68af4; }
#r0c9 {
background: #29d291; }
#r1c0 {
background: #a9da86; }
#r1c1 {
background: #ee5ccc; }
#r1c2 {
background: #c2170c; }
#r1c3 {
background: #38cd2b; }
#r1c4 {
background: #7c2adf; }
#r1c5 {
background: #fcbc48; }
#r1c6 {
background: #31aa29; }
#r1c7 {
background: #b65dd9; }
#r1c8 {
background: #cab125; }
#r1c9 {
background: #b41569; }
#r2c0 {
background: #308164; }
#r2c1 {
background: #5fe6c4; }
#r2c2 {
background: #740cd8; }
#r2c3 {
background: #16340a; }
#r2c4 {
background: #0f48dc; }
#r2c5 {
background: #047373; }
#r2c6 {
background: #a683c6; }
#r2c7 {
background: #acf056; }
#r2c8 {
background: #5261ea; }
#r2c9 {
background: #1dc6ce; }
#r3c0 {
background: #05f60b; }
#r3c1 {
background: #a7e815; }
#r3c2 {
background: #1ed985; }
#r3c3 {
background: #7154e4; }
#r3c4 {
background: #fbd471; }
#r3c5 {
background: #3dccb7; }
#r3c6 {
background: #b021a9; }
#r3c7 {
background: #b2f2fc; }
#r3c8 {
background: #2b21a2; }
#r3c9 {
background: #65f83b; }
#r4c0 {
background: #dfbfad; }
#r4c1 {
background: #e99270; }
#r4c2 {
background: #b36216; }
#r4c3 {
background: #5d531b; }
#r4c4 {
background: #76da95; }
#r4c5 {
background: #79884f; }
#r4c6 {
background: #e8dfc5; }
#r4c7 {
background: #8971f4; }
#r4c8 {
background: #1ceb1f; }
#r4c9 {
background: #a15e02; }
#r5c0 {
background: #604930; }
#r5c1 {
background: #65274c; }
#r5c2 {
background: #61bd26; }
#r5c3 {
background: #5759a2; }
#r5c4 {
background: #b9cda2; }
#r5c5 {
background: #961983; }
#r5c6 {
background: #a3cc2b; }
#r5c7 {
background: #7e8361; }
#r5c8 {
background: #50f4f9; }
#r5c9 {
background: #b14f97; }
#r6c0 {
background: #1e8113; }
#r6c1 {
background: #e004b9; }
#r6c2 {
background: #7ed1ec; }
#r6c3 {
background: #26c544; }
#r6c4 {
background: #426012; }
#r6c5 {
background: #ef7356; }
#r6c6 {
background: #4399f5; }
#r6c7 {
background: #89d054; }
#r6c8 {
background: #746b0f; }
#r6c9 {
background: #b616f7; }
#r7c0 {
background: #27ed47; }
#r7c1 {
background: #c570e7; }
#r7c2 {
background: #379b0a; }
#r7c3 {
background: #d0dcf9; }
#r7c4 {
background: #b6ba04; }
#r7c5 {
background: #0f563d; }
#r7c6 {
background: #4e34b0; }
#r7c7 {
background: #e3c32d; }
#r7c8 {
background: #f39d9e; }
#r7c9 {
background: #e9f9e0; }
#r8c0 {
background: #1a4571; }
#r8c1 {
background: #5ad67d; }
#r8c2 {
background: #e6a830; }
#r8c3 {
background: #3b089a; }
#r8c4 {
background: #033b9c; }
#r8c5 {
background: #9e0d6e; }
#r8c6 {
background: #b29f25; }
#r8c7 {
background: #1d33d8; }
#r8c8 {
background: #053658; }
#r8c9 {
background: #23b71d; }
#r9c0 {
background: #5c32c5; }
#r9c1 {
background: #9d7d3e; }
#r9c2 {
background: #172f58; }
#r9c3 {
background: #850343; }
#r9c4 {
background: #79eac9; }
#r9c5 {
background: #ff9abd; }
#r9c6 {
background: #4ca78c; }
#r9c7 {
background: #d25aae; }
#r9c8 {
background: #9130d0; }
#r9c9 {
background: #7529f8; }
/*# sourceMappingURL=pix.css.map */

7
src/front/pix.css.map
View file

@ -1,7 +0,0 @@
{
"version": 3,
"mappings": "AAEQ,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C",
"sources": ["pix.scss"],
"names": [],
"file": "pix.css"
}

7
src/front/pix.scss
View file

@ -1,7 +0,0 @@
@for $i from 0 through 9 {
@for $j from 0 through 9 {
#r#{$i}c#{$j} {
background: rgb(random(255), random(255), random(255));
}
}
}

70
src/front/pixels.css
View file

@ -1,55 +1,59 @@
.pixel-container { .pixel-container {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 1000px; height: 1000px;
} }
table { table {
--side: 80px; --side: 80px;
--border-width: 3px; --border-width: 3px;
border-spacing: 0; border-spacing: 0;
table-layout: fixed; table-layout: fixed;
width: calc(10 * var(--side)); width: calc(10 * var(--side));
height: calc(10 * var(--side)); height: calc(10 * var(--side));
}
table tr {
height: var(--side);
} }
.pixel { .pixel {
background: #fff; background: #fff;
width: var(--side); width: var(--side);
height: var(--side); height: var(--side);
display: inline-block; display: inline-block;
} }
.pixel:hover { .pixel:hover {
--border-color: #333; --border-color: #333;
box-shadow: 0px 0px 0px var(--border-width) var(--border-color); box-shadow: 0px 0px 0px var(--border-width) var(--border-color);
} }
.info-pixel { .info-pixel {
display: none; display: none;
position: relative; position: relative;
width: max-content; width: max-content;
top: var(--side); top: var(--side);
box-shadow: 0px 0px 0px var(--border-width) var(--border-color); box-shadow: 0px 0px 0px var(--border-width) var(--border-color);
background: #888; background: #888;
} }
.pixel:hover .info-pixel { .pixel:hover .info-pixel {
display: block; display: block;
} }
.patch-shadow { .patch-shadow {
display: none; display: none;
width: 3px; width: 3px;
position: relative; position: relative;
height: var(--side); height: var(--side);
left: var(--side); left: var(--side);
top: calc(var(--side) / (-2) + var(--border-width)); top: calc(var(--side) / (-2) + var(--border-width));
background: var(--border-color); background: var(--border-color);
} }
.pixel:hover .patch-shadow { .pixel:hover .patch-shadow {
display: block; display: block;
} }

45
src/front/pixels.js
View file

@ -1,25 +1,32 @@
var xmlhttp = new XMLHttpRequest();
var url = "http://localhost:8080/api/pixel"; var url = "http://localhost:8080/api/pixel";
xmlhttp.onreadystatechange = function() { function setPixels(pixelsJSON) {
if (this.readyState == 4 && this.status == 200) {
var json = JSON.parse(this.responseText);
setPixels(json);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function setPixels(json) {
console.log(json);
var table = document.getElementById("pixelTable"); var table = document.getElementById("pixelTable");
var num_columns = table.rows[0].cells.length; var num_rows = table.rows.length;
console.log(num_rows)
for (i in pixelsJSON) {
var pixel = pixelsJSON[i];
var row_id = Math.floor((pixel.id - 1) / num_rows);
var row = table.rows[row_id];
row.innerHTML +=
'<td class="pixel" style="background:' + pixel.color + '">' +
'<div class="info-pixel">' +
'<div class="username">' + 'pixel.owner' + '</div>' +
'<div class="description">' + pixel.description + '</div>' +
'</div>' +
'<div class="patch-shadow"></div>' +
'</td>';
for (i in json) {
var pixel = json[i]
console.log(pixel)
var cell = table.rows[Math.floor((pixel.id - 1) / num_columns)].cells[(pixel.id - 1) % num_columns];
cell.style.background = pixel.color;
} }
} }
const callSetPixels = async () => {
const reponse = await fetch(url);
const pixelsJSON = await reponse.json();
setPixels(pixelsJSON);
}
callSetPixels();