add save team to image

picklejason · Dec 20, 2022 · 73e8f9b · 73e8f9b
1 parent 2382774
commit 73e8f9b
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 20 deletions.
diff --git a/public/styles/index.css b/public/styles/index.css
@@ -77,7 +77,7 @@ input[type="text"] {
   display: block;
 }
 
-input[type="submit"] { 
+input[type="submit"], #save { 
   font: 900 2em "Pokemon";
   background: none;
   border: none;
@@ -86,7 +86,7 @@ input[type="submit"] {
   letter-spacing: 0.05rem;
 }
 
-.container {
+.container, #save {
   position: fixed;
   width: 100%;
   bottom: 0;
@@ -153,16 +153,19 @@ input[type="submit"] {
   font-weight: bold;
 }
 
-.team {
-  display: flex;
+.team-container {
   position: fixed;
-  top: 45%;
+  top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   max-width: 1920px;
 }
 
+.team {
+  display: flex;
+}
+
 .team img {
   width: 100%; 
 }

diff --git a/views/team.ejs b/views/team.ejs
@@ -5,6 +5,8 @@
     <title><%- name %>'s Team</title>
     <link href="../styles/index.css" rel="stylesheet" type="text/css" />
     <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
+    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
   </head>
   <body>
     <div class="link-container">
@@ -15,21 +17,37 @@
       </h2>
       <h2><a class="select-text home" href="/">Home</a></h2>
     </div>
-    <h1><%- name %>'s Team</h1>
-    <div class="team">
-      <% pokemons.forEach((pokemon, index) => { %>
-      <a class="select-text" href="../pokemon/<%= pokemon %>">
-        <img
-          src="<%= sprites[index] %>"
-          alt="<%= pokemon %>"
-          class="select-image"
-        />
-        <br />
-        <span>
-          <b><%= pokemon.charAt(0).toUpperCase() + pokemon.slice(1) %></b>
-        </span>
-      </a>
-      <% }); %>
+    <div class="team-container">
+      <h1><%- name %>'s Team</h1>
+      <div class="team">
+        <% pokemons.forEach((pokemon, index) => { %>
+        <a class="select-text" href="../pokemon/<%= pokemon %>">
+          <img
+            src="<%= sprites[index] %>"
+            alt="<%= pokemon %>"
+            class="select-image"
+          />
+          <br />
+          <span>
+            <b><%= pokemon.charAt(0).toUpperCase() + pokemon.slice(1) %></b>
+          </span>
+        </a>
+        <% }); %>
+      </div>
+      <br />
     </div>
+    <button class="select-text" id="save" onclick="saveTeam()">Save</button>
+    <script>
+      function saveTeam() {
+        html2canvas(document.querySelector(".team-container"), {
+          useCORS: true,
+          backgroundColor: null,
+        }).then((canvas) => {
+          canvas.toBlob(function (blob) {
+            window.saveAs(blob, "my_team.png");
+          });
+        });
+      }
+    </script>
   </body>
 </html>