From 6e214b9f879df86a6268d0921040866ec1a0102b Mon Sep 17 00:00:00 2001
From: Juan Cazala <juancazala@gmail.com>
Date: Thu, 7 Jan 2021 17:54:21 -0300
Subject: [PATCH] feat: use new tiles endpoint

BREAKING CHANGE: the shape of AtlasTile has changed
---
 src/colors.ts                  | 30 ++++++++++++++
 src/components/Atlas/Atlas.tsx | 74 +++++++++++++++++++---------------
 2 files changed, 71 insertions(+), 33 deletions(-)

diff --git a/src/colors.ts b/src/colors.ts
index c99e2e2f..926a7896 100644
--- a/src/colors.ts
+++ b/src/colors.ts
@@ -14,3 +14,33 @@ export enum Color {
   OJ_NOT_SIMPSON = '#FF7439',
   DARK = '#18141A'
 }
+
+export enum AtlasColor {
+  OWNED = '#3D3A46',
+  UNOWNED = '#09080A',
+  PLAZA = '#70AC76',
+  ROAD = '#716C7A',
+  DISTRICT = '#5054D4',
+  ODD = '#110E13',
+  EVEN = '#0D0B0E'
+}
+
+export enum RarityColor {
+  UNIQUE = '#FFB626',
+  MYTHIC = '#FF63E1',
+  LEGENDARY = '#842DDA',
+  EPIC = '#3D85E6',
+  RARE = '#36CF75',
+  UNCOMMON = '#ED6D4F',
+  COMMON = '#ABC1C1'
+}
+
+export enum RarityColorLight {
+  UNIQUE = '#FFE617',
+  MYTHIC = '#FB7DE3',
+  LEGENDARY = '#A657ED',
+  EPIC = '#6397F2',
+  RARE = '#3AD682',
+  UNCOMMON = '#FF8563',
+  COMMON = '#D4E0E0'
+}
diff --git a/src/components/Atlas/Atlas.tsx b/src/components/Atlas/Atlas.tsx
index cbca32a5..454749ad 100644
--- a/src/components/Atlas/Atlas.tsx
+++ b/src/components/Atlas/Atlas.tsx
@@ -2,17 +2,29 @@ import * as React from 'react'
 import { TileMapProps, Layer, TileMap, Coord } from 'react-tile-map'
 import 'react-tile-map/lib/styles.css'
 import './Atlas.css'
+import { AtlasColor } from '../../colors'
+
+export enum AtlasTileType {
+  OWNED = 'owned',
+  UNOWNED = 'unowned',
+  PLAZA = 'plaza',
+  ROAD = 'road',
+  DISTRICT = 'district'
+}
 
 export type AtlasTile = {
+  id: string
   x: number
   y: number
-  type: number
-  left?: number
-  top?: number
-  topLeft?: number
-  owner: string
+  type: AtlasTileType
+  top: boolean
+  left: boolean
+  topLeft: boolean
   name?: string
-  estate_id?: string
+  owner?: string
+  estateId?: string
+  tokenId?: string
+  price?: number
 }
 
 export { Layer, Coord }
@@ -26,24 +38,6 @@ export type AtlasState = {
   tiles?: Record<string, AtlasTile>
 }
 
-const COLOR_BY_TYPE = Object.freeze({
-  0: '#ff9990', // my parcels
-  1: '#ff4053', // my parcels on sale
-  2: '#ff9990', // my estates
-  3: '#ff4053', // my estates on sale
-  4: '#ffbd33', // parcels/estates where I have permissions
-  5: '#5054D4', // districts
-  6: '#563db8', // contributions
-  7: '#716C7A', // roads
-  8: '#70AC76', // plazas
-  9: '#3D3A46', // owned parcel/estate
-  10: '#3D3A46', // parcels on sale (we show them as owned parcels)
-  11: '#09080A', // unowned pacel/estate
-  12: '#18141a', // background
-  13: '#110e13', // loading odd
-  14: '#0d0b0e' // loading even
-})
-
 export class Atlas extends React.PureComponent<AtlasProps, AtlasState> {
   static defaultProps = {
     ...TileMap.defaultProps,
@@ -56,25 +50,24 @@ export class Atlas extends React.PureComponent<AtlasProps, AtlasState> {
 
   mounted: boolean = true
 
-  layer: Layer = (x, y) => {
-    const { tiles } = this.state
+  static getLayer = (tiles: Record<string, AtlasTile>): Layer => (x, y) => {
     const id = x + ',' + y
     if (tiles && id in tiles) {
       const tile = tiles[id]
       return {
-        color: COLOR_BY_TYPE[tile.type],
-        top: !!tile.top,
-        left: !!tile.left,
-        topLeft: !!tile.topLeft
+        color: Atlas.getColorByType(tile.type),
+        top: tile.top,
+        left: tile.left,
+        topLeft: tile.topLeft
       }
     } else {
       return {
-        color: (x + y) % 2 === 0 ? COLOR_BY_TYPE[13] : COLOR_BY_TYPE[14]
+        color: (x + y) % 2 === 0 ? AtlasColor.EVEN : AtlasColor.ODD
       }
     }
   }
 
-  static TILES_URL = 'https://api.decentraland.org/v1/tiles'
+  static TILES_URL = 'https://api.decentraland.org/v2/tiles?exclude=updatedAt'
 
   static fetchTiles = async (url: string = Atlas.TILES_URL) => {
     if (!window.fetch) return {}
@@ -83,6 +76,21 @@ export class Atlas extends React.PureComponent<AtlasProps, AtlasState> {
     return json.data as Record<string, AtlasTile>
   }
 
+  static getColorByType(type: AtlasTileType) {
+    switch (type) {
+      case AtlasTileType.OWNED:
+        return AtlasColor.OWNED
+      case AtlasTileType.UNOWNED:
+        return AtlasColor.UNOWNED
+      case AtlasTileType.PLAZA:
+        return AtlasColor.PLAZA
+      case AtlasTileType.ROAD:
+        return AtlasColor.ROAD
+      case AtlasTileType.DISTRICT:
+        return AtlasColor.DISTRICT
+    }
+  }
+
   componentDidMount() {
     if (!this.state.tiles) {
       Atlas.fetchTiles().then(this.handleUpdateTiles)
@@ -114,7 +122,7 @@ export class Atlas extends React.PureComponent<AtlasProps, AtlasState> {
       <TileMap
         {...rest}
         className={classes.trim()}
-        layers={[this.layer, ...layers]}
+        layers={[Atlas.getLayer(this.state.tiles), ...layers]}
       />
     )
   }