colours!!! 🌈

packages/client/src/components/mod-player.vue

@@ -1,8 +1,8 @@
 <template>
 <div class="mod-player-disabled" v-if="hide" @click="hide = false">
 	<div>
-		<b><i class="fas fa-exlamation-triangle"></i> {{ $ts.sensitive }}</b>
+		<b><i class="fas fa-exlamation-triangle"></i> {{ i18n.ts.sensitive }}</b>
-		<span>{{ $ts.clickToShow }}</span>
+		<span>{{ i18n.ts.clickToShow }}</span>
 	</div>
 </div>
 
@@ -31,9 +31,42 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import * as foundkey from 'foundkey-js';
+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
 }>();
@@ -110,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';
+				ctx.fillStyle = colours.quarter[active];
-			}
-			if (rowToDraw === row) {
-				ctx.fillStyle = 'white';
 			}
 			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);
 			}
 		}
 	}
@@ -286,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 {