Merge pull request #41 from codergautam/bottomad

Bottomad

Author: codergautam

components/chatBox.js

@@ -107,7 +107,7 @@ const MessageParser = ({ children, actions }) => {
   );
 };
 
-export default function ChatBox({ ws, open, onToggle, enabled, myId, inGame }) {
+export default function ChatBox({ ws, open, onToggle, enabled, myId, inGame, miniMapShown }) {
   const { t: text } = useTranslation("common");
   const [unreadCount, setUnreadCount] = useState(0);
 
@@ -134,7 +134,7 @@ export default function ChatBox({ ws, open, onToggle, enabled, myId, inGame }) {
 
   return (
     <div className={`chatboxParent ${enabled ? 'enabled' : ''}`}>
-      <button style={{ fontSize: '16px', fontWeight: 'bold', color: 'white', background: 'green', border: 'none', borderRadius: '5px', padding: '10px 20px', cursor: 'pointer' }} onClick={onToggle}>
+      <button className={`chatboxBtn ${open ? 'open' : ''} ${miniMapShown ? 'minimap' : ''}`} style={{ fontSize: '16px', fontWeight: 'bold', color: 'white', background: 'green', border: 'none', borderRadius: '5px', padding: '10px 20px', cursor: 'pointer' }} onClick={onToggle}>
         {open ? <FaXmark onClick={onToggle} /> : `${text("chat")}${unreadCount > 0 ? ` (${unreadCount})` : ''}`}
       </button>
       <div className={`chatbox ${open ? 'open' : ''}`}>

components/gameUI.js

@@ -23,7 +23,7 @@ import RoundOverScreen from "./roundOverScreen";
 
 const MapWidget = dynamic(() => import("../components/Map"), { ssr: false });
 
-export default function GameUI({ singlePlayerRound, setSinglePlayerRound, showDiscordModal, setShowDiscordModal, inCrazyGames, showPanoOnResult, setShowPanoOnResult, countryGuesserCorrect, setCountryGuesserCorrect, otherOptions, onboarding, setOnboarding, countryGuesser, options, timeOffset, ws, multiplayerState, backBtnPressed, setMultiplayerState, countryStreak, setCountryStreak, loading, setLoading, session, gameOptionsModalShown, setGameOptionsModalShown, latLong, streetViewShown, setStreetViewShown, loadLocation, gameOptions, setGameOptions, showAnswer, setShowAnswer, pinPoint, setPinPoint, hintShown, setHintShown, xpEarned, setXpEarned, showCountryButtons, setShowCountryButtons }) {
+export default function GameUI({ miniMapShown, setMiniMapShown, singlePlayerRound, setSinglePlayerRound, showDiscordModal, setShowDiscordModal, inCrazyGames, showPanoOnResult, setShowPanoOnResult, countryGuesserCorrect, setCountryGuesserCorrect, otherOptions, onboarding, setOnboarding, countryGuesser, options, timeOffset, ws, multiplayerState, backBtnPressed, setMultiplayerState, countryStreak, setCountryStreak, loading, setLoading, session, gameOptionsModalShown, setGameOptionsModalShown, latLong, streetViewShown, setStreetViewShown, loadLocation, gameOptions, setGameOptions, showAnswer, setShowAnswer, pinPoint, setPinPoint, hintShown, setHintShown, xpEarned, setXpEarned, showCountryButtons, setShowCountryButtons }) {
   const { t: text } = useTranslation("common");
   const [showStreakAdBanner, setShowStreakAdBanner] = useState(false);
 
@@ -125,8 +125,6 @@ export default function GameUI({ singlePlayerRound, setSinglePlayerRound, showDi
   if(window.matchMedia("(pointer: coarse)").matches) {
     isTouchScreen = true;
   }
-
-  const [miniMapShown, setMiniMapShown] = useState(false)
   const [miniMapExpanded, setMiniMapExpanded] = useState(false)
   const [miniMapFullscreen, setMiniMapFullscreen] = useState(false)
   const [roundStartTime, setRoundStartTime] = useState(null);

components/home.js

@@ -101,6 +101,7 @@ export default function Home({ }) {
   const [options, setOptions] = useState({
   });
   const [multiplayerError, setMultiplayerError] = useState(null);
+  const [miniMapShown, setMiniMapShown] = useState(false)
 
   let login = null;
   if(process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID) {
@@ -1584,7 +1585,9 @@ setShowCountryButtons(false)
     }
   }
 
-  const ChatboxMemo = React.useMemo(() => <ChatBox ws={ws} open={multiplayerChatOpen} onToggle={() => setMultiplayerChatOpen(!multiplayerChatOpen)} enabled={multiplayerChatEnabled} myId={multiplayerState?.gameData?.myId} inGame={multiplayerState?.inGame} />, [multiplayerChatOpen, multiplayerChatEnabled, ws, multiplayerState?.gameData?.myId, multiplayerState?.inGame])
+  const ChatboxMemo = React.useMemo(() => <ChatBox miniMapShown={miniMapShown} ws={ws} open={multiplayerChatOpen} onToggle={() => setMultiplayerChatOpen(!multiplayerChatOpen)} enabled={
+    multiplayerChatEnabled
+  } myId={multiplayerState?.gameData?.myId} inGame={multiplayerState?.inGame} />, [multiplayerChatOpen, multiplayerChatEnabled, ws, multiplayerState?.gameData?.myId, multiplayerState?.inGame, miniMapShown])
 
   // Send pong every 10 seconds if websocket is connected
   useEffect(() => {
@@ -1931,11 +1934,15 @@ setShowCountryButtons(false)
         } sendInvite={sendInvite} />
 
         {screen === "singleplayer" && <div className="home__singleplayer">
-          <GameUI singlePlayerRound={singlePlayerRound} setSinglePlayerRound={setSinglePlayerRound} showDiscordModal={showDiscordModal}  setShowDiscordModal={setShowDiscordModal} inCrazyGames={inCrazyGames} showPanoOnResult={showPanoOnResult} setShowPanoOnResult={setShowPanoOnResult} options={options} countryStreak={countryStreak} setCountryStreak={setCountryStreak} xpEarned={xpEarned} setXpEarned={setXpEarned} hintShown={hintShown} setHintShown={setHintShown} pinPoint={pinPoint} setPinPoint={setPinPoint} showAnswer={showAnswer} setShowAnswer={setShowAnswer} loading={loading} setLoading={setLoading} session={session} gameOptionsModalShown={gameOptionsModalShown} setGameOptionsModalShown={setGameOptionsModalShown} latLong={latLong} streetViewShown={streetViewShown} setStreetViewShown={setStreetViewShown} loadLocation={loadLocation} gameOptions={gameOptions} setGameOptions={setGameOptions} />
+          <GameUI
+          miniMapShown={miniMapShown} setMiniMapShown={setMiniMapShown}
+            singlePlayerRound={singlePlayerRound} setSinglePlayerRound={setSinglePlayerRound} showDiscordModal={showDiscordModal}  setShowDiscordModal={setShowDiscordModal} inCrazyGames={inCrazyGames} showPanoOnResult={showPanoOnResult} setShowPanoOnResult={setShowPanoOnResult} options={options} countryStreak={countryStreak} setCountryStreak={setCountryStreak} xpEarned={xpEarned} setXpEarned={setXpEarned} hintShown={hintShown} setHintShown={setHintShown} pinPoint={pinPoint} setPinPoint={setPinPoint} showAnswer={showAnswer} setShowAnswer={setShowAnswer} loading={loading} setLoading={setLoading} session={session} gameOptionsModalShown={gameOptionsModalShown} setGameOptionsModalShown={setGameOptionsModalShown} latLong={latLong} streetViewShown={streetViewShown} setStreetViewShown={setStreetViewShown} loadLocation={loadLocation} gameOptions={gameOptions} setGameOptions={setGameOptions} />
         </div>}
 
         {screen === "onboarding" && onboarding?.round && <div className="home__onboarding">
-          <GameUI inCrazyGames={inCrazyGames} showPanoOnResult={showPanoOnResult} setShowPanoOnResult={setShowPanoOnResult} countryGuesserCorrect={countryGuesserCorrect} setCountryGuesserCorrect={setCountryGuesserCorrect} showCountryButtons={showCountryButtons} setShowCountryButtons={setShowCountryButtons} otherOptions={otherOptions} onboarding={onboarding} countryGuesser={false} setOnboarding={setOnboarding} options={options} countryStreak={countryStreak} setCountryStreak={setCountryStreak} xpEarned={xpEarned} setXpEarned={setXpEarned} hintShown={hintShown} setHintShown={setHintShown} pinPoint={pinPoint} setPinPoint={setPinPoint} showAnswer={showAnswer} setShowAnswer={setShowAnswer} loading={loading} setLoading={setLoading} session={session} gameOptionsModalShown={gameOptionsModalShown} setGameOptionsModalShown={setGameOptionsModalShown} latLong={latLong} streetViewShown={streetViewShown} setStreetViewShown={setStreetViewShown} loadLocation={loadLocation} gameOptions={gameOptions} setGameOptions={setGameOptions} />
+          <GameUI
+          miniMapShown={miniMapShown} setMiniMapShown={setMiniMapShown}
+            inCrazyGames={inCrazyGames} showPanoOnResult={showPanoOnResult} setShowPanoOnResult={setShowPanoOnResult} countryGuesserCorrect={countryGuesserCorrect} setCountryGuesserCorrect={setCountryGuesserCorrect} showCountryButtons={showCountryButtons} setShowCountryButtons={setShowCountryButtons} otherOptions={otherOptions} onboarding={onboarding} countryGuesser={false} setOnboarding={setOnboarding} options={options} countryStreak={countryStreak} setCountryStreak={setCountryStreak} xpEarned={xpEarned} setXpEarned={setXpEarned} hintShown={hintShown} setHintShown={setHintShown} pinPoint={pinPoint} setPinPoint={setPinPoint} showAnswer={showAnswer} setShowAnswer={setShowAnswer} loading={loading} setLoading={setLoading} session={session} gameOptionsModalShown={gameOptionsModalShown} setGameOptionsModalShown={setGameOptionsModalShown} latLong={latLong} streetViewShown={streetViewShown} setStreetViewShown={setStreetViewShown} loadLocation={loadLocation} gameOptions={gameOptions} setGameOptions={setGameOptions} />
           </div>}
 
           {screen === "onboarding" && onboarding?.completed && <div className="home__onboarding">
@@ -1976,7 +1983,9 @@ setShowCountryButtons(false)
         </div>}
 
         {multiplayerState.inGame && ["guess", "getready", "end"].includes(multiplayerState.gameData?.state) && (
-          <GameUI inCrazyGames={inCrazyGames} showPanoOnResult={showPanoOnResult} setShowPanoOnResult={setShowPanoOnResult} options={options} timeOffset={timeOffset} ws={ws} backBtnPressed={backBtnPressed} multiplayerChatOpen={multiplayerChatOpen} setMultiplayerChatOpen={setMultiplayerChatOpen} multiplayerState={multiplayerState} xpEarned={xpEarned} setXpEarned={setXpEarned} pinPoint={pinPoint} setPinPoint={setPinPoint} loading={loading} setLoading={setLoading} session={session} streetViewShown={streetViewShown} setStreetViewShown={setStreetViewShown} latLong={latLong} loadLocation={() => { }} gameOptions={{ location: "all", maxDist: 20000, extent: gameOptions?.extent ?? multiplayerState?.gameData?.extent }} setGameOptions={() => { }} showAnswer={(multiplayerState?.gameData?.curRound !== 1) && multiplayerState?.gameData?.state === 'getready'} setShowAnswer={guessMultiplayer} />
+          <GameUI
+          miniMapShown={miniMapShown} setMiniMapShown={setMiniMapShown}
+          inCrazyGames={inCrazyGames} showPanoOnResult={showPanoOnResult} setShowPanoOnResult={setShowPanoOnResult} options={options} timeOffset={timeOffset} ws={ws} backBtnPressed={backBtnPressed} multiplayerChatOpen={multiplayerChatOpen} setMultiplayerChatOpen={setMultiplayerChatOpen} multiplayerState={multiplayerState} xpEarned={xpEarned} setXpEarned={setXpEarned} pinPoint={pinPoint} setPinPoint={setPinPoint} loading={loading} setLoading={setLoading} session={session} streetViewShown={streetViewShown} setStreetViewShown={setStreetViewShown} latLong={latLong} loadLocation={() => { }} gameOptions={{ location: "all", maxDist: 20000, extent: gameOptions?.extent ?? multiplayerState?.gameData?.extent }} setGameOptions={() => { }} showAnswer={(multiplayerState?.gameData?.curRound !== 1) && multiplayerState?.gameData?.state === 'getready'} setShowAnswer={guessMultiplayer} />
         )}
 
 

styles/globals.scss

@@ -607,15 +607,33 @@ h1, h2, h3, span {
   flex-flow: column;
 
 
-  bottom: 40px;
+  bottom: 10px;
   margin-top: auto;
   margin-left: auto;
-  margin-right: 100px;
+  margin-right: 5px;
+  z-index: 1000;
 
   transform: translateY(105%);
   opacity: 0;
 }
 
+.gm-bundled-control-on-bottom {
+ right: auto !important;
+ left: 0 !important;
+ bottom: calc(161px + 50px) !important;
+}
+.gm-style-cc {
+  display: none;
+}
+// less than 460px
+// @media screen and (max-width: 460px) {
+//   .gm-bundled-control-on-bottom {
+//     bottom: calc(161px + 100px) !important;
+//   }
+
+
+// }
+
 
 
 #miniMapArea.shown {
@@ -663,6 +681,11 @@ screen and (pointer:coarse) {
     transform: translateY(0%);
     margin-right: 0;
     width: 100%;
+
+
+  }
+  #miniMapArea.miniMap.shown .chatboxBtn {
+    transform: translate(0, 0) !important;
   }
   // #miniMapArea.answerShown {
   //   transform: none;
@@ -678,8 +701,6 @@ screen and (pointer:coarse) {
   display: flex;
   justify-content: space-around;
   align-items: center;
-  gap: 10px;
-  margin-top: 10px;
 
 }
 
@@ -691,7 +712,7 @@ screen and (pointer:coarse) {
   font-size: 1.5em;
   cursor: pointer;
   transition: background-color 0.3s;
-  border-radius: 15px;
+  border-radius: 5px;
   // box-shadow: 10px 3px 4px 0px rgb(0 0 0 / 35%);
   // background-image: radial-gradient(150% 160% at 50% 15%,hsla(0,0%,100%,.6) 0,transparent 30%);
 }
@@ -712,10 +733,12 @@ screen and (pointer:coarse) {
     margin-top: 10px;
     position: absolute;
     border-radius: 10px;
-    right: 65px;
+    right: 15px;
     bottom: 30px;
     animation: fadeIn 1s ease-in-out forwards;
   }
+
+
   .mobile_minimap__btns.miniMapShown {
     bottom: calc(70% + 5px);
     width: 100%;
@@ -725,6 +748,34 @@ screen and (pointer:coarse) {
     width: 20%;
   }
 }
+// @media screen and (max-width: 460px) {
+//   .mobile_minimap__btns {
+//     bottom: calc(20px + 50px);
+//   }
+
+// }
+
+.chatboxBtn {
+  transform: translate(60px, 5px);
+}
+@media screen and (max-width: 600px), screen and (pointer:coarse) {
+  .chatboxBtn.minimap {
+    transform: translate(5px, 0px);
+  }
+
+}
+
+// @media screen and (max-width: 580px) {
+//   .chatboxBtn {
+//     transform: translate(60px, -45px);
+//   }
+
+// }
+.chatboxBtn.open {
+  transform: translate(0, 0);
+}
+
+
 
 .answerShownBtns {
   display: none;
@@ -896,6 +947,7 @@ screen and (pointer:coarse) {
   left: 50%;
   padding: 20px;
   margin-bottom: 10px;
+  z-index: 1001;
   pointer-events: all;
 }
 
@@ -912,6 +964,7 @@ screen and (pointer:coarse) {
   justify-content: center;
   align-items: center;
   gap: 10px;
+  z-index: 1001;
 }
 
 @media screen and (max-width: 600px) {
@@ -1045,7 +1098,6 @@ screen and (pointer:coarse) {
 .chatboxParent {
   position: fixed;
   bottom: 20px;
-  left: 10px;
   opacity: 0;
   transition: all 0.5s;
   border-radius: 10px;
@@ -1096,14 +1148,22 @@ screen and (pointer:coarse) {
 .react-chatbot-kit-chat-bot-message {
   margin-left: 0 !important;
 }
+@media screen and (max-height: 6000px) {
 
+  .react-chatbot-kit-chat-message-container {
+    height: 448px !important;
+  }
+  .react-chatbot-kit-chat-inner-container {
+    height: 496px !important;
+  }
+}
 @media screen and (max-height: 600px) {
 
   .react-chatbot-kit-chat-message-container {
     height: 244px !important;
   }
   .react-chatbot-kit-chat-inner-container {
-    height: 300px !important;
+    height: 292px !important;
   }
 }
 
@@ -1203,6 +1263,16 @@ screen and (pointer:coarse)  {
   -o-filter: invert(100%);
   -ms-filter: invert(100%);
 }
+.gm-control-active[title="Zoom in"],
+.gm-control-active[title="Zoom out"] {
+  -webkit-filter: invert(100%);
+  -moz-filter: invert(100%);
+  -o-filter: invert(100%);
+  -ms-filter: invert(100%);
+}
+.gm-compass {
+  transform: translateY(350%);
+}
 #playerCnt{
 }
 img[alt="Google"] {
@@ -2097,6 +2167,13 @@ div[style*="background-color: white; font-weight: 500; font-family: Roboto, sans
   }
 
 }
+// .topAdFixed {
+//     position: fixed;
+//   bottom: 5px;
+//   z-index: 100;
+//   left: 50%;
+//   transform: translateX(-50%);
+// }
 div[dir="ltr"] {
   // invert the colors
   filter: invert(1);