Merge pull request #23 from codergautam/adtest

Adinplay banner ad integration

client/public/index.html

@@ -10,6 +10,23 @@
 
   gtag('config', 'G-35EKK5X5R4');
 </script>
+  <!-- AdinPlay Ads -->
+  <script>
+    var aiptag = aiptag || {};
+    aiptag.cmd = aiptag.cmd || [];
+    aiptag.cmd.display = aiptag.cmd.display || [];
+    aiptag.cmd.player = aiptag.cmd.player || [];
+
+    //CMP tool settings
+    aiptag.cmp = {
+      show: true,
+      position: "centered",  //centered or bottom
+      button: true,
+      buttonText: "Privacy settings",
+      buttonPosition: "bottom-left" //bottom-left, bottom-right, top-left, top-right
+    }
+  </script>
+  <script src="//api.adinplay.com/libs/aiptag/pub/SWT/swordbattle.io/tag.min.js"></script>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />

client/src/ui/Ad.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react"
+import { config } from "../config";
+
+const debug = config.isDev;
+function findAdType(screenW: number, screenH: number, types: [number, number][], horizThresh: number): number {
+  let type = 0;
+  for (let i = 0; i < types.length; i++) {
+    if (types[i][0] <= screenW*0.9 && types[i][1] <= screenH * horizThresh) {
+      type = i;
+    }
+  }
+
+  if(types[type][0] > screenW || types[type][1] > screenH*horizThresh) return -1;
+
+  return type;
+}
+
+export default function Ad({ screenW, screenH, types, centerOnOverflow, horizThresh = 0.3}: { screenW: number, screenH: number, types: [number, number][]; centerOnOverflow?: number; horizThresh?: number }) {
+  // just a div for now with optimal ad size, null if none are good
+  const [type, setType] = useState(findAdType(screenW, screenH, types, horizThresh));
+
+  useEffect(() => {
+    setType(findAdType(screenW, screenH, types, horizThresh));
+  }, [screenW, screenH, types, horizThresh]);
+
+  useEffect(() => {
+    // aiptag.cmd.display.push(function() { aipDisplayTag.display("swordbattle-io_970x90"); });
+    const windowAny = window as any;
+    // clear ads
+    try {
+    if(windowAny.aipDisplayTag && windowAny.aipDisplayTag.clear) {
+      for(const type of types) {
+        windowAny.aipDisplayTag.clear(`swordbattle-io_${type[0]}x${type[1]}`);
+      }
+    }
+  } catch(e) {
+    alert("error clearing ad");
+  }
+  if(type === -1) return;
+    if(windowAny.aiptag && windowAny.aiptag.cmd && windowAny.aiptag.cmd.display) {
+      console.log(`requesting swordbattle-io_${types[type][0]}x${types[type][1]}`);
+      if(debug) return;
+      windowAny.aiptag.cmd.display.push(function() { windowAny.aipDisplayTag.display(`swordbattle-io_${types[type][0]}x${types[type][1]}`); });
+    } else {
+    }
+  }, [type]);
+
+
+  if(type === -1) return null;
+
+  return (
+    <div style={{
+      backgroundColor: debug ? "gray" : undefined,
+      height: debug ? types[type][1] : undefined,
+      width: debug ? types[type][0] : undefined,
+      transform: centerOnOverflow && centerOnOverflow < types[type][0] ? `translateX(calc(-1 * (${types[type][0]}px - ${centerOnOverflow}px) / 2))` : undefined,
+    }} id={`swordbattle-io_${types[type][0]}x${types[type][1]}`}>
+      { debug && (
+        <>
+      <h1>Ad</h1>
+      <p>Ad size: {types[type][0]} x {types[type][1]}</p>
+      </>
+      )}
+    </div>
+  )
+}

client/src/ui/App.tsx

@@ -30,6 +30,7 @@ import ShopButton from './ShopButton';
 import ShopModal from './modals/ShopModal';
 import MigrationModal from './modals/MigrationModal';
 import { getCookies } from '../helpers';
+import Ad from './Ad';
 
 const preloadImages: string[] = [
   SettingsImg,
@@ -52,10 +53,22 @@ function App() {
   const [isConnected, setIsConnected] = useState(false);
   const [accountReady, setAccountReady] = useState(false);
   const [gameQueued, setGameQueued] = useState(false);
+  const [dimensions, setDimensions] = useState({ width: window.innerWidth, height: window.innerHeight });
   const gameQueuedRef = useRef(gameQueued);
 
   useEffect(() => {
     gameQueuedRef.current = gameQueued;
+
+    // debounce resize
+    let timeout: any;
+    const onResize = () => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        setDimensions({ width: window.innerWidth, height: window.innerHeight });
+      }, 100);
+    };
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
   }, [gameQueued]);
 
   useEffect(() => {
@@ -203,6 +216,7 @@ function App() {
         onHome={onHome}
         onGameReady={onGameReady}
         onConnectionClosed={onConnectionClosed}
+        dimensions={dimensions}
         loggedIn={account.isLoggedIn}
       />
       {connectionError && (
@@ -227,6 +241,12 @@ function App() {
               :
               'Connecting...'}
             </button>
+
+
+          {/* Ad Div */}
+          {
+           <Ad screenW={dimensions.width} screenH={dimensions.height} types={[[728, 90], [970, 90], [970, 250]]} />
+          }
           </div>
 
           <div

client/src/ui/game/GameComponent.tsx

@@ -4,14 +4,15 @@ import config from '../../game/PhaserConfig';
 import Leaderboard from './Leaderboard';
 import GameResults from './GameResults';
 import './GameComponent.scss';
+import Ad from '../Ad';
 
 declare global {
   interface Window {
     phaser_game: Phaser.Game | undefined;
   }
 }
 
-function GameComponent({ onHome, onGameReady, onConnectionClosed, loggedIn }: any) {
+function GameComponent({ onHome, onGameReady, onConnectionClosed, loggedIn, dimensions }: any) {
   const [game, setGame] = useState<Phaser.Game | undefined>(window.phaser_game);
   const [gameResults, setGameResults] = useState<any>(null);
   const [playing, setPlaying] = useState(false);
@@ -44,12 +45,17 @@ function GameComponent({ onHome, onGameReady, onConnectionClosed, loggedIn }: an
     <div className="game">
       <div id="phaser-container" />
       { playing && <Leaderboard game={game} /> }
-      {gameResults && <GameResults
+      {gameResults && (
+      <>
+      <GameResults
         onHome={onHome}
         game={game}
         results={gameResults}
         isLoggedIn={loggedIn}
-      />}
+        adElement={<Ad screenW={dimensions.width} screenH={dimensions.height} types={[[728, 90], [970, 90]]} centerOnOverflow={600} horizThresh={0.2} />}
+      />
+      </>
+      )}
     </div>
   );
 }

client/src/ui/game/GameResults.scss

@@ -5,10 +5,12 @@
 	top: 50%;
 	width: 600px;
 	transform: translate(-50%, -50%);
+	.results-main {
   background-color: rgb(0, 0, 0, 0.7);
 	text-shadow: 1px 1px 1px rgb(0, 0, 0);
   border: 5px solid #111111;
 	border-radius: 10px;
+	}
 	animation: fadeIn 1s ease both;
 
 	.results-title {

client/src/ui/game/GameResults.tsx

@@ -7,7 +7,7 @@ import './GameResults.scss';
 import { DisconnectTypes } from '../../game/Types';
 import { calculateGemsXP } from '../../helpers';
 
-function GameResults({ onHome, results, game, isLoggedIn }: any) {
+function GameResults({ onHome, results, game, isLoggedIn, adElement }: any) {
   const onHomeClick = () => {
     onHome();
     game.events.emit('setGameResults', null);
@@ -20,6 +20,7 @@ function GameResults({ onHome, results, game, isLoggedIn }: any) {
 
   return (
     <div className="results" style={useScale(true).styles}>
+      <div className='results-main'>
       <div className="results-title">
         {results.disconnectReason?.code === DisconnectTypes.Player ? 'You got stabbed' : results.disconnectReason?.code === DisconnectTypes.Mob ? 'You were destroyed' : 'You were disconnected'}
         <br />
@@ -98,7 +99,14 @@ function GameResults({ onHome, results, game, isLoggedIn }: any) {
           <img src={PlayAgainImg} alt="Play again" />
         </div>
         )}
+</div>
+
       </div>
+      { adElement ? (
+          <div className="ad">
+            {adElement}
+          </div>
+        ) : null}
     </div>
   )
 }