From 5e33e6439e35a75e3b337c9c756d5b925f5db58c Mon Sep 17 00:00:00 2001
From: sorrelbri <sorrel.bri.june@gmail.com>
Date: Fri, 26 Jun 2020 13:15:07 -0700
Subject: [PATCH] add print game record option to menu, prints only canvas
 elements

---
 .../src/components/GameUI/Menu/Menu.js        | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/play-node-go/src/components/GameUI/Menu/Menu.js b/packages/play-node-go/src/components/GameUI/Menu/Menu.js
index ca9fadc..fc8f3a3 100644
--- a/packages/play-node-go/src/components/GameUI/Menu/Menu.js
+++ b/packages/play-node-go/src/components/GameUI/Menu/Menu.js
@@ -18,6 +18,22 @@ const Menu = ({ showMenu, clickClose, ...props }) => {
     );
   };
 
+  const clickPrint = () => {
+    const iframe = document.createElement("iframe");
+    const body = document.getElementsByTagName("body")[0];
+    const record = document.getElementById("record");
+    body.appendChild(iframe);
+    // move game record to iframe and print iframe
+    iframe.contentDocument.body.appendChild(canvasRef.current);
+    iframe.contentDocument.body.appendChild(overflowRef.current);
+    iframe.contentWindow.print();
+    // move game record back to menu and remove iframe
+    record.appendChild(canvasRef.current);
+    record.appendChild(overflowRef.current);
+    body.removeChild(iframe);
+  };
+
+  // draw canvases
   useEffect(() => {
     const canvas = canvasRef.current;
     const ctx = canvas.getContext("2d");
@@ -166,7 +182,8 @@ const Menu = ({ showMenu, clickClose, ...props }) => {
     >
       <div className="Game__Menu-container__Menu">
         <button onClick={clickClose}>X</button>
-        <div className="Game__Menu__game-record-container">
+        <button onClick={clickPrint}>Print Record</button>
+        <div id="record" className="Game__Menu__game-record-container">
           {drawGameRecord()}
         </div>
       </div>