Ruin Leo's fun

codemirror/editors.js

@@ -5,16 +5,17 @@ import { getTag } from "./util.js";
 import { dispatch } from "../dispatch.js";
 
 const pairs = [
- [ "bitmap", "bitmap" ],
- [ "tune", "sequencer" ],
- [ "map", "map" ]
+ [ "bitmap", "image", "bitmap" ],
+ [ "tune", "musical-notes", "sequencer" ],
+ [ "map", "map", "map" ]
 ]
 
 export class OpenButtonWidget extends WidgetType {
- constructor(label, editorType, text, from, to) {
+ constructor(label, icon, editorType, text, from, to) {
  super();
 
  this.label = label;
+ this.icon = icon;
  this.editorType = editorType;
  this.text = text;
  this.from = from;
@@ -32,6 +33,9 @@ export class OpenButtonWidget extends WidgetType {
  button.textContent = this.label;
  button.addEventListener("click", () => this.onClick());
 
+ const icon = button.appendChild(document.createElement("ion-icon"));
+ icon.name = this.icon;
+
  if (this.editorType === "bitmap") container.appendChild(document.createElement("bitmap-preview")).setAttribute("text", this.text);
 
  return container;
@@ -61,7 +65,6 @@ export class OpenButtonWidget extends WidgetType {
  type: this.editorType,
  text: this.text,
  });
-
  }
 }
 
@@ -72,13 +75,13 @@ function makeValue(state) {
  const syntax = syntaxTree(state);
  syntax.iterate({
  enter(node) {
- for (const [label, editorType] of pairs) {
+ for (const [label, icon, editorType] of pairs) {
  const tag = getTag(label, node, syntax, state.doc);
  if (!tag) continue;
  if (tag.nameFrom === tag.nameTo) continue;
 
  const decoration = Decoration.replace({
- widget: new OpenButtonWidget(label, editorType, tag.text, tag.textFrom, tag.textTo)
+ widget: new OpenButtonWidget(label, icon, editorType, tag.text, tag.textFrom, tag.textTo)
  });
  widgets.push(decoration.range(tag.nameFrom, tag.nameTo));
  if (tag.textFrom !== tag.textTo) foldRanges.push({ from: tag.textFrom, to: tag.textTo });

index.css

@@ -352,6 +352,13 @@ body {
  display: block;
 }
 
+.cm-open-button ion-icon {
+ margin-left: 3px;
+ vertical-align: middle;
+ height: 0.8em;
+ margin-top: -0.2em;
+}
+
 .vertical-bar {
  position: absolute;
  left: var(--editor-width);

sequencer/sequencer.js

@@ -17,6 +17,13 @@ const instrumentColorMap = {
  triangle: "#099268",
 };
 
+const instrumentDarkerColorMap = {
+ sine: "#9a2222",
+ square: "#195185",
+ sawtooth: "#ad471f",
+ triangle: "#116a4f"
+}
+
 const noteMap = {
  13: "c4",
  12: "d4",
@@ -257,7 +264,7 @@ export function createSequencer(target) {
  `);
  }
 
- const drawInstrumentSelection = (instrument, color) => {
+ const drawInstrumentSelection = (instrument) => {
  const instrumentSymbol = { 
  "sine": "~", 
  "triangle": "^",
@@ -266,21 +273,19 @@ export function createSequencer(target) {
  }[instrument];
 
  return html`
- <div 
- class="instrument" 
+ <button 
+ class=${["instrument", state.instrument === instrument ? "pressed" : ""].join(" ")}
  style=${`
- background: ${color};
- width:50px;
- height:50px;
- border: ${state.instrument === instrument ? "2px solid black" : "none"};
- box-sizing: border-box;
+ background: ${instrumentColorMap[instrument]};
+ --shadow-color: ${instrumentDarkerColorMap[instrument]};
  `}
  @click=${() => { 
  state.instrument = instrument;
  r();
- }}>
+ }}
+ >
  ${instrumentSymbol}
-  </div>
+ </button>
  `
  }
 
@@ -311,7 +316,7 @@ export function createSequencer(target) {
  </div>
 
  <div class="bpm">
- <div style="padding-right: 10px;">BPM:</div>
+ <div style="padding-right: 10px;">speed:</div>
  <div 
  class="bpm-control" 
  style="padding-right: 5px;" 
@@ -335,7 +340,7 @@ export function createSequencer(target) {
  r();
  }} type="range" min="1" max="1000" .value=${state.bpm / 2}>
  </input>
- <span style="width: 30px;">${state.bpm / 2}</span>
+ <span style="width: 30px;">${state.bpm / 2} bpm</span>
  <div 
  class="bpm-control" 
  style="padding-left: 5px;" 
@@ -349,6 +354,7 @@ export function createSequencer(target) {
  r();
  }}>+</div>
  </div>
+
  <div class="instruments">
  ${Object
  .entries(instrumentColorMap)

sequencer/style.js

@@ -48,9 +48,8 @@ export const style = `
  color: white;
  background: var(--bg-floating);
  display: flex;
- min-height: 80px;
- max-height: 80px;
- justify-content: space-around;
+ padding: 16px 20px;
+ justify-content: space-between;
  align-items: center;
  }
 
@@ -79,20 +78,12 @@ export const style = `
 
  .instruments {
  display: flex;
- flex-wrap: wrap;
- min-width: 140px;
  justify-content: flex-end;
+ gap: 4px;
  }
 
  .instrument {
- color: white;
- height: 30px;
- display: flex;
- width: 70px;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- user-select: none;
+ padding: 10px 16px;
  }
 
  .bpm-control {