sam/Parchment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: sam:2e2eb793df48074ca781cae69227869d09e3a202
Branches Tags
sam:main sam:master sam:infinityMirror
..
compare: sam:main
Branches Tags
sam:master sam:infinityMirror sam:main

4 Commits
2e2eb793df ... main

Author SHA1 Message Date
metacryst
39959246cd solid canvas prototpye 2025-12-29 06:03:50 -06:00
metacryst
a21e651484 small organization, different port 2025-12-29 03:03:49 -06:00
metacryst
71984ddd67 Merge branch 'main' of https://git.sun.museum/sam/Downloads 2025-12-28 06:49:06 -06:00
metacryst
263a9795b9 renaming, spawning forms if it does not exist, simplifying 2025-12-28 06:49:04 -06:00
18 changed files with 457 additions and 410 deletions
Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,3 +1,4 @@
node_modules node_modules
package-lock.json package-lock.json
master.forms master.forms
forms/app.log

2
server/index.html → app.html
View File

@@ -25,6 +25,6 @@
</head> </head>
<body> <body>
<div class="draggable"></div> <div class="draggable"></div>
<webview src="http://localhost:80" style="width:100vw; height:100vh;"></webview> <webview src="http://localhost:10001" style="width:100vw; height:100vh;"></webview>
</body> </body>
</html> </html>

99
app.js
View File

@@ -1,17 +1,20 @@
import { app, BrowserWindow, globalShortcut } from 'electron'; import { app, BrowserWindow, globalShortcut } from 'electron';
import paths from 'path' import paths from 'path'
import Server from "./server/index.js" import { spawn } from 'child_process'
import fs from 'fs'
import { fileURLToPath } from 'url'; import util from './flame/util.js'
const __filename = fileURLToPath(import.meta.url); import Server from "./flame/index.js"
const __dirname = paths.dirname(__filename);
const WINDOW_SHORTCUTS = [ const WINDOW_SHORTCUTS = [
process.platform === "darwin" ? "Command+R" : "Control+R", process.platform === "darwin" ? "Command+R" : "Control+R",
"\\" "\\"
]; ];
function createWindow({onTop = false}) { class App {
devToolsOpened = false;
createWindow({onTop = false}) {
const win = new BrowserWindow({ const win = new BrowserWindow({
width: 1200, width: 1200,
height: 800, height: 800,
@@ -30,7 +33,7 @@ function createWindow({onTop = false}) {
win.setAlwaysOnTop(true, 'screen-saver', 1); // necessary so it doesn't bring you back out of full screen when spawned win.setAlwaysOnTop(true, 'screen-saver', 1); // necessary so it doesn't bring you back out of full screen when spawned
} }
win.loadFile('server/index.html'); win.loadFile('app.html');
win.on("focus", () => { win.on("focus", () => {
win.setVibrancy("appearance-based"); // full colors win.setVibrancy("appearance-based"); // full colors
@@ -53,33 +56,58 @@ function createWindow({onTop = false}) {
globalShortcut.unregister(key); globalShortcut.unregister(key);
} }
}); });
} }
let devToolsOpened = false; spawnFlame(spawnForms) {
new Server(spawnForms, 10001)
}
function toggleDevTools(win) { async spawnForms() {
if (devToolsOpened) { const logPath = paths.join(util.FORMS_PATH, "app.log");
const out = fs.openSync(logPath, "a");
const err = fs.openSync(logPath, "a");
const child = spawn(
process.execPath,
[paths.join(util.FORMS_PATH, "kernel/kernel.js")],
{
detached: true,
stdio: [
"ignore",
out,
err
],
cwd: process.cwd(),
env: process.env
}
);
child.unref();
}
toggleDevTools(win) {
if (this.devToolsOpened) {
win.closeDevTools(); win.closeDevTools();
} else { } else {
win.openDevTools(); win.openDevTools();
} }
devToolsOpened = !devToolsOpened; this.devToolsOpened = !this.devToolsOpened;
} }
app.on("ready", async () => { registerShortcuts() {
// await Forms.init(); globalShortcut.register('CommandOrControl+Shift+Space', function CreateWindow() {
// createWindow({onTop: false}); this.createWindow({onTop: true});
new Server()
globalShortcut.register('CommandOrControl+Shift+Space', () => {
createWindow({onTop: true});
}); });
// Register global shortcuts app.on("browser-window-focus", function RegisterWindowOnFocus() {
app.on("browser-window-focus", () => {
const focused = BrowserWindow.getFocusedWindow(); const focused = BrowserWindow.getFocusedWindow();
if (!focused) return; if (!focused) return;
let WINDOW_SHORTCUTS = [
process.platform === "darwin" ? "Command+R" : "Control+R",
"\\"
];
// Reload // Reload
globalShortcut.register(WINDOW_SHORTCUTS[0], () => { globalShortcut.register(WINDOW_SHORTCUTS[0], () => {
focused.reload(); focused.reload();
@@ -91,19 +119,30 @@ app.on("ready", async () => {
}); });
}); });
app.on("browser-window-blur", () => { app.on("browser-window-blur", function UnregisterWindowOnUnfocus() {
for (const key of WINDOW_SHORTCUTS) { for (const key of WINDOW_SHORTCUTS) {
globalShortcut.unregister(key); globalShortcut.unregister(key);
} }
}); });
});
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow({onTop: false});
} }
});
app.on('window-all-closed', () => { constructor() {
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
this.createWindow({onTop: false});
}
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit(); if (process.platform !== 'darwin') app.quit();
}); });
app.on("ready", async () => {
this.createWindow({onTop: false});
this.spawnFlame(this.spawnForms)
this.registerShortcuts()
});
}
}
new App()

