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
6
build.sh
|
@ -28,10 +28,10 @@ rm -f museum.c/*
|
||||||
pengers_html=$'\n'
|
pengers_html=$'\n'
|
||||||
pengers_include=$'\n'
|
pengers_include=$'\n'
|
||||||
id=0
|
id=0
|
||||||
for p in $(ls museum); do
|
for p in $(ls static/museum/); do
|
||||||
file=$(echo $p | sed "s/\.png$//g")
|
file=$(echo $p | sed "s/\.png$//g")
|
||||||
./png2c "museum/"$p $id > museum.c/$file.c
|
./png2c "static/museum/"$p $id > museum.c/$file.c
|
||||||
pengers_html+=$' <img src="museum/'$p'" class="penger-img" penger-id="'$id'"></img>\n'
|
pengers_html+=$' <img src="static/museum/'$p'" class="penger-img" penger-id="'$id'"></img>\n'
|
||||||
pengers_include+='#include "museum.c/'$file$'.c"\n'
|
pengers_include+='#include "museum.c/'$file$'.c"\n'
|
||||||
((id=id+1))
|
((id=id+1))
|
||||||
done
|
done
|
||||||
|
|
|
@ -3,57 +3,11 @@
|
||||||
<head>
|
<head>
|
||||||
<title>Penger Party</title>
|
<title>Penger Party</title>
|
||||||
<script src="load.js"></script>
|
<script src="load.js"></script>
|
||||||
<style>
|
<link rel="stylesheet" href="/static/css/base.css">
|
||||||
#demo-canvas:hover {
|
<link rel="stylesheet" href="/static/css/rainbow.css">
|
||||||
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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Penger Party</h1>
|
<h1 class="rainbow">Penger Party</h1>
|
||||||
<div id="css-bullshit">
|
<div id="css-bullshit">
|
||||||
<div id="left">
|
<div id="left">
|
||||||
<canvas id="demo-canvas"></canvas>
|
<canvas id="demo-canvas"></canvas>
|
||||||
|
@ -93,9 +47,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h3>Choose your penger:</h3>
|
<h3>Choose your penger:</h3>
|
||||||
|
<div>
|
||||||
<!-- penger images src -->
|
<!-- penger images src -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h3>Made by a Penger Entousiast</h3>
|
</div>
|
||||||
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
10
server.js
|
@ -76,12 +76,20 @@ const requestListener = function (req, res) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (url.startsWith("/museum/")) {
|
if (url.startsWith("/static/museum/")) {
|
||||||
res.setHeader("Content-Type", "image/png");
|
res.setHeader("Content-Type", "image/png");
|
||||||
res.writeHead(200);
|
res.writeHead(200);
|
||||||
res.end(fs.readFileSync("." + url));
|
res.end(fs.readFileSync("." + url));
|
||||||
return;
|
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") {
|
if (url == "/create-map") {
|
||||||
res.setHeader("Content-Type", "text/html");
|
res.setHeader("Content-Type", "text/html");
|
||||||
res.writeHead(200);
|
res.writeHead(200);
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 728 B After Width: | Height: | Size: 728 B |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.7 KiB |
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 550 B After Width: | Height: | Size: 550 B |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 535 B After Width: | Height: | Size: 535 B |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 500 B After Width: | Height: | Size: 500 B |
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.9 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |