NFT selected

BowTiedDeployer · Nov 29, 2022 · fd2b56e · fd2b56e
1 parent fefbfad
commit fd2b56e
Show file tree

Hide file tree

Showing 5 changed files with 371 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -21,6 +21,5 @@
 
 ## Current State
 
-- States to know when to update the data
-- Waiting for results
-- Rendering based on the state
+- Static component class for styling the NFTs
+- Dynamic component class to highlight the selected
diff --git a/react-cra/src/App.js b/react-cra/src/App.js
@@ -3,6 +3,7 @@ import './App.css';
 import ConnectWallet from './components/ConnectWallet';
 import ContractCallVote from './components/ContractCallVote';
 import React from 'react';
+import './styles/globals.css';
 
 function App() {
   return (

diff --git a/react-cra/src/components/MainMenu.js b/react-cra/src/components/MainMenu.js
@@ -4,6 +4,7 @@ import { userSession } from './ConnectWallet';
 export const MainMenu = () => {
   const [NFTsOwned, setNFTsOwned] = useState([]);
   const [hasRespondedNFTs, setHasRespondedNFTs] = useState(false);
+  const [selectedNFT, setSelectedNFT] = useState('');
 
   function disconnect() {
     userSession.signUserOut('/');
@@ -45,6 +46,17 @@ export const MainMenu = () => {
     setInterval(() => {}, 30000);
   }, [fetchNFTsOwned]);
 
+  const changeSelection = (nftId, localSelectedNFT) => {
+    document.getElementById(`nft${localSelectedNFT}`)?.classList.remove('card-selected');
+    document.getElementById(`nft${nftId}`)?.classList.add('card-selected');
+  };
+
+  const handleClickNFT = (id) => {
+    changeSelection(id, selectedNFT);
+    setSelectedNFT(id);
+    alert(`sleected NFT: ${id}`);
+  };
+
   return (
     <div>
       <header className="App-header">
@@ -57,11 +69,13 @@ export const MainMenu = () => {
           <div>
             <h2>Pick your NFT!</h2>
             {NFTsOwned.map((nftId) => (
-              <span id={`nft${nftId}`} key={nftId}>
+              <span id={`nft${nftId}`} key={nftId} className="characterContainer">
                 <img
+                  className="characterImg"
                   src={`https://stacksgamefi.mypinata.cloud/ipfs/QmS57rKdQB7ioMsg5PNUdyzzQnZpfzPZF5G63E1xkGci4w/${nftId}.png`}
                   alt={`duck ${nftId}`}
                   width="100"
+                  onClick={() => handleClickNFT(nftId)}
                 ></img>
               </span>
             ))}

diff --git a/react-cra/src/index.css b/react-cra/src/index.css
@@ -1,15 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
 button.Connect,
@@ -39,3 +37,217 @@ button.Vote {
   padding: 8px 12px;
   margin: 4px;
 }
+
+#offline-resources {
+  display: none;
+}
+
+/* Copyright 2013 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.icon {
+  -webkit-user-select: none;
+  user-select: none;
+  display: inline-block;
+}
+
+.hidden {
+  display: none;
+}
+
+/* Offline page */
+.offline {
+  transition: filter 1.5s cubic-bezier(0.65, 0.05, 0.36, 1), background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+
+.offline body {
+  transition: background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+.offline.inverted {
+  background-color: #000;
+  filter: invert(1);
+}
+
+.offline.inverted body {
+  background-color: #fff;
+}
+
+.offline .interstitial-wrapper {
+  color: #2b2b2b;
+  font-size: 0.8em;
+  line-height: 1.55;
+  margin: 0 auto;
+  max-width: 600px;
+  padding-top: 150px;
+  width: 100%;
+}
+
+.offline .runner-container {
+  direction: ltr;
+  height: 150px;
+  max-width: 600px;
+  overflow: hidden;
+  position: absolute;
+  top: 35px;
+  width: 44px;
+}
+
+.offline .runner-canvas {
+  height: 150px;
+  max-width: 600px;
+  opacity: 1;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 10;
+}
+
+.offline .controller {
+  background: rgba(247, 247, 247, 0.1);
+  height: 100vh;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100vw;
+  z-index: 1;
+}
+
+#offline-resources {
+  display: none;
+}
+
+.arcade-mode,
+.arcade-mode .runner-container,
+.arcade-mode .runner-canvas {
+  image-rendering: -moz-crisp-edges;
+  image-rendering: -webkit-crisp-edges;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.arcade-mode #buttons,
+.arcade-mode #main-content {
+  opacity: 0;
+  overflow: hidden;
+}
+
+.arcade-mode .interstitial-wrapper {
+  height: 100vh;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.arcade-mode .runner-container {
+  image-rendering: -moz-crisp-edges;
+  image-rendering: -webkit-crisp-edges;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+  left: 0;
+  margin: auto;
+  right: 0;
+  transform-origin: top center;
+  transition: transform 250ms cubic-bezier(0.4, 0, 1, 1) 400ms;
+  z-index: 2;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+
+  .offline .runner-canvas {
+    filter: invert(1);
+  }
+
+  .offline.inverted {
+    background-color: #fff;
+    filter: invert(1);
+  }
+
+  .offline.inverted body {
+    background-color: #fff;
+  }
+
+  h1 {
+    filter: invert(1);
+  }
+}
+
+@media (max-width: 420px) {
+  .suggested-left > #control-buttons,
+  .suggested-right > #control-buttons {
+    float: none;
+  }
+  .snackbar {
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    border-radius: 0;
+  }
+}
+
+@media (max-height: 350px) {
+  h1 {
+    margin: 0 0 15px;
+  }
+  .icon-offline {
+    margin: 0 0 10px;
+  }
+  .interstitial-wrapper {
+    margin-top: 5%;
+  }
+  .nav-wrapper {
+    margin-top: 30px;
+  }
+}
+
+@media (min-width: 600px) and (max-width: 736px) and (orientation: landscape) {
+  .offline .interstitial-wrapper {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 420px) and (max-width: 736px) and (min-height: 240px) and (max-height: 420px) and (orientation: landscape) {
+  .interstitial-wrapper {
+    margin-bottom: 100px;
+  }
+}
+
+@media (min-height: 240px) and (orientation: landscape) {
+  .offline .interstitial-wrapper {
+    margin-bottom: 90px;
+  }
+  .icon-offline {
+    margin-bottom: 20px;
+  }
+}
+
+@media (max-height: 320px) and (orientation: landscape) {
+  .icon-offline {
+    margin-bottom: 0;
+  }
+  .offline .runner-container {
+    top: 10px;
+  }
+}
+
+@media (max-width: 240px) {
+  .interstitial-wrapper {
+    overflow: inherit;
+    padding: 0 8px;
+  }
+}