Tile asset management 90% done

2024-07-02 21:53:50 +02:00 · 2024-07-02 21:53:50 +02:00 · 4c6978e0c0
commit 4c6978e0c0
parent fc72c83f8d
13 changed files with 176 additions and 63 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -2137,30 +2137,30 @@
      }
    },
    "node_modules/@volar/language-core": {
-      "version": "2.4.0-alpha.3",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.3.tgz",
-      "integrity": "sha512-hLVn1t7dfvJcZgiXG/83fg6zvzigLYOVyCEG51uRGAnWV+kfPw2/v5iRKIStlcYb1MqCEZXDiLsIm3gWvN1JAQ==",
+      "version": "2.4.0-alpha.12",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.12.tgz",
+      "integrity": "sha512-Dj9qTifcGGgzFLfMbU5dCo13kHyNuEyvPJhtWDnoVBBmgwW3GMwFmgWnNxBhjf63m5x0gux1okaxX2CLN7qSww==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@volar/source-map": "2.4.0-alpha.3"
+        "@volar/source-map": "2.4.0-alpha.12"
      }
    },
    "node_modules/@volar/source-map": {
-      "version": "2.4.0-alpha.3",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.3.tgz",
-      "integrity": "sha512-tqXfx43WvKvjatkoBKkMpLu5akV/p/hPf2MWdAHmK4W6cGDvNinmPlnp/nxIL0WZGvX76y4XhYb3LQQeN5/nIw==",
+      "version": "2.4.0-alpha.12",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.12.tgz",
+      "integrity": "sha512-LXATFSj4D7T9sEm7FFj6iBgHjKjrdhAgRPcechVKiNCMQdr3r3GVkkeu8aM+1peaMH3LsCqoDxVZEmh2r7CHiw==",
      "dev": true,
      "license": "MIT"
    },
    "node_modules/@volar/typescript": {
-      "version": "2.4.0-alpha.3",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.3.tgz",
-      "integrity": "sha512-fjWaXUlPLedDCyTc4YpDN5c6T7JK/mA7tmSSSirpQOX5CW/gdy3vpC+XbQta/KjVrRRFNYC2pncTBPyethdyxA==",
+      "version": "2.4.0-alpha.12",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.12.tgz",
+      "integrity": "sha512-mLg+OQauMTv/+08a7WBWJo1sev/wc8t2is0zhBZIlFU+j5mG89FM4+4089c2p/zoUFZ400Q/VNg2BPfhpZ8wSA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@volar/language-core": "2.4.0-alpha.3",
+        "@volar/language-core": "2.4.0-alpha.12",
        "path-browserify": "^1.0.1",
        "vscode-uri": "^3.0.8"
      }
@ -2959,9 +2959,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001638",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001638.tgz",
-      "integrity": "sha512-5SuJUJ7cZnhPpeLHaH0c/HPAnAHZvS6ElWyHK9GSIbVOQABLzowiI2pjmpvZ1WEbkyz46iFd4UXlOHR5SqgfMQ==",
+      "version": "1.0.30001639",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001639.tgz",
+      "integrity": "sha512-eFHflNTBIlFwP2AIKaYuBQN/apnUoKNhBdza8ZnW/h2di4LCZ4xFqYlxUxo+LQ76KFI1PGcC1QDxMbxTZpSCAg==",
      "dev": true,
      "funding": [
        {
@ -3448,9 +3448,9 @@
      }
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.4.815",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.815.tgz",
-      "integrity": "sha512-OvpTT2ItpOXJL7IGcYakRjHCt8L5GrrN/wHCQsRB4PQa1X9fe+X9oen245mIId7s14xvArCGSTIq644yPUKKLg==",
+      "version": "1.4.816",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.816.tgz",
+      "integrity": "sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw==",
      "dev": true,
      "license": "ISC"
    },
