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