misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

[frontend] SkModPlayer make number row use the same blending technique as the slices.

Browse source
This commit is contained in:
Vavency 2025-07-24 20:03:23 +03:00
parent eeb1d774c0
commit 2d9744340f
1 changed files with 30 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

45
packages/frontend/src/components/SkModPlayer.vue
View file

@ -20,8 +20,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<span :class="$style.patternShadowTop"></span> <span :class="$style.patternShadowTop"></span>
<span :class="$style.patternShadowBottom"></span> <span :class="$style.patternShadowBottom"></span>
<div ref="sliceDisplay" :class="$style.slice_display"> <div ref="sliceDisplay" :class="$style.slice_display">
<span ref="numberRowParent" :class="$style.numberRowParent"> <span :class="$style.numberRowParent">
<canvas ref="numberRowCanvas" :style="{ top: numberRowOffset + 'px' }" :class="$style.row_canvas"></canvas> <span ref="numberRowBackground" :style="{ top: numberRowOffset + 'px' }" :class="$style.numberRowBackground">
<canvas ref="numberRowCanvas" :class="$style.row_canvas"></canvas>
</span>
</span> </span>
<span> <span>
<span ref="sliceBackground1" :class="$style.sliceBackground"> <span ref="sliceBackground1" :class="$style.sliceBackground">
@ -66,10 +68,7 @@ import { prefer } from '@/preferences.js';
const colours = { const colours = {
background: '#000000', background: '#000000',
foreground: { foreground: '#ffffff',
default: '#ffffff',
quarter: '#ffff00',
},
}; };
const CHAR_WIDTH = 6; const CHAR_WIDTH = 6;
@ -136,7 +135,7 @@ const patternHide = ref<boolean>(true);
const playing = ref<boolean>(false); const playing = ref<boolean>(false);
const sliceDisplay = ref<HTMLDivElement>(); const sliceDisplay = ref<HTMLDivElement>();
const numberRowCanvas = ref<HTMLCanvasElement>(); const numberRowCanvas = ref<HTMLCanvasElement>();
const numberRowParent = ref<HTMLSpanElement>(); const numberRowBackground = ref<HTMLSpanElement>();
const sliceCanvas1 = ref<HTMLCanvasElement>(); const sliceCanvas1 = ref<HTMLCanvasElement>();
const sliceCanvas2 = ref<HTMLCanvasElement>(); const sliceCanvas2 = ref<HTMLCanvasElement>();
const sliceCanvas3 = ref<HTMLCanvasElement>(); const sliceCanvas3 = ref<HTMLCanvasElement>();
@ -169,22 +168,20 @@ let slices: CanvasDisplay[] = [];
let numberRowPHTML: HTMLSpanElement; let numberRowPHTML: HTMLSpanElement;
function bakeNumberRow() { function bakeNumberRow() {
if (numberRowCanvas.value && numberRowParent.value) { if (numberRowCanvas.value && numberRowBackground.value) {
numberRowCanvas.value.width = NUMBER_ROW_WIDTH; numberRowCanvas.value.width = NUMBER_ROW_WIDTH;
numberRowCanvas.value.height = MAX_ROW_NUMBERS * CHAR_HEIGHT + 1; numberRowCanvas.value.height = MAX_ROW_NUMBERS * CHAR_HEIGHT + 1;
numberRowPHTML = numberRowParent.value; numberRowPHTML = numberRowBackground.value;
numberRowPHTML.style.display = 'block';
let ctx = numberRowCanvas.value.getContext('2d', { alpha: false }) as CanvasRenderingContext2D; let ctx = numberRowCanvas.value.getContext('2d', { alpha: false }) as CanvasRenderingContext2D;
ctx.font = '10px "Liberation Mono", "Courier New", "Droid Sans Mono", "Roboto Mono", "Luxi Mono", "FreeMono", monospace'; ctx.font = '10px "Liberation Mono", "Courier New", "Droid Sans Mono", "Roboto Mono", "Luxi Mono", "FreeMono", monospace';
ctx.fillStyle = colours.background; ctx.fillStyle = colours.background;
ctx.fillRect( 0, 0, numberRowCanvas.value.width, numberRowCanvas.value.height ); ctx.fillRect( 0, 0, numberRowCanvas.value.width, numberRowCanvas.value.height );
ctx.fillStyle = colours.foreground;
for (let i = 0; i <= MAX_ROW_NUMBERS; i++) { for (let i = 0; i <= MAX_ROW_NUMBERS; i++) {
let rowText = i.toString(16); let rowText = i.toString(16);
if (rowText.length === 1) rowText = '0' + rowText; if (rowText.length === 1) rowText = '0' + rowText;
ctx.fillStyle = colours.foreground.default;
if (i % 4 === 0) ctx.fillStyle = colours.foreground.quarter;
ctx.fillText(rowText, 0, ROW_OFFSET_Y + i * 12); ctx.fillText(rowText, 0, ROW_OFFSET_Y + i * 12);
} }
} }
@ -425,7 +422,7 @@ function getRowText(slice: CanvasDisplay, row: number, pattern: number) : string
} }
function drawText(slice: CanvasDisplay, text: string[], drawX = 0, drawY = ROW_OFFSET_Y) { function drawText(slice: CanvasDisplay, text: string[], drawX = 0, drawY = ROW_OFFSET_Y) {
slice.ctx.fillStyle = colours.foreground.default; slice.ctx.fillStyle = colours.foreground;
text.forEach((str, i) => { text.forEach((str, i) => {
if (str.length !== 0) slice.ctx.fillText(str, drawX, drawY + CHAR_HEIGHT * i); if (str.length !== 0) slice.ctx.fillText(str, drawX, drawY + CHAR_HEIGHT * i);
}); });
@ -595,6 +592,12 @@ onDeactivated(() => {
max-height: 312px; /* magic_number = CHAR_HEIGHT * rowBuffer, needs to be in px */ max-height: 312px; /* magic_number = CHAR_HEIGHT * rowBuffer, needs to be in px */
scrollbar-width: none; scrollbar-width: none;
canvas {
image-rendering: pixelated;
mix-blend-mode: multiply;
background-color: #000000;
}
.slice_display { .slice_display {
display: flex; display: flex;
position: relative; position: relative;
@ -617,9 +620,6 @@ onDeactivated(() => {
); );
.patternSlice { .patternSlice {
position: static; position: static;
image-rendering: pixelated;
mix-blend-mode: multiply;
background-color: #000000;
} }
} }
} }
@ -631,14 +631,23 @@ onDeactivated(() => {
height: 200%; height: 200%;
overflow: clip; overflow: clip;
background: #000000; background: #000000;
.row_canvas { .numberRowBackground {
position: relative; position: relative;
display: none;
background-image: repeating-linear-gradient(
to bottom,
var(--MI_THEME-modPlayerDefault) 0px calc(3 * 12px),
var(--MI_THEME-modPlayerQuarter) calc(3 * 12px) calc(4 * 12px),
);
.row_canvas {
position: static;
right: 0; right: 0;
z-index: 1; z-index: 1;
inset: 0; inset: 0;
} }
} }
} }
}
.patternShadowTop { .patternShadowTop {
background: var(--MI_THEME-modPlayerShadow); background: var(--MI_THEME-modPlayerShadow);