Skip to content

Commit

Permalink
Archive a copy of Jigsaw
Browse files Browse the repository at this point in the history
  • Loading branch information
@kneasle
kneasle committed Apr 1, 2024
1 parent fb6501d commit 4f057d8
Show file tree
Hide file tree
Showing 8 changed files with 2,612 additions and 0 deletions.
70 changes: 70 additions & 0 deletions archive/jigsaw/colors.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
function group_col(index) {
return GROUP_COLS[index % GROUP_COLS.length];
}

const GROUP_COLS = [
"#000000",
"#00FF00",
"#0000FF",
"#FF0000",
"#01FFFE",
"#FFA6FE",
"#FFDB66",
"#006401",
"#010067",
"#95003A",
"#007DB5",
"#FF00F6",
"#FFEEE8",
"#774D00",
"#90FB92",
"#0076FF",
"#D5FF00",
"#FF937E",
"#6A826C",
"#FF029D",
"#FE8900",
"#7A4782",
"#7E2DD2",
"#85A900",
"#FF0056",
"#A42400",
"#00AE7E",
"#683D3B",
"#BDC6FF",
"#263400",
"#BDD393",
"#00B917",
"#9E008E",
"#001544",
"#C28C9F",
"#FF74A3",
"#01D0FF",
"#004754",
"#E56FFE",
"#788231",
"#0E4CA1",
"#91D0CB",
"#BE9970",
"#968AE8",
"#BB8800",
"#43002C",
"#DEFF74",
"#00FFC6",
"#FFE502",
"#620E00",
"#008F9C",
"#98FF52",
"#7544B1",
"#B500FF",
"#00FF78",
"#FF6E41",
"#005F39",
"#6B6882",
"#5FAD4E",
"#A75740",
"#A5FFD2",
"#FFB167",
"#009BFF",
"#E85EBE",
];
24 changes: 24 additions & 0 deletions archive/jigsaw/cookies.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/* Utility functions for easily getting and setting cookies */

function setCookie(cname, cvalue, exdays = 100_000) {
var d = new Date();
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;SameSite=Strict;";
}

function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return undefined;
}
257 changes: 257 additions & 0 deletions archive/jigsaw/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,257 @@
<!DOCTYPE html>
<html style="margin: 0; width: 100%; height: 100%">
<head>
<title>Jigsaw</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<script src="cookies.js" type="text/javascript"></script>
<script src="colors.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Note the usage of `type=module` here as this is an ES6 module -->
<script type="module">
import { Jigsaw, default as init } from "./jigsaw.js";

async function run() {
await init("./jigsaw_bg.wasm");
window.Jigsaw = Jigsaw;
start();
}
run();
</script>

<!-- Main canvas -->
<canvas id="comp-canvas"></canvas>

<!-- Sidebar -->
<div id="sidebar" class="sidebar">
<!-- General -->
<div class="sidebar-box">
<h2>
<span class="fold-button" style="float: left" id="general-box-fold">▼</span
>General
</h2>
<div id="general-box-area">
<p style="text-align: center">
<span id="part-len">0</span> rows * <span id="num-parts">0</span> parts =
<span id="num-rows">0</span> rows
</p>
<p style="text-align: center"><span id="falseness-info">true</span></p>
</div>
</div>

<!-- Keybindings -->
<div class="sidebar-box">
<h2>
<span class="fold-button" style="float: left" id="keys-box-fold">▼</span>Key
bindings
</h2>
<div id="keys-box-area" style="max-width: 310px">
<p style="text-align: center">
<i>
Note: This is not automatically updated yet, so it might end up being
out of sync with the code.
</i>
</p>
<div class="keybindings">
<h3>Add/remove rows</h3>
<p><code>a</code>: Add a lead to the composition</p>
<p><code>A</code>: Add a course to the composition</p>
<p><code>D</code>: Duplicate then transpose a fragment</p>
<p><code>d</code>: Delete fragment</p>
<p>
Adding rows whilst hovering the leftover row of a fragment will append
that block onto the end of the fragment.
</p>

<h3>Modify fragment</h3>
<p><code>t</code>: Transpose fragment by its first row</p>
<p><code>T</code>: Transpose fragment by hovered row</p>
<p><code>e</code>: Set call under the cursor</p>

<h3>Split/combine</h3>
<p><code>c</code>: Combine two linked frags into one</p>
<p><code>x</code>: Split fragment at the cursor</p>

<h3>Mute/solo</h3>
<p><code>s</code>: Mute/unmute a fragment</p>
<p><code>S</code>: Solo a fragment/unmute everything</p>

<h3>View</h3>
<p><code>f</code>: (Un)fold the lead under the cursor</p>
<p><code>left-click + drag</code>: Move fragment</p>
<p><code>middle-click + drag</code>: Pan view</p>
<p><code>Home</code>: Reset view to 1<sup>st</sup> fragment</p>
</div>
</div>
</div>

