hacklab/OASIS_MOBILE
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Oasis 0.8.7 mobile (nodejs-project baseline)

Browse source
This commit is contained in:
s1to 2026-07-09 09:56:30 +02:00
commit e563b86ede
226 changed files with 141968 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

92
src/views/pixelia_view.js Normal file
View file

@ -0,0 +1,92 @@
const { div, h2, p, section, form, input, label, select, option, button, table, tr, td, hr, ul, li, a, br } = require("../server/node_modules/hyperaxe");
const { template, i18n, userLink} = require('./main_views');
exports.pixeliaView = (pixelArt, errorMessage) => {
const title = i18n.pixeliaTitle;
const description = i18n.pixeliaDescription;
const gridWidth = 50;
const gridHeight = 200;
const grid = table(
{ class: "pixelia-grid" },
...Array.from({ length: gridHeight }, (_, rowIndex) =>
tr(
...Array.from({ length: gridWidth }, (_, colIndex) => {
const pixel = pixelArt.find(p => p.x === colIndex + 1 && p.y === rowIndex + 1);
const colorClass = pixel ? `pixel-color-${pixel.color.slice(1)}` : 'pixel-empty';
const cellId = `cell-${rowIndex + 1}-${colIndex + 1}`;
return td(
{
id: cellId,
title: pixel ? `By: ${pixel.author}` : "",
class: `pixel-cell ${colorClass}`
},
""
);
})
)
)
);
const contributors = pixelArt.length > 0 ? [...new Set(pixelArt.flatMap(p => p.contributors_inhabitants || []))] : [];
return template(
title,
section(
div({ class: "tags-header" },
h2(title),
p(description)
)
),
section(
div({ class: "pixelia-form-wrap" },
form({ method: "POST", action: "/pixelia/paint", class: "pixelia-paint-form" },
label({ for: "x" }, "X (1-50):"),
input({ type: "number", id: "x", name: "x", min: 1, max: gridWidth, required: true }),
label({ for: "y" }, "Y (1-200):"),
input({ type: "number", id: "y", name: "y", min: 1, max: gridHeight, required: true }),
label({ for: "color" }, i18n.colorLabel),
select({ id: "color", name: "color", required: true },
option({ value: "#000000", style: "background-color:#000000;" }, "Black"),
option({ value: "#ffffff", style: "background-color:#ffffff;" }, "White"),
option({ value: "#17f018", style: "background-color:#17f018;" }, "Green"),
option({ value: "#ffbb00", style: "background-color:#ffbb00;" }, "Yellow"),
option({ value: "#ff0000", style: "background-color:#ff0000;" }, "Red"),
option({ value: "#0000ff", style: "background-color:#0000ff;" }, "Blue"),
option({ value: "#ffff00", style: "background-color:#ffff00;" }, "Lime"),
option({ value: "#00ff00", style: "background-color:#00ff00;" }, "Spring Green"),
option({ value: "#00ffff", style: "background-color:#00ffff;" }, "Aqua"),
option({ value: "#ff00ff", style: "background-color:#ff00ff;" }, "Fuchsia"),
option({ value: "#a52a2a", style: "background-color:#a52a2a;" }, "Brown"),
option({ value: "#800080", style: "background-color:#800080;" }, "Purple"),
option({ value: "#808000", style: "background-color:#808000;" }, "Olive"),
option({ value: "#00bfff", style: "background-color:#00bfff;" }, "Deep Sky Blue"),
option({ value: "#d3d3d3", style: "background-color:#d3d3d3;" }, "Light Grey"),
option({ value: "#ff6347", style: "background-color:#ff6347;" }, "Tomato")
),
button({ type: "submit" }, i18n.paintButton)
)
),
errorMessage ? div({ class: "error-message" }, errorMessage) : null,
div({ class: "total-pixels" },
h2(`${i18n.totalPixels}: ${pixelArt.length}`)
)
),
hr(),
section(
div({ class: "main_content" },
div({ class: "pixelia-grid-wrap" }, grid),
pixelArt.length > 0 ?
div({ class: "contributors" },
h2(i18n.contributorsTitle),
ul(
...contributors.map(author =>
li(userLink(author))
)
)
) : null
)
)
);
};