Update to 1.8.1

package.json

@@ -1,7 +1,7 @@
 {
   "name": "izowave",
   "description": "Isometric game. Build and defense in open world",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "keywords": [
     "game",
     "isometric",
@@ -56,9 +56,9 @@
   "dependencies": {
     "gen-biome": "2.4.0",
     "heap": "0.2.7",
-    "idb": "^7.1.1",
+    "idb": "7.1.1",
     "phaser": "3.60.0",
-    "phaser-react-ui": "1.4.2",
+    "phaser-react-ui": "1.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "styled-components": "6.0.1",

src/assets/styles.css

@@ -26,11 +26,11 @@ img {
   flex-direction: column;
   display: flex;
   padding: 100px;
-  font: 20px 'Verdana';
+  font: 14px 'Verdana';
   font-weight: bold;
-  line-height: 20pt;
-  letter-spacing: 2px;
-  color: #aaa;
+  line-height: 14pt;
+  letter-spacing: 1px;
+  color: #fff;
   text-align: center;
   z-index: 999;
 }

src/const/sdk.ts

@@ -0,0 +1,6 @@
+import { SDKPlatform } from '~type/sdk';
+
+export const SDK_PLATFORMS: Record<SDKPlatform, string> = {
+  [SDKPlatform.CRAZY_GAMES]: 'https://sdk.crazygames.com/crazygames-sdk-v2.js',
+  [SDKPlatform.POKI]: 'https://game-cdn.poki.com/scripts/v2/poki-sdk.js',
+};

src/game/game.ts

@@ -4,9 +4,10 @@ import {
   AUDIO_VOLUME, CONTAINER_ID, DEBUG_MODS, SETTINGS,
 } from '~const/game';
 import { Analytics } from '~lib/analytics';
+import { SDK } from '~lib/sdk';
 import { Storage } from '~lib/storage';
 import { Tutorial } from '~lib/tutorial';
-import { eachEntries, registerScript } from '~lib/utils';
+import { eachEntries } from '~lib/utils';
 import { Gameover } from '~scene/gameover';
 import { Menu } from '~scene/menu';
 import { Screen } from '~scene/screen';
@@ -27,6 +28,7 @@ import {
 } from '~type/game';
 import { MenuPage } from '~type/menu';
 import { IScreen } from '~type/screen';
+import { ISDK, SDKPlatform } from '~type/sdk';
 import { IStorage, StorageSave } from '~type/storage';
 import { ITutorial } from '~type/tutorial';
 import { IWorld } from '~type/world';
@@ -40,6 +42,8 @@ export class Game extends Phaser.Game implements IGame {
 
   readonly storage: IStorage;
 
+  private sdk: ISDK | null = null;
+
   private flags: string[];
 
   public difficulty: GameDifficulty = GameDifficulty.NORMAL;
@@ -104,9 +108,7 @@ export class Game extends Phaser.Game implements IGame {
     this.readFlags();
     this.readSettings();
 
-    if (this.isFlagEnabled(GameFlag.ADS)) {
-      registerScript('https://sdk.crazygames.com/crazygames-sdk-v2.js');
-    }
+    this.createSDK();
 
     this.events.on(Phaser.Core.Events.READY, () => {
       this.screen = <IScreen> this.scene.getScene(GameScene.SCREEN);
@@ -242,7 +244,7 @@ export class Game extends Phaser.Game implements IGame {
       defaultPage: MenuPage.NEW_GAME,
     });
 
-    this.showAd(GameAdType.MIDGAME);
+    this.showAdv(GameAdType.MIDGAME);
 
     if (!IS_DEV_MODE) {
       window.onbeforeunload = null;
@@ -305,29 +307,35 @@ export class Game extends Phaser.Game implements IGame {
 
   private readFlags() {
     const query = new URLSearchParams(window.location.search);
-    const rawFlags = query.get('flags');
+    const value = query.get('flags')?.toUpperCase() ?? '';
 
-    this.flags = rawFlags?.toUpperCase().split(',') ?? [];
+    this.flags = value.split(',');
   }
 
-  public showAd(type: GameAdType, callback?: () => void) {
-    if (!this.isFlagEnabled(GameFlag.ADS)) {
+  public showAdv(type: GameAdType, callback?: () => void) {
+    if (!this.sdk || !this.isFlagEnabled(GameFlag.ADS)) {
       return;
     }
 
-    // @ts-ignore
-    window.CrazyGames?.SDK?.ad?.requestAd(type, {
-      adStarted: () => {
+    this.sdk.showAdv(
+      type,
+      () => {
         this.pause();
       },
-      adFinished: () => {
+      () => {
         this.resume();
         callback?.();
       },
-      adError: (error: any) => {
-        console.warn(`Error ${type} ad:`, error);
-      },
-    });
+    );
+  }
+
+  private createSDK() {
+    const query = new URLSearchParams(window.location.search);
+    const platform = <SDKPlatform> query.get('sdk')?.toUpperCase();
+
+    if (platform) {
+      this.sdk = new SDK(platform);
+    }
   }
 
   private getRecordStat(): Nullable<GameStat> {

src/game/scenes/menu/interface/content/about/index.tsx → src/game/scenes/menu/interface/content/about-game/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Wrapper } from './styles';
 
-export const About: React.FC = () => (
+export const AboutGame: React.FC = () => (
   <Wrapper>
     Your task is to survive on chosen planet as many waves as possible.
     <br />

src/game/scenes/menu/interface/content/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { MenuPage } from '~type/menu';
 
-import { About } from './about';
+import { AboutGame } from './about-game';
 import { Controls } from './controls';
 import { LoadGame } from './load-game';
 import { NewGame } from './new-game';
@@ -19,7 +19,7 @@ const PAGES: Record<MenuPage, React.FC> = {
   [MenuPage.SAVE_GAME]: SaveGame,
   [MenuPage.LOAD_GAME]: LoadGame,
   [MenuPage.SETTINGS]: Settings,
-  [MenuPage.ABOUT]: About,
+  [MenuPage.ABOUT_GAME]: AboutGame,
   [MenuPage.CONTROLS]: Controls,
 };
 

src/game/scenes/menu/interface/navigation/index.tsx

@@ -49,8 +49,8 @@ export const Navigation: React.FC<Props> = ({ page, onSelect }) => {
       label: 'Settings',
       page: MenuPage.SETTINGS,
     }, {
-      label: 'About',
-      page: MenuPage.ABOUT,
+      label: 'About game',
+      page: MenuPage.ABOUT_GAME,
     }, {
       label: 'Controls',
       page: MenuPage.CONTROLS,

src/game/scenes/screen/interface/ads-reward/index.tsx

@@ -24,7 +24,7 @@ export const AdsReward: React.FC = () => {
   });
 
   const onConfirmAds = () => {
-    game.showAd(GameAdType.REWARDED, () => {
+    game.showAdv(GameAdType.REWARDED, () => {
       world.player.giveExperience(adsReward.experience);
       world.player.giveResources(adsReward.resources);
     });

src/game/scenes/screen/interface/builder/preview/index.tsx

@@ -1,14 +1,12 @@
-import { useScene, useSceneUpdate } from 'phaser-react-ui';
+import { Texture, useScene, useSceneUpdate } from 'phaser-react-ui';
 import React, { useState } from 'react';
 
 import { BUILDINGS } from '~const/world/entities/buildings';
 import { GameScene } from '~type/game';
 import { IWorld } from '~type/world';
 import { BuildingVariant } from '~type/world/entities/building';
 
-import {
-  Container, Number, Preview, Image,
-} from './styles';
+import { Container, Number, Preview } from './styles';
 
 type Props = {
   number: number
@@ -76,7 +74,7 @@ export const BuilderPreview: React.FC<Props> = ({ number, variant }) => {
     >
       <Number>{number}</Number>
       <Preview>
-        <Image src={`assets/sprites/${BUILDINGS[variant].Texture}.png`} />
+        <Texture name={BUILDINGS[variant].Texture} frame={0} />
       </Preview>
     </Container>
   );

src/game/scenes/screen/interface/builder/preview/styles.ts

@@ -77,7 +77,7 @@ export const Preview = styled.div`
   overflow: hidden;
   width: 34px;
   height: 40px;
-  img {
+  img, div[data-texture-container] {
     height: 100%;
   }
 `;
@@ -92,5 +92,3 @@ export const Number = styled.div`
   top: 4px;
   opacity: 0.75;
 `;
-
-export const Image = styled.img``;

src/game/scenes/screen/interface/wave/index.tsx

@@ -23,16 +23,16 @@ export const Wave: React.FC = () => {
   const [isGoing, setGoing] = useState(false);
   const [isAlarm, setAlarm] = useState(false);
   const [isDisabled, setDisabled] = useState(true);
+  const [isPaused, setPaused] = useState(true);
 
   useSceneUpdate(world, () => {
-    const currentIsDisabled = world.wave.isPeaceMode || world.isTimePaused();
+    setDisabled(world.wave.isPeaceMode);
 
-    setDisabled(currentIsDisabled);
-
-    if (currentIsDisabled) {
+    if (world.wave.isPeaceMode) {
       return;
     }
 
+    setPaused(world.isTimePaused());
     setCurrentNumber(world.wave.number);
     setGoing(world.wave.isGoing);
 
@@ -54,7 +54,7 @@ export const Wave: React.FC = () => {
   ) : (
     <Wrapper>
       <Container>
-        <CurrentNumber $going={isGoing}>{currentNumber}</CurrentNumber>
+        <CurrentNumber $paused={isPaused} $going={isGoing}>{isPaused ? '||' : currentNumber}</CurrentNumber>
         <State>
           <Label>{isGoing ? 'Enemies' : 'Timeleft'}</Label>
           <Value $attention={isAlarm}>{value}</Value>

src/game/scenes/screen/interface/wave/styles.ts

@@ -28,16 +28,23 @@ export const Container = styled.div`
 `;
 
 export const CurrentNumber = styled.div<{
+  $paused?: boolean
   $going?: boolean
 }>`
   font-size: 24px;
   line-height: 24px;
   padding: 6px 17px 10px 17px;
   border-radius: 3px;
-  background: ${(props) => (props.$going
-    ? InterfaceBackgroundColor.ERROR
-    : InterfaceBackgroundColor.SUCCESS
-  )};
+  background: ${(props) => {
+    if (props.$paused) {
+      return InterfaceBackgroundColor.WARN;
+    }
+    if (props.$going) {
+      return InterfaceBackgroundColor.ERROR;
+    }
+
+    return InterfaceBackgroundColor.SUCCESS;
+  }};
   box-shadow: 0 20px 0 ${InterfaceBackgroundColor.WHITE_TRANSPARENT_15} inset;
 `;
 

src/game/scenes/system/system.ts

@@ -8,23 +8,26 @@ import { MenuPage } from '~type/menu';
 
 export class System extends Scene {
   constructor() {
-    super({
-      key: GameScene.SYSTEM,
-      pack: getAssetsPack(),
-    });
-
-    setLoadingStatus('ASSETS LOADING');
+    super(GameScene.SYSTEM);
   }
 
-  public async create() {
-    await this.game.loadPayload();
+  public async preload() {
+    this.load.on('progress', (value: number) => {
+      setLoadingStatus(`LOADING\n${Math.round(value * 100)}%`);
+    });
+
+    this.load.addPack([getAssetsPack()]);
 
     await Promise.all([
       loadFontFace(InterfaceFont.PIXEL_LABEL, 'pixel_label.ttf'),
       loadFontFace(InterfaceFont.PIXEL_TEXT, 'pixel_text.ttf'),
     ]);
+  }
 
-    removeLoading();
+  public async create() {
+    setLoadingStatus('LOADING\nDONE');
+
+    await this.game.loadPayload();
 
     this.scene.launch(GameScene.WORLD);
     this.scene.launch(GameScene.MENU, {
@@ -33,6 +36,8 @@ export class System extends Scene {
 
     this.scene.bringToTop();
 
+    removeLoading();
+
     this.input.keyboard?.on(CONTROL_KEY.PAUSE, () => {
       if (this.game.isPaused) {
         // System pause

src/index.html

@@ -14,7 +14,7 @@
 <body>
 	<div class="system-overlay" id="loading">
 		<div class="loading-animation"></div>
-		<div id="loading-status">GAME LOADING</div>
+		<div id="loading-status">PREPARING</div>
 	</div>
 	<div id="game-container"></div>
 </body>