Skip to content

Commit

Permalink
Add setting to change room (#94)
Browse files Browse the repository at this point in the history 
* add skeleton

* settings

* save as js file

* change default to worker timers on

* require reload 4 real

* add notes for speed advice

* change session, no refresh yet

* WOOOO

* refresh in place

* url query

* hide settings
  • Loading branch information
@TodePond
TodePond authored Feb 15, 2025
1 parent 133c172 commit 795a698
Show file tree
Hide file tree
Showing 12 changed files with 345 additions and 171 deletions.
81 changes: 43 additions & 38 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,28 +94,10 @@
<dialog id="about-dialog">
<form method="dialog">
<h1>🍝 welcome to nudel</h1>
<!-- <p>
<label for="welcome-username">
<span>Choose your username:</span>
<input
type="text"
id="welcome-username"
data-1p-ignore
spellcheck="false"
placeholder="anonymous nudelfan"
/>
</label>
</p> -->
<p>
nudel is a public jam space, made by
<a href="https://www.pastagang.cc/" target="_blank">pastagang</a>
</p>
<!-- <p>it's a mashup of free & open source projects:</p>
<ul>
<li><a href="https://github.com/munshkr/flok/" target="_blank">flok</a> for collaboration</li>
<li><a href="https://github.com/tidalcycles/strudel" target="_blank">strudel</a> for sound</li>
<li><a href="https://github.com/hydra-synth/hydra-synth" target="_blank">hydra</a> for light</li>
</ul> -->
<p>everyone is in the same room. anyone is encouraged to join in!</p>
<p><strong>tip: if nudel starts running slow, try changing the settings</strong></p>
<p>
Expand Down Expand Up @@ -158,16 +140,39 @@ <h1>Export</h1>
<main style="overflow: scroll; height: 20%; flex-grow: 1; padding: 13px">
<h1>Settings</h1>
<section>
<h3>User settings</h3>
<!-- <h2>Session</h2> -->
<!-- <h3>User</h3> -->
<p>
<label for="settings-username" style="display: flex; align-items: center">
<span>Username</span>
<input type="text" id="settings-username" data-1p-ignore spellcheck="false" style="flex-grow: 1" />
</label>
</p>
<br />
<h3>Room</h3>
<fieldset id="room-picker">
<label>
<input type="radio" name="settings-room" value="public" checked />
Pastagang room
</label>
<br />
<label style="display: flex; align-items: center">
<input type="radio" name="settings-room" value="custom" />
<span style="flex-shrink: 0">Custom room: </span>
<input
style="width: 100%"
type="text"
id="settings-room-name"
data-1p-ignore
spellcheck="false"
disabled
/>
</label>
</fieldset>
</section>
<hr />
<section>
<h3>Nudel appearance</h3>
<h2>Appearance</h2>
<p>
<label>
Layout
Expand All @@ -193,50 +198,50 @@ <h2>Performance</h2>
off, which may help other things to run better.
</p>
<br />
<h3>Panel types</h3>
<p>These settings control which types of panels will run for you.</p>
<h3>Panel settings</h3>
<p>
<label>
<input type="checkbox" id="settings-strudel-enabled" />
Enable strudel (sound)
<input type="checkbox" id="settings-strudel-highlights-enabled" />
Enable strudel highlights (off is faster)
</label>
</p>
<p>
<label>
<input type="checkbox" id="settings-kabelsalat-enabled" />
Enable kabelsalat (sound)
<input type="checkbox" id="settings-strudel-worker-timers-enabled" />
Enable strudel worker timers (requires refresh) (on is faster)
</label>
</p>
<br />
<h3>Panel types</h3>
<p>These settings control which types of panels will run for you.</p>
<p>
<label>
<input type="checkbox" id="settings-hydra-enabled" />
Enable hydra (visuals)
<input type="checkbox" id="settings-strudel-enabled" />
Enable strudel (sound) (off is faster)
</label>
</p>
<p>
<label>
<input type="checkbox" id="settings-shader-enabled" />
Enable shader (visuals)
<input type="checkbox" id="settings-kabelsalat-enabled" />
Enable kabelsalat (sound) (off is faster)
</label>
</p>
<br />
<h3>Panel settings</h3>
<p>
<label>
<input type="checkbox" id="settings-strudel-highlights-enabled" />
Enable strudel highlights
<input type="checkbox" id="settings-hydra-enabled" />
Enable hydra (visuals) (off is faster)
</label>
</p>
<p>
<label>
<input type="checkbox" id="settings-strudel-worker-timers-enabled" />
Enable strudel worker timers (requires refresh)
<input type="checkbox" id="settings-shader-enabled" />
Enable shader (visuals) (off is faster)
</label>
</p>
</section>
<hr />
<section>
<h2>Editor settings</h2>
<h2>Editor</h2>
<p>
<label>
<input type="checkbox" id="settings-line-numbers" />
Expand Down Expand Up @@ -286,7 +291,7 @@ <h2>Editor settings</h2>
<section class="development">
<hr />
<br />
<h2>Development settings</h2>
<h2>Development</h2>
<p>
<label>
<input type="checkbox" id="settings-welcome-message" />
Expand Down
1 change: 1 addition & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@ import '/src/main.js';
import '/src/settings.js';
import '/src/menu.js';
import '/src/export.js';
import '/src/url.js';
2 changes: 1 addition & 1 deletion src/declare.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ interface Window {
setSettingsFromDom: any;
kabel: any;
kabelsalat: any;
session: any;
// session: any;
}

// Pattern.prototype.p
Expand Down
52 changes: 52 additions & 0 deletions src/error.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,3 +85,55 @@ export function clearInlineErrors(docId) {
// @ts-expect-error
view.dispatch({ effects: [clearErrors.of()] });
}

function showGlobalError(message) {
let errorEl = document.querySelector(`#global-error`);
if (errorEl) {
errorEl.innerText = message;
} else {
document.body.insertAdjacentHTML('beforeend', `<div id="global-error">${message}</div>`);
}
}

function showLocalError(docId, message) {
const slot = document.querySelector(`#slot-${docId}`);
let errorEl = document.querySelector(`#slot-${docId} #error-${docId}`);
if (errorEl) {
errorEl.innerText = message;
} else {
slot?.insertAdjacentHTML('beforeend', `<div class="error" id="error-${docId}">${message}</div>`);
}
}

// error handling
export function setError(message, docId) {
console.error(message);
if (!docId) {
showGlobalError(message);
return;
}
// messages will either be string or InlineErrorMessage
if (typeof message != 'string') {
displayInlineErrors(docId, message);
return;
}
showLocalError(docId, message);
}

export function clearLocalError(docId) {
document.querySelector(`#slot-${docId} #error-${docId}`)?.remove();
clearInlineErrors(docId);
}
export function clearGlobalError() {
document.querySelector(`#global-error`)?.remove();
}

window.addEventListener('message', (event) => {
if (event.origin !== window.location.origin) {
return;
}
if (event.data.type === 'onError') {
const [err, docId] = event.data.msg;
setError(err, docId);
}
});
7 changes: 4 additions & 3 deletions src/export.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { pastamirror, session } from './main.js';
import { pastamirror } from './main.js';
import { getSession } from './session.js';
import { nudelToast } from './toast.js';

const exportButton = document.querySelector('#export-button');
Expand Down Expand Up @@ -69,7 +70,7 @@ export function getPrettyDate() {
return new Date().toISOString().slice(0, 16).replace('T', ' ');
}

export function downloadAsFile(txt, { fileName = `nudel-export-${getPrettyDate()}.txt` } = {}) {
export function downloadAsFile(txt, { fileName = `nudel-export-${getPrettyDate()}.js` } = {}) {
// Download file
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/text,' + encodeURI(txt);
Expand All @@ -81,7 +82,7 @@ export function downloadAsFile(txt, { fileName = `nudel-export-${getPrettyDate()
export function getCode(filter) {
const prettyDate = getPrettyDate();
const headline = `// "nudel ${prettyDate}" @by pastagang\n`;
let documents = session.getDocuments();
let documents = getSession().getDocuments();
if (filter) {
documents = documents.filter(filter);
}
Expand Down
122 changes: 3 additions & 119 deletions src/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,138 +1,20 @@
import { Session } from '@flok-editor/session';
import { nudelAlert } from './alert.js';
import { applySettingsToNudel, getSettings } from './settings.js';
import { PastaMirror } from './editor.js';
import { clearInlineErrors, displayInlineErrors } from './error.js';
import './style.css';
import { getStdSource } from './export.js';
import { updateMiniLocations } from '@strudel/codemirror';
import { getSession } from './session.js';

export const pastamirror = new PastaMirror();
window.editorViews = pastamirror.editorViews;

export const session = new Session('pastagang2', {
// changed this part to what flok.cc uses
hostname: 'flok.cc',
// port: '', //parseInt(port),
isSecure: true,
});
window.session = session;

session.on('sync', () => {
// If session is empty, create two documents
if (session.getDocuments().length === 0) {
session.setActiveDocuments([
{ id: '1', target: 'strudel' },
{ id: '2', target: 'strudel' },
{ id: '3', target: 'strudel' },
{ id: '4', target: 'strudel' },
]);
}
});

session.on('change', (documents) => {
documents.map((doc) => {
if (!pastamirror.currentEditors.has(doc.id)) {
pastamirror.createEditor(doc);
}
});

pastamirror.currentEditors.keys().forEach((key) => {
if (!documents.find((doc) => doc.id === key)) {
pastamirror.deleteEditor(key);
}
});
});

session.on('pubsub:open', () => {
clearGlobalError();
// session._pubSubClient seems to take a while to be defined..
// this might or might not be a good place to make sure its ready
// the event might call multiple times so... do i need to unsub???
session._pubSubClient.subscribe(`session:pastagang:chat`, (args) => pastamirror.chat(args.message));
});
session.on('pubsub:close', () => {
// untested
setError('Disconnected from Server...');
// unsub session:pastagang:chat here?
});

export const Frame = {
hydra: document.getElementById('hydra'),
shader: document.getElementById('shader'),
strudel: document.getElementById('strudel'),
kabesalat: document.getElementById('kabelsalat'),
};

// hydra
session.on('eval:hydra', (msg) => {
msg.body += '\n\n\n' + getStdSource();
Frame.hydra?.contentWindow.postMessage({ type: 'eval', msg });
});
// shader
session.on('eval:shader', (msg) => Frame.shader?.contentWindow.postMessage({ type: 'eval', msg }));
// strudel
session.on('eval:strudel', (msg) => {
msg.body += '\n\n\n' + getStdSource();
return Frame.strudel?.contentWindow.postMessage({ type: 'eval', msg });
});
// kabelsalat
session.on('eval:kabelsalat', (msg) => Frame.kabelsalat?.contentWindow.postMessage({ type: 'eval', msg }));

let showGlobalError = (message) => {
let errorEl = document.querySelector(`#global-error`);
if (errorEl) {
errorEl.innerText = message;
} else {
document.body.insertAdjacentHTML('beforeend', `<div id="global-error">${message}</div>`);
}
};

let showLocalError = (docId, message) => {
const slot = document.querySelector(`#slot-${docId}`);
let errorEl = document.querySelector(`#slot-${docId} #error-${docId}`);
if (errorEl) {
errorEl.innerText = message;
} else {
slot?.insertAdjacentHTML('beforeend', `<div class="error" id="error-${docId}">${message}</div>`);
}
};

// error handling
const setError = (message, docId) => {
console.error(message);
if (!docId) {
showGlobalError(message);
return;
}
// messages will either be string or InlineErrorMessage
if (typeof message != 'string') {
displayInlineErrors(docId, message);
return;
}
showLocalError(docId, message);
};
const clearLocalError = (docId) => {
document.querySelector(`#slot-${docId} #error-${docId}`)?.remove();
clearInlineErrors(docId);
};
const clearGlobalError = () => {
document.querySelector(`#global-error`)?.remove();
};
// clear local error when new eval comes in
session.on('eval', (msg) => clearLocalError(msg.docId));

window.addEventListener('message', (event) => {
if (event.origin !== window.location.origin) {
return;
}
if (event.data.type === 'onError') {
const [err, docId] = event.data.msg;
setError(err, docId);
}
});

session.initialize();
applySettingsToNudel();

// is in development mode?
Expand Down Expand Up @@ -181,6 +63,7 @@ addEventListener(

// add / remove panes
document.getElementById('add-pane-button')?.addEventListener('click', () => {
const session = getSession();
if (!session) return;
const documents = session.getDocuments();
if (documents.length >= 8) {
Expand All @@ -194,6 +77,7 @@ document.getElementById('add-pane-button')?.addEventListener('click', () => {
session.setActiveDocuments(newDocs);
});
document.getElementById('remove-pane-button')?.addEventListener('click', () => {
const session = getSession();
if (!session) return;
const documents = session.getDocuments();
session.setActiveDocuments([...documents.map((doc) => ({ id: doc.id, target: doc.target })).slice(0, -1)]);
Expand Down
Loading

0 comments on commit 795a698

Please sign in to comment.