Skip to content

Commit

Permalink
Add missing thead and tbody tags
Browse files Browse the repository at this point in the history
ref #828
  • Loading branch information
frostburn committed Dec 11, 2024
1 parent a14a7e4 commit e5d50c7
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 72 deletions.
56 changes: 29 additions & 27 deletions src/components/VirtualKeyboard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -69,33 +69,35 @@ const isMousePressed = ref(false)

<template>
<table>
<tr v-for="[y, row] of virtualKeys" :key="y" :class="{ 'hidden-sm': y < 0 || y > 3 }">
<VirtualKeyboardKey
v-for="key of row"
:key="key.x"
:class="{
'hidden-sm': key.x > 8,
held: (heldNotes.get(key.index) || 0) > 0
}"
:index="key.index"
:color="key.color"
:isMousePressed="isMousePressed"
:noteOn="() => noteOn(key.index)"
@press="isMousePressed = true"
@unpress="isMousePressed = false"
>
<VirtualKeyInfo
:label="key.label"
:cents="key.cents"
:ratio="key.ratio"
:frequency="key.frequency"
:showLabel="props.showLabel"
:showCents="props.showCents"
:showRatio="props.showRatio"
:showFrequency="props.showFrequency"
/>
</VirtualKeyboardKey>
</tr>
<tbody>
<tr v-for="[y, row] of virtualKeys" :key="y" :class="{ 'hidden-sm': y < 0 || y > 3 }">
<VirtualKeyboardKey
v-for="key of row"
:key="key.x"
:class="{
'hidden-sm': key.x > 8,
held: (heldNotes.get(key.index) || 0) > 0
}"
:index="key.index"
:color="key.color"
:isMousePressed="isMousePressed"
:noteOn="() => noteOn(key.index)"
@press="isMousePressed = true"
@unpress="isMousePressed = false"
>
<VirtualKeyInfo
:label="key.label"
:cents="key.cents"
:ratio="key.ratio"
:frequency="key.frequency"
:showLabel="props.showLabel"
:showCents="props.showCents"
:showRatio="props.showRatio"
:showFrequency="props.showFrequency"
/>
</VirtualKeyboardKey>
</tr>
</tbody>
</table>
</template>

Expand Down
98 changes: 53 additions & 45 deletions src/views/AnalysisView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -321,41 +321,45 @@ const sSlider = computed({
<h2>Interval matrix (modes)</h2>
<div class="control-group interval-matrix">
<table @mouseleave="highlight()">
<tr>
<th></th>
<th v-for="i of Math.min(scale.scale.size, state.maxMatrixWidth)" :key="i">
{{ i - 1 + state.intervalMatrixIndexing }}
</th>
<th>({{ scale.scale.size + state.intervalMatrixIndexing }})</th>
<th class="brightness" v-if="state.calculateBrightness">Bright %</th>
</tr>
<tr v-for="(row, i) of matrixRows" :key="i">
<th :class="{ held: heldScaleDegrees.has(i) }">
<template v-if="cellFormat === 'best'">
{{ scale.labels[mmod(i - 1, scale.labels.length)] }}
</template>
<template v-else>
{{ formatMatrixCell(i ? scale.relativeIntervals[i - 1] : UNISON) }}
</template>
</th>
<td
v-for="(name, j) of row"
:key="j"
:class="{
violator: state.calculateConstantStructureViolations && violations[i][j],
highlight: (highlights[i] ?? [])[j]
}"
@mouseover="highlight(i, j)"
>
{{ name }}
</td>
<td class="brightness" v-if="state.calculateBrightness">{{ brightness[i] }}</td>
</tr>
<tr class="variety" v-if="state.calculateVariety">
<th>Var</th>
<td v-for="(v, i) of variety" :key="i">{{ v }}</td>
<td class="brightness" v-if="state.calculateBrightness"></td>
</tr>
<thead>
<tr>
<th></th>
<th v-for="i of Math.min(scale.scale.size, state.maxMatrixWidth)" :key="i">
{{ i - 1 + state.intervalMatrixIndexing }}
</th>
<th>({{ scale.scale.size + state.intervalMatrixIndexing }})</th>
<th class="brightness" v-if="state.calculateBrightness">Bright %</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, i) of matrixRows" :key="i">
<th :class="{ held: heldScaleDegrees.has(i) }">
<template v-if="cellFormat === 'best'">
{{ scale.labels[mmod(i - 1, scale.labels.length)] }}
</template>
<template v-else>
{{ formatMatrixCell(i ? scale.relativeIntervals[i - 1] : UNISON) }}
</template>
</th>
<td
v-for="(name, j) of row"
:key="j"
:class="{
violator: state.calculateConstantStructureViolations && violations[i][j],
highlight: (highlights[i] ?? [])[j]
}"
@mouseover="highlight(i, j)"
>
{{ name }}
</td>
<td class="brightness" v-if="state.calculateBrightness">{{ brightness[i] }}</td>
</tr>
<tr class="variety" v-if="state.calculateVariety">
<th>Var</th>
<td v-for="(v, i) of variety" :key="i">{{ v }}</td>
<td class="brightness" v-if="state.calculateBrightness"></td>
</tr>
</tbody>
</table>
</div>
<div class="control-group">
Expand Down Expand Up @@ -606,16 +610,20 @@ const sSlider = computed({
</div>
<div class="entropy-intervals">
<table>
<tr>
<th>Label</th>
<th>Cents</th>
<th>Entropy %</th>
</tr>
<tr v-for="(cents, i) of centss" :key="i">
<td>{{ labels[i] }}</td>
<td>{{ cents.toFixed(scale.centsFractionDigits) }}</td>
<td>{{ (100 * entropy.entropyPercentage(cents)).toFixed(3) }}</td>
</tr>
<thead>
<tr>
<th>Label</th>
<th>Cents</th>
<th>Entropy %</th>
</tr>
</thead>
<tbody>
<tr v-for="(cents, i) of centss" :key="i">
<td>{{ labels[i] }}</td>
<td>{{ cents.toFixed(scale.centsFractionDigits) }}</td>
<td>{{ (100 * entropy.entropyPercentage(cents)).toFixed(3) }}</td>
</tr>
</tbody>
</table>
</div>
</main>
Expand Down

0 comments on commit e5d50c7

Please sign in to comment.