refactor: update CSS and images files path to include them in a static file

- Include static file serving in server.js - Inlucde new musuem path in build.sh
2024-11-27 12:25:53 +01:00 · 2024-11-27 12:25:53 +01:00 · a039ef94d1
parent a71cba60c2
commit a039ef94d1
153 changed files with 124 additions and 54 deletions
--- a/build.sh
+++ b/build.sh
@ -28,10 +28,10 @@ rm -f museum.c/*
 pengers_html=$'\n'
 pengers_include=$'\n'
 id=0
-for p in $(ls museum); do
+for p in $(ls static/museum/); do
    file=$(echo $p | sed "s/\.png$//g")
-    ./png2c "museum/"$p $id > museum.c/$file.c
-    pengers_html+=$'                <img src="museum/'$p'" class="penger-img" penger-id="'$id'"></img>\n'
+    ./png2c "static/museum/"$p $id > museum.c/$file.c
+    pengers_html+=$'                <img src="static/museum/'$p'" class="penger-img" penger-id="'$id'"></img>\n'
    pengers_include+='#include "museum.c/'$file$'.c"\n'
    ((id=id+1))
 done
--- a/index.html.template
+++ b/index.html.template
@ -3,57 +3,11 @@
    <head>
        <title>Penger Party</title>
        <script src="load.js"></script>
-        <style>
-            #demo-canvas:hover {
-                cursor: none
-            }
-            .penger-img {
-                width: 64px;
-                image-rendering: pixelated;
-            }
-            .players-img {
-                margin-right: 10px;
-            }
-            h1 {
-                text-align: center;
-                font-size: 1.5em;
-                margin: 0px;
-            }
-            h3 {
-                margin-top: 7px;
-            }
-            .info {
-                display: flex;
-                flex-wrap: wrap;
-                justify-content: space-between;
-            }
-            .info > * {
-                margin-right: 1rem;
-            }
-            #chat {
-                width: 69%;
-            }
-            @media screen and (min-width: calc(800px + calc(64px * 4))) {
-                #css-bullshit {
-                    content: "";
-                    display: table;
-                    clear: both;
-                }
-                #left {
-                    float: left;
-                    width: 50%;
-                }
-                #right {
-                    float: right;
-                    width: calc(100% - 800px - 25px);
-                    position: absolute;
-                    right: 0px;
-                }
-            }
-        </style>
+        <link rel="stylesheet" href="/static/css/base.css">
+        <link rel="stylesheet" href="/static/css/rainbow.css">
    </head>
    <body>
-        <h1>Penger Party</h1>
+        <h1 class="rainbow">Penger Party</h1>
        <div id="css-bullshit">
            <div id="left">
                <canvas id="demo-canvas"></canvas>
@ -93,9 +47,11 @@
                    </div>
                </div>
                <h3>Choose your penger:</h3>
+                <div>
                <!-- penger images src -->
+                </div>
            </div>
        </div>
-        <h3>Made by a Penger Entousiast</h3>
+        <h3><a target="_blank" href="https://n3m0.fr/">Made by </a><a target="_blank" href="https://fruitpassion.fr/">a</a><a target="_blank" href="https://n3m0.fr/"> Penger Entousiast</a></h3>
    </body>
 </html>
--- a/server.js
+++ b/server.js
@ -76,12 +76,20 @@ const requestListener = function (req, res) {
        return;
    }

-    if (url.startsWith("/museum/")) {
+    if (url.startsWith("/static/museum/")) {
 	    res.setHeader("Content-Type", "image/png");
        res.writeHead(200);
        res.end(fs.readFileSync("." + url));
        return;
    }
+
+    if (url.startsWith("/static/css/")) {
+	    res.setHeader("Content-Type", "text/css");
+        res.writeHead(200);
+        res.end(fs.readFileSync("." + url));
+        return;
+    }
+
    if (url == "/create-map") {
        res.setHeader("Content-Type", "text/html");
        res.writeHead(200);
--- a/static/css/.gitkeep
+++ b/static/css/.gitkeep
--- a/static/css/base.css
+++ b/static/css/base.css
@ -0,0 +1,64 @@
+body{
+    background-color: pink;
+}
+#demo-canvas {
+    border-radius: 30px;
+    filter: drop-shadow(0 0 0.75rem black);
+}
+#demo-canvas:hover {
+    cursor: none
+}
+.penger-img {
+    width: 64px;
+    image-rendering: pixelated;
+    border-radius: 5px;
+    border: solid 1px white;
+    height: 64px;
+    object-fit: contain;
+    transition: transform 0.2s;
+}
+.penger-img:hover {
+    cursor: pointer;
+    transform: scale(1.1);
+}
+.players-img {
+    margin-right: 10px;
+}
+h1 {
+    text-align: center;
+    font-size: 3.5em;
+    margin: 0px;
+    margin-bottom: 20px;
+    font-family: "Comic Sans MS", "Comic Sans", cursive;
+}
+h3 {
+    margin-top: 7px;
+}
+.info {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.info > * {
+    margin-right: 1rem;
+}
+#chat {
+    width: 69%;
+}
+@media screen and (min-width: calc(800px + calc(64px * 4))) {
+    #css-bullshit {
+        content: "";
+        display: table;
+        clear: both;
+    }
+    #left {
+        float: left;
+        width: 50%;
+    }
+    #right {
+        float: right;
+        width: calc(100% - 800px - 25px);
+        position: absolute;
+        right: 0px;
+    }
+}
--- a/static/css/rainbow.css
+++ b/static/css/rainbow.css
@ -0,0 +1,42 @@
+.rainbow{
+    animation: rainbow 2.5s linear;
+    animation-iteration-count: infinite;
+}
+@keyframes rainbow{
+        100%,0%{
+            color: rgb(255,0,0);
+        }
+        8%{
+            color: rgb(255,127,0);
+        }
+        16%{
+            color: rgb(255,255,0);
+        }
+        25%{
+            color: rgb(127,255,0);
+        }
+        33%{
+            color: rgb(0,255,0);
+        }
+        41%{
+            color: rgb(0,255,127);
+        }
+        50%{
+            color: rgb(0,255,255);
+        }
+        58%{
+            color: rgb(0,127,255);
+        }
+        66%{
+            color: rgb(0,0,255);
+        }
+        75%{
+            color: rgb(127,0,255);
+        }
+        83%{
+            color: rgb(255,0,255);
+        }
+        91%{
+            color: rgb(255,0,127);
+        }
+}
--- a/static/museum/18Plusger.png
+++ b/static/museum/18Plusger.png
--- a/static/museum/Adelieger.png
+++ b/static/museum/Adelieger.png
--- a/static/museum/Baldger.png
+++ b/static/museum/Baldger.png
--- a/static/museum/Blenger.png
+++ b/static/museum/Blenger.png
--- a/static/museum/BlueWolologer.png
+++ b/static/museum/BlueWolologer.png
--- a/static/museum/Camelger.png
+++ b/static/museum/Camelger.png
--- a/static/museum/Camellow.png
+++ b/static/museum/Camellow.png
--- a/static/museum/Capger.png
+++ b/static/museum/Capger.png
--- a/static/museum/CapgerSaysTransRights.png
+++ b/static/museum/CapgerSaysTransRights.png
--- a/static/museum/CephonPenger.png
+++ b/static/museum/CephonPenger.png
--- a/static/museum/Clipenger.png
+++ b/static/museum/Clipenger.png
--- a/static/museum/Clownger.png
+++ b/static/museum/Clownger.png
--- a/static/museum/Coffeeger.png
+++ b/static/museum/Coffeeger.png
--- a/static/museum/Cookger.png
+++ b/static/museum/Cookger.png
--- a/static/museum/Copeger.png
+++ b/static/museum/Copeger.png
--- a/static/museum/Criminalger.png
+++ b/static/museum/Criminalger.png
--- a/static/museum/Cryger.png
+++ b/static/museum/Cryger.png
--- a/static/museum/CrygerBlood.png
+++ b/static/museum/CrygerBlood.png
--- a/static/museum/CrygerChernobyl.png
+++ b/static/museum/CrygerChernobyl.png
--- a/static/museum/Cyberger.png
+++ b/static/museum/Cyberger.png
--- a/static/museum/DarthPenger.png
+++ b/static/museum/DarthPenger.png
--- a/static/museum/Deadger.png
+++ b/static/museum/Deadger.png
--- a/static/museum/Demureger.png
+++ b/static/museum/Demureger.png
--- a/static/museum/Disger.png
+++ b/static/museum/Disger.png
--- a/static/museum/DoctorPenger.png
+++ b/static/museum/DoctorPenger.png
--- a/static/museum/Doomger.png
+++ b/static/museum/Doomger.png
--- a/static/museum/EvilCyberger.png
+++ b/static/museum/EvilCyberger.png
--- a/static/museum/Factoryger.png
+++ b/static/museum/Factoryger.png
--- a/static/museum/Fatger.png
+++ b/static/museum/Fatger.png
--- a/static/museum/Ferrisger.png
+++ b/static/museum/Ferrisger.png
--- a/static/museum/Fesh.png
+++ b/static/museum/Fesh.png
--- a/static/museum/Feshger.png
+++ b/static/museum/Feshger.png
--- a/static/museum/Frankenpenger.png
+++ b/static/museum/Frankenpenger.png
--- a/static/museum/FullCookger.png
+++ b/static/museum/FullCookger.png
--- a/static/museum/GNUPenger.png
+++ b/static/museum/GNUPenger.png
--- a/static/museum/Geniusger.png
+++ b/static/museum/Geniusger.png
--- a/static/museum/Ghostger.png
+++ b/static/museum/Ghostger.png
--- a/static/museum/Ghostyger.png
+++ b/static/museum/Ghostyger.png
--- a/static/museum/Githubger.png
+++ b/static/museum/Githubger.png
--- a/static/museum/Goldger.png
+++ b/static/museum/Goldger.png
--- a/static/museum/Gonger.png
+++ b/static/museum/Gonger.png
--- a/static/museum/Gopnikger.png
+++ b/static/museum/Gopnikger.png
--- a/static/museum/Grubenger.png
+++ b/static/museum/Grubenger.png
--- a/static/museum/Gunger.png
+++ b/static/museum/Gunger.png
--- a/static/museum/HDPenger.png
+++ b/static/museum/HDPenger.png
--- a/static/museum/Hackger.png
+++ b/static/museum/Hackger.png
--- a/static/museum/Heisenberger.png
+++ b/static/museum/Heisenberger.png
--- a/static/museum/HolyCPenger.png
+++ b/static/museum/HolyCPenger.png
--- a/static/museum/Holyger.png
+++ b/static/museum/Holyger.png
--- a/static/museum/Hoodger.png
+++ b/static/museum/Hoodger.png
--- a/static/museum/Howdyger.png
+++ b/static/museum/Howdyger.png
--- a/static/museum/Ideager.png
+++ b/static/museum/Ideager.png
--- a/static/museum/JPenger.png
+++ b/static/museum/JPenger.png
--- a/static/museum/Jonkger.png
+++ b/static/museum/Jonkger.png
--- a/static/museum/Kidger.png
+++ b/static/museum/Kidger.png
--- a/static/museum/Knightger.png
+++ b/static/museum/Knightger.png
--- a/static/museum/Laptopger.png
+++ b/static/museum/Laptopger.png
--- a/static/museum/Luigiger.png
+++ b/static/museum/Luigiger.png
--- a/static/museum/Macger.png
+++ b/static/museum/Macger.png
--- a/static/museum/Madger.png
+++ b/static/museum/Madger.png
--- a/static/museum/Malger.png
+++ b/static/museum/Malger.png
--- a/static/museum/Marioger.png
+++ b/static/museum/Marioger.png
--- a/static/museum/Michaelger.png
+++ b/static/museum/Michaelger.png
--- a/static/museum/Millhouseger.png
+++ b/static/museum/Millhouseger.png
--- a/static/museum/Mineger.png
+++ b/static/museum/Mineger.png
--- a/static/museum/Momger.png
+++ b/static/museum/Momger.png
--- a/static/museum/MonkeyGer.png
+++ b/static/museum/MonkeyGer.png
--- a/static/museum/Moustacheger.png
+++ b/static/museum/Moustacheger.png
--- a/static/museum/Nerdger.png
+++ b/static/museum/Nerdger.png
--- a/static/museum/NinjaPenger.png
+++ b/static/museum/NinjaPenger.png
--- a/static/museum/Oldger.png
+++ b/static/museum/Oldger.png
--- a/static/museum/Paintger.png
+++ b/static/museum/Paintger.png
--- a/static/museum/Partyger.png
+++ b/static/museum/Partyger.png
--- a/static/museum/Peng.png
+++ b/static/museum/Peng.png
--- a/static/museum/PengKisser.png
+++ b/static/museum/PengKisser.png
--- a/static/museum/Pengachu.png
+++ b/static/museum/Pengachu.png
--- a/static/museum/Penganger.png
+++ b/static/museum/Penganger.png
--- a/static/museum/Pengcoder.png
+++ b/static/museum/Pengcoder.png
--- a/static/museum/Penger.png
+++ b/static/museum/Penger.png
--- a/static/museum/PengerClose.png
+++ b/static/museum/PengerClose.png
--- a/static/museum/PengerFront.png
+++ b/static/museum/PengerFront.png
--- a/static/museum/PengerGiga.png
+++ b/static/museum/PengerGiga.png
--- a/static/museum/PengerH.png
+++ b/static/museum/PengerH.png
--- a/static/museum/PengerHeart.png
+++ b/static/museum/PengerHeart.png
--- a/static/museum/PengerNote.png
+++ b/static/museum/PengerNote.png
--- a/static/museum/PengerNumberOne.png
+++ b/static/museum/PengerNumberOne.png
--- a/static/museum/PengerRidingCamellow.png
+++ b/static/museum/PengerRidingCamellow.png
--- a/static/museum/PengerSeller.png
+++ b/static/museum/PengerSeller.png
--- a/static/museum/PengerSilverfoot.png
+++ b/static/museum/PengerSilverfoot.png
--- a/static/museum/PengerStatue.png
+++ b/static/museum/PengerStatue.png
--- a/static/museum/PengerStream.png
+++ b/static/museum/PengerStream.png
--- a/static/museum/PengerTPose.png
+++ b/static/museum/PengerTPose.png
--- a/static/museum/PengerThumbsUp.png
+++ b/static/museum/PengerThumbsUp.png
--- a/static/museum/Pengerberry.png
+++ b/static/museum/Pengerberry.png
--- a/Show More
+++ b/Show More