From db7dcfce60a77834d14f023bab70ba3d64201ed9 Mon Sep 17 00:00:00 2001 From: gdamms Date: Fri, 20 May 2022 10:58:26 +0200 Subject: [PATCH] feat: pixels full JS --- src/front/index.html | 730 +----------------------------------------- src/front/pix.css | 301 ----------------- src/front/pix.css.map | 7 - src/front/pix.scss | 7 - src/front/pixels.css | 70 ++-- src/front/pixels.js | 45 +-- 6 files changed, 73 insertions(+), 1087 deletions(-) delete mode 100644 src/front/pix.css delete mode 100644 src/front/pix.css.map delete mode 100644 src/front/pix.scss diff --git a/src/front/index.html b/src/front/index.html index 7fa1c25..2586c99 100644 --- a/src/front/index.html +++ b/src/front/index.html @@ -85,726 +85,16 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + +
-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
-
-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
-
-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
-
-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
-
-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
-
-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
-
-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
-
-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
-
-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
-
-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
- 		-
-
Moi
-
Petit desc oklm
-
-
-
diff --git a/src/front/pix.css b/src/front/pix.css deleted file mode 100644 index badb65f..0000000 --- a/src/front/pix.css +++ /dev/null @@ -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 */ diff --git a/src/front/pix.css.map b/src/front/pix.css.map deleted file mode 100644 index 0f485e5..0000000 --- a/src/front/pix.css.map +++ /dev/null @@ -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" -} diff --git a/src/front/pix.scss b/src/front/pix.scss deleted file mode 100644 index be12397..0000000 --- a/src/front/pix.scss +++ /dev/null @@ -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)); - } - } -} \ No newline at end of file diff --git a/src/front/pixels.css b/src/front/pixels.css index 2313619..cc0c40f 100644 --- a/src/front/pixels.css +++ b/src/front/pixels.css @@ -1,55 +1,59 @@ .pixel-container { - display: flex; - justify-content: space-evenly; - align-items: center; - width: 100%; - height: 1000px; + display: flex; + justify-content: space-evenly; + align-items: center; + width: 100%; + height: 1000px; } table { - --side: 80px; - --border-width: 3px; - border-spacing: 0; - table-layout: fixed; - width: calc(10 * var(--side)); - height: calc(10 * var(--side)); + --side: 80px; + --border-width: 3px; + border-spacing: 0; + table-layout: fixed; + width: calc(10 * var(--side)); + height: calc(10 * var(--side)); +} + +table tr { + height: var(--side); } .pixel { - background: #fff; - width: var(--side); - height: var(--side); - display: inline-block; + background: #fff; + width: var(--side); + height: var(--side); + display: inline-block; } .pixel:hover { - --border-color: #333; - box-shadow: 0px 0px 0px var(--border-width) var(--border-color); + --border-color: #333; + box-shadow: 0px 0px 0px var(--border-width) var(--border-color); } .info-pixel { - display: none; - position: relative; - width: max-content; - top: var(--side); - box-shadow: 0px 0px 0px var(--border-width) var(--border-color); - background: #888; + display: none; + position: relative; + width: max-content; + top: var(--side); + box-shadow: 0px 0px 0px var(--border-width) var(--border-color); + background: #888; } .pixel:hover .info-pixel { - display: block; + display: block; } .patch-shadow { - display: none; - width: 3px; - position: relative; - height: var(--side); - left: var(--side); - top: calc(var(--side) / (-2) + var(--border-width)); - background: var(--border-color); + display: none; + width: 3px; + position: relative; + height: var(--side); + left: var(--side); + top: calc(var(--side) / (-2) + var(--border-width)); + background: var(--border-color); } .pixel:hover .patch-shadow { - display: block; -} \ No newline at end of file + display: block; +} diff --git a/src/front/pixels.js b/src/front/pixels.js index 3d9dbf4..8399353 100644 --- a/src/front/pixels.js +++ b/src/front/pixels.js @@ -1,25 +1,32 @@ -var xmlhttp = new XMLHttpRequest(); var url = "http://localhost:8080/api/pixel"; -xmlhttp.onreadystatechange = function() { - 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); - +function setPixels(pixelsJSON) { 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 += + '' + + '
' + + '
' + 'pixel.owner' + '
' + + '
' + pixel.description + '
' + + '
' + + '
' + + ''; - 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();