Skip to content

Commit

Permalink
Merge pull request #41 from codergautam/bottomad
Browse files Browse the repository at this point in the history
Bottomad
codergautam authored Oct 28, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents 7723149 + 8caeaec commit 549e085
Showing 4 changed files with 101 additions and 17 deletions.
4 changes: 2 additions & 2 deletions components/chatBox.js
Original file line number Diff line number Diff line change
@@ -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' : ''}`}>
4 changes: 1 addition & 3 deletions components/gameUI.js
Original file line number Diff line number Diff line change
@@ -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);
17 changes: 13 additions & 4 deletions components/home.js
Original file line number Diff line number Diff line change
@@ -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} />
)}


93 changes: 85 additions & 8 deletions styles/globals.scss
Original file line number Diff line number Diff line change
@@ -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);

0 comments on commit 549e085

Please sign in to comment.