Skip to content
Snippets Groups Projects
Commit 5635f29e authored by Greg Fodor's avatar Greg Fodor
Browse files

Add source to messages

parent 96eedce1
No related branches found
No related tags found
No related merge requests found
...@@ -187,6 +187,15 @@ ...@@ -187,6 +187,15 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
:local(.message-wrap) {
flex-direction: column;
}
:local(.message-source) {
font-size: 0.7em;
color: $dark-grey;
}
} }
:local(.emoji) { :local(.emoji) {
......
...@@ -563,11 +563,12 @@ document.addEventListener("DOMContentLoaded", async () => { ...@@ -563,11 +563,12 @@ document.addEventListener("DOMContentLoaded", async () => {
linkChannel.setSocket(socket); linkChannel.setSocket(socket);
setInterval(() => { setInterval(() => {
createInWorldChatMessage("hello :heart:", AFRAME.utils.device.isMobile()); createInWorldChatMessage("hello :heart:", "Greg", AFRAME.utils.device.isMobile());
setTimeout(() => { setTimeout(() => {
createInWorldChatMessage( createInWorldChatMessage(
"This is some long text. Will it wrapn? I don't know but I sure hope so. That would be neat.", "This is some long text. Will it wrapn? I don't know but I sure hope so. That would be neat.",
"Another guy",
AFRAME.utils.device.isMobile() AFRAME.utils.device.isMobile()
); );
}, 2000); }, 2000);
......
...@@ -40,9 +40,10 @@ const wordWrap = body => { ...@@ -40,9 +40,10 @@ const wordWrap = body => {
return outWords.join(" "); return outWords.join(" ");
}; };
const messageBodyDom = body => { const messageBodyDom = (body, from) => {
// Support wrapping text in ` to get monospace, and multiline. // Support wrapping text in ` to get monospace, and multiline.
const multiLine = body.split("\n").length > 1; const multiLine = body.split("\n").length > 1;
const wrapStyle = multiLine ? styles.messageWrapMulti : styles.messageWrap;
const mono = body.startsWith("`") && body.endsWith("`"); const mono = body.startsWith("`") && body.endsWith("`");
const messageBodyClasses = { const messageBodyClasses = {
[styles.messageBody]: true, [styles.messageBody]: true,
...@@ -57,13 +58,20 @@ const messageBodyDom = body => { ...@@ -57,13 +58,20 @@ const messageBodyDom = body => {
const cleanedBody = (mono ? body.substring(1, body.length - 1) : body).trim(); const cleanedBody = (mono ? body.substring(1, body.length - 1) : body).trim();
return ( return (
<div className={classNames(messageBodyClasses)}> <div className={wrapStyle}>
<Linkify properties={{ target: "_blank", rel: "noopener referrer" }}>{toEmojis(cleanedBody)}</Linkify> {from && (
<div className={styles.messageSource}>
<b>{from}</b>:
</div>
)}
<div className={classNames(messageBodyClasses)}>
<Linkify properties={{ target: "_blank", rel: "noopener referrer" }}>{toEmojis(cleanedBody)}</Linkify>
</div>
</div> </div>
); );
}; };
export function renderChatMessage(body, lowResolution) { export function renderChatMessage(body, from, lowResolution) {
const isOneLine = body.split("\n").length === 1; const isOneLine = body.split("\n").length === 1;
const context = messageCanvas.getContext("2d"); const context = messageCanvas.getContext("2d");
const emoji = toEmojis(body); const emoji = toEmojis(body);
...@@ -86,7 +94,7 @@ export function renderChatMessage(body, lowResolution) { ...@@ -86,7 +94,7 @@ export function renderChatMessage(body, lowResolution) {
[styles.presenceLogEmoji]: isEmoji [styles.presenceLogEmoji]: isEmoji
})} })}
> >
{messageBodyDom(body)} {messageBodyDom(body, from)}
</div> </div>
); );
...@@ -125,8 +133,8 @@ export function renderChatMessage(body, lowResolution) { ...@@ -125,8 +133,8 @@ export function renderChatMessage(body, lowResolution) {
}); });
} }
export async function createInWorldChatMessage(body, lowResolution) { export async function createInWorldChatMessage(body, from, lowResolution) {
const blob = await renderChatMessage(body, lowResolution); const blob = await renderChatMessage(body, from, lowResolution);
const entity = document.createElement("a-entity"); const entity = document.createElement("a-entity");
const meshEntity = document.createElement("a-entity"); const meshEntity = document.createElement("a-entity");
...@@ -187,7 +195,7 @@ export async function createInWorldChatMessage(body, lowResolution) { ...@@ -187,7 +195,7 @@ export async function createInWorldChatMessage(body, lowResolution) {
}); });
} }
export async function spawnChatMessage(body, lowResolution) { export async function spawnChatMessage(body, from) {
if (body.length === 0) return; if (body.length === 0) return;
if (body.match(urlRegex)) { if (body.match(urlRegex)) {
...@@ -195,7 +203,7 @@ export async function spawnChatMessage(body, lowResolution) { ...@@ -195,7 +203,7 @@ export async function spawnChatMessage(body, lowResolution) {
return; return;
} }
const blob = await renderChatMessage(body, false, lowResolution); const blob = await renderChatMessage(body, from, false);
document.querySelector("a-scene").emit("add_media", new File([blob], "message.png", { type: "image/png" })); document.querySelector("a-scene").emit("add_media", new File([blob], "message.png", { type: "image/png" }));
} }
...@@ -210,12 +218,7 @@ export default function ChatMessage(props) { ...@@ -210,12 +218,7 @@ export default function ChatMessage(props) {
onClick={() => spawnChatMessage(props.body)} onClick={() => spawnChatMessage(props.body)}
/> />
)} )}
<div className={isOneLine ? styles.messageWrap : styles.messageWrapMulti}> {messageBodyDom(props.body, props.name)}
<div className={styles.messageSource}>
<b>{props.name}</b>:
</div>
{messageBodyDom(props.body)}
</div>
</div> </div>
); );
} }
......
...@@ -177,6 +177,10 @@ export default function serializeElement(el) { ...@@ -177,6 +177,10 @@ export default function serializeElement(el) {
cssTexts[i] = e.style.cssText; cssTexts[i] = e.style.cssText;
for (let ii = 0; ii < computedStyle.length; ii++) { for (let ii = 0; ii < computedStyle.length; ii++) {
const cssPropName = computedStyle[ii]; const cssPropName = computedStyle[ii];
// Skip non-standard CSS for now, because it overwrites things like color
if (cssPropName.startsWith("-webkit")) continue;
if (computedStyle[cssPropName] !== defaultStyle[cssPropName]) { if (computedStyle[cssPropName] !== defaultStyle[cssPropName]) {
e.style[cssPropName] = computedStyle[cssPropName]; e.style[cssPropName] = computedStyle[cssPropName];
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment