+3 -1

src/lib/components/AutoGrowInput.svelte

··· 11 11 maxlength?: number; 12 12 bold?: boolean; 13 13 color?: string; 14 14 + fs?: string; 14 15 } 15 16 16 17 let { ··· 22 23 size = 5, 23 24 bold = false, 24 25 color, 26 26 + fs, 25 27 }: Props = $props(); 26 28 27 29 let inputEl: HTMLElement; ··· 52 54 style:font-weight={bold ? "700" : "inherit"} 53 55 style:--theme={color} 54 56 style:--themep={hexToTransparent(color ?? "#ffffff")} 57 57 + style:font-size={fs ?? "1rem"} 55 58 {placeholder} 56 59 /> 57 60 58 61 <style> 59 62 input { 60 60 - font-size: 1rem; 61 63 color: var(--theme); 62 64 background-color: transparent; 63 65 border: none;

+3

src/lib/components/AutoGrowTextArea.svelte

··· 9 9 maxlength?: number; 10 10 bold?: boolean; 11 11 color?: string; 12 12 + fs?: string; 12 13 } 13 14 14 15 let { ··· 19 20 maxlength, 20 21 bold = false, 21 22 color, 23 23 + fs, 22 24 }: Props = $props(); 23 25 24 26 let inputEl: HTMLTextAreaElement; ··· 85 87 onbeforeinput={bi} 86 88 style:font-weight={bold ? "700" : "inherit"} 87 89 style:--theme={color} 90 90 + style:font-size={fs ?? "1rem"} 88 91 {placeholder} 89 92 ></textarea> 90 93 </div>

+5 -2

src/lib/components/Receiever.svelte

··· 9 9 } 10 10 let { messages, mylocaltext, onmute, onunmute }: Props = $props(); 11 11 let length = $derived(messages.length); 12 12 + let innerWidth = $state(0); 13 13 + let isDesktop = $derived(innerWidth > 1000); 12 14 </script> 13 15 16 16 + <svelte:window bind:innerWidth /> 14 17 <div id="receiver"> 15 18 {#each messages as message, index} 16 19 {@const last = length - 1} 17 20 {@const diff = last - index} 18 18 - {@const guess = 2 + (Math.atan((diff - 18) * 0.25) / -2.8 - 0.45)} 21 21 + {@const guess = 2 + (Math.atan((diff - 19) * 0.25) / -2.8 - 0.45)} 19 22 {@const res = Math.min(Math.max(guess, 1), 2)} 20 23 <Transmission 21 24 {message} ··· 23 26 margin={0} 24 27 {onmute} 25 28 {onunmute} 26 26 - fs={`${res}rem`} 29 29 + fs={isDesktop ? `${res}rem` : "1rem"} 27 30 /> 28 31 {/each} 29 32 </div>

+13 -1

src/lib/components/Transmitter.svelte

··· 11 11 } 12 12 let { ctx, defaultNick, defaultHandle }: Props = $props(); 13 13 let nick = $state(defaultNick ?? "wanderer"); 14 14 + let innerWidth = $state(0); 15 15 + let isDesktop = $derived(innerWidth > 1000); 14 16 $effect(() => { 15 17 if (ctx) { 16 18 ctx.setNick(nick); ··· 76 78 }; 77 79 </script> 78 80 81 81 + <svelte:window bind:innerWidth /> 82 82 + 79 83 <div id="transmitter"> 80 80 - <div class="wrapper" style:--theme={color}> 84 84 + <div 85 85 + class="wrapper" 86 86 + style:--theme={color} 87 87 + style:font-size={isDesktop ? "2rem" : "1rem"} 88 88 + > 81 89 <input 82 90 type="range" 83 91 min="0" ··· 86 94 onchange={() => { 87 95 ctx.setColor(ctx.color); 88 96 }} 97 97 + style:font-size={isDesktop ? "2rem" : "1rem"} 89 98 /> 90 99 <AutoGrowInput 91 100 bind:value={nick} ··· 94 103 onInput={setName} 95 104 maxlength={12} 96 105 bold={true} 106 106 + fs={isDesktop ? "2rem" : "1rem"} 97 107 /> 98 108 @ 99 109 <AutoGrowInput ··· 103 113 onInput={setHandle} 104 114 maxlength={253} 105 115 bold={false} 116 116 + fs={isDesktop ? "2rem" : "1rem"} 106 117 /> 107 118 </div> 108 119 <AutoGrowTextArea ··· 110 121 onBeforeInput={bi} 111 122 onInput={diffAndSend} 112 123 maxlength={65535} 124 124 + fs={isDesktop ? "2rem" : "1rem"} 113 125 /> 114 126 </div> 115 127