western-world 3.0.707 → 3.0.708

package/src/western-world-build-svg.helpers.js

@@ -1,132 +0,0 @@
-import { others } from './svg';
-import { cells } from './svg';
-import { buildArrowByCoordinates } from './western-world-build-svg-arrows.helpers';
-import { languageSvgStyles, globalSvgStyles, ARROW_CSS } from './western-world.utils.constants';
-import { getPathByCell, buildImageForCanvasFromHtmlStr, getMaskStyles } from './western-world.utils.helpers';
-
-const parser = new DOMParser();
-
-export const buildNewSvgImages = ({ allCells, language }) => {
-  return Promise.all(
-    allCells
-      .filter(cell => cell.id)
-      .map(cell => {
-        return Promise.all([
-          buildSvgAndImageByHtml({
-            name: cell.animatedImage,
-            elRequire: cells[cell.animatedImage],
-            cell,
-            language,
-            withMask: true
-          }).then(({ img, svgTag }) => {
-            window.cachedImages[language].svgTags[cell.animatedImage] = svgTag;
-            window.cachedImages[language].svgTags[cell.id] = svgTag;
-            window.cachedImages[language].svgImagesForCanvas[cell.animatedImage] = img;
-            window.cachedImages[language].svgImagesForCanvas[cell.id] = img;
-          }),
-          buildSvgAndImageByHtml({
-            name: cell.animatedImage,
-            elRequire: cells[cell.animatedImage],
-            cell,
-            language,
-            withMask: false,
-            parser
-          }).then(({ img }) => {
-            window.cachedImages[language].svgImagesWithoutMasks[cell.animatedImage] = img;
-            window.cachedImages[language].svgImagesWithoutMasks[cell.id] = img;
-          })
-        ]);
-      })
-  );
-};
-
-export const buildOtherSvgImages = ({ language }) => {
-  return Promise.all(
-    Object.keys(others).map(name => {
-      return buildSvgAndImageByHtml({
-        name,
-        elRequire: others[name],
-        cell: null,
-        language,
-        withMask: false
-      }).then(({ img, svgTag }) => {
-        window.cachedImages[language].svgTags[name] = svgTag;
-        window.cachedImages[language].svgImagesForCanvas[name] = img;
-        window.cachedImages[language].svgImagesWithoutMasks[name] = img;
-      });
-    })
-  );
-};
-
-const buildSvgAndImageByHtml = ({ name, elRequire, cell, language, withMask }) => {
-  // get svg image from file and apply offsets;
-  const doc = parser.parseFromString(elRequire.svg, 'image/svg+xml');
-  const svgEl = doc.querySelector('svg');
-  svgEl.classList.add(name);
-
-  // create svg style element;
-  const styleElement = svgEl.querySelector('svg > style');
-  if (styleElement) {
-    styleElement.insertAdjacentHTML('beforeend', `${globalSvgStyles} ${languageSvgStyles} ${elRequire.css}`);
-  }
-
-  // create new <g> and move all content to it to apply mask;
-  const gElement = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-  gElement.setAttribute('class', language);
-  const allSvgImageContent = svgEl.querySelectorAll('svg > *:not(style)');
-  [...allSvgImageContent].forEach(el => gElement.appendChild(el));
-
-  // create defs element;
-  const defsElement = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
-  defsElement.innerHTML = elRequire.defs ? elRequire.defs.map(el => el.value).join(' ') : '';
-
-  if (withMask) {
-    const cellPath = getPathByCell(name, cell);
-    const cellPathSymbol = `<symbol id="path-border-${name}" viewBox="0 0 1 1">${cellPath}</symbol>`;
-    // TODO probably don't need mask, clipPath would be enough;
-    const mask = `
-            <mask id="mask-${name}">
-              <use xlink:href="#path-border-${name}" class="use-mask"></use>
-              <use xlink:href="#additional-mask" class="use-additional-mask"></use>
-            </mask>
-          `;
-    const clipPath = `<clipPath id="clip-path-${name}" clipPathUnits="objectBoundingBox">${cellPath}</clipPath>`;
-    gElement.setAttribute('mask', `url(#mask-${name})`);
-    styleElement.insertAdjacentHTML('beforeend', getMaskStyles(cell));
-    defsElement.insertAdjacentHTML('beforeend', `${cellPathSymbol} ${mask} ${clipPath}`);
-
-    // create use border path;
-    const svgUseBorderElement = document.createElementNS('http://www.w3.org/2000/svg', 'use');
-    svgUseBorderElement.setAttribute('xlink:href', `#path-border-${name}`);
-    svgUseBorderElement.setAttribute('class', 'use-border');
-    svgEl.appendChild(svgUseBorderElement);
-  }
-
-  svgEl.appendChild(defsElement);
-  svgEl.appendChild(gElement);
-  return buildImageForCanvasFromHtmlStr(svgEl.outerHTML).then(img => {
-    img.defs = elRequire.defs ? [...elRequire.defs] : null;
-    return { svgTag: svgEl.outerHTML, img };
-  });
-};
-
-export const buildOtherGenerate = ({ language, othersGenerate }) => {
-  return Promise.all(
-    othersGenerate.map(({ arrowCoordinates, key, arrowStrokeWidth }) =>
-      buildSvgAndImageByHtml({
-        name: key,
-        elRequire: {
-          svg: buildArrowByCoordinates({ arrowCoordinates, arrowStrokeWidth }),
-          css: ARROW_CSS
-        },
-        cell: null,
-        language,
-        withMask: false
-      }).then(({ img, svgTag }) => {
-        window.cachedImages[language].svgTags[key] = svgTag;
-        window.cachedImages[language].svgImagesForCanvas[key] = img;
-        window.cachedImages[language].svgImagesWithoutMasks[key] = img;
-      })
-    )
-  );
-};

