Added copy code options and invide links

F1nnM · Apr 4, 2021 · 6cc7468 · 6cc7468
1 parent 5dee6d6
commit 6cc7468
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -32,7 +32,7 @@
 
 input {
   background-color: transparent;
-  color: var(--text);
+  color: inherit;
   border: none;
   border-bottom: 2px solid var(--background);
   outline: none;
@@ -44,7 +44,7 @@ input:focus {
 
 button {
   background-color: var(--background-secondary);
-  color: var(--text);
+  color: inherit;
   border: 2px solid var(--background);
   font-size: inherit;
 }

diff --git a/frontend/src/components/Card.css b/frontend/src/components/Card.css
@@ -83,4 +83,13 @@ span {
 }
 .raised:hover {
     transform: scale(1.1) translateY(-30px) !important;
+}
+.children input {
+    font-size: smaller !important;
+    width: 100%;
+}
+.children button {
+    font-size: smaller !important;
+    width: 100%;
+    color: var(--text);
 }
diff --git a/frontend/src/components/Card.js b/frontend/src/components/Card.js
@@ -11,7 +11,7 @@ export class Card extends React.Component {
           {this.props.text && this.props.trust && <span dangerouslySetInnerHTML={{__html: text}}></span>}
           {this.props.text && (this.props.trust || <span>{text}</span>)}
           {this.props.children && (
-            <div style={this.props.style}>
+            <div className="children" style={this.props.style}>
               {this.props.children}
             </div>
           )}

diff --git a/frontend/src/components/Game.js b/frontend/src/components/Game.js
@@ -142,9 +142,14 @@ class Game extends React.Component {
       return <div></div>
     let player = this.state.game.players[this.props.room.sessionId];
 
-    let blackcardText = this.state.game.winner? 'And the winner is [[BLANK]]' : this.state.game.blackCard.content || "Invite players with the code: " + this.state.roomId
-
-    let blackcard = { content: blackcardText, mark: this.state.game.blackCard.mark}
+    let blackcardText = this.state.game.winner? 'And the winner is [[BLANK]]' : this.state.game.blackCard.content || "Invite players with the code: "
+    let blackcardChildren = (
+    <div>
+      <input value={this.state.roomId} />
+      <button onClick={() => {navigator.clipboard.writeText(this.state.roomId)}}>Copy Code</button>
+      <button onClick={() => {navigator.clipboard.writeText(window.location.origin+"/#/game?"+this.state.roomId)}}>Copy Link</button>
+    </div>);
+    let blackcard = { content: blackcardText, children: blackcardChildren, mark: this.state.game.blackCard.mark}
 
     let playedCards = this.state.game.winner ? [{cards: [{content: this.state.game.players[this.state.game.winner].name, mark: "WIN"}], chosenByCzar: true}] : this.state.game.cardsPlayed