@ -3668,9 +3668,9 @@
      }
    },
    "node_modules/eslint-plugin-vue": {
-      "version": "9.26.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.26.0.tgz",
-      "integrity": "sha512-eTvlxXgd4ijE1cdur850G6KalZqk65k1JKoOI2d1kT3hr8sPD07j1q98FRFdNnpxBELGPWxZmInxeHGF/GxtqQ==",
+      "version": "9.27.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.27.0.tgz",
+      "integrity": "sha512-5Dw3yxEyuBSXTzT5/Ge1X5kIkRTQ3nvBn/VwPwInNiZBSJOO/timWMUaflONnFBzU6NhB68lxnCda7ULV5N7LA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@ -3680,7 +3680,7 @@
        "nth-check": "^2.1.1",
        "postcss-selector-parser": "^6.0.15",
        "semver": "^7.6.0",
-        "vue-eslint-parser": "^9.4.2",
+        "vue-eslint-parser": "^9.4.3",
        "xml-name-validator": "^4.0.0"
      },
      "engines": {
@ -5636,14 +5636,14 @@
      }
    },
    "node_modules/pkg-types": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.1.tgz",
-      "integrity": "sha512-ko14TjmDuQJ14zsotODv7dBlwxKhUKQEhuhmbqo1uCi9BB0Z2alo/wAXg6q1dTR5TyuqYyWhjtfe/Tsh+X28jQ==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.2.tgz",
+      "integrity": "sha512-VEGf1he2DR5yowYRl0XJhWJq5ktm9gYIsH+y8sNJpHlxch7JPDaufgrsl4vYjd9hMUY8QVjoNncKbow9I7exyA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "confbox": "^0.1.7",
-        "mlly": "^1.7.0",
+        "mlly": "^1.7.1",
        "pathe": "^1.1.2"
      }
    },
