oxaliq/node-go
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add print game record option to menu, prints only canvas elements

Browse source
This commit is contained in:
sorrelbri 2020-06-26 13:15:07 -07:00
parent ea951bee66
commit 5e33e6439e
1 changed files with 18 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/play-node-go/src/components/GameUI/Menu/Menu.js
View file

@ -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>