<!-- Parts -->
<div class="sidebar-box">
<h2>
<span class="fold-button" style="float: left" id="partheads-box-fold">▼</span
>Parts (<span id="part-head-count">0</span>)
</h2>
<div id="partheads-box-area">
<!-- Part Heads -->
<div class="flex-row"><input id="part-head-input" style="flex: 1" /></div>
<p id="part-head-message" class="parse-err">Bell '2' repeated twice</p>
<p id="part-head-group-message" class="parse-err" style="display: none">
Parts don't form a group.
</p>
<p>
Viewing Part:
<select name="part-head" id="part-head">
<!-- The part heads are filled in only when the wasm is loaded, which is far enough
after page load to cause jank, so we fill this with a sensible default so that
hopefully the jank is less noticeable. -->
<option value="0">#1: 12345678</option>
</select>
</p>
</div>
</div>

<!-- Methods -->
<div class="sidebar-box">
<h2>
<span class="fold-button" style="float: left" id="methods-box-fold">▼</span
>Methods (<span id="num-methods">0</span>)
</h2>
<div id="methods-box-area">
<div id="method-list">
<!-- Method entries will go here -->
</div>
<p style="text-align: center">
<button type="button" id="add-method">Add Method</button>
</p>
<p>
Select method:
<input
id="selected-method"
style="width: 2em"
type="number"
value="0"
min="0"
/>
</p>
</div>
</div>

<!-- Calls -->
<div class="sidebar-box">
<h2>
<span class="fold-button" style="float: left" id="calls-box-fold">▼</span>Calls
(<span id="num-calls">0</span>)
</h2>
<div id="calls-box-area">
<p id="call-readout">&lt;Calls&gt;</p>

<p>
Select call:
<input
id="selected-call"
style="width: 2em"
type="number"
value="0"
min="-1"
/>
</p>
</div>
</div>

<!-- Music -->
<div class="sidebar-box">
<h2>
<span class="fold-button" style="float: left" id="music-box-fold">▼</span>Music
</h2>
<div id="music-box-area">
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
</div>
</div>
</div>

<!-- Transpose box -->
<div id="transpose-box">
<p><input id="transpose-input" /></p>
<p id="transpose-message" class="parse-err">Bell '2' repeated twice</p>
</div>

<!-- Method editing box -->
<div class="overlay-outer">
<div class="overlay-center" id="method-edit-box" style="display: none">
<h2>Editing Method</h2>
<div class="flex-row">
<input id="method-edit-shorthand" placeholder="Shorthand" style="width: 6em" />
<input
id="method-edit-name"
placeholder="Name"
style="margin: 0 5px 0 5px; flex: 1"
/>
<select name="method-stage" id="method-edit-stage" disabled>
<option value="8">Major</option>
</select>
</div>
<div class="flex-row">
<input
id="method-edit-pn-input"
placeholder="Place Notation"
style="min-width: 30em; flex: 1"
/>
</div>
<p id="method-edit-pn-message" class="parse-err">Some error!</p>
<p style="text-align: center">
<button type="button" onclick="exit_method_edit()">Cancel</button>
<button id="method-edit-save" type="button">Save</button>
</p>
</div>
</div>

<!-- Templates (i.e. HTML trees which will get cloned and populated with data to generate
the sidebar). These are very reminiscent of templates from Vue or React except that
the interactions we require are very simple and are managed more easily without
external libraries. -->
<div style="display: none" id="templates">
<!-- Template for a single method entry -->
<div id="template-method-entry">
<!-- Title bar: Shorthand & name on the left -->
<p>
<span class="fold-button" id="method-info-fold-btn">▶</span>(<span
id="shorthand"
>B</span
>)
<span id="name">Bristol</span>
<!-- row counter/delete on the right -->
<span style="float: right">
<span id="row-count" style="display: none">0 rows</span>
<span id="buttons">
<span id="edit-button" class="link-button">edit</span>
<span id="delete-button" class="link-button">del</span>
</span>
</span>
</p>
<!-- Fold out section (hidden by default) -->
<div class="method-fold-out" id="method-info-area">
<div class="flex-row">
<input
id="shorthand-input"
value="V"
placeholder="Sym"
style="width: 2em; margin-right: 5px"
/>
<input id="name-input" placeholder="Name" value="Deva" style="flex: 1" />
</div>
<p id="place-notation-input">&lt;Place Notation&gt;</p>
</div>
</div>
</div>

<!-- Load the main JS script after the rest of the document has loaded. We do this so that
we can initialise references to the HTML elements as global constants for the JS code
to re-use. -->
<script src="index.js"></script>
</body>
</html>
Loading

0 comments on commit 4f057d8

Please sign in to comment.