click on coords box copies to chat if open

style changes, chat now selectable

src/components/Chat.jsx

@@ -40,15 +40,20 @@ const Chat = ({ chatMessages }) => {
                   <div>
                     <img
                       alt=""
+                      title={`${message[2]}`}
                       src={`${window.assetserver}/cf/${message[2]}.gif`}
                       onError={onError}
                     />
+                    &nbsp;
                     <span
                       className="chatname"
-                      style={{ color: colorFromText(message[0]) }}
+                      style={{
+                        color: colorFromText(message[0]),
+                      }}
                     >
-                      {` ${message[0]}: `}
+                      {`${message[0]}`}
                     </span>
+                    : &nbsp;
                     {
                     splitCoordsInString(message[1]).map((text, i) => {
                       if (i % 2 === 0) {

src/components/CoordinatesBox.jsx

@@ -5,6 +5,8 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
+import copy from '../utils/clipboard';
+import { notify } from '../actions';
 
 import type { State } from '../reducers';
 
@@ -13,17 +15,33 @@ function renderCoordinates(cell): string {
   return `(${cell.join(', ')})`;
 }
 
-const CoordinatesBox = ({ view, hover }) => (
-  <div className="coorbox">{
+
+const CoordinatesBox = ({ view, hover, notifyCopy }) => (
+  <div
+    className="coorbox"
+  // eslint-disable-next-line no-restricted-globals
+    onClick={() => { copy(location.hash); notifyCopy(); }}
+    role="button"
+    title="Copy to Clipboard"
+    tabIndex="0"
+  >{
     renderCoordinates(hover
     || view.map(Math.round))
   }</div>
 );
 
+function mapDispatchToProps(dispatch) {
+  return {
+    notifyCopy() {
+      dispatch(notify('Copied!'));
+    },
+  };
+}
+
 function mapStateToProps(state: State) {
   const { view } = state.canvas;
   const { hover } = state.gui;
   return { view, hover };
 }
 
-export default connect(mapStateToProps)(CoordinatesBox);
+export default connect(mapStateToProps, mapDispatchToProps)(CoordinatesBox);

src/components/HelpModal.jsx

@@ -64,8 +64,9 @@ const HelpModal = () => (
       <h3 style={titleStyle}>2D Controls</h3>
       <p style={textStyle}>Click a color in palette to select</p>
       <p style={textStyle}>Press <kbd>G</kbd> to toggle grid</p>
-      <p style={textStyle}>Press <kbd>C</kbd> to toggle showing of pixel activity</p>
-      <p style={textStyle}>Press <kbd>q</kbd> or <kbd>e</kbd> to zoom</p>
+      <p style={textStyle}>Press <kbd>X</kbd> to toggle showing of pixel activity</p>
+      <p style={textStyle}>Press <kbd>C</kbd> to copy coordinates</p>
+      <p style={textStyle}>Press <kbd>Q</kbd> or <kbd>E</kbd> to zoom</p>
       <p style={textStyle}>Press <kbd>W</kbd>,<kbd>A</kbd>,<kbd>S</kbd>, <kbd>D</kbd> to move</p>
       <p style={textStyle}>Press <kbd>↑</kbd>,<kbd>←</kbd>,<kbd>↓</kbd>, <kbd>→</kbd> to move</p>
       <p style={textStyle}>Drag mouse to move</p>

src/components/NotifyBox.jsx

@@ -8,14 +8,17 @@ import { connect } from 'react-redux';
 
 import type { State } from '../reducers';
 
-let style = {};
 function getStyle(notification) {
-  if (notification) {
-    style = {
-      backgroundColor: (notification >= 0) ? '#a9ffb0cc' : '#ffa9a9cc',
+  if (!notification) return {};
+
+  if (typeof notification === 'string') {
+    return {
+      width: 50,
     };
   }
-  return style;
+  return {
+    backgroundColor: (notification >= 0) ? '#a9ffb0cc' : '#ffa9a9cc',
+  };
 }
 
 const NotifyBox = ({ notification }) => (

src/components/base.tcss

@@ -116,6 +116,7 @@ kbd {
 }
 :global(.coorbox) {
     left: 16px;
+    cursor: pointer;
     bottom: 16px;
 }
 :global(.onlinebox) {
@@ -262,10 +263,12 @@ kbd {
 :global(.chatname) {
   color: #4B0000;
   font-size: 13px;
+  user-select: all;
 }
 :global(.chatmsg) {
   color: #030303;
   font-size: 13px;
+  user-select: text;
   margin: 0;
 }
 
@@ -288,6 +291,7 @@ kbd {
 }
 
 :global(.notifyboxvis), :global(.notifyboxhid) {
+    background-color: rgba(226, 226, 226, 0.80);
     position: absolute;
     top: 57px;
     left: 0px;

src/controls/keypress.js

@@ -5,10 +5,12 @@
 import keycode from 'keycode';
 
 import store from '../ui/store';
+import copy from '../utils/clipboard';
 import {
   toggleGrid,
   togglePixelNotify,
   toggleMute,
+  notify,
 } from '../actions';
 
 
@@ -24,12 +26,20 @@ function onKeyPress(event: KeyboardEvent) {
     case 'g':
       store.dispatch(toggleGrid());
       break;
-    case 'c':
+    case 'x':
       store.dispatch(togglePixelNotify());
       break;
     case 'm':
       store.dispatch(toggleMute());
       break;
+    case 'c': {
+      const state = store.getState();
+      const { hover } = state.gui;
+      const text = hover.join('_');
+      copy(text);
+      store.dispatch(notify('Copied!'));
+      break;
+    }
     default:
   }
 }

src/utils/clipboard.js

@@ -0,0 +1,37 @@
+/* @flow
+ */
+
+function fallbackCopyTextToClipboard(text) {
+  const textArea = document.createElement('textarea');
+  textArea.value = text;
+
+  // Avoid scrolling to bottom
+  textArea.style.top = '0';
+  textArea.style.left = '0';
+  textArea.style.position = 'fixed';
+
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+
+  try {
+    const successful = document.execCommand('copy');
+    document.body.removeChild(textArea);
+    return successful;
+  } catch {
+    document.body.removeChild(textArea);
+    return false;
+  }
+}
+
+export default async function copyTextToClipboard(text) {
+  if (!navigator.clipboard) {
+    return fallbackCopyTextToClipboard(text);
+  }
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}