FoundKeyGang/FoundKey
FoundKeyGang
/
FoundKey
7
19
Fork 22
Code Issues 37 Pull Requests 4 Releases Activity

colours!!! 🌈
ci/woodpecker/pr/lint-foundkey-js Pipeline was successful Details
ci/woodpecker/pr/lint-client Pipeline failed Details
ci/woodpecker/pr/lint-backend Pipeline failed Details
ci/woodpecker/pr/build Pipeline was successful Details
ci/woodpecker/pr/lint-sw Pipeline failed Details
ci/woodpecker/pr/test Pipeline failed Details

This commit is contained in:
Puniko 2022-12-27 14:45:59 +01:00
parent dba4f0a4a9
commit 6c5723c795
1 changed files with 63 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
packages/client/src/components/mod-player.vue
View File

@ -35,6 +35,38 @@ import { i18n } from '@/i18n';
import { defaultStore } from '@/store';
import { ChiptuneJsPlayer, ChiptuneJsConfig } from '@/scripts/chiptune2';
const CHAR_WIDTH = 6;
const CHAR_HEIGHT = 12;
const ROW_OFFSET_Y = 10;
const colours = {
background: '#000000',
default: {
active: '#ffffff',
inactive: '#808080'
},
quarter: {
active: '#ffff00',
inactive: '#ffe135'
},
instr: {
active: '#80e0ff',
inactive: '#0099cc'
},
volume: {
active: '#80ff80',
inactive: '#008000'
},
fx: {
active: '#ff80e0',
inactive: '#800060'
},
operant: {
active: '#ffe080',
inactive: '#806000'
}
};
const props = defineProps<{
module: foundkey.entities.DriveFile
}>();
@ -111,31 +143,49 @@ function display() {
const nbRows = player.value.getPatternNumRows(pattern);
const ctx = canvas.getContext('2d');
ctx.font = '10px monospace';
ctx.fillStyle = 'black';
ctx.fillStyle = colours.background;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'gray';
ctx.fillStyle = colours.default.inactive;
for (let rowOffset = 0; rowOffset < rowBuffer; rowOffset++) {
const rowToDraw = row - rowBuffer / 2 + rowOffset;
if (rowToDraw >= 0 && rowToDraw < nbRows) {
const active = (rowToDraw === row) ? 'active' : 'inactive';
let rowText = parseInt(rowToDraw).toString(16);
if (rowText.length === 1) {
rowText = '0' + rowText;
}
ctx.fillStyle = 'gray';
ctx.fillStyle = colours.default[active];
if (rowToDraw % 4 === 0) {
ctx.fillStyle = 'yellow';
}
if (rowToDraw === row) {
ctx.fillStyle = 'white';
ctx.fillStyle = colours.quarter[active];
}
ctx.fillText(rowText, 0, 10 + rowOffset * 12);
ctx.fillStyle = 'gray';
if (rowToDraw === row) {
ctx.fillStyle = 'white';
}
for (let channel = 0; channel < nbChannels; channel++) {
const part = player.value.getPatternRowChannel(pattern, rowToDraw, channel);
ctx.fillText("|" + part, 12 + 84 * channel, 10 + rowOffset * 12);
const baseOffset = (2 + (part.length + 1) * channel) * CHAR_WIDTH;
const baseRowOffset = ROW_OFFSET_Y + rowOffset * CHAR_HEIGHT;
ctx.fillStyle = colours.default[active];
ctx.fillText("|", baseOffset, baseRowOffset);
const note = part.substring(0, 3);
ctx.fillStyle = colours.default[active];
ctx.fillText(note, baseOffset + CHAR_WIDTH, baseRowOffset);
const instr = part.substring(4, 6);
ctx.fillStyle = colours.instr[active];
ctx.fillText(instr, baseOffset + CHAR_WIDTH * 5, baseRowOffset);
const volume = part.substring(6, 9);
ctx.fillStyle = colours.volume[active];
ctx.fillText(volume, baseOffset + CHAR_WIDTH * 7, baseRowOffset);
const fx = part.substring(10, 11);
ctx.fillStyle = colours.fx[active];
ctx.fillText(fx, baseOffset + CHAR_WIDTH * 11, baseRowOffset);
const op = part.substring(11, 13);
ctx.fillStyle = colours.operant[active];
ctx.fillText(op, baseOffset + CHAR_WIDTH * 12, baseRowOffset);
}
}
}
@ -287,6 +337,7 @@ function display() {
padding: unset;
margin: 4px 8px;
flex-grow: 1;
min-width: 0;
background-color: var(--bg);
&::-moz-progress-bar, &::-webkit-progress-value {