fun: dialogue tweaks

app/react/components/dom/dialogue.jsx

@@ -7,7 +7,7 @@ import {render} from '@/util/dialogue.js';
 
 import styles from './dialogue.module.css';
 
-const CARET_SIZE = 12;
+const CARET_SIZE = 18;
 
 export default function Dialogue({
   camera,
@@ -166,7 +166,7 @@ export default function Dialogue({
           `,
         }}
       >
-        <polygon points="0 0, 24 0, 12 24" />
+        <polygon points="12 0, 18 10, 12 23, 23 10, 20 0" />
       </svg>
       <p className={styles.letters}>
         {localRender(caret, radians)}

app/react/components/dom/dialogue.module.css

@@ -1,24 +1,31 @@
 .caret {
   position: absolute;
-  fill: #00000044;
-  stroke: white;
+  fill: #ffffff;
+  stroke: #00000044;
+  stroke-width: 2px;
   left: 50%;
   top: 50%;
 }
 
 .dialogue {
-  background-color: #00000044;
-  border: solid 1px white;
+  background-color: #02023999;
+  border: solid 3px white;
   border-radius: 8px;
   color: white;
   overflow-wrap: break-word;
-  padding: 1em;
+  padding: 12px;
   position: fixed;
   margin: 0;
-  margin-right: -33%;
+  margin-right: -66%;
+  text-shadow:
+    0px -1px 0px black,
+    1px 0px 0px black,
+    0px 1px 0px black,
+    -1px 0px 0px black
+  ;
   transform: translate(-50%, -50%);
   user-select: none;
-  max-width: 33%;
+  max-width: 66%;
 }
 
 .letters {

app/react/components/dom/dialogues.module.css

@@ -1,6 +1,6 @@
 .dialogues {
   font-family: Cookbook, Georgia, 'Times New Roman', Times, serif;
-  font-size: 20px;
+  font-size: 22px;
 }
 
 @font-face {

app/server/create/homestead.js

@@ -124,7 +124,7 @@ export default async function createHomestead(id) {
           'p<shake>rrr</shake>o<wave>wwwww</wave>',
           'mew<rate frequency={0.5}> </rate>mew!',
           'me<wave>wwwww</wave>',
-          'pu<shake>rrrrr</shake>',
+          '\\\\*pu<shake>rrrrr</shake>\\\\*',
         ];
         const line = lines[Math.floor(Math.random() * lines.length)];
         subject.Interlocutor.dialogue({
@@ -149,7 +149,7 @@ export default async function createHomestead(id) {
     Ticking: {},
     VisibleAabb: {},
   };
-  for (let i = 0; i < 10; ++i) {
+  for (let i = 0; i < 30; ++i) {
     entities.push(kitty);
   }
   return entities;

app/util/dialogue.js

@@ -1,11 +1,15 @@
 import {createElement} from 'react';
 import mdx from 'remark-mdx';
 import parse from 'remark-parse';
+import {createNoise2D} from 'simplex-noise';
 import {unified} from 'unified';
 import {visitParents as visit} from 'unist-util-visit-parents';
 
 import {TAU} from '@/util/math.js';
 
+const rawNoise = createNoise2D();
+const noise = (x, y) => (1 + rawNoise(x, y)) / 2;
+
 const parser = unified().use(parse).use(mdx);
 
 function computeParams(ancestors) {
@@ -96,8 +100,9 @@ export function render(letters, className) {
         }
         if (params.shake) {
           const {magnitude = 1} = params.shake;
-          left += (Math.random() * magnitude * 2) - magnitude;
-          top += (Math.random() * magnitude * 2) - magnitude;
+          const r = radians + TAU * indices.shake / params.shake.length;
+          left += (noise(-Math.sin(r) * 32, Math.cos(r) * 32) * magnitude * 2) - magnitude;
+          top += (noise(Math.sin(r) * 32, -Math.cos(r) * 32) * magnitude * 2) - magnitude;
         }
         if (params.em) {
           fontStyle = 'italic';