--- a/public/assets/zone/blank_tile.png
+++ b/public/assets/zone/blank_tile.png
--- a/src/components/forms/ChipsInput.vue
+++ b/src/components/forms/ChipsInput.vue
@ -0,0 +1,82 @@
+<template>
+  <div class="chip-container">
+    <div v-for="(chip, i) in chips" :key="i" class="chip">
+      {{ chip }}
+      <i class="delete-icon" @click="deleteChip(i)">X</i>
+    </div>
+    <input
+      v-model="currentInput"
+      @keypress.enter="saveChip"
+      @keydown.delete="backspaceDelete"
+    >
+  </div>
+</template>
+
+<script setup>
+import { ref, defineProps } from 'vue'
+
+const props = defineProps({
+  set: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const chips = ref([])
+const currentInput = ref('')
+
+const saveChip = () => {
+  if ((props.set && !chips.value.includes(currentInput.value)) || !props.set) {
+    chips.value.push(currentInput.value)
+  }
+  currentInput.value = ''
+}
+
+const deleteChip = (index) => {
+  chips.value.splice(index, 1)
+}
+
+const backspaceDelete = (event) => {
+  if (event.key === 'Backspace' && currentInput.value === '') {
+    chips.value.pop()
+  }
+}
+</script>
+
+<style scoped>
+.chip-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.chip {
+  display: flex;
+  align-items: center;
+  background-color: #e0e0e0;
+  border-radius: 16px;
+  padding: 0 8px;
+  margin: 4px;
+}
+
+.chip i {
+  cursor: pointer;
+  font-size: 18px;
+  margin-left: 4px;
+}
+
+input {
+  border: none;
+  outline: none;
+  padding: 4px;
+  margin: 4px;
+}
+
+.delete-icon {
+  cursor: pointer;
+  color: red;
+  font-weight: bold;
+  font-family: Arial, sans-serif;
+}
+</style>
--- a/src/components/utilities/GmPanel.vue
+++ b/src/components/utilities/GmPanel.vue
@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="true" :modal-width="1000" :modal-height="650">
+  <Modal :isModalOpen="gmPanelStore.isOpen" :modal-width="1000" :modal-height="650">
    <template #modalHeader>
      <h3 class="modal-title">GM Panel</h3>
      <div class="gm-selector">
@ -21,6 +21,9 @@
 import { ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import AssetManager from '@/components/utilities/assetManager/AssetManager.vue'
+import { useGmPanelStore } from '@/stores/gmPanel'
+
+const gmPanelStore = useGmPanelStore()

 let toggle = ref('asset-manager')
 </script>
--- a/src/components/utilities/GmTools.vue
+++ b/src/components/utilities/GmTools.vue
@ -1,14 +1,12 @@
 <template>
-  <Modal :isModalOpen="true" :closable="false" :is-resizable="false" :modal-width="200" :modal-height="260">
+  <Modal :isModalOpen="true" :closable="false" :is-resizable="false" :modal-width="200" :modal-height="160">
    <template #modalHeader>
      <h3 class="modal-title">GM tools</h3>
    </template>
    <template #modalBody>
      <div class="content">
+        <button class="btn-cyan w-full" type="button" @click="gmPanelStore.toggle()">Tooggle GM panel</button>
        <button class="btn-cyan w-full" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
-        <button class="btn-cyan w-full" type="button">Player manager</button>
-        <button class="btn-cyan w-full" type="button">Item manager</button>
-        <button class="btn-cyan w-full" type="button">NPC manager</button>
      </div>
    </template>
  </Modal>
@ -16,8 +14,11 @@
 <script setup lang="ts">
 import Modal from '@/components/utilities/Modal.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
+import { useGmPanelStore } from '@/stores/gmPanel'
+

 const zoneEditorStore = useZoneEditorStore()
+const gmPanelStore = useGmPanelStore()
 </script>

 <style lang="scss">
--- a/src/components/utilities/assetManager/partials/TileDetails.vue
+++ b/src/components/utilities/assetManager/partials/TileDetails.vue
@ -1,8 +1,9 @@
 <template>
  <div class="image-container">
-    <img :src="`${config.server_endpoint}/assets/tiles/${assetManagerStore.selectedTile}`" alt="Tile" />
+    <img :src="`${config.server_endpoint}/assets/tiles/${assetManagerStore.selectedTile}.png`" alt="Tile" />
  </div>
  <div class="modal-form asset-manager">
+    <ChipsInput />
    <form class="form-fields">
      <div class="form-field name">
        <label for="name">Name</label>
@ -21,6 +22,7 @@
 import config from '@/config'
 import { useAssetManagerStore } from '@/stores/assetManager'
 import { useSocketStore } from '@/stores/socket'
+import ChipsInput from '@/components/forms/ChipsInput.vue'

 const socket = useSocketStore()
 const assetManagerStore = useAssetManagerStore()
--- a/src/components/utilities/assetManager/partials/TileList.vue
+++ b/src/components/utilities/assetManager/partials/TileList.vue
@ -8,7 +8,7 @@
  </div>
  <a class="asset" :class="{ active: assetManagerStore.selectedTile === tile }" v-for="(tile, index) in assetManagerStore.tileList" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
    <div class="asset-details">
-      <img :src="`${config.server_endpoint}/assets/tiles/${tile}`" alt="Tile" />
+      <img :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" />
      <span class="asset-name">{{ tile }}</span>
    </div>
  </a>
--- a/src/components/utilities/zoneEditor/Tiles.vue
+++ b/src/components/utilities/zoneEditor/Tiles.vue
@ -7,7 +7,8 @@
      <template #modalBody>
        <div class="container tiles">
          <div class="tiles">
-            <img v-for="(tile, index) in tiles" :key="index" :src="tile" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
+            <img src="/assets/zone/blank_tile.png" alt="Blank tile" @click="zoneEditorStore.setSelectedTile('blank_tile')" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }" />
+            <img v-for="(tile, index) in tiles" :key="index" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
          </div>
        </div>
      </template>
@ -30,7 +31,7 @@ const zoneEditorStore = useZoneEditorStore()
 onMounted(async () => {
  isModalOpen.value = true
  socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
-    tiles.value = response.map((tile) => `${config.server_endpoint}/assets/tiles/${tile}`)
+    tiles.value = response;
  })
 })
 </script>
