From b34335cefc96ad9427b3f5c6e35f9aff2e42296a Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Sat, 14 Oct 2023 11:59:05 +0200
Subject: [PATCH] front: show action button only for onHover elemnt

---
 webapp/src/GameProposal.css      |  8 ++++++++
 webapp/src/GameProposal.js       |  6 ++++++
 webapp/src/GameProposalAction.js | 19 +++++++++++++++++++
 3 files changed, 33 insertions(+)
 create mode 100644 webapp/src/GameProposalAction.js

diff --git a/webapp/src/GameProposal.css b/webapp/src/GameProposal.css
index 76a3055..87e0716 100644
--- a/webapp/src/GameProposal.css
+++ b/webapp/src/GameProposal.css
@@ -19,6 +19,14 @@
     color: gray;
 }
 
+.GameProposal .li button.action {
+    display: none;
+}
+
+.GameProposal .li:hover button.action {
+    display: initial;
+}
+
 .separator {
     width: 20%; 
     /* height: 20px;  */
diff --git a/webapp/src/GameProposal.js b/webapp/src/GameProposal.js
index 0c1bf40..0cf7338 100644
--- a/webapp/src/GameProposal.js
+++ b/webapp/src/GameProposal.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import {Accept, Reject, Cancel} from './GameProposalAction';
 import './GameProposal.css';
 
 const State = {
@@ -22,6 +23,9 @@ const GameProposal = ({games}) => {
           from {game.opponentName}, opponentColor {game.opponentColor}
           <br/>
           <q>{game.message}</q>
+          <br/>
+          <Accept uuid={game.uuid}/>
+          <Reject uuid={game.uuid}/>
         </p>
         </div>
     });
@@ -34,6 +38,8 @@ const GameProposal = ({games}) => {
           to {game.opponentName}, opponentColor ⛀ ⛂{game.opponentColor}
           <br/>
           <q>{game.message}</q>
+          <br/>
+          <Cancel uuid={game.uuid}/>
         </p>
         </div>
     });
diff --git a/webapp/src/GameProposalAction.js b/webapp/src/GameProposalAction.js
new file mode 100644
index 0000000..0fdd4df
--- /dev/null
+++ b/webapp/src/GameProposalAction.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export function Accept({uuid}) {
+    return <button className="action" id={uuid} type="submit">
+        Accept
+        </button>
+}
+
+export function Reject({uuid}) {
+    return <button className="action" id={uuid} type="submit">
+        Reject
+        </button>
+}
+
+export function Cancel({uuid}) {
+    return <button className="action" id={uuid} type="submit">
+        Cancel
+        </button>
+}