The way we are styling <h2> right now makes it far too wasteful of
vertical screen real estate. Instead, use the same font size/weight
but inline with the sentence.
Also, this button for copying the game URL should be handy,
particularly on phones, etc.
* Game and supporting classes *
*********************************************************/
* 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">
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>
return (
<div className="player-info">
return (
<div className="player-info">
+ <span className="players-header">Players: </span>
{props.player.name}
{props.player.team ? ` (${props.player.team})` : ""}
{props.first_move ? "" : " "}
{props.player.name}
{props.player.team ? ` (${props.player.team})` : ""}
{props.first_move ? "" : " "}
.hide-button:hover {
color: var(--danger-color-dark);
}
.hide-button:hover {
color: var(--danger-color-dark);
}
+
+/*\
+|*|
+|*| Game-specific markup
+|*|
+\*/
+
+.game-id, .players-header {
+ font-size: 110%;
+ font-weight: bold;
+}