--- a/src/components/utilities/zoneEditor/ZoneEditor.vue
+++ b/src/components/utilities/zoneEditor/ZoneEditor.vue
@ -4,16 +4,15 @@
  <Controls :layer="tiles" />
  <!--  @TODO: inside asset manager we need to be able to set the originX and originY per individial asset -->
  <Container>
-    <Image :texture="'wall1'" :x="pos.position_x" :y="pos.position_y" :originY="1.13" :originX="1" />
-    <Image :texture="'wall1'" :x="pos2.position_x" :y="pos2.position_y" :originY="1.13" :originX="1" />
-    <Image :texture="'wall2'" :x="pos3.position_x" :y="pos3.position_y" :originY="1.255" :originX="1" />
+<!--    <Image :texture="'wall1'" :x="pos.position_x" :y="pos.position_y" :originY="1.13" :originX="1" />-->
+<!--    <Image :texture="'wall1'" :x="pos2.position_x" :y="pos2.position_y" :originY="1.13" :originX="1" />-->
+<!--    <Image :texture="'wall2'" :x="pos3.position_x" :y="pos3.position_y" :originY="1.255" :originX="1" />-->
  </Container>

  <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @save="save" />
  <Tiles v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile'" />
  <Decorations v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'decoration'" />
  <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
-  <GmPanel />
 </template>

 <script setup lang="ts">
@ -29,7 +28,7 @@ import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
 import Decorations from '@/components/utilities/zoneEditor/Decorations.vue'
-import { tileToWorldXY } from '@/services/zone'
+import { placeTile, tileToWorldXY } from '@/services/zone'
 import GmPanel from '@/components/utilities/GmPanel.vue'
 import { useAssetStore } from '@/stores/assets'

@ -49,8 +48,7 @@ const zoneData = new Phaser.Tilemaps.MapData({
 })

 const zone = new Phaser.Tilemaps.Tilemap(scene, zoneData)
