click on coords box copies to chat if open
style changes, chat now selectable
This commit is contained in:
parent
c231cbf8f1
commit
77d3a6c417
|
@ -40,15 +40,20 @@ const Chat = ({ chatMessages }) => {
|
||||||
<div>
|
<div>
|
||||||
<img
|
<img
|
||||||
alt=""
|
alt=""
|
||||||
|
title={`${message[2]}`}
|
||||||
src={`${window.assetserver}/cf/${message[2]}.gif`}
|
src={`${window.assetserver}/cf/${message[2]}.gif`}
|
||||||
onError={onError}
|
onError={onError}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<span
|
<span
|
||||||
className="chatname"
|
className="chatname"
|
||||||
style={{ color: colorFromText(message[0]) }}
|
style={{
|
||||||
|
color: colorFromText(message[0]),
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{` ${message[0]}: `}
|
{`${message[0]}`}
|
||||||
</span>
|
</span>
|
||||||
|
:
|
||||||
{
|
{
|
||||||
splitCoordsInString(message[1]).map((text, i) => {
|
splitCoordsInString(message[1]).map((text, i) => {
|
||||||
if (i % 2 === 0) {
|
if (i % 2 === 0) {
|
||||||
|
|
|
@ -5,6 +5,8 @@
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
import copy from '../utils/clipboard';
|
||||||
|
import { notify } from '../actions';
|
||||||
|
|
||||||
import type { State } from '../reducers';
|
import type { State } from '../reducers';
|
||||||
|
|
||||||
|
@ -13,17 +15,33 @@ function renderCoordinates(cell): string {
|
||||||
return `(${cell.join(', ')})`;
|
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
|
renderCoordinates(hover
|
||||||
|| view.map(Math.round))
|
|| view.map(Math.round))
|
||||||
}</div>
|
}</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
function mapDispatchToProps(dispatch) {
|
||||||
|
return {
|
||||||
|
notifyCopy() {
|
||||||
|
dispatch(notify('Copied!'));
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
function mapStateToProps(state: State) {
|
function mapStateToProps(state: State) {
|
||||||
const { view } = state.canvas;
|
const { view } = state.canvas;
|
||||||
const { hover } = state.gui;
|
const { hover } = state.gui;
|
||||||
return { view, hover };
|
return { view, hover };
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(mapStateToProps)(CoordinatesBox);
|
export default connect(mapStateToProps, mapDispatchToProps)(CoordinatesBox);
|
||||||
|
|
|
@ -64,8 +64,9 @@ const HelpModal = () => (
|
||||||
<h3 style={titleStyle}>2D Controls</h3>
|
<h3 style={titleStyle}>2D Controls</h3>
|
||||||
<p style={textStyle}>Click a color in palette to select</p>
|
<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>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>X</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>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>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}>Press <kbd>↑</kbd>,<kbd>←</kbd>,<kbd>↓</kbd>, <kbd>→</kbd> to move</p>
|
||||||
<p style={textStyle}>Drag mouse to move</p>
|
<p style={textStyle}>Drag mouse to move</p>
|
||||||
|
|
|
@ -8,14 +8,17 @@ import { connect } from 'react-redux';
|
||||||
|
|
||||||
import type { State } from '../reducers';
|
import type { State } from '../reducers';
|
||||||
|
|
||||||
let style = {};
|
|
||||||
function getStyle(notification) {
|
function getStyle(notification) {
|
||||||
if (notification) {
|
if (!notification) return {};
|
||||||
style = {
|
|
||||||
backgroundColor: (notification >= 0) ? '#a9ffb0cc' : '#ffa9a9cc',
|
if (typeof notification === 'string') {
|
||||||
|
return {
|
||||||
|
width: 50,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return style;
|
return {
|
||||||
|
backgroundColor: (notification >= 0) ? '#a9ffb0cc' : '#ffa9a9cc',
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const NotifyBox = ({ notification }) => (
|
const NotifyBox = ({ notification }) => (
|
||||||
|
|
|
@ -116,6 +116,7 @@ kbd {
|
||||||
}
|
}
|
||||||
:global(.coorbox) {
|
:global(.coorbox) {
|
||||||
left: 16px;
|
left: 16px;
|
||||||
|
cursor: pointer;
|
||||||
bottom: 16px;
|
bottom: 16px;
|
||||||
}
|
}
|
||||||
:global(.onlinebox) {
|
:global(.onlinebox) {
|
||||||
|
@ -262,10 +263,12 @@ kbd {
|
||||||
:global(.chatname) {
|
:global(.chatname) {
|
||||||
color: #4B0000;
|
color: #4B0000;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
user-select: all;
|
||||||
}
|
}
|
||||||
:global(.chatmsg) {
|
:global(.chatmsg) {
|
||||||
color: #030303;
|
color: #030303;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
user-select: text;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -288,6 +291,7 @@ kbd {
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.notifyboxvis), :global(.notifyboxhid) {
|
:global(.notifyboxvis), :global(.notifyboxhid) {
|
||||||
|
background-color: rgba(226, 226, 226, 0.80);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 57px;
|
top: 57px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
|
|
|
@ -5,10 +5,12 @@
|
||||||
import keycode from 'keycode';
|
import keycode from 'keycode';
|
||||||
|
|
||||||
import store from '../ui/store';
|
import store from '../ui/store';
|
||||||
|
import copy from '../utils/clipboard';
|
||||||
import {
|
import {
|
||||||
toggleGrid,
|
toggleGrid,
|
||||||
togglePixelNotify,
|
togglePixelNotify,
|
||||||
toggleMute,
|
toggleMute,
|
||||||
|
notify,
|
||||||
} from '../actions';
|
} from '../actions';
|
||||||
|
|
||||||
|
|
||||||
|
@ -24,12 +26,20 @@ function onKeyPress(event: KeyboardEvent) {
|
||||||
case 'g':
|
case 'g':
|
||||||
store.dispatch(toggleGrid());
|
store.dispatch(toggleGrid());
|
||||||
break;
|
break;
|
||||||
case 'c':
|
case 'x':
|
||||||
store.dispatch(togglePixelNotify());
|
store.dispatch(togglePixelNotify());
|
||||||
break;
|
break;
|
||||||
case 'm':
|
case 'm':
|
||||||
store.dispatch(toggleMute());
|
store.dispatch(toggleMute());
|
||||||
break;
|
break;
|
||||||
|
case 'c': {
|
||||||
|
const state = store.getState();
|
||||||
|
const { hover } = state.gui;
|
||||||
|
const text = hover.join('_');
|
||||||
|
copy(text);
|
||||||
|
store.dispatch(notify('Copied!'));
|
||||||
|
break;
|
||||||
|
}
|
||||||
default:
|
default:
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
37
src/utils/clipboard.js
Normal file
37
src/utils/clipboard.js
Normal file
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user