* Game and supporting classes *
*********************************************************/
+function copy_to_clipboard(id)
+{
+ const tmp = document.createElement("input");
+ tmp.setAttribute("value", document.getElementById(id).innerHTML);
+ document.body.appendChild(tmp);
+ tmp.select();
+ document.execCommand("copy");
+ document.body.removeChild(tmp);
+}
+
function GameInfo(props) {
if (! props.id)
return null;
return (
<div className="game-info">
- <h2>{props.id}</h2>
- Invite a friend to play by sending this URL: {props.url}
+ <span className="game-id">{props.id}</span>
+ {" "}
+ Share this link to invite a friend:{" "}
+ <span id="game-share-url">{props.url}</span>
+ {" "}
+ <button
+ className="inline"
+ onClick={() => copy_to_clipboard('game-share-url')}
+ >Copy Link</button>
</div>
);
}
return (
<div className="player-info">
- <h2>Players</h2>
+ <span className="players-header">Players: </span>
{props.player.name}
{props.player.team ? ` (${props.player.team})` : ""}
{props.first_move ? "" : " "}
.hide-button:hover {
color: var(--danger-color-dark);
}
+
+/*\
+|*|
+|*| Game-specific markup
+|*|
+\*/
+
+.game-id, .players-header {
+ font-size: 110%;
+ font-weight: bold;
+}