diff --git a/src/image-preview/composables/useRendering.js b/src/image-preview/composables/useRendering.js index 6bbaf81..72e84c3 100644 --- a/src/image-preview/composables/useRendering.js +++ b/src/image-preview/composables/useRendering.js @@ -26,7 +26,43 @@ export default function useRendering(context) { const tempContext = tempCanvas.getContext('2d') settings.flags.forEach((flag, flagIndex) => { - if (flag.id === 'bisexual' || flag.id === 'autoromantic') { + if (flag.id === 'ally') { + const barHeight = flagHeight / 6 + + for (let barIndex = 0; barIndex < 6; barIndex++) { + tempContext.fillStyle = flag.bars[barIndex] + tempContext.fillRect( + 0, + flagHeight * flagIndex + barHeight * barIndex, + size, + barHeight + ) + } + + tempContext.save() + + tempContext.beginPath() + tempContext.moveTo(0, flagHeight * (flagIndex + 1)) + tempContext.lineTo(size / 2, flagHeight * flagIndex) + tempContext.lineTo(size, flagHeight * (flagIndex + 1)) + tempContext.lineTo(size - size / 3, flagHeight * (flagIndex + 1)) + tempContext.lineTo(size / 2, flagHeight * flagIndex + barHeight * 4) + tempContext.lineTo(size / 3, flagHeight * (flagIndex + 1)) + tempContext.closePath() + tempContext.clip() + + for (let barIndex = 0; barIndex < 6; barIndex++) { + tempContext.fillStyle = flag.bars[barIndex + 6] + tempContext.fillRect( + 0, + flagHeight * flagIndex + barHeight * barIndex, + size, + barHeight + ) + } + + tempContext.restore() + } else if (flag.id === 'bisexual' || flag.id === 'autoromantic') { const barHeight = flagHeight / 5 tempContext.fillStyle = flag.bars[0] diff --git a/src/side-bar/composables/useFlagTypes.js b/src/side-bar/composables/useFlagTypes.js index eef09a9..2333416 100644 --- a/src/side-bar/composables/useFlagTypes.js +++ b/src/side-bar/composables/useFlagTypes.js @@ -17,6 +17,24 @@ export default function useFlagTypes() { label: 'Agender', bars: ['#000', '#BCC5C6', '#FFF', '#B5F582', '#FFF', '#BCC5C6', '#000'], }, + { + id: 'ally', + label: 'Ally', + bars: [ + '#000', + '#FFF', + '#000', + '#FFF', + '#000', + '#FFF', + '#E60000', + '#FF8E00', + '#FFEF00', + '#00821B', + '#004BFF', + '#770089', + ], + }, { id: 'androgyne', label: 'Androgyne',