package/src/western-world-images-loader.js

@@ -1,109 +0,0 @@
-import { buildNewSvgImages, buildOtherGenerate, buildOtherSvgImages } from './western-world-build-svg.helpers';
-
-// resolvers;
-let newSvgImagesResolve = {
-  en: null,
-  ru: null,
-  uk: null
-};
-
-// resolvers;
-// let newSvgImagesWithoutMasksResolve = {
-//   en: null,
-//   ru: null,
-//   uk: null,
-// };
-
-let otherSvgImagesResolve = {
-  en: null,
-  ru: null,
-  uk: null
-};
-
-const getDefaultScheme = () => {
-  return {
-    en: {
-      svgTags: {},
-      svgImagesForCanvas: {},
-      svgImagesWithoutMasks: {},
-      avatarsMapForCanvas: {},
-      currentPromise: null,
-      resolver: {
-        all: Promise.all([
-          new Promise(resolve => (newSvgImagesResolve['en'] = resolve)),
-          new Promise(resolve => (otherSvgImagesResolve['en'] = resolve))
-        ])
-      }
-    },
-    ru: {
-      svgTags: {},
-      svgImagesForCanvas: {},
-      svgImagesWithoutMasks: {},
-      avatarsMapForCanvas: {},
-      currentPromise: null,
-      resolver: {
-        all: Promise.all([
-          new Promise(resolve => (newSvgImagesResolve['ru'] = resolve)),
-          new Promise(resolve => (otherSvgImagesResolve['ru'] = resolve))
-        ])
-      }
-    },
-    uk: {
-      svgTags: {},
-      svgImagesForCanvas: {},
-      svgImagesWithoutMasks: {},
-      avatarsMapForCanvas: {},
-      currentPromise: null,
-      resolver: {
-        all: Promise.all([
-          new Promise(resolve => (newSvgImagesResolve['uk'] = resolve)),
-          new Promise(resolve => (otherSvgImagesResolve['uk'] = resolve))
-        ])
-      }
-    }
-  };
-};
-
-window['cachedImages'] = getDefaultScheme();
-
-const clearCache = () => {
-  console.log('[Western-world] Clear image cache...');
-  window['cachedImages'] = window['cachedImages'] = getDefaultScheme();
-};
-
-// TODO split to different functions;
-const fetchImages = ({ language, allCells, othersGenerate }) => {
-  if (!othersGenerate) {
-    console.warn('No othersGenerate!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
-  }
-  if (!allCells) {
-    console.warn('No allCells!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
-  }
-  console.log('[Western-world] Try to fetch images...');
-  if (
-    Object.keys(window['cachedImages'][language].svgTags).length &&
-    Object.keys(window['cachedImages'][language].svgImagesForCanvas).length &&
-    Object.keys(window['cachedImages'][language].svgImagesWithoutMasks).length
-  ) {
-    return Promise.resolve(window['cachedImages'][language]);
-  }
-  if (window['cachedImages'][language].currentPromise) {
-    return window['cachedImages'][language].currentPromise;
-  }
-  console.log('[Western-world] Start fetching images...');
-  window['cachedImages'][language].currentPromise = Promise.all([
-    buildNewSvgImages({ allCells, language }).then(newSvgImagesResolve[language]),
-    Promise.all([buildOtherSvgImages({ language }), buildOtherGenerate({ language, othersGenerate })]).then(
-      otherSvgImagesResolve[language]
-    )
-  ]).then(() => {
-    console.log('[Western-world] Images were loaded...');
-    return window.cachedImages[language];
-  });
-  return window['cachedImages'][language].currentPromise;
-};
-
-window['western-world-utils'] = {
-  fetchImages,
-  clearCache
-};

package/src/western-world.component.js

@@ -1,185 +0,0 @@
-import { buildPlayerAvatars, drawAllNewCells, drawOthers, drawFlags } from './western-world.utils';
-import { ORIGINAL_WESTERN_WORLD_HEIGHT, ORIGINAL_WESTERN_WORLD_WIDTH } from './western-world.utils.constants';
-import { shouldRedraw } from './western-world.utils.helpers';
-
-const template = document.createElement('template');
-template.innerHTML = `
-    <style>
-      :host {
-        display: block;
-        position: relative;
-      }
-      canvas {
-        width: 100%;
-        top: 0;
-        left: 0;
-        transition: filter 0.5s;
-      }
-      .flags {
-        position: absolute;
-        top: 0;
-        left: 0;
-      }
-    </style>
-
-    <canvas class="constant"></canvas>
-    <canvas class="flags"></canvas>
-  `;
-
-class WesternWorld extends window['WesternBaseHTMLElement'] {
-  // Inputs:
-  // game;
-  // allCells;
-  // myIdKey;
-  // playersIconMap;
-  // showWesternBackground;
-  // SIZE_X_QUALITY;
-  // PADDING_LEFT;
-  // PADDING_RIGHT;
-  // PADDING_TOP;
-  // PADDING_BOTTOM;
-  // language;
-
-  // interface { fileName: 'start', x: number, y: number, size: number, onTopOfCells: boolean }
-  // others
-
-  // Outputs:
-  // allImagesLoaded
-
-  constructor() {
-    super();
-    this._shadowRoot = this.attachShadow({ mode: 'open' });
-    this._shadowRoot.appendChild(template.content.cloneNode(true));
-    this.$canvasConstant = this._shadowRoot.querySelector('canvas.constant');
-    this.$canvasFlags = this._shadowRoot.querySelector('canvas.flags');
-    this.state = {
-      language: null,
-      showWesternBackground: null,
-      allCells: null,
-      game: null
-    };
-    this.detectChangesInprogress = false;
-  }
-
-  areAllInitialized() {
-    return (
-      this.state.language && this.state.showWesternBackground !== undefined && this.state.game && this.state.allCells
-    );
-  }
-
-  set language(value) {
-    this.setState('language', value);
-  }
-
-  set showWesternBackground(value) {
-    this.setState('showWesternBackground', value);
-  }
-
-  set allCells(value) {
-    this.setState('allCells', value);
-  }
-
-  set game(value) {
-    // Refetch all images for any new game because template cells can be different;
-    // if (value.game_id !== this.state.game?.game_id) {
-    //   console.log('[Western-world] Clear image cache...');
-    //   ['en', 'ru', 'uk'].forEach(language => {
-    //     window['cachedImages'][language].currentPromise = null;
-    //     window['cachedImages'][language].svgTags = [];
-    //     window['cachedImages'][language].svgImagesForCanvas = [];
-    //     window['cachedImages'][language].svgImagesWithoutMasks = [];
-    //   });
-    // }
-    if (shouldRedraw(value, this.state.game)) {
-      this.setState('game', value);
-      return;
-    }
-    // if game object doesn't effect western-world canvas don't need setState that rerenders, just save game to the state without rerendering;
-    this.state.game = value;
-  }
-
-  render({ changes }) {
-    window['western-world-utils']
-      .fetchImages({
-        language: this.state.language,
-        allCells: this.state.allCells,
-        othersGenerate: this.othersGenerate
-      })
-      .then(() =>
-        this.dispatchEvent(new CustomEvent('allImagesLoaded', { detail: window.cachedImages[this.state.language] }))
-      )
-      .then(() => buildPlayerAvatars({ avatars: this.playersIconMap, language: this.state.language }))
-      .then(() => {
-        if (changes.language || changes.showWesternBackground) {
-          this.drawWesternWorld();
-          this.dispatchEvent(new CustomEvent('finishedRendering'));
-        }
-        this.drawFlagsCanvas();
-      });
-  }
-
-  drawWesternWorld() {
-    this.$canvasConstant.width =
-      ORIGINAL_WESTERN_WORLD_WIDTH * this.SIZE_X_QUALITY + this.PADDING_LEFT + this.PADDING_RIGHT;
-    this.$canvasConstant.height =
-      ORIGINAL_WESTERN_WORLD_HEIGHT * this.SIZE_X_QUALITY + this.PADDING_TOP + this.PADDING_BOTTOM;
-    const ctx = this.$canvasConstant.getContext('2d');
-
-    if (this.state.showWesternBackground && this.others) {
-      this.$canvasConstant.style.background = 'white';
-      drawOthers({
-        ctx,
-        others: this.others.filter(el => !el.onTopOfCells),
-        SIZE_X_QUALITY: this.SIZE_X_QUALITY,
-        PADDING_LEFT: this.PADDING_LEFT,
-        PADDING_TOP: this.PADDING_TOP,
-        language: this.state.language
-      });
-    } else {
-      this.$canvasConstant.style.background = 'transparent';
-    }
-
-    // append all new images;
-    drawAllNewCells({
-      allCells: this.state.allCells,
-      ctx,
-      SIZE_X_QUALITY: this.SIZE_X_QUALITY,
-      PADDING_LEFT: this.PADDING_LEFT,
-      PADDING_TOP: this.PADDING_TOP,
-      language: this.state.language
-    });
-
-    if (this.state.showWesternBackground && this.others) {
-      this.$canvasConstant.style.background = 'white';
-      drawOthers({
-        ctx,
-        others: this.others.filter(el => el.onTopOfCells),
-        SIZE_X_QUALITY: this.SIZE_X_QUALITY,
-        PADDING_LEFT: this.PADDING_LEFT,
-        PADDING_TOP: this.PADDING_TOP,
-        language: this.state.language
-      });
-    }
-  }
-
-  drawFlagsCanvas() {
-    const ctxFlags = this.$canvasFlags.getContext('2d');
-    this.$canvasFlags.width =
-      ORIGINAL_WESTERN_WORLD_WIDTH * this.SIZE_X_QUALITY + this.PADDING_LEFT + this.PADDING_RIGHT;
-    this.$canvasFlags.height =
-      ORIGINAL_WESTERN_WORLD_HEIGHT * this.SIZE_X_QUALITY + this.PADDING_TOP + this.PADDING_BOTTOM;
-    // draw flags;
-    drawFlags({
-      allCells: this.state.allCells,
-      ctx: ctxFlags,
-      game: this.state.game,
-      myIdKey: this.myIdKey,
-      SIZE_X_QUALITY: this.SIZE_X_QUALITY,
-      PADDING_LEFT: this.PADDING_LEFT,
-      PADDING_TOP: this.PADDING_TOP,
-      language: this.state.language
-    });
-  }
-}
-
-customElements.get('western-world') || window.customElements.define('western-world', WesternWorld);

package/src/western-world.utils.constants.js

@@ -1,77 +0,0 @@
-export const ORIGINAL_WESTERN_WORLD_WIDTH = 3029;
-export const ORIGINAL_WESTERN_WORLD_HEIGHT = 1306;
-
-export const backgroundsArr = ['background', 'forest', 'start', 'desert', 'progress'];
-
-export const globalSvgStyles = `
-  .d-none{display:none;}
-  .animated .d-none-animated{display:none;}
-  .d-none-non-animated{display:none;}
-  .animated .d-none-non-animated{display:block;}
-`;
-
-export const languageSvgStyles = `
-  .en [id^="en"] {display: block}
-  .ru [id^="ru"] {display: block}
-  .uk [id^="uk"] {display: block}
-  .ru [id^="ruuk"] {display: block}
-  .uk [id^="ruuk"] {display: block}
-`;
-
-export const maskStyles = `
-  use.use-mask {
-    fill: white;
-  }
-  use.use-additional-mask {
-    fill: white;
-    stroke: white;
-    stroke-width: 20px;
-  }
-`;
-
-export const myFlagSvgStyles = `
-  .flag_st0 {fill: #00ff2f !important}
-`;
-
-export const enemyFlagSvgStyles = `
-  .flag_st0 {fill: #f44b3f !important}
-`;
-
-export const flagStarsStyles = {
-  0: '',
-  1: `
-    #star-1 {display: block}
-  `,
-  2: `
-    #star-1, #star-2 {display: block}
-  `,
-  3: `
-  #star-1, #star-2, #star-3 {display: block}
-  `,
-  4: `
-  #star-1, #star-2, #star-3, #star-4 {display: block}
-  `,
-  5: `
-  #star-1, #star-2, #star-3, #star-4, #star-5 {display: block}
-  `
-};
-
-export const BORDER_WIDTH_CONST = 1.2;
-
-export const ARROW_CSS = `
-.animated .d-none-non-animated {
-  stroke-dashoffset: 0px;
-  stroke-dasharray: 100px 600px;
-  stroke: white;
-  animation-name: arrow_animation;
-  animation-duration: 10s;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-}
-
-@keyframes arrow_animation {
-  to {
-    stroke-dashoffset: -6000px;
-  }
-}
-`;

package/src/western-world.utils.helpers.js

@@ -1,93 +0,0 @@
-import { BORDER_WIDTH_CONST, maskStyles } from './western-world.utils.constants';
-
-export const getPathDByData = dData => {
-  return dData.reduce((previousValue, el) => {
-    switch (el.type) {
-      case 'M':
-        return (previousValue += `M${el.x} ${el.y} `);
-      case 'L':
-        return (previousValue += `L${el.x} ${el.y} `);
-      case 'Q':
-        return (previousValue += `Q${el.x} ${el.y} ${el.x1} ${el.y1}`);
-      case 'Z':
-        return (previousValue += `Z`);
-    }
-  }, '');
-};
-
-export const getPathByCell = (name, cell) => {
-  if (cell.svg.type === 'path') {
-    const d = getPathDByData(cell.svg.dData);
-    return `<path d="${d}"></path>`;
-  }
-  if (cell.svg.type === 'circle') {
-    return `<circle id="path-border-${name}" cx="${cell.svg.cx}" cy="${cell.svg.cy}" r="${cell.svg.r}"></circle>`;
-  }
-};
-
-export const getImageByUrl = url => {
-  return new Promise(resolve => {
-    const img = new Image();
-    img.src = url;
-    img.onload = () => {
-      resolve(img);
-    };
-  });
-};
-
-export const buildImageForCanvasFromHtmlStr = htmlStr => {
-  return new Promise(resolve => {
-    const DOMURL = window.URL || window;
-    const img = new Image();
-    const svgBlob = new Blob([htmlStr], { type: 'image/svg+xml' });
-    const url = DOMURL.createObjectURL(svgBlob);
-    img.onload = () => {
-      DOMURL.revokeObjectURL(img);
-      resolve(img);
-    };
-    img.src = url;
-  });
-};
-
-export const didStarsChange = (currentGameValue, previousGameValue) => {
-  return Object.keys(currentGameValue.stocks).some(
-    firmId => currentGameValue.stocks[firmId].stars !== previousGameValue.stocks[firmId].stars
-  );
-};
-
-export const shouldRedraw = (currentGameValue, previousGameValue) => {
-  if (!previousGameValue) {
-    return true;
-  }
-  let isPlayersFirmsChanged;
-
-  // deep compare player's firms;
-  if (previousGameValue) {
-    isPlayersFirmsChanged = previousGameValue.players_order.some(playerIdKey => {
-      if (!currentGameValue.players[playerIdKey]) {
-        // player was droped or lost;
-        return true;
-      }
-      return (
-        currentGameValue.players[playerIdKey].firms.length !== previousGameValue.players[playerIdKey].firms.length ||
-        didStarsChange(currentGameValue, previousGameValue)
-      );
-    });
-  }
-
-  return isPlayersFirmsChanged;
-};
-
-export const getMaskStyles = cell => {
-  const borderWidth = BORDER_WIDTH_CONST / cell.location.size;
-  const borderMaskStylesByCell = `
-    use.use-border {
-      stroke: black;
-      stroke-width: ${borderWidth}px;
-    }
-  `;
-  return `
-    ${maskStyles}
-    ${borderMaskStylesByCell}  
-  `;
-};