Justin Edmund
3d58dd5b46
* Disabled games for now * Added failsafe for when last.fm can't find an album * Updated to use rems * Extracted RecentAlbums into a component * Fixes for mobile
83 lines
1.7 KiB
Svelte
83 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte'
|
|
|
|
export let text = 'Hello, Squiggly World!'
|
|
export let frequency = 0.4
|
|
export let amplitude = 1.5
|
|
export let color = '#e33d3d'
|
|
export let distance = 3
|
|
export let lineWidth = 1.75
|
|
|
|
let textWidth = 0
|
|
let textElement: HTMLHeadingElement
|
|
let squigglyHeight: number
|
|
|
|
$: path = generatePath(textWidth, frequency, amplitude, distance)
|
|
$: squigglyHeight = distance + amplitude * 2 + lineWidth
|
|
|
|
onMount(() => {
|
|
updateTextWidth()
|
|
})
|
|
|
|
function updateTextWidth(): void {
|
|
textWidth = textElement?.getBoundingClientRect().width || 0
|
|
}
|
|
|
|
function generatePath(width: number, freq: number, amp: number, dist: number): string {
|
|
if (width === 0) return ''
|
|
const startX = 2
|
|
const endX = width - 2
|
|
const startY = amp * Math.sin(startX * freq) + dist
|
|
|
|
let pathData = `M${startX},${startY} `
|
|
|
|
for (let x = startX; x <= endX; x++) {
|
|
const y = amp * Math.sin(x * freq) + dist
|
|
pathData += `L${x},${y} `
|
|
}
|
|
return pathData
|
|
}
|
|
|
|
$: {
|
|
text
|
|
updateTextWidth()
|
|
}
|
|
</script>
|
|
|
|
<div class="squiggly-container" style="padding-bottom: {squigglyHeight}px;">
|
|
<h2 bind:this={textElement} class="squiggly-header" style="color: {color}">{text}</h2>
|
|
<svg
|
|
class="squiggly-underline"
|
|
width={textWidth}
|
|
height={squigglyHeight}
|
|
viewBox="0 0 {textWidth} {squigglyHeight}"
|
|
>
|
|
<path
|
|
d={path}
|
|
fill="none"
|
|
stroke={color}
|
|
stroke-width={lineWidth}
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.squiggly-header {
|
|
font-size: 1.2rem;
|
|
font-weight: 500;
|
|
margin-bottom: $unit-fourth;
|
|
}
|
|
|
|
.squiggly-container {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.squiggly-underline {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
</style>
|