0
ui/_/code/quill.js → cave/_/code/quill.js
View File

7
ui/_/code/shared.css → cave/_/code/shared.css
View File

@@ -1,5 +1,5 @@
:root { :root {
--main: #BD410D; --main: #FFBB7C;
--accent: var(--tan); --accent: var(--tan);
--accent2: var(--brown); --accent2: var(--brown);
@@ -8,7 +8,8 @@
--green: #0B5538; --green: #0B5538;
--red: #BC1C02; --red: #BC1C02;
--brown: #c6a476; --brown: #c6a476;
--darkbrown: #60320c; --rust: #BD410D;
--darkbrown: #6A2C1C;
--darkred: #7f0b09; --darkred: #7f0b09;
--darkorange: #b15900; --darkorange: #b15900;
--orange: #FE9201; --orange: #FE9201;
@@ -18,7 +19,7 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--main: #6A2C1C; --main: var(--darkbrown);
--accent: var(--tan); --accent: var(--tan);
--accent2: var(--green); --accent2: var(--green);
--accent3: #c74109 --accent3: #c74109

0
ui/_/icons/logo.png → cave/_/icons/logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 117 KiB

14
ui/index.html → cave/index.html
View File

@@ -7,7 +7,21 @@
<link rel="stylesheet" href="/_/code/shared.css"></script> <link rel="stylesheet" href="/_/code/shared.css"></script>
<script src="/_/code/quill.js"></script> <script src="/_/code/quill.js"></script>
<script type="module" src="/75820185/index.js"></script> <script type="module" src="/75820185/index.js"></script>
<style>
:root {
--main: #6A2C1C;
--accent: #FEB279;
}
html, body {
margin: 0;
padding: 0;
overflow: hidden;
background: var(--main);
}
</style>
</head> </head>
<body style="margin: 0px;"> <body style="margin: 0px;">
</body> </body>
</html> </html>

146
cave/index.js Normal file
View File

@@ -0,0 +1,146 @@
/*
Samuel Russell
Captured Sun
12.29.2025
*/
class Canvas {
STROKE_COLOR = getComputedStyle(document.documentElement).getPropertyValue("--accent").trim();
c = document.createElement("canvas")
ctx;
/* -----------------------------
Camera
----------------------------- */
camera = {
x: 0,
y: 0,
scale: 1,
ZOOM_SPEED: 0.016,
PAN_SPEED: 1.5,
FOCUS_THRESHOLD: 4.0
}
/* -----------------------------
Rectangle
----------------------------- */
rect = {
x: -300,
y: -200,
w: 600,
h: 400
};
resize = () => {
// Make Canvas Fill Screen
this.c.style.width = window.innerWidth + "px";
this.c.style.height = window.innerHeight + "px";
// Set Internal Render Size by DPR
const dpr = window.devicePixelRatio || 1;
this.c.width = window.innerWidth * dpr;
this.c.height = window.innerHeight * dpr;
this.ctx.scale(dpr, dpr);
}
onWheel = (e) => {
e.preventDefault();
let camera = this.camera
const rectCanvas = this.c.getBoundingClientRect();
const mouseX = e.clientX - rectCanvas.left;
const mouseY = e.clientY - rectCanvas.top;
if (!e.ctrlKey) {
const dpr = window.devicePixelRatio || 1;
// Two-finger pan in world coordinates
camera.x += (e.deltaX * dpr) * camera.PAN_SPEED / camera.scale;
camera.y += (e.deltaY * dpr) * camera.PAN_SPEED / camera.scale;
return;
}
const dpr = window.devicePixelRatio || 1;
const worldX = (
mouseX -
(this.c.width / dpr) / 2 // X coordinate of canvas center in CSS pixels
) // Mouse offset from canvas center in CSS pixels
/ camera.scale // Account for Zoom: shift by camera's zoom position
+ camera.x; // Account for Pan: shift by camera’s world X position
const worldY = (
mouseY -
(this.c.height / dpr) / 2
)
/ camera.scale
+ camera.y;
// Apply zoom
const zoomFactor = Math.exp(-e.deltaY * camera.ZOOM_SPEED);
camera.scale *= zoomFactor;
camera.scale = Math.max(0.04, Math.min(10, camera.scale));
// Adjust camera to keep cursor fixed
camera.x = worldX - (mouseX - (this.c.width / dpr) / 2) / camera.scale;
camera.y = worldY - (mouseY - (this.c.height / dpr) / 2) / camera.scale;
}
draw = () => {
let ctx = this.ctx
let rect = this.rect
let camera = this.camera
let scale = camera.scale
requestAnimationFrame(this.draw);
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, this.c.width, this.c.height);
let drawMenus = () => {
ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transform for UI
ctx.fillStyle = "rgba(30,30,30,0.8)";
ctx.fillRect(10,10,150,100);
ctx.fillStyle = "#FEB279";
ctx.fillRect(20,20,120,30);
ctx.fillRect(20,60,120,30);
ctx.fillStyle = "#000";
ctx.font = "60px arial";
ctx.fillText("Button 1", 20, 40);
ctx.fillText("Button 2", 20, 80);
}
let drawSpace = () => {
ctx.translate(this.c.width / 2, this.c.height / 2);
ctx.scale(scale, scale);
ctx.translate(-camera.x, -camera.y);
ctx.strokeStyle = this.STROKE_COLOR;
ctx.lineWidth = 0.5 / scale;
ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
}
ctx.save()
drawSpace()
ctx.restore()
drawMenus(ctx);
}
constructor() {
document.body.appendChild(this.c)
this.ctx = this.c.getContext("2d");
window.addEventListener("resize", this.resize);
this.resize();
this.c.addEventListener("wheel", this.onWheel, { passive: false });
this.draw()
}
}
new Canvas()

0
server/getDownloads.js → flame/getDownloads.js
View File

119
flame/index.js Normal file
View File

@@ -0,0 +1,119 @@
import path from 'path';
import express from 'express';
import cors from 'cors'
import http from 'http'
import chalk from 'chalk'
import * as z from 'zod';
import forms from 'forms'
import { initWebSocket } from './ws.js'
import util from './util.js'
export default class Server {
store;
registerRoutes(router) {
router.get('/*', this.get)
return router
}
index = async (req, res) => {
let filePath = path.join(util.CAVE_PATH, "index.html");
res.sendFile(filePath)
}
get = async (req, res) => {
let url = req.url
let filePath;
if(url.startsWith("/_")) {
filePath = path.join(util.CAVE_PATH, url);
} else if(url.includes("75820185")) {
filePath = path.join(util.CAVE_PATH, url.split("75820185")[1]);
} else {
filePath = path.join(util.CAVE_PATH, "index.html");
}
res.sendFile(filePath);
}
async connectToForms(spawnForms) {
try {
await this.store.connect()
}
catch(e) {
try {
await spawnForms()
await this.store.connect()
}
catch(e) {
try {
let tryReconnect = async (attempts = 5, interval = 100) => {
for (let i = 0; i < attempts; i++) {
try {
return await this.store.connect();
} catch (e) {
if (i === attempts - 1) {throw e;}
await new Promise(resolve => setTimeout(resolve, interval));
}
}
}
await tryReconnect(5, 100)
}
catch(e) {
console.error("Could not spawn forms: ", e)
return
}
}
}
this.store.register("log", z.toJSONSchema(z.object({
time: z.string(),
host: z.string(),
ip: z.string(),
path: z.string(),
method: z.string()
})))
this.store.add("log", {
time: "0100",
host: "parchment.page",
ip: "0.0.0.1",
path: "/asd",
method: "GET"
})
}
constructor(spawnForms, port) {
const app = express();
app.use(cors({ origin: '*' }));
app.use(express.json());
app.use(util.logRequest);
app.use(util.logResponse);
let router = express.Router();
this.registerRoutes(router)
app.use('/', router);
this.store = new forms.client()
this.connectToForms(spawnForms)
const server = http.createServer(app);
initWebSocket(server);
server.listen(port, () => {
console.log("\n")
console.log(chalk.yellow("**************Parchment****************"))
console.log(chalk.yellowBright(`Server is running on port ${port}: http://localhost`));
console.log(chalk.yellow("***************************************"))
console.log("\n")
});
process.on('SIGINT', async () => {
console.log(chalk.red('Closing server...'));
console.log(chalk.green('Database connection closed.'));
process.exit(0);
});
Object.preventExtensions(this);
}
}

40
flame/util.js Normal file
View File

@@ -0,0 +1,40 @@
import moment from 'moment'
import chalk from 'chalk'
import paths from 'path'
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = paths.dirname(__filename);
export default class util {
static APP_PATH = paths.join(__dirname, "..")
static CAVE_PATH = paths.join(__dirname, "../cave")
static FLAME_PATH = __dirname
static FORMS_PATH = paths.join(__dirname, "../forms")
static logRequest(req, res, next) {
const formattedDate = moment().format('M.D');
const formattedTime = moment().format('h:mma');
if(req.url.includes("/api/")) {
console.log(chalk.blue(` ${req.method} ${req.url} | ${formattedDate} ${formattedTime}`));
} else {
if(req.url === "/")
console.log(chalk.gray(` ${req.method} ${req.url} | ${formattedDate} ${formattedTime}`));
}
next();
}
static logResponse(req, res, next) {
const originalSend = res.send;
res.send = function (body) {
if(res.statusCode >= 400) {
console.log(chalk.blue( `<-${chalk.red(res.statusCode)}- ${req.method} ${req.url} | ${chalk.red(body)}`));
} else {
console.log(chalk.blue(`<-${res.statusCode}- ${req.method} ${req.url}`));
}
originalSend.call(this, body);
};
next();
}
}

0
server/ws.js → flame/ws.js
View File

137
server/index.js
View File

@@ -1,137 +0,0 @@
import path from 'path';
import fs from 'fs/promises'
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
import express from 'express';
import cors from 'cors'
import http from 'http'
import chalk from 'chalk'
import moment from 'moment'
import * as z from "zod";
import { initWebSocket } from './ws.js'
import getAllDownloadsFiles from "./getDownloads.js"
import forms from "forms"
export default class Server {
store;
UIPath = path.join(__dirname, '../ui')
registerRoutes(router) {
router.get('/*', this.get)
return router
}
index = async (req, res) => {
let filePath = path.join(this.UIPath, "index.html");
res.sendFile(filePath)
return
let html = await fs.readFile(filePath, 'utf-8');
let downloads = await getAllDownloadsFiles()
const jsonString = JSON.stringify(downloads, null, 2); // pretty-print optional
const scriptTag = `<script type="application/json" id="jsonData">\n${jsonString}\n</script>`;
const headEndRegex = /<\/head\s*>/i;
const match = html.match(headEndRegex);
const insertPos = match.index;
let result = html.slice(0, insertPos) + scriptTag + '\n' + html.slice(insertPos);
res.type('html').send(result);
}
get = async (req, res) => {
let url = req.url
let filePath;
if(url.startsWith("/_")) {
filePath = path.join(this.UIPath, url);
} else if(url.includes("75820185")) {
filePath = path.join(this.UIPath, url.split("75820185")[1]);
} else {
filePath = path.join(this.UIPath, "index.html");
}
res.sendFile(filePath);
}
logRequest(req, res, next) {
const formattedDate = moment().format('M.D');
const formattedTime = moment().format('h:mma');
if(req.url.includes("/api/")) {
console.log(chalk.blue(` ${req.method} ${req.url} | ${formattedDate} ${formattedTime}`));
} else {
if(req.url === "/")
console.log(chalk.gray(` ${req.method} ${req.url} | ${formattedDate} ${formattedTime}`));
}
next();
}
logResponse(req, res, next) {
const originalSend = res.send;
res.send = function (body) {
if(res.statusCode >= 400) {
console.log(chalk.blue( `<-${chalk.red(res.statusCode)}- ${req.method} ${req.url} | ${chalk.red(body)}`));
} else {
console.log(chalk.blue(`<-${res.statusCode}- ${req.method} ${req.url}`));
}
originalSend.call(this, body);
};
next();
}
async connectToForms() {
await this.store.connect()
this.store.register("log", z.toJSONSchema(z.object({
time: z.string(),
host: z.string(),
ip: z.string(),
path: z.string(),
method: z.string()
})))
this.store.add("log", {
time: "0100",
host: "parchment.page",
ip: "0.0.0.1",
path: "/asd",
method: "GET"
})
}
constructor() {
const app = express();
app.use(cors({ origin: '*' }));
app.use(express.json());
app.use(this.logRequest);
app.use(this.logResponse);
let router = express.Router();
this.registerRoutes(router)
app.use('/', router);
this.store = new forms.client()
this.connectToForms()
const server = http.createServer(app);
initWebSocket(server);
const PORT = 80;
server.listen(PORT, () => {
console.log("\n")
console.log(chalk.yellow("**************Parchment****************"))
console.log(chalk.yellowBright(`Server is running on port ${PORT}: http://localhost`));
console.log(chalk.yellow("***************************************"))
console.log("\n")
});
process.on('SIGINT', async () => {
console.log(chalk.red('Closing server...'));
console.log(chalk.green('Database connection closed.'));
process.exit(0);
});
Object.preventExtensions(this);
}
}

94
ui/components/DownloadsPanel.js
View File

@@ -1,94 +0,0 @@
class DownloadsPanel extends Shadow {
render() {
ZStack(() => {
input("", "60vw")
.backgroundColor("var(--accent3)")
.color("var(--accent)")
.border("none")
.borderTop("1px solid var(--accent)")
.borderBottom("1px solid var(--accent)")
.outline("0.5px solid black")
.borderRadius(7, px)
.transition("padding .2s")
.padding(0.5, em)
.position("absolute")
.x(50, vw).y(7, em)
.transform("translate(-50%, -50%)")
.onInput(() => {
console.log('typing')
})
.onFocus(function (focusing) {
if(focusing) {
this.style.padding = "1em"
this.style.borderColor = "var(--darkred)"
} else {
this.style.padding = "0.5em"
this.style.borderColor = "var(--accent)"
}
})
// VStack(() => {
// const json = this.getJSONData()
// p(json.length + " Entries")
// .marginBottom(2, em)
// // Split into two alternating columns
// const left = []
// const right = []
// for (let i = 0; i < 200; i++) {
// if (i % 2 === 0) {
// left.push(json[i])
// } else {
// right.push(json[i])
// }
// }
// console.log(left)
// HStack(() => {
// // LEFT COLUMN
// VStack(() => {
// for (let item of left) {
// p(item.name)
// .marginLeft(0, em)
// .marginBottom(0.1, em)
// }
// })
// // RIGHT COLUMN
// VStack(() => {
// for (let item of right) {
// p(item.name)
// .marginLeft(0, em)
// .marginBottom(0.1, em)
// }
// })
// .marginLeft(3, em) // spacing between columns
// })
// })
// .paddingLeft(5, em)
// .paddingTop(10, em)
})
}
getJSONData() {
const script = document.getElementById('jsonData');
if (!script) {
console.warn('initial-data script not found');
return null;
}
try {
// script.textContent is the raw JSON string
const data = JSON.parse(script.textContent);
console.log(data)
return data;
} catch (err) {
console.error('Failed to parse initial-data JSON:', err);
return null;
}
}
}
register(DownloadsPanel)

36
ui/components/Home.js
View File

@@ -1,36 +0,0 @@
import "./NavMenu.js"
import "./HomePanel.js"
import "./DownloadsPanel.js"
class Home extends Shadow {
render() {
ZStack(() => {
NavMenu()
switch(window.location.pathname) {
case "/":
HomePanel()
break;
case "/downloads":
DownloadsPanel()
break;
}
})
.backgroundColor("var(--main)")
.display("block")
.width(100, vw).height("auto")
.color("var(--accent)")
.fontFamily("Arial")
.onAppear(() => {
document.body.style.backgroundColor = "var(--main)"
})
.onNavigate(() => {
console.log("navved")
this.rerender()
})
}
}
register(Home)

7
ui/components/HomePanel.js
View File

@@ -1,7 +0,0 @@
class HomePanel extends Shadow {
render() {
}
}
register(HomePanel)

37
ui/components/NavMenu.js
View File

@@ -1,37 +0,0 @@
class NavMenu extends Shadow {
NavButton(text) {
return p(text)
.cursor("default")
.onAppear(function () {
console.log(window.location.pathname, "/" + this.innerText.toLowerCase())
if(window.location.pathname === ("/" + this.innerText.toLowerCase())) {
this.style.textDecoration = "underline"
}
})
.onHover(function (hovering) {
if(hovering) {
this.style.textDecoration = "underline"
} else {
this.style.textDecoration = ""
}
})
.onClick(function (done) {
if(done) {
window.navigateTo(this.innerText === "Home" ? "/" : this.innerText.toLowerCase())
}
})
}
render() {
HStack(() => {
this.NavButton("Home")
this.NavButton("Downloads")
})
.gap(2, em)
.x(50, vw).y(5, vh)
.center()
}
}
register(NavMenu)

2
ui/index.js
View File

@@ -1,2 +0,0 @@
import "./components/Home.js"
Home()