-
-let tilesetImages: Tileset[] = [];
+const tilesetImages: Tileset[] = [];

 /**
 * Walk through tiles and add them to the zone as tilesetImages
@ -60,19 +58,14 @@ toRaw(assetStore.assets).forEach((asset) => {
  if (asset.group !== 'tiles') return
  tilesetImages.push(zone.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, tileCount++) as Tileset)
 })
+tilesetImages.push(zone.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0) as Tileset)

 const tiles = zone.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
-const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 0))
+const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 'blank_tile'))

-function placeTile(layer: TilemapLayer, x: number, y: number, tileName: string) {
-  let tileImg = zone.getTileset(tileName) as Tileset;
-  if (!tileImg) return
-  layer.putTileAt(tileImg.firstgid, x, y);
-}
+placeTile(zone, tiles, 0, 0, 'blank_tile')

-placeTile(tiles, 0, 0, 'tile_0.png')

-onMounted(() => {})
 const pos = tileToWorldXY(tiles, 1, 1)
 const pos2 = tileToWorldXY(tiles, 1, 2)
 const pos3 = tileToWorldXY(tiles, 2, 1)
@ -97,20 +90,21 @@ console.log(pos)

 function eraser(tile: Phaser.Tilemaps.Tile) {
  if (zoneEditorStore.drawMode === 'tile') {
-    placeTile(tiles, tile.x, tile.y, 'tile_0.png')
+    placeTile(zone, tiles, tile.x, tile.y, 'blank_tile')
    zoneEditorStore.updateTile(tile.x, tile.y, 0)
  }

-  if (zoneEditorStore.drawMode === 'wall') {
-    walls.putTileAt(0, tile.x, tile.y)
-    zoneEditorStore.updateWall(tile.x, tile.y, 0)
-  }
+  // if (zoneEditorStore.drawMode === 'wall') {
+  //   walls.putTileAt(0, tile.x, tile.y)
+  //   zoneEditorStore.updateWall(tile.x, tile.y, 0)
+  // }
 }

 function pencil(tile: Phaser.Tilemaps.Tile) {
  if (zoneEditorStore.drawMode === 'tile') {
-    if (zoneEditorStore.selectedTile === null) return
-    placeTile(tiles, tile.x, tile.y, zoneEditorStore.selectedTile)
+    if (!zoneEditorStore.selectedTile) return
+    console.log('placing tile', tile.x, tile.y, zoneEditorStore.selectedTile)
+    placeTile(zone, tiles, tile.x, tile.y, zoneEditorStore.selectedTile)
    // zoneEditorStore.setTiles(tile.x, tile.y, zoneEditorStore.selectedTile)
  }

@ -133,8 +127,9 @@ function save() {
  })
 }

+onMounted(() => {})
 onBeforeMount(() => {
-  // exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(tiles, x, y, 'tile_2.png')))
+  exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zone, tiles, x, y, 'blank_tile')))
  socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })
 })

--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@ -1,6 +1,8 @@
 <template>
  <div class="game-container">
+    <GmPanel />
    <GmTools />
+
    <Game class="game" :config="gameConfig" @create="createGame" v-if="!zoneEditorStore.active">
      <Scene name="main" @preload="preloadScene" @create="createScene">
        <div class="top-ui">
@ -37,7 +39,7 @@ import Chat from '@/components/gui/Chat.vue'
 import Menubar from '@/components/gui/Menu.vue'
 import GmTools from '@/components/utilities/GmTools.vue'
 import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
-import type { Asset } from '@/types'
+import GmPanel from '@/components/utilities/GmPanel.vue'

 const socket = useSocketStore()
 const zoneEditorStore = useZoneEditorStore()
@ -75,16 +77,14 @@ const preloadScene = (scene: Phaser.Scene) => {
   */
  toRaw(assetStore.assets).forEach((asset) => {
    if (asset.type === 'link') {
-      scene.load.image(asset.key, config.server_endpoint + '/assets' + asset.value)
+      scene.load.image(asset.key, config.server_endpoint + '/assets' + asset.value + '.png')
    }
    if (asset.type === 'base64') {
      scene.textures.addBase64(asset.key, asset.value)
    }
  })

-  scene.load.image('walls', '/assets/zone/walls.png')
-  scene.load.image('wall1', '/assets/zone/wall1.png')
-  scene.load.image('wall2', '/assets/zone/wall2.png')
+  scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
  scene.load.image('waypoint', '/assets/waypoint.png')
  scene.textures.addBase64(
    'character',
--- a/src/screens/Login.vue
+++ b/src/screens/Login.vue
@ -50,7 +50,7 @@ onMounted(async () => {
  /**
   * Fetch assets from the server
   */
-  await assetStore.fetchAssets();
+  assetStore.fetchAssets();

  const response = await login('ethereal', 'kanker123')

--- a/src/services/zone.ts
+++ b/src/services/zone.ts
@ -1,4 +1,7 @@
 import config from '@/config'
+import Tilemap = Phaser.Tilemaps.Tilemap
+import TilemapLayer = Phaser.Tilemaps.TilemapLayer
+import Tileset = Phaser.Tilemaps.Tileset

 export function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
  const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
@ -23,4 +26,10 @@ export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number
  return { position_x, position_y }
 }

+export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: number, tileName: string) {
+  const tileImg = zone.getTileset(tileName) as Tileset;
+  if (!tileImg) return
+  layer.putTileAt(tileImg.firstgid, x, y);
+}
+
 export function generateTilemap(scene: Phaser.Scene, width: number, height: number) {}
--- a/src/stores/gmPanel.ts
+++ b/src/stores/gmPanel.ts
@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+import type { Character } from '@/types'
+import config from '@/config'
+
+export const useGmPanelStore = defineStore('gmPanel', {
+  state: () => ({
+    isOpen: false,
+  }),
+  actions: {
+    toggle() {
+      this.isOpen = !this.isOpen
+    },
+    open() {
+      this.isOpen = true
+    },
+    close() {
+      this.isOpen = false
+    },
+  }
+})