diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml deleted file mode 100644 index 02aa24291e6550d5180d2489852c9c476f732c06..0000000000000000000000000000000000000000 --- a/.github/workflows/gh-pages.yml +++ /dev/null @@ -1,36 +0,0 @@ -name: Deploy to GitHub pages - -on: - push: - branches: - - master - workflow_dispatch: - -jobs: - pages: - runs-on: ubuntu-latest - steps: - - name: Paused until further notice - run: | - echo "This action is paused until further notice." - echo "I need to figure out how to work with the assets folder for the tile images." - echo "Currently, they are in public/tiles, which ends in a 404 when running on GitHub pages." -# - uses: actions/checkout@v2 -# - name: Setup Node.js environment -# uses: actions/setup-node@v2.4.0 -# with: -# # Version Spec of the version to use. Examples: 12.x, 10.15.1, >=10.15.0 -# node-version: '>= 16.9.1' -# # Set this option if you want the action to check for the latest available version that satisfies the version spec -# check-latest: false -# - run: npm install -g @quasar/cli -# - run: npm install -# - run: quasar build -# - run: pwd && ls -al * -# -# # DEPLOY TO GH-PAGES -# - name: Deploy to GitHub-Pages -# uses: JamesIves/github-pages-deploy-action@4.1.5 -# with: -# branch: gh-pages -# folder: dist/spa diff --git a/.github/workflows/github_release.yml b/.github/workflows/github_release.yml index 39d10cf7cb935e866dc1ebeee0ead5f9e506d261..ab9eb8287b93128010ebd4aa44998e40505ceeab 100644 --- a/.github/workflows/github_release.yml +++ b/.github/workflows/github_release.yml @@ -8,6 +8,12 @@ on: jobs: release: runs-on: ubuntu-latest + + # OUTPUTS + outputs: + newtag: ${{ steps.tag.outputs.tag }} + uploadurl: ${{ steps.create_release.outputs.upload_url }} + steps: # GET LATEST CODE - name: Checkout latest code @@ -43,7 +49,7 @@ jobs: prerelease: false - name: Setup Node.js environment - uses: actions/setup-node@v2.4.0 + uses: actions/setup-node@v2.4.1 with: # Version Spec of the version to use. Examples: 12.x, 10.15.1, >=10.15.0 node-version: '>= 16.9.1' @@ -56,24 +62,25 @@ jobs: - name: Install packages run: npm install - - name: Build project + - name: Build project for NGINX release package run: quasar build - name: List files run: pwd && ls -al * - - name: Create Build Archive tar.gz + # NGINX Archives + - name: Create NGINX Archive tar.gz run: | echo "**** Creating archive of quasar build ****" - tar -czf lttmm-${{ steps.tag.outputs.tag }}.tar.gz dist/spa - - - name: Create Build Archive zip + tar -czf lttmm-NGINX-${{ steps.tag.outputs.tag }}.tar.gz dist/spa + - name: Create NGINX Archive zip uses: papeloto/action-zip@v1 with: files: dist/spa recursive: true - dest: lttmm-${{ steps.tag.outputs.tag }}.zip + dest: lttmm-NGINX-${{ steps.tag.outputs.tag }}.zip + # Upload NGINX Assets - name: Upload Release Archive tar.gz id: upload-release-asset-archive-targz uses: actions/upload-release-asset@v1 @@ -81,10 +88,9 @@ jobs: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ steps.create_release.outputs.upload_url }} - asset_path: ./lttmm-${{ steps.tag.outputs.tag }}.tar.gz - asset_name: lttmm-${{ steps.tag.outputs.tag }}.tar.gz + asset_path: ./lttmm-NGINX-${{ steps.tag.outputs.tag }}.tar.gz + asset_name: lttmm-NGINX-${{ steps.tag.outputs.tag }}.tar.gz asset_content_type: application/gzip - - name: Upload Release Archive zip id: upload-release-asset-archive-zip uses: actions/upload-release-asset@v1 @@ -92,10 +98,17 @@ jobs: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ steps.create_release.outputs.upload_url }} - asset_path: ./lttmm-${{ steps.tag.outputs.tag }}.zip - asset_name: lttmm-${{ steps.tag.outputs.tag }}.zip + asset_path: ./lttmm-NGINX-${{ steps.tag.outputs.tag }}.zip + asset_name: lttmm-NGINX-${{ steps.tag.outputs.tag }}.zip asset_content_type: application/zip + # DEPLOY TO GH-PAGES + - name: Deploy to GitHub-Pages + uses: JamesIves/github-pages-deploy-action@4.1.5 + with: + branch: gh-pages + folder: dist/spa + # DOCKER RELATED - name: Set up QEMU uses: docker/setup-qemu-action@v1 @@ -124,3 +137,75 @@ jobs: ghcr.io/griefed/ltt-mapmaker:${{ steps.tag.outputs.tag }} griefed/ltt-mapmaker:latest griefed/ltt-mapmaker:${{ steps.tag.outputs.tag }} + + electron: + needs: release + runs-on: ${{ matrix.os }} + + strategy: + matrix: + os: [macos-latest, ubuntu-latest, windows-latest] + + steps: + # GET LATEST CODE + - name: Checkout latest code + uses: actions/checkout@master + with: + fetch-depth: 0 + + # SETUP NODE ENVIRONMENT + - name: Setup Node.js environment + uses: actions/setup-node@v2.4.1 + with: + # Version Spec of the version to use. Examples: 12.x, 10.15.1, >=10.15.0 + node-version: '>= 16.9.1' + # Set this option if you want the action to check for the latest available version that satisfies the version spec + check-latest: false + + - name: Build/release Electron app + uses: vedaprakashms/quasar_electron_build@V0.0.1 + with: + # GitHub token, automatically provided to the action + # (No need to define this secret in the repo settings) + github_token: ${{ secrets.github_token }} + + - name: List files + run: ls dist/electron + + - name: Rename folders + run: | + mv dist/electron/Let* dist/electron/lttmm-${{ matrix.os }} + + # Electron Archives + - name: Create zip + uses: ihiroky/archive-action@v1 + with: + root_dir: dist/electron/lttmm-${{ matrix.os }} + file_path: lttmm-app-${{ matrix.os }}-${{ needs.release.outputs.newtag }}.zip + - name: Create tar.gz + uses: ihiroky/archive-action@v1 + with: + root_dir: dist/electron/lttmm-${{ matrix.os }} + file_path: lttmm-app-${{ matrix.os }}-${{ needs.release.outputs.newtag }}.tar.gz + + # Upload App Assets + - name: Upload App Archive tar.gz + id: upload-release-asset-archive-targz + uses: actions/upload-release-asset@v1 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + upload_url: ${{ needs.release.outputs.uploadurl }} + asset_path: ./lttmm-app-${{ matrix.os }}-${{ needs.release.outputs.newtag }}.tar.gz + asset_name: lttmm-app-${{ matrix.os }}-${{ needs.release.outputs.newtag }}.tar.gz + asset_content_type: application/gzip + - name: Upload App Archive zip + id: upload-release-asset-archive-zip + uses: actions/upload-release-asset@v1 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + upload_url: ${{ needs.release.outputs.uploadurl }} + asset_path: ./lttmm-app-${{ matrix.os }}-${{ needs.release.outputs.newtag }}.zip + asset_name: lttmm-app-${{ matrix.os }}-${{ needs.release.outputs.newtag }}.zip + asset_content_type: application/zip diff --git a/.github/workflows/major.yml b/.github/workflows/major.yml index ca901f21e19e56dcfe4146f38fc6a92af3e67b51..396085ae2693e63caf0c4ad0454c726f2f61dc62 100644 --- a/.github/workflows/major.yml +++ b/.github/workflows/major.yml @@ -41,7 +41,7 @@ jobs: prerelease: false - name: Setup Node.js environment - uses: actions/setup-node@v2.4.0 + uses: actions/setup-node@v2.4.1 with: # Version Spec of the version to use. Examples: 12.x, 10.15.1, >=10.15.0 node-version: '>= 16.9.1' diff --git a/.github/workflows/minor.yml b/.github/workflows/minor.yml index 4b29e923166db4c902251bc81621b9b9a4a88f2c..cde8ea3982c67d77c3be5b26c92120ffce868a51 100644 --- a/.github/workflows/minor.yml +++ b/.github/workflows/minor.yml @@ -41,7 +41,7 @@ jobs: prerelease: false - name: Setup Node.js environment - uses: actions/setup-node@v2.4.0 + uses: actions/setup-node@v2.4.1 with: # Version Spec of the version to use. Examples: 12.x, 10.15.1, >=10.15.0 node-version: '>= 16.9.1' diff --git a/.github/workflows/patch.yml b/.github/workflows/patch.yml index a4f32554e9e676355e1853cb69623cbd0627bea4..6a6787be7e7439ba4bdc1171ac4b179296e4d856 100644 --- a/.github/workflows/patch.yml +++ b/.github/workflows/patch.yml @@ -41,7 +41,7 @@ jobs: prerelease: false - name: Setup Node.js environment - uses: actions/setup-node@v2.4.0 + uses: actions/setup-node@v2.4.1 with: # Version Spec of the version to use. Examples: 12.x, 10.15.1, >=10.15.0 node-version: '>= 16.9.1' diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index b966974eae560f9c69ca30da16e5cbdbe0b44f5b..aa519ee0191d8ae0940a6b1ad7bbd3aed3e79bfb 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -16,7 +16,7 @@ jobs: steps: - uses: actions/checkout@v2 - name: Setup Node.js environment - uses: actions/setup-node@v2.4.0 + uses: actions/setup-node@v2.4.1 with: # Version Spec of the version to use. Examples: 12.x, 10.15.1, >=10.15.0 node-version: '>= 16.9.1' @@ -39,3 +39,60 @@ jobs: file: ./Dockerfile platforms: linux/amd64,linux/arm/v7,linux/arm64 push: false + + electron: + needs: test + runs-on: ${{ matrix.os }} + + strategy: + matrix: + os: [macos-latest, ubuntu-latest, windows-latest] + + steps: + # GET LATEST CODE + - name: Checkout latest code + uses: actions/checkout@master + with: + fetch-depth: 0 + + - name: We are running on + run: echo matrix.os is ${{ matrix.os }} + # Either: + # 1. macos-latest + # 2. ubuntu-latest + # 3. windows-latest + + # SETUP NODE ENVIRONMENT + - name: Setup Node.js environment + uses: actions/setup-node@v2.4.1 + with: + # Version Spec of the version to use. Examples: 12.x, 10.15.1, >=10.15.0 + node-version: '>= 16.9.1' + # Set this option if you want the action to check for the latest available version that satisfies the version spec + check-latest: false + + - name: Build/release Electron app + uses: vedaprakashms/quasar_electron_build@V0.0.1 + with: + # GitHub token, automatically provided to the action + # (No need to define this secret in the repo settings) + github_token: ${{ secrets.github_token }} + + - name: List files + run: ls dist/electron + + - name: Rename folders + run: | + mv dist/electron/Let* dist/electron/lttmm-${{ matrix.os }} + + # Electron Archives + - name: Create zip + uses: ihiroky/archive-action@v1 + with: + root_dir: dist/electron/lttmm-${{ matrix.os }} + file_path: lttmm-app-$ARCHIVEOS.zip + - name: Create tar.gz + uses: ihiroky/archive-action@v1 + with: + root_dir: dist/electron/lttmm-${{ matrix.os }} + file_path: lttmm-app-$ARCHIVEOS.tar.gz diff --git a/Dockerfile b/Dockerfile index 216e0df83ca4a4e3842761415ccc566b9dff31e2..0fbd02f40d78960771d190bf03e2d069eb29d26a 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM node:16.9.1-alpine3.13 AS builder +FROM node:16.10.0-alpine3.13 AS builder RUN \ apk add \ @@ -8,7 +8,7 @@ RUN \ https://github.com/Griefed/ltt-mapmaker.git \ /tmp/lttmm && \ cd /tmp/lttmm && \ - npm install -g npm@7.17.0 && \ + npm install -g npm@7.23.0 && \ npm install -g @quasar/cli && \ npm install && \ quasar build diff --git a/Dockerfile.develop b/Dockerfile.develop new file mode 100644 index 0000000000000000000000000000000000000000..98d96c53c452d7596c2a0b27709167642def246d --- /dev/null +++ b/Dockerfile.develop @@ -0,0 +1,34 @@ +FROM node:16.10.0-alpine3.13 AS builder + +RUN \ + apk add \ + git \ + npm && \ + git clone \ + -b develop \ + https://github.com/Griefed/ltt-mapmaker.git \ + /tmp/lttmm && \ + cd /tmp/lttmm && \ + npm install -g npm@7.23.0 && \ + npm install -g @quasar/cli && \ + npm install && \ + quasar build + +FROM lsiobase/nginx:3.14 + +LABEL maintainer="Griefed <griefed@griefed.de>" + +RUN \ + mkdir -p \ + /app/lttmm && \ + echo "**** Cleanup ****" && \ + rm -rf \ + /root/.cache \ + /tmp/* + +COPY --from=builder tmp/lttmm/dist/spa/ /app/lttmm +COPY root/ / + +EXPOSE 80 443 + +VOLUME /config diff --git a/README.md b/README.md index c4d01315ca5b3127e1faa0b6796c8207fac78a6b..d033b4f5924d0bb7cdacdcc5de982c91e3785a7f 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,6 @@ download it which will contain your configuration as a Let Them Trade map. - Add infobutton/box telling users how to load their maps in-game (so far only relevant for playtests) `map fromfile` - Opens a "Open file"-dialog - Figure out how to generate random maps (very low on the priority list) -- Allow users to set the size of the map # Deploying lttmm diff --git a/package-lock.json b/package-lock.json index a1815856e8def8222d6571142f15be33adb3456d..3901ee999da3105420209529285b71b68a1e0278 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,21 +1,21 @@ { "name": "ltt-mapmaker", - "version": "1.1.0", + "version": "2.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "ltt-mapmaker", - "version": "1.1.0", + "version": "2.0.0", "dependencies": { - "@quasar/extras": "^1.11.0", - "core-js": "^3.18.0", + "@quasar/extras": "^1.11.1", + "core-js": "^3.18.1", "quasar": "^2.1.0" }, "devDependencies": { "@babel/eslint-parser": "^7.15.7", "@quasar/app": "^3.1.0", - "electron": "^14.0.1", + "electron": "^15.0.0", "electron-packager": "^15.4.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", @@ -2132,9 +2132,9 @@ } }, "node_modules/@quasar/extras": { - "version": "1.11.0", - "resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.11.0.tgz", - "integrity": "sha512-Uyi2U4XFmpqa+46MJCG2zP5SCjeLRZYx9DkfK5wHNyUYryUJ8t4P1DaAvdYPoPYGG7uyPLL+2pF83rMHHUiokA==", + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.11.1.tgz", + "integrity": "sha512-/h6EH4+7peanrgT1ErTSG2KwHuVrpnvS3lkmtuErCXrdpiV0z0DpGxdfIjsbhKqAPkAb6h5Zsdh72nBdKp1tsg==", "funding": { "type": "github", "url": "https://donate.quasar.dev" @@ -4057,9 +4057,9 @@ } }, "node_modules/core-js": { - "version": "3.18.0", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.18.0.tgz", - "integrity": "sha512-WJeQqq6jOYgVgg4NrXKL0KLQhi0CT4ZOCvFL+3CQ5o7I6J8HkT5wd53EadMfqTDp1so/MT1J+w2ujhWcCJtN7w==", + "version": "3.18.1", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.18.1.tgz", + "integrity": "sha512-vJlUi/7YdlCZeL6fXvWNaLUPh/id12WXj3MbkMw5uOyF0PfWPBNOCNbs53YqgrvtujLNlt9JQpruyIKkUZ+PKA==", "hasInstallScript": true, "funding": { "type": "opencollective", @@ -4859,13 +4859,13 @@ } }, "node_modules/electron": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/electron/-/electron-14.0.1.tgz", - "integrity": "sha512-1XILvfE5mQEBz5L/QeNfcwC3PxAIjwMyA3GR8Naw5C0IKAnHl3lAdjczbtGX8nqbcEpOAVo+4TMSpcPD3zxe8Q==", + "version": "15.0.0", + "resolved": "https://registry.npmjs.org/electron/-/electron-15.0.0.tgz", + "integrity": "sha512-LlBjN5nCJoC7EDrgfDQwEGSGSAo/o08nSP5uJxN2m+ZtNA69SxpnWv4yPgo1K08X/iQPoGhoZu6C8LYYlk1Dtg==", "dev": true, "hasInstallScript": true, "dependencies": { - "@electron/get": "^1.0.1", + "@electron/get": "^1.13.0", "@types/node": "^14.6.2", "extract-zip": "^1.0.3" }, @@ -14827,9 +14827,9 @@ } }, "@quasar/extras": { - "version": "1.11.0", - "resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.11.0.tgz", - "integrity": "sha512-Uyi2U4XFmpqa+46MJCG2zP5SCjeLRZYx9DkfK5wHNyUYryUJ8t4P1DaAvdYPoPYGG7uyPLL+2pF83rMHHUiokA==" + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.11.1.tgz", + "integrity": "sha512-/h6EH4+7peanrgT1ErTSG2KwHuVrpnvS3lkmtuErCXrdpiV0z0DpGxdfIjsbhKqAPkAb6h5Zsdh72nBdKp1tsg==" }, "@quasar/fastclick": { "version": "1.1.4", @@ -16450,9 +16450,9 @@ } }, "core-js": { - "version": "3.18.0", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.18.0.tgz", - "integrity": "sha512-WJeQqq6jOYgVgg4NrXKL0KLQhi0CT4ZOCvFL+3CQ5o7I6J8HkT5wd53EadMfqTDp1so/MT1J+w2ujhWcCJtN7w==" + "version": "3.18.1", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.18.1.tgz", + "integrity": "sha512-vJlUi/7YdlCZeL6fXvWNaLUPh/id12WXj3MbkMw5uOyF0PfWPBNOCNbs53YqgrvtujLNlt9JQpruyIKkUZ+PKA==" }, "core-js-compat": { "version": "3.17.3", @@ -17042,12 +17042,12 @@ "dev": true }, "electron": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/electron/-/electron-14.0.1.tgz", - "integrity": "sha512-1XILvfE5mQEBz5L/QeNfcwC3PxAIjwMyA3GR8Naw5C0IKAnHl3lAdjczbtGX8nqbcEpOAVo+4TMSpcPD3zxe8Q==", + "version": "15.0.0", + "resolved": "https://registry.npmjs.org/electron/-/electron-15.0.0.tgz", + "integrity": "sha512-LlBjN5nCJoC7EDrgfDQwEGSGSAo/o08nSP5uJxN2m+ZtNA69SxpnWv4yPgo1K08X/iQPoGhoZu6C8LYYlk1Dtg==", "dev": true, "requires": { - "@electron/get": "^1.0.1", + "@electron/get": "^1.13.0", "@types/node": "^14.6.2", "extract-zip": "^1.0.3" }, diff --git a/package.json b/package.json index fecffdc0534bfea4965274081de18d70dc17c945..f76aaf6c18ccbddf37d4d5e6f2db1e314ac2f344 100644 --- a/package.json +++ b/package.json @@ -1,26 +1,27 @@ { "name": "ltt-mapmaker", - "version": "1.1.0", + "version": "2.0.0", "description": "Visual Map Maker for Let Them Trade", - "productName": "Let Them Trade Map Maker", + "productName": "Let Them Trade Map-Maker", "author": "Griefed <griefed@griefed.de>", "private": true, "scripts": { "start": "quasar dev", "electron": "quasar dev -m electron", "build": "quasar build", + "ebuild": "quasar build -m electron", "lint": "eslint --ext .js,.vue,.ts ./", "test": "echo \"No test specified\" && exit 0" }, "dependencies": { - "@quasar/extras": "^1.11.0", - "core-js": "^3.18.0", + "@quasar/extras": "^1.11.1", + "core-js": "^3.18.1", "quasar": "^2.1.0" }, "devDependencies": { "@babel/eslint-parser": "^7.15.7", "@quasar/app": "^3.1.0", - "electron": "^14.0.1", + "electron": "^15.0.0", "electron-packager": "^15.4.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", diff --git a/public/tiles/barren.webp b/public/tiles/barren.webp new file mode 100644 index 0000000000000000000000000000000000000000..0c0deacadbb7e6fd930ee1563ec80cf9d529754c Binary files /dev/null and b/public/tiles/barren.webp differ diff --git a/public/tiles/clay.webp b/public/tiles/clay.webp new file mode 100644 index 0000000000000000000000000000000000000000..b461c82336f1456f1747145022acce52c716f791 Binary files /dev/null and b/public/tiles/clay.webp differ diff --git a/public/tiles/desert.webp b/public/tiles/desert.webp new file mode 100644 index 0000000000000000000000000000000000000000..3856987e510e81da2b09c45aa1077afcaf86f3ef Binary files /dev/null and b/public/tiles/desert.webp differ diff --git a/public/tiles/fish.webp b/public/tiles/fish.webp new file mode 100644 index 0000000000000000000000000000000000000000..d8a69af727937eafc9a4ccbd17f6187d31a112ee Binary files /dev/null and b/public/tiles/fish.webp differ diff --git a/public/tiles/forest.webp b/public/tiles/forest.webp new file mode 100644 index 0000000000000000000000000000000000000000..8caefa52794137c503882bcafa4f6a945eb36739 Binary files /dev/null and b/public/tiles/forest.webp differ diff --git a/public/tiles/grass.webp b/public/tiles/grass.webp new file mode 100644 index 0000000000000000000000000000000000000000..3d7cb014514b8e7fad77e7f2a5355462dd333c02 Binary files /dev/null and b/public/tiles/grass.webp differ diff --git a/public/tiles/ice.webp b/public/tiles/ice.webp new file mode 100644 index 0000000000000000000000000000000000000000..c3f4a37a38007e049de786d5df8221cad7baf7b4 Binary files /dev/null and b/public/tiles/ice.webp differ diff --git a/public/tiles/iron.webp b/public/tiles/iron.webp new file mode 100644 index 0000000000000000000000000000000000000000..aae973413499f4e87550b984e6ec2ecf4313fbab Binary files /dev/null and b/public/tiles/iron.webp differ diff --git a/public/tiles/mountain.webp b/public/tiles/mountain.webp new file mode 100644 index 0000000000000000000000000000000000000000..555818396c0ff85e2adff31fe60997e66f0868ea Binary files /dev/null and b/public/tiles/mountain.webp differ diff --git a/public/tiles/salt.webp b/public/tiles/salt.webp new file mode 100644 index 0000000000000000000000000000000000000000..e04295d8871d986e0019539d4fc1a2b8944c25f2 Binary files /dev/null and b/public/tiles/salt.webp differ diff --git a/public/tiles/stone.webp b/public/tiles/stone.webp new file mode 100644 index 0000000000000000000000000000000000000000..1522e6967441e60f0f422b6d46981be09646b481 Binary files /dev/null and b/public/tiles/stone.webp differ diff --git a/public/tiles/water.webp b/public/tiles/water.webp new file mode 100644 index 0000000000000000000000000000000000000000..cd960f6fa7568b129e8914718e0d4923e9a4526a Binary files /dev/null and b/public/tiles/water.webp differ diff --git a/public/tiles/wheat.webp b/public/tiles/wheat.webp new file mode 100644 index 0000000000000000000000000000000000000000..6bc888e3aeded2694ebc48aa6d087e7005e1f5bb Binary files /dev/null and b/public/tiles/wheat.webp differ diff --git a/public/tiles/wool.webp b/public/tiles/wool.webp new file mode 100644 index 0000000000000000000000000000000000000000..9a99842437bb108e99ec8b10689e1f563c1183dd Binary files /dev/null and b/public/tiles/wool.webp differ diff --git a/src-electron/electron-main.js b/src-electron/electron-main.js index da36e7a3226c75f6d9f2973c77e302201ef337fd..323ab3f7f3f63b121515326d85588b3f458ea7a6 100644 --- a/src-electron/electron-main.js +++ b/src-electron/electron-main.js @@ -26,8 +26,6 @@ function createWindow () { mainWindow.loadURL(process.env.APP_URL) - mainWindow.webContents.openDevTools(); - /* if (process.env.DEBUGGING) { // if on DEV or Production with debug enabled mainWindow.webContents.openDevTools() @@ -36,7 +34,7 @@ function createWindow () { mainWindow.webContents.on('devtools-opened', () => { mainWindow.webContents.closeDevTools() }) - }*/ + } nativeTheme.themeSource = 'system' diff --git a/src/App.vue b/src/App.vue index f391960091a7141b2653185ea2485ce5e2f7b6af..f6471eecbdba9eef238f0650558ef419d20522d9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,9 +2,13 @@ <router-view /> </template> <script> -import { defineComponent } from 'vue'; +import { defineComponent, provide} from 'vue'; +import store from './store'; export default defineComponent({ - name: 'App' + name: 'App', + setup() { + provide('store', store); + }, }) </script> diff --git a/src/assets/tiles/barren_tile.webp b/src/assets/tiles/barren_tile.webp new file mode 100644 index 0000000000000000000000000000000000000000..5abd9b97bae8fd11e42aa9f326826bd509702d37 Binary files /dev/null and b/src/assets/tiles/barren_tile.webp differ diff --git a/src/assets/tiles/clay_tile.webp b/src/assets/tiles/clay_tile.webp new file mode 100644 index 0000000000000000000000000000000000000000..1d00ace40ade85d7515a66766a9b36259301c392 Binary files /dev/null and b/src/assets/tiles/clay_tile.webp differ diff --git a/src/assets/tiles/desert_tile.webp b/src/assets/tiles/desert_tile.webp new file mode 100644 index 0000000000000000000000000000000000000000..9fa44cdfb6373beca5b52a361d0c6e145bce6009 Binary files /dev/null and b/src/assets/tiles/desert_tile.webp differ diff --git a/src/assets/tiles/fish_tile.webp b/src/assets/tiles/fish_tile.webp new file mode 100644 index 0000000000000000000000000000000000000000..278213302dcb21f80eab14ab1c2ce53520acfc8d Binary files /dev/null and b/src/assets/tiles/fish_tile.webp differ diff --git a/src/assets/tiles/forest_tile.webp b/src/assets/tiles/forest_tile.webp new file mode 100644 index 0000000000000000000000000000000000000000..07a1604fc79f5a8d29d233f1218c0aad50752471 Binary files /dev/null and b/src/assets/tiles/forest_tile.webp differ diff --git a/src/assets/tiles/grass_tile.webp b/src/assets/tiles/grass_tile.webp new file mode 100644 index 0000000000000000000000000000000000000000..49a27ba23f2764c9db1f0590092db7e4c3a43c61 Binary files /dev/null and b/src/assets/tiles/grass_tile.webp differ diff --git a/src/assets/tiles/ice_tile.webp b/src/assets/tiles/ice_tile.webp new file mode 100644 index 0000000000000000000000000000000000000000..294085965d8b3f6086906a8b429afe4a7be23f9a Binary files /dev/null and b/src/assets/tiles/ice_tile.webp differ diff --git a/src/assets/tiles/iron_tile.webp b/src/assets/tiles/iron_tile.webp new file mode 100644 index 0000000000000000000000000000000000000000..f73121d06e4823caec5226e553f428116da11e38 Binary files /dev/null and b/src/assets/tiles/iron_tile.webp differ diff --git a/src/assets/tiles/mountain_tile.webp b/src/assets/tiles/mountain_tile.webp new file mode 100644 index 0000000000000000000000000000000000000000..095009a985bb1d54320e037b7ddcf0a83ed0dea7 Binary files /dev/null and b/src/assets/tiles/mountain_tile.webp differ diff --git a/src/assets/tiles/salt_tile.webp b/src/assets/tiles/salt_tile.webp new file mode 100644 index 0000000000000000000000000000000000000000..731f13775b6fc6ed89c9860039c5ded2364ca550 Binary files /dev/null and b/src/assets/tiles/salt_tile.webp differ diff --git a/src/assets/tiles/stone_tile.webp b/src/assets/tiles/stone_tile.webp new file mode 100644 index 0000000000000000000000000000000000000000..814e40ac23927f12bd9c5690c4c55c1f2f1c36b5 Binary files /dev/null and b/src/assets/tiles/stone_tile.webp differ diff --git a/src/assets/tiles/water_tile.webp b/src/assets/tiles/water_tile.webp new file mode 100644 index 0000000000000000000000000000000000000000..e5c10da854a133e2bdb4d8f0886759320bf0dc05 Binary files /dev/null and b/src/assets/tiles/water_tile.webp differ diff --git a/src/assets/tiles/wheat_tile.webp b/src/assets/tiles/wheat_tile.webp new file mode 100644 index 0000000000000000000000000000000000000000..386d45993738ca19cf41516515aa9777bb07fe78 Binary files /dev/null and b/src/assets/tiles/wheat_tile.webp differ diff --git a/src/assets/tiles/wool_tile.webp b/src/assets/tiles/wool_tile.webp new file mode 100644 index 0000000000000000000000000000000000000000..8a0a509a0ccf9e143770e40926a06afbac8cc302 Binary files /dev/null and b/src/assets/tiles/wool_tile.webp differ diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 1508865ca97ea8bea0526ef43b8d4e98b9147d55..2062937b621f8ab8db9d87bc248b420fa18dd8d5 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -1,298 +1,97 @@ <template> - <div id="parent" class="hexagon" :style="backgroundImage"> - <div class="hexTop"></div> - <div class="hexBottom"></div> + <div id="parent" class="hexagon" + :class="[tile.typeId,isViewRadiusBorder(), ((tile.x == store.state.centerX) && (tile.y == store.state.centerY))?'centerTile':'']"> + <div class="hexTop" :class="((tile.x == store.state.centerX) && (tile.y == store.state.centerY))?'centerTop':''"></div> + <div class="hexBottom" :class="((tile.x == store.state.centerX) && (tile.y == store.state.centerY))?'centerBottom':''"></div> <q-btn-dropdown class="buttonshift without-icon custom-width" - :color="color" - :label="label" - :text-color="textcolor" + :label="tile.typeId" align="center" size="11px" dropdown-icon=" " v-model="menuState"> <q-list> - <q-item clickable v-close-popup @click="barren"> + <q-item v-for="type in types" v-bind:key="type" clickable v-close-popup @click="setType(type)"> <q-item-section avatar> <q-avatar> - <img src="~assets/tiles/barren.webp"/> + <img :src="'./tiles/'+type+'.webp'" /> </q-avatar> </q-item-section> <q-item-section> - <q-item-label>Barren</q-item-label> + <q-item-label>{{type.toUpperCase()}}</q-item-label> </q-item-section> </q-item> - - <q-item clickable v-close-popup @click="clay"> - <q-item-section avatar> - <q-avatar> - <img src="~assets/tiles/clay.webp"/> - </q-avatar> - </q-item-section> - <q-item-section> - <q-item-label>Clay</q-item-label> - </q-item-section> - </q-item> - - <q-item clickable v-close-popup @click="desert"> - <q-item-section avatar> - <q-avatar> - <img src="~assets/tiles/desert.webp"/> - </q-avatar> - </q-item-section> - <q-item-section> - <q-item-label>Desert</q-item-label> - </q-item-section> - </q-item> - - <q-item clickable v-close-popup @click="fish"> - <q-item-section avatar> - <q-avatar> - <img src="~assets/tiles/fish.webp"/> - </q-avatar> - </q-item-section> - <q-item-section> - <q-item-label>Fish</q-item-label> - </q-item-section> - </q-item> - - <q-item clickable v-close-popup @click="forest"> - <q-item-section avatar> - <q-avatar> - <img src="~assets/tiles/wood.webp"/> - </q-avatar> - </q-item-section> - <q-item-section> - <q-item-label>Forest</q-item-label> - </q-item-section> - </q-item> - - <q-item clickable v-close-popup @click="grass"> - <q-item-section avatar> - <q-avatar> - <img src="~assets/tiles/grass.webp"/> - </q-avatar> - </q-item-section> - <q-item-section> - <q-item-label>Grass</q-item-label> - </q-item-section> - </q-item> - - <q-item clickable v-close-popup @click="ice"> - <q-item-section avatar> - <q-avatar> - <img src="~assets/tiles/ice.webp"/> - </q-avatar> - </q-item-section> - <q-item-section> - <q-item-label>Ice</q-item-label> - </q-item-section> - </q-item> - - <q-item clickable v-close-popup @click="iron"> - <q-item-section avatar> - <q-avatar> - <img src="~assets/tiles/iron.webp"/> - </q-avatar> - </q-item-section> - <q-item-section> - <q-item-label>Iron</q-item-label> - </q-item-section> - </q-item> - - <q-item clickable v-close-popup @click="mountain"> - <q-item-section avatar> - <q-avatar> - <img src="~assets/tiles/mountain.webp"/> - </q-avatar> - </q-item-section> - <q-item-section> - <q-item-label>Mountain</q-item-label> - </q-item-section> - </q-item> - - <q-item clickable v-close-popup @click="salt"> - <q-item-section avatar> - <q-avatar> - <img src="~assets/tiles/salt.webp"/> - </q-avatar> - </q-item-section> - <q-item-section> - <q-item-label>Salt</q-item-label> - </q-item-section> - </q-item> - - <q-item clickable v-close-popup @click="stone"> - <q-item-section avatar> - <q-avatar> - <img src="~assets/tiles/stone.webp"/> - </q-avatar> - </q-item-section> - <q-item-section> - <q-item-label>Stone</q-item-label> - </q-item-section> - </q-item> - - <q-item clickable v-close-popup @click="water"> - <q-item-section avatar> - <q-avatar> - <img src="~assets/tiles/water.webp"/> - </q-avatar> - </q-item-section> - <q-item-section> - <q-item-label>Water</q-item-label> - </q-item-section> - </q-item> - - <q-item clickable v-close-popup @click="wheat"> - <q-item-section avatar> - <q-avatar> - <img src="~assets/tiles/wheat.webp"/> - </q-avatar> - </q-item-section> - <q-item-section> - <q-item-label>Wheat</q-item-label> - </q-item-section> - </q-item> - - <q-item clickable v-close-popup @click="wool"> - <q-item-section avatar> - <q-avatar> - <img src="~assets/tiles/wool.webp"/> - </q-avatar> - </q-item-section> - <q-item-section> - <q-item-label>Wool</q-item-label> - </q-item-section> - </q-item> - </q-list> </q-btn-dropdown> - - </div> + <q-tooltip :disable="$q.platform.is.mobile"> + {{tile.x+'/'+tile.y+": "+ tile.typeId}} + </q-tooltip> + </div> </template> <script> -import {ref} from "vue"; +import {inject, ref} from "vue"; export default { - setup () { + props:{ + tile: Object, + typeValue: String + }, + setup (props) { + var types = ["barren", "clay", "desert", "fish", "forest", "grass", "ice", "iron", "mountain", "salt", "stone", "water", "wheat", "wool"]; + const store = inject('store'); + + const isViewRadiusBorder = function() { + var borders = []; + //leftBorder + if( props.tile.x == (this.store.state.centerX-this.store.state.radiusX+1) && + ((this.store.state.centerY-this.store.state.radiusY+1) <= props.tile.y && props.tile.y <= (this.store.state.centerY+this.store.state.radiusY-1))){ + borders.push("viewBorderLeft"); + } + if( props.tile.x == (this.store.state.centerX+this.store.state.radiusX-1) && + ((this.store.state.centerY-this.store.state.radiusY+1) <= props.tile.y && props.tile.y <= (this.store.state.centerY+this.store.state.radiusY-1))){ + borders.push("viewBorderRight") + } + if( props.tile.y == (this.store.state.centerY+this.store.state.radiusY-1) && + ((this.store.state.centerX-this.store.state.radiusX+1) <= props.tile.x && props.tile.x <= (this.store.state.centerX+this.store.state.radiusX-1))){ + borders.push("viewBorderTop") + } + if( props.tile.y == (this.store.state.centerY-this.store.state.radiusY+1) && + ((this.store.state.centerX-this.store.state.radiusX+1) <= props.tile.x && props.tile.x <= (this.store.state.centerX+this.store.state.radiusX-1))){ + borders.push("viewBorderBottom") + } + + return borders; + } + return { + isViewRadiusBorder, + store, + types, menuState: ref(false), label: 'grass', color: 'green-8', textcolor: 'white', backgroundImage: 'background-image: url(./tiles/grass_tile.webp);' } + }, + emits: ['update:typeValue'], + updated(){ + }, methods: { - barren () { - console.log('Clicked on Barren'); - this.label = 'barren'; - this.color = 'brown-6'; - this.textcolor = 'white'; - this.backgroundImage = 'background-image: url(./tiles/barren_tile.webp);' - }, - clay () { - console.log('Clicked on Clay'); - this.label = 'clay'; - this.color = 'orange-6'; - this.textcolor = 'white'; - this.backgroundImage = 'background-image: url(./tiles/clay_tile.webp);' - }, - desert () { - console.log('Clicked on Desert'); - this.label = 'desert'; - this.color = 'yellow-4'; - this.textcolor = 'black'; - this.backgroundImage = 'background-image: url(./tiles/desert_tile.webp);' - }, - fish () { - console.log('Clicked on Fish'); - this.label = 'fish'; - this.color = 'amber-12'; - this.textcolor = 'black'; - this.backgroundImage = 'background-image: url(./tiles/fish_tile.webp);' - }, - forest () { - console.log('Clicked on Forest'); - this.label = 'forest'; - this.color = 'green-10'; - this.textcolor = 'white'; - this.backgroundImage = 'background-image: url(./tiles/forest_tile.webp);' - }, - grass () { - console.log('Clicked on Grass'); - this.label = 'grass'; - this.color = 'green-8'; - this.textcolor = 'white'; - this.backgroundImage = 'background-image: url(./tiles/grass_tile.webp);' - }, - ice () { - console.log('Clicked on Ice'); - this.label = 'ice'; - this.color = 'cyan-2'; - this.textcolor = 'black'; - this.backgroundImage = 'background-image: url(./tiles/ice_tile.webp);' - }, - iron () { - console.log('Clicked on Iron'); - this.label = 'iron'; - this.color = 'blue-grey-5'; - this.textcolor = 'white'; - this.backgroundImage = 'background-image: url(./tiles/iron_tile.webp);' - }, - mountain () { - console.log('Clicked on Mountain'); - this.label = 'mountain'; - this.color = 'grey-13'; - this.textcolor = 'white'; - this.backgroundImage = 'background-image: url(./tiles/mountain_tile.webp);' - }, - salt () { - console.log('Clicked on Salt'); - this.label = 'salt'; - this.color = 'grey-4'; - this.textcolor = 'black'; - this.backgroundImage = 'background-image: url(./tiles/salt_tile.webp);' - }, - stone () { - console.log('Clicked on Stone'); - this.label = 'stone'; - this.color = 'blue-grey-13'; - this.textcolor = 'white'; - this.backgroundImage = 'background-image: url(./tiles/stone_tile.webp);' - }, - water () { - console.log('Clicked on Water'); - this.label = 'water'; - this.color = 'blue-10'; - this.textcolor = 'white'; - this.backgroundImage = 'background-image: url(./tiles/water_tile.webp);' - }, - wheat () { - console.log('Clicked on Wheat'); - this.label = 'wheat'; - this.color = 'amber-12'; - this.textcolor = 'black'; - this.backgroundImage = 'background-image: url(./tiles/wheat_tile.webp);' - }, - wool () { - console.log('Clicked on Wool'); - this.label = 'wool'; - this.color = 'brown-13'; - this.textcolor = 'black'; - this.backgroundImage = 'background-image: url(./tiles/wool_tile.webp);' + setType(type){ + this.$emit('update:typeValue', type); }, } } </script> -<style> +<style lang="scss"> .buttonshift { z-index: 1001; margin-top: 15px; @@ -317,6 +116,8 @@ button.without-icon i { border-right: solid 3px #333333; } + + .hexTop, .hexBottom { position: absolute; @@ -377,4 +178,185 @@ button.without-icon i { z-index: 2; background: inherit; } + +.viewBorderLeft { + z-index: 1001; + border-left: dashed 3px blue; +} + +.viewBorderRight { + z-index: 1001; + border-right: dashed 3px blue; +} + +.viewBorderTop { + z-index: 1001; + .hexTop { + border-top: dashed 3px blue; + border-right: dashed 3px blue; + } +} +.viewBorderBottom { + z-index: 1001; + .hexBottom { + border-bottom: dashed 3px blue; + border-left: dashed 3px blue; + } +} + +.notShifted{ + .viewBorderLeft{ + .hexTop{ + border-top: dashed 3px blue; + } + .hexBottom{ + border-left: dashed 3px blue; + } + .centerTop { + border-top: solid 4.2426px red; + border-right: solid 4.2426px red; + } + + .centerBottom { + border-bottom: solid 4.2426px red; + border-left: solid 4.2426px red; + } + } +} +.shifted{ + .viewBorderRight{ + .hexTop{ + border-right: dashed 3px blue; + } + .hexBottom{ + border-bottom: dashed 3px blue; + } + .centerTop { + border-top: solid 4.2426px red; + border-right: solid 4.2426px red; + } + + .centerBottom { + border-bottom: solid 4.2426px red; + border-left: solid 4.2426px red; + } + } +} + +.barren { + background-image: url("../assets/tiles/barren_tile.webp"); + button { + background-color: $brown-6; + color: white; + } +} + +.clay { + background-image: url("../assets/tiles/clay_tile.webp"); + button { + background-color: $orange-6; + color: white; + } +} + +.desert { + background-image: url("../assets/tiles/desert_tile.webp"); + button { + background-color: $yellow-4; + color: black; + } +} +.fish { + background-image: url("../assets/tiles/fish_tile.webp"); + button { + background-color: $amber-12; + color: black; + } +} +.forest { + background-image: url("../assets/tiles/forest_tile.webp"); + button { + background-color: $green-10; + color: white; + } +} +.grass { + background-image: url("../assets/tiles/grass_tile.webp"); + button { + background-color: $green-8; + color: white; + } +} +.ice { + background-image: url("../assets/tiles/ice_tile.webp"); + button { + background-color: $cyan-2; + color: black; + } +} +.iron { + background-image: url("../assets/tiles/iron_tile.webp"); + button { + background-color: $blue-grey-5; + color: white; + } +} +.mountain { + background-image: url("../assets/tiles/mountain_tile.webp"); + button { + background-color: $grey-13; + color: white; + } +} +.salt { + background-image: url("../assets/tiles/salt_tile.webp"); + button { + background-color: $grey-4; + color: black; + } +} +.stone { + background-image: url("../assets/tiles/stone_tile.webp"); + button { + background-color: $blue-grey-13; + color: white; + } +} +.water { + background-image: url("../assets/tiles/water_tile.webp"); + button { + background-color: $blue-10; + color: white; + } +} +.wheat { + background-image: url("../assets/tiles/wheat_tile.webp"); + button { + background-color: $amber-12; + color: black; + } +} +.wool { + background-image: url("../assets/tiles/wool_tile.webp"); + button { + background-color: $brown-13; + color: black; + } +} + +.centerTop { + border-top: solid 4.2426px red; + border-right: solid 4.2426px red; +} + +.centerBottom { + border-bottom: solid 4.2426px red; + border-left: solid 4.2426px red; +} + +.centerTile { + z-index: 1002; + border-left: solid 3px red; + border-right: solid 3px red; +} </style> diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue index ccf93b0c4c95448bc41f6b799760495a81da14e0..87873b68862d80a7e494193244372756339948fb 100644 --- a/src/layouts/MainLayout.vue +++ b/src/layouts/MainLayout.vue @@ -13,97 +13,124 @@ Let Them Trade Map-Maker </q-toolbar-title> - <q-btn-dropdown label="Settings" color="secondary"> - <div class="row no-wrap q-pa-md"> - <div class="column" style="width: 600px;"> - <div class="text-h6 q-mb-md">Initial View Radius</div> - <q-item> - <q-item-section avatar> - <q-icon size="30px" color="secondary" name="mdi-arrow-expand-horizontal" /> - </q-item-section> - <q-item-section> - <q-slider v-model="radiusX" :min="1" :max="24" label color="secondary" :step="1" label-always/> - </q-item-section> - </q-item> - - <q-item> - <q-item-section avatar> - <q-icon size="30px" color="secondary" name="mdi-arrow-expand-vertical" /> - </q-item-section> - <q-item-section> - <q-slider v-model="radiusY" :min="1" :max="14" label color="secondary" :step="1" label-always/> - </q-item-section> - </q-item> - - <q-separator inset spaced /> - - <div class="text-h6 q-mb-md">Initial View Center</div> - <q-item> - <q-item-section avatar> - <q-icon size="30px" color="secondary" name="mdi-arrow-expand-horizontal" /> - </q-item-section> - <q-item-section> - <q-slider v-model="centerX" :min="-24" :max="24" label color="secondary" :step="1" label-always/> - </q-item-section> - </q-item> - - <q-item> - <q-item-section avatar> - <q-icon size="30px" color="secondary" name="mdi-arrow-expand-vertical" /> - </q-item-section> - <q-item-section> - <q-slider v-model="centerY" :min="-14" :max="14" label color="secondary" :step="1" label-always/> - </q-item-section> - </q-item> - - <q-separator inset spaced /> - - <div class="text-h6 q-mb-md">Scrollbar Settings</div> - <div class="row no-wrap q-pa-md"> - <div>Horizontal Color and Opacity - <q-color v-model="verticalColor" class="my-picker"/> - </div> + <template v-if="store.state.lttMap"> + <q-btn class="q-mr-xs" color="secondary" label="New Map" @click='confirmMapNew = true'> + <q-tooltip :disable="$q.platform.is.mobile"> + NewMap + </q-tooltip> + </q-btn> + + <q-separator inset spaced /> + + <q-dialog v-model="confirmMapNew" persistent> + <q-card> + <q-card-section class="row items-center"> + <span class="q-ml-sm"> + Make sure you have saved your map before generating or loading another one! + Clear Map?</span> + </q-card-section> + + <q-card-actions align="right"> + <q-btn flat label="Cancel" color="primary" v-close-popup /> + <q-btn flat label="Clear Map" color="primary" @click='newMap()' v-close-popup /> + </q-card-actions> + </q-card> + </q-dialog> + + + <q-btn-dropdown label="Settings" color="secondary"> + <div class="row no-wrap q-pa-md"> + <div class="column" style="width: 600px;"> + <div class="text-h6 q-mb-md">Initial View Radius</div> <q-item> - <div class="column"> <q-item-section avatar> - <q-icon size="30px" style="margin-left: 5px;" color="secondary" name="opacity" /> + <q-icon size="30px" color="secondary" name="mdi-arrow-expand-horizontal" /> </q-item-section> <q-item-section> - <q-slider vertical reverse v-model="verticalOpacity" :min="0.0" :max="1" :step="0.1" label color="secondary" label-always/> + <q-slider v-model="store.state.radiusX" :min="1" :max="Math.floor(store.state.mapSizeX/2)" label color="secondary" :step="1" label-always/> + </q-item-section> + </q-item> + + <q-item> + <q-item-section avatar> + <q-icon size="30px" color="secondary" name="mdi-arrow-expand-vertical" /> + </q-item-section> + <q-item-section> + <q-slider v-model="store.state.radiusY" :min="1" :max="Math.floor(store.state.mapSizeY/2)" label color="secondary" :step="1" label-always/> </q-item-section> - </div> </q-item> <q-separator inset spaced /> - <div>Horizontal Color and Opacity - <q-color v-model="horizontalColor" class="my-picker"/> - </div> + <div class="text-h6 q-mb-md">Initial View Center</div> + <q-item> + <q-item-section avatar> + <q-icon size="30px" color="secondary" name="mdi-arrow-expand-horizontal" /> + </q-item-section> + <q-item-section> + <q-slider v-model="store.state.centerX" :min="store.state.minX" :max="store.state.maxX" label color="secondary" :step="1" label-always/> + </q-item-section> + </q-item> + <q-item> - <div class="column"> + <q-item-section avatar> + <q-icon size="30px" color="secondary" name="mdi-arrow-expand-vertical" /> + </q-item-section> + <q-item-section> + <q-slider v-model="store.state.centerY" :min="store.state.minY" :max="store.state.maxY" label color="secondary" :step="1" label-always/> + </q-item-section> + </q-item> + + <q-separator inset spaced /> + + <div class="text-h6 q-mb-md">Scrollbar Settings</div> + <div class="row no-wrap q-pa-md"> + <div>Horizontal Color and Opacity + <q-color v-model="verticalColor" class="my-picker"/> + </div> + <q-item> + <div class="column"> <q-item-section avatar> <q-icon size="30px" style="margin-left: 5px;" color="secondary" name="opacity" /> </q-item-section> <q-item-section> - <q-slider vertical reverse v-model="horizontalOpacity" :min="0.0" :max="1" :step="0.1" label color="secondary" label-always/> + <q-slider vertical reverse v-model="verticalOpacity" :min="0.0" :max="1" :step="0.1" label color="secondary" label-always/> </q-item-section> + </div> + </q-item> + + <q-separator inset spaced /> + + <div>Horizontal Color and Opacity + <q-color v-model="horizontalColor" class="my-picker"/> </div> - </q-item> - </div> + <q-item> + <div class="column"> + <q-item-section avatar> + <q-icon size="30px" style="margin-left: 5px;" color="secondary" name="opacity" /> + </q-item-section> + <q-item-section> + <q-slider vertical reverse v-model="horizontalOpacity" :min="0.0" :max="1" :step="0.1" label color="secondary" label-always/> + </q-item-section> + </div> + </q-item> + </div> + </div> </div> - </div> - </q-btn-dropdown> + </q-btn-dropdown> - <q-separator inset spaced /> + <q-separator inset spaced /> - <q-btn class="q-mr-xs" color="secondary" label="Download Map" @click='generateMap()'> - <q-tooltip :disable="$q.platform.is.mobile"> - Download current configuration as a JSON-file. - </q-tooltip> - </q-btn> + <q-btn class="q-mr-xs" color="secondary" label="Download Map" @click='generateMap()'> + <q-tooltip :disable="$q.platform.is.mobile"> + Download current configuration as a JSON-file. + </q-tooltip> + </q-btn> - <q-separator inset spaced /> + <q-separator inset spaced /> + + </template> <q-btn :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'" @@ -119,93 +146,80 @@ <q-separator inset spaced /> - <q-btn @click="alert = true" color="secondary" dense label="Made by Griefed"> + <q-btn @click="alert = true" color="secondary" dense label="About LTTMM"> <q-tooltip :disable="$q.platform.is.mobile"> - Open a little About :) + Open a little About! 🙂 </q-tooltip> - <q-avatar> - <img alt="header" src="~assets/Griefed.webp" width="50"> - </q-avatar> + </q-btn> <q-dialog v-model="alert"> <q-card style="max-width: 1000px;width:750px"> <q-card-section> - <div class="text-h6">About Griefed and Let Them Trade Map Maker</div> + <div class="text-h6 text-center">About Let Them Trade Map-Maker, Let Them Trade, and Spaceflower</div> + <div class="text-center">Let Them Trade Map-Maker is not affiliated with Spaceflower in any way, shape, or form.</div> </q-card-section> <q-card-section align="center"> - <q-btn style="margin-right: 15px" type="a" href="https://github.com/Griefed"> - <q-icon size="50px" color="info" name="mdi-github"></q-icon> - <q-tooltip :disable="$q.platform.is.mobile"> - Visit my GitHub profile! - </q-tooltip> - </q-btn> - <q-btn style="margin-right: 15px" type="a" href="https://blog.griefed.de"> - <q-icon size="50px" color="info" name="mdi-wordpress"></q-icon> - <q-tooltip :disable="$q.platform.is.mobile"> - Visit my blog! - </q-tooltip> - </q-btn> - <q-btn style="margin-right: 15px" type="a" href="https://griefed.de"> - <q-icon size="50px" color="info" name="mdi-web"></q-icon> + <q-btn style="margin-right: 15px" type="a" target="_blank" href="https://github.com/Griefed/ltt-mapmaker"> + <q-icon size="50px" color="dark" name="mdi-github"></q-icon> <q-tooltip :disable="$q.platform.is.mobile"> - Visit my website! + LTTMM on GitHub! </q-tooltip> </q-btn> </q-card-section> - <q-card-section class="q-pt-none"> - Visual map maker for Let Them Trade by Spaceflower, made with VueJS/Quasar.<br> + <q-card-section class="q-pt-none text-center"> + A visual map maker for the game <b>Let Them Trade</b>, by <b>Spaceflower</b>, made with VueJS/Quasar.<br> Simply click on a button in the center of a tile and select the type you want it to change to.<br> - Do so for the whole map. After your map looks good to you, hit the "DOWNLOAD MAP"-button in the top-right.<br> - This will generate a .json-file and download it which will contain your configuration as a Let Them Trade map. + Do so for the whole map. After your map looks good to you, hit the "<b>DOWNLOAD MAP</b>"-button in the menubar at the top.<br> + This will generate and download a <b>.json</b>-file containing your Let Them Trade map. </q-card-section> <q-card-section> - <div class="text-h6">All Things Spaceflower!</div> + <div class="text-h6 text-center">All Things Spaceflower!</div> </q-card-section> <q-card-section align="center"> <q-btn style="margin-right: 15px" type="a" href="https://store.steampowered.com/app/1313290/Let_Them_Trade/"> - <q-icon size="50px" color="black" name="mdi-steam"></q-icon> + <q-icon size="50px" color="red-7" name="mdi-steam"></q-icon> <q-tooltip :disable="$q.platform.is.mobile"> Let Them Trade on Steam! </q-tooltip> </q-btn> <q-btn style="margin-right: 15px" type="a" href="https://www.twitch.tv/spaceflowerde"> - <q-icon size="50px" color="black" name="mdi-twitch"></q-icon> + <q-icon size="50px" color="red-7" name="mdi-twitch"></q-icon> <q-tooltip :disable="$q.platform.is.mobile"> Spaceflower on Twitch! </q-tooltip> </q-btn> <q-btn style="margin-right: 15px" type="a" href="https://spaceflower.de/"> - <q-icon size="50px" color="black" name="mdi-web"></q-icon> + <q-icon size="50px" color="red-7" name="mdi-web"></q-icon> <q-tooltip :disable="$q.platform.is.mobile"> Visit the homepage of Spaceflower! </q-tooltip> </q-btn> <q-btn style="margin-right: 15px" type="a" href="https://www.tiktok.com/@spaceflowerde?"> - <q-icon size="50px" color="black" name="tiktok"></q-icon> + <q-icon size="50px" color="red-7" name="tiktok"></q-icon> <q-tooltip :disable="$q.platform.is.mobile"> Visit Spaceflower on TikTok! </q-tooltip> </q-btn> <q-btn style="margin-right: 15px" type="a" href="https://twitter.com/spaceflowerde"> - <q-icon size="50px" color="black" name="mdi-twitter"></q-icon> + <q-icon size="50px" color="red-7" name="mdi-twitter"></q-icon> <q-tooltip :disable="$q.platform.is.mobile"> Visit Spaceflower on Twitter! </q-tooltip> </q-btn> <q-btn style="margin-right: 15px" type="a" href="https://www.facebook.com/SpaceflowerDE"> - <q-icon size="50px" color="black" name="mdi-facebook"></q-icon> + <q-icon size="50px" color="red-7" name="mdi-facebook"></q-icon> <q-tooltip :disable="$q.platform.is.mobile"> Visit Spaceflower on Facebook! </q-tooltip> </q-btn> <q-btn style="margin-right: 15px" type="a" href="https://discordapp.com/invite/yaTeefS"> - <q-icon size="50px" color="black" name="mdi-discord"></q-icon> + <q-icon size="50px" color="red-7" name="mdi-discord"></q-icon> <q-tooltip :disable="$q.platform.is.mobile"> Join their Discord server! </q-tooltip> @@ -241,83 +255,31 @@ </template> <script> -import { defineComponent, ref } from 'vue' +import { defineComponent, ref, reactive, inject } from 'vue' import { openURL } from 'quasar' export default defineComponent({ name: 'MainLayout', setup () { - const reticulating = ["Adding","Hidden","Agendas","Adjusting","Bell","Curves","Aesthesizing","Industrial","Areas","Aligning","Covariance","Matrices", - "Applying","Feng","Shui","Shaders","Applying","Theatre","Soda","Layer","Asserting","Packed","Exemplars","Attempting","to","Lock","Back-Buffer", - "Binding","Sapling","Root","System","Breeding","Fauna","Building","Data","Trees","Bureacritizing","Bureaucracies","Calculating","Inverse","Probability","Matrices", - "Calculating","Llama","Expectoration","Trajectory","Calibrating","Blue","Skies","Charging","Ozone","Layer","Coalescing","Cloud","Formations", - "Cohorting","Exemplars","Collecting","Meteor","Particles","Compounding","Inert","Tessellations","Compressing","Fish","Files", - "Computing","Optimal","Bin","Packing","Concatenating","Sub-Contractors","Containing","Existential","Buffer","Debarking","Ark","Ramp", - "Debunching","Unionized","Commercial","Services","Deciding","What","Message","to","Display","Next","Decomposing","Singular","Values", - "Decrementing","Tectonic","Plates","Deleting","Ferry","Routes","Depixelating","Inner","Mountain","Surface","Back","Faces","Depositing","Slush","Funds", - "Destabilizing","Economic","Indicators","Determining","Width","of","Blast","Fronts","Deunionizing","Bulldozers","Dicing","Models", - "Diluting","Livestock","Nutrition","Variables","Downloading","Satellite","Terrain","Data","Exposing","Flash","Variables","to","Streak","System", - "Extracting","Resources","Factoring","Pay","Scale","Fixing","Election","Outcome","Matrix","Flood-Filling","Ground","Water","Flushing","Pipe","Network", - "Gathering","Particle","Sources","Generating","Jobs","Gesticulating","Mimes","Graphing","Whale","Migration","Hiding","Willio","Webnet","Mask", - "Implementing","Impeachment","Routine","Increasing","Accuracy","of","RCI","Simulators","Increasing","Magmafacation","Initializing","My","Sim","Tracking","Mechanism", - "Initializing","Rhinoceros","Breeding","Timetable","Initializing","Robotic","Click-Path","AI","Inserting","Sublimated","Messages", - "Integrating","Curves","Integrating","Illumination","Form","Factors","Integrating","Population","Graphs","Iterating","Cellular","Automata", - "Lecturing","Errant","Subsystems","Mixing","Genetic","Pool","Modeling","Object","Components","Mopping","Occupant","Leaks","Normalizing","Power", - "Obfuscating","Quigley","Matrix","Overconstraining","Dirty","Industry","Calculations","Partitioning","City","Grid","Singularities", - "Perturbing","Matrices","Pixalating","Nude","Patch","Polishing","Water","Highlights","Populating","Lot","Templates","Preparing","Sprites","for","Random","Walks", - "Prioritizing","Landmarks","Projecting","Law","Enforcement","Pastry","Intake","Realigning","Alternate","Time","Frames","Reconfiguring","User","Mental","Processes", - "Relaxing","Splines","Removing","Road","Network","Speed","Bumps","Removing","Texture","Gradients","Removing","Vehicle","Avoidance","Behavior", - "Resolving","GUID","Conflict","Retracting","Phong","Shader","Retrieving","from","Back","Store","Reverse","Engineering","Image","Consultant", - "Routing","Neural","Network","Infanstructure","Scattering","Rhino","Food","Sources","Scrubbing","Terrain","Searching","for","Llamas", - "Seeding","Architecture","Simulation","Parameters","Sequencing","Particles","Setting","Advisor","Moods","Setting","Inner","Deity","Indicators", - "Setting","Universal","Physical","Constants","Sonically","Enhancing","Occupant-Free","Timber","Speculating","Stock","Market","Indices", - "Splatting","Transforms","Stratifying","Ground","Layers","Sub-Sampling","Water","Data","Synthesizing","Gravity","Synthesizing","Wavelets", - "Time-Compressing","Simulator","Clock","Unable","to","Reveal","Current","Activity","Weathering","Buildings","Zeroing","Crime","Network", - "Reticulating","Splines"]; - let radiusY = 1; - let radiusX = 1; - let centerX = 0; - let centerY = 0; + const store = inject('store'); return { + confirmMapNew: ref(false), + store, visible: ref(true), alert: ref(false), verticalColor: ref('#000000'), horizontalColor: ref('#000000'), verticalOpacity: ref(1), horizontalOpacity: ref(1), - radiusX, - radiusY, - centerX, - centerY, - reticulating } }, methods: { - generateMap() { - //console.log(this.getMapName()); - //console.log(this.getMapId()); - //console.log(this.getMap()); - let map = "{\"mapId\": \"" + this.getMapId() + "\",\"mapName\": \"" + this.getMapName() + "\",\"initialViewRadiusX\": " + this.radiusX + "," + "\"initialViewRadiusY\": " + this.radiusY + "," + "\"initialViewCenterX\": " + this.centerX + "," + "\"initialViewCenterY\": " + this.centerY + ",\"tileSet\": [" + this.getMap() + "]}"; - this.downloadMap(this.getMapId() + ".json", JSON.stringify(JSON.parse(map), null, 2)); - }, - getMapId() { - return 'e1-m.lttmm'; + newMap(){ + this.confirmMapNew = false; + this.store.methods.reset(); }, - getMapName() { - return this.reticulating[Math.floor(Math.random() * this.reticulating.length) - 1] + " " + this.reticulating[Math.floor(Math.random() * this.reticulating.length) - 1] + " " + this.reticulating[Math.floor(Math.random() * this.reticulating.length) - 1]; - }, - getMap() { - let tiles = ""; - for (let y = -14; y < 15; y++) { - for (let x = -24; x < 25; x++) { - //console.log("x is " + x.toString() + " and y is " + y.toString()); - tiles = tiles + "{\"x\": " + x.toString() + ",\"y\": " + y.toString() + ",\"z\": 0,\"typeId\": \"" + this.getLabel(x.toString() + "_" + y.toString()) + "\"}"; - } - } - return tiles.replaceAll("}{","},{"); - }, - getLabel(elementId) { - return document.getElementById(elementId).innerText.replace("change_history", "").toLowerCase(); + generateMap() { + this.downloadMap(this.store.methods.getMapId() + ".json", JSON.stringify(this.store.methods.exportMap(), null, 2)); }, downloadMap(mapName, map) { var element = document.createElement('a'); diff --git a/src/pages/Index.vue b/src/pages/Index.vue index 4a063eb0a8c70f429933be5233e8b194cdaf9a65..21e72f663e3ba05fb757f003ffdb58e2a40f2a55 100644 --- a/src/pages/Index.vue +++ b/src/pages/Index.vue @@ -1,1814 +1,108 @@ <template> - - <div class="row no-wrap firstRow"> <!-- 1 ROW --> - <Tile id="-24_14" style="z-index: 1000;"></Tile> - <Tile id="-23_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-22_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-21_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-20_14" style="z-index: 1000; margin-left: -2px"></Tile> - - <Tile id="-19_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-18_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-17_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-16_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-15_14" style="z-index: 1000; margin-left: -2px"></Tile> - - <Tile id="-14_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-13_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-12_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-11_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-10_14" style="z-index: 1000; margin-left: -2px"></Tile> - - <Tile id="-9_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-8_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-7_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-6_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-5_14" style="z-index: 1000; margin-left: -2px"></Tile> - - <Tile id="-4_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-3_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-2_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-1_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="0_14" style="z-index: 1000; margin-left: -2px"></Tile> - - <Tile id="1_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="2_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="3_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="4_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="5_14" style="z-index: 1000; margin-left: -2px"></Tile> - - <Tile id="6_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="7_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="8_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="9_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="10_14" style="z-index: 1000; margin-left: -2px"></Tile> - - <Tile id="11_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="12_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="13_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="14_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="15_14" style="z-index: 1000; margin-left: -2px"></Tile> - - <Tile id="15_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="16_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="17_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="18_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="19_14" style="z-index: 1000; margin-left: -2px"></Tile> - - <Tile id="20_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="21_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="22_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="23_14" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="24_14" style="z-index: 1000; margin-left: -2px"></Tile> - </div> - - <div class="row no-wrap moveup"> <!-- 2 ROW --> - <Tile id="-24_13" style="z-index: 1000;" ></Tile> - <Tile id="-23_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-22_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-21_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-20_13" style="z-index: 1000; margin-left: -2px"></Tile> - - <Tile id="-19_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-18_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-17_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-16_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-15_13" style="z-index: 1000; margin-left: -2px"></Tile> - - <Tile id="-14_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-13_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-12_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-11_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-10_13" style="z-index: 1000; margin-left: -2px"></Tile> - - <Tile id="-9_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-8_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-7_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-6_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-5_13" style="z-index: 1000; margin-left: -2px"></Tile> - - <Tile id="-4_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-3_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-2_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="-1_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="0_13" style="z-index: 1000; margin-left: -2px"></Tile> - - <Tile id="1_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="2_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="3_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="4_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="5_13" style="z-index: 1000; margin-left: -2px"></Tile> - - <Tile id="6_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="7_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="8_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="9_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="10_13" style="z-index: 1000; margin-left: -2px"></Tile> - - <Tile id="11_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="12_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="13_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="14_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="15_13" style="z-index: 1000; margin-left: -2px"></Tile> - - <Tile id="15_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="16_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="17_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="18_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="19_13" style="z-index: 1000; margin-left: -2px"></Tile> - - <Tile id="20_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="21_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="22_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="23_13" style="z-index: 1000; margin-left: -2px"></Tile> - <Tile id="24_13" style="z-index: 1000; margin-left: -2px"></Tile> - </div> - - <div class="row no-wrap moveup shifted"> <!-- 3 ROW --> - <Tile id="-24_12" style="z-index: 1000" ></Tile> - <Tile id="-23_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_12" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_12" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_12" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_12" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_12" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_12" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_12" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_12" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_12" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_12" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup"> <!-- 4 ROW --> - <Tile id="-24_11" style="z-index: 1000;" ></Tile> - <Tile id="-23_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_11" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_11" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_11" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_11" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_11" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_11" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_11" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_11" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_11" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_11" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup shifted"> <!-- 5 ROW --> - <Tile id="-24_10" style="z-index: 1000" ></Tile> - <Tile id="-23_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_10" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_10" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_10" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_10" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_10" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_10" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_10" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_10" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_10" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_10" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup"> <!-- 6 ROW --> - <Tile id="-24_9" style="z-index: 1000;" ></Tile> - <Tile id="-23_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_9" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_9" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_9" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_9" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_9" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_9" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_9" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_9" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_9" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_9" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup shifted"> <!-- 7 ROW --> - <Tile id="-24_8" style="z-index: 1000" ></Tile> - <Tile id="-23_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_8" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_8" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_8" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_8" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_8" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_8" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_8" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_8" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_8" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_8" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup"> <!-- 8 ROW --> - <Tile id="-24_7" style="z-index: 1000;" ></Tile> - <Tile id="-23_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_7" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_7" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_7" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_7" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_7" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_7" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_7" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_7" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_7" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_7" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup shifted"> <!-- 9 ROW --> - <Tile id="-24_6" style="z-index: 1000" ></Tile> - <Tile id="-23_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_6" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_6" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_6" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_6" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_6" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_6" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_6" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_6" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_6" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_6" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup"> <!-- 10 ROW --> - <Tile id="-24_5" style="z-index: 1000;" ></Tile> - <Tile id="-23_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_5" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_5" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_5" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_5" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_5" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_5" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_5" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_5" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_5" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_5" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup shifted"> <!-- 11 ROW --> - <Tile id="-24_4" style="z-index: 1000" ></Tile> - <Tile id="-23_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_4" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_4" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_4" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_4" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_4" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_4" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_4" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_4" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_4" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_4" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup"> <!-- 12 ROW --> - <Tile id="-24_3" style="z-index: 1000;" ></Tile> - <Tile id="-23_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_3" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_3" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_3" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_3" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_3" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_3" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_3" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_3" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_3" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_3" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup shifted"> <!-- 13 ROW --> - <Tile id="-24_2" style="z-index: 1000" ></Tile> - <Tile id="-23_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_2" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_2" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_2" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_2" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_2" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_2" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_2" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_2" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_2" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_2" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup"> <!-- 14 ROW --> - <Tile id="-24_1" style="z-index: 1000;" ></Tile> - <Tile id="-23_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_1" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_1" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_1" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_1" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_1" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_1" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_1" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_1" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_1" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_1" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup shifted"> <!-- 15 ROW --> - <Tile id="-24_0" style="z-index: 1000" ></Tile> - <Tile id="-23_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_0" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_0" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_0" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_0" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_0" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_0" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_0" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_0" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_0" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_0" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_0" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup"> <!-- 16 ROW --> - <Tile id="-24_-1" style="z-index: 1000;" ></Tile> - <Tile id="-23_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_-1" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup shifted"> <!-- 17 ROW --> - <Tile id="-24_-2" style="z-index: 1000" ></Tile> - <Tile id="-23_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_-2" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup"> <!-- 18 ROW --> - <Tile id="-24_-3" style="z-index: 1000;" ></Tile> - <Tile id="-23_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_-3" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup shifted"> <!-- 19 ROW --> - <Tile id="-24_-4" style="z-index: 1000" ></Tile> - <Tile id="-23_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_-4" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup"> <!-- 20 ROW --> - <Tile id="-24_-5" style="z-index: 1000;" ></Tile> - <Tile id="-23_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_-5" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup shifted"> <!-- 21 ROW --> - <Tile id="-24_-6" style="z-index: 1000" ></Tile> - <Tile id="-23_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_-6" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup"> <!-- 22 ROW --> - <Tile id="-24_-7" style="z-index: 1000;" ></Tile> - <Tile id="-23_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_-7" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup shifted"> <!-- 23 ROW --> - <Tile id="-24_-8" style="z-index: 1000" ></Tile> - <Tile id="-23_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_-8" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup"> <!-- 24 ROW --> - <Tile id="-24_-9" style="z-index: 1000;" ></Tile> - <Tile id="-23_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_-9" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup shifted"> <!-- 25 ROW --> - <Tile id="-24_-10" style="z-index: 1000" ></Tile> - <Tile id="-23_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_-10" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup"> <!-- 26 ROW --> - <Tile id="-24_-11" style="z-index: 1000;" ></Tile> - <Tile id="-23_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_-11" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup shifted"> <!-- 27 ROW --> - <Tile id="-24_-12" style="z-index: 1000" ></Tile> - <Tile id="-23_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_-12" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup"> <!-- 28 ROW --> - <Tile id="-24_-13" style="z-index: 1000;" ></Tile> - <Tile id="-23_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_-13" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> - - <div class="row no-wrap moveup shifted"> <!-- 29 ROW --> - <Tile id="-24_-14" style="z-index: 1000" ></Tile> - <Tile id="-23_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-22_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-21_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-20_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-19_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-18_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-17_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-16_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-15_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-14_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-13_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-12_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-11_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-10_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-9_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-8_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-7_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-6_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-5_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="-4_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-3_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-2_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="-1_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="0_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="1_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="2_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="3_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="4_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="5_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="6_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="7_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="8_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="9_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="10_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="11_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="12_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="13_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="14_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="15_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="15_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="16_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="17_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="18_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="19_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - - <Tile id="20_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="21_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="22_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="23_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - <Tile id="24_-14" style="z-index: 1000; margin-left: -2px" ></Tile> - </div> + <span v-if="store.state.lttMap"> + <span v-for="(xRow, index) in store.state.lttMap" :key="index"> + <div class="row no-wrap" + v-bind:class="[{ + firstRow: (index == 0), + moveup: (index !=0), + }, (index != 0 && !(index%2))?'shifted':'notShifted']" + > + <Tile + v-for="(tile, i) in xRow" + :tile="tile" + :typeValue="tile.typeId" + @update:typeValue="tile.typeId = $event" + v-bind:id="tile.x+'_'+tile.y" + :class="{tileMl: (i!=0)?1:0}" + v-bind:key="i"> + </Tile> + </div> + </span> + </span> + <span v-else> + <div class="row no-wrap q-pa-md absolute-center"> + <q-card> + <q-card-section> + <div class="column" style="width: 600px;"> + <div class="text-h6 q-mb-md text-black">New Map Dimensions</div> + <q-item> + <q-item-section avatar> + <q-icon size="30px" color="secondary" name="mdi-arrow-expand-horizontal" /> + </q-item-section> + <q-item-section> + <q-slider v-model="store.state.mapSizeX" :min="1" :max="101" label color="secondary" :step="1" label-always/> + </q-item-section> + </q-item> + + <q-item> + <q-item-section avatar> + <q-icon size="30px" color="secondary" name="mdi-arrow-expand-vertical" /> + </q-item-section> + <q-item-section> + <q-slider v-model="store.state.mapSizeY" :min="1" :max="101" label color="secondary" :step="1" label-always/> + </q-item-section> + </q-item> + <q-btn class="q-mr-xs" color="secondary" label="Generate New Map" @click='createMap()'> + <q-tooltip :disable="$q.platform.is.mobile"> + Generate new map with size set above + </q-tooltip> + </q-btn> + </div> + </q-card-section> + + <q-card-section> + <div class="column"> + <div class="text-h6 q-mb-md text-black">Load Existing Map</div> + <q-input + v-model="mapString" + filled + placeholder="Paste Map Data" + type="textarea" + input-class="pastCodeArea" + ></q-input> + <q-btn class="q-mr-xs" color="secondary" label="Load Map From Filedata" @click='loadMapData()'> + <q-tooltip :disable="$q.platform.is.mobile"> + Load Map From Data + </q-tooltip> + </q-btn> + </div> + </q-card-section> + </q-card> + </div> + </span> </template> <script> -import { defineComponent } from 'vue'; +import { defineComponent, inject, ref } from 'vue'; import Tile from "../components/Tile.vue"; export default defineComponent({ setup() { + + const store = inject('store'); + + var mapString = ref('') + + const loadMapData = function() { + store.methods.loadMap(JSON.parse(mapString.value)); + }; + + const createMap= function(){ + store.methods.generateMap(); + }; + return { + mapString, + store, + createMap, + loadMapData } }, + + methods:{ + + }, components: { Tile }, @@ -1826,6 +120,10 @@ export default defineComponent({ margin-left: 49px; } +.tileMl { + margin-left: -2px; +} + .moveup { margin-top: -31px; } diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 0000000000000000000000000000000000000000..28758a8b903754449091da2d4f92c64ab5402f6e --- /dev/null +++ b/src/store/index.js @@ -0,0 +1,162 @@ +import {reactive} from 'vue'; + +const state = reactive({ + maxX: 0, + minX: 0, + maxY: 0, + minY: 0, + mapSizeX: 1, + mapSizeY: 1, + centerX: 0, + centerY: 0, + radiusY: 1, + radiusX: 1, + mapID: 'e1-m.lttmm', + mapName: '', + lttMap: null, +}) + +const methods = { + + reset() { + state.mapSizeX = 1; + state.mapSizeY = 1; + state.centerX = 0; + state.centerY = 0; + state.radiusY = 1; + state.radiusX = 1; + state.mapID = 'e1-m.lttmm'; + state.mapName = ''; + state.lttMap = null; + }, + + exportMap() { + return{ + mapID: state.mapID, + mapName: state.mapName, + initialViewRadiusX: state.centerX, + initialViewRadiusY: state.centerY, + initialVieCenterX: state.radiusX, + initialViewCenterY: state.radiusY, + tileSet: state.lttMap.flat()} + }, + + loadMap(mapData) { + let tileSetData = this.getMultDimArrayFromFlattendArray(mapData.tileSet); + + state.mapID = mapData.mapID; + state.mapName = mapData.mapName; + state.mapSizeX = tileSetData.mapSizeX; + state.mapSizeY = tileSetData.mapSizeY; + state.lttMap = tileSetData.map; + state.maxX = tileSetData.maxX; + state.minX = tileSetData.minX; + state.maxY = tileSetData.maxY; + state.minY = tileSetData.minY; + state.radiusX = mapData.initialViewRadiusX; + state.radiusY = mapData.initialViewRadiusY; + state.centerX = mapData.initialViewCenterX; + state.centerY = mapData.initialViewCenterY; + }, + + getMultDimArrayFromFlattendArray(arr){ + let maxX,minX,maxY,minY, mapSizeX, mapSizeY; + let sortArr = arr.sort((a,b)=>{ + if(a.y == b.y){ + return a.x - b.x; + } else { + return b.y-a.y + } + }) + let arrSize = sortArr.length; + minX = sortArr[0].x; + maxY = sortArr[0].y; + minY = sortArr[arrSize-1].y; + maxX = sortArr[arrSize-1].x; + mapSizeX = Math.abs(minX)+Math.abs(maxX)+1; + mapSizeY = Math.abs(minY)+Math.abs(maxY)+1; + + let map = []; + for(let m = 0; m < mapSizeY; m++){ + let xArr = []; + for(let i = 0; i < mapSizeX; i++){ + xArr.push(sortArr[(m*mapSizeX)+i]); + } + map.push(xArr); + } + return {mapSizeX, mapSizeY,maxX, minX,maxY, minY, map}; + }, + + + getMapName() { + const reticulating = ["Adding","Hidden","Agendas","Adjusting","Bell","Curves","Aesthesizing","Industrial","Areas","Aligning","Covariance","Matrices", + "Applying","Feng","Shui","Shaders","Applying","Theatre","Soda","Layer","Asserting","Packed","Exemplars","Attempting","to","Lock","Back-Buffer", + "Binding","Sapling","Root","System","Breeding","Fauna","Building","Data","Trees","Bureacritizing","Bureaucracies","Calculating","Inverse","Probability","Matrices", + "Calculating","Llama","Expectoration","Trajectory","Calibrating","Blue","Skies","Charging","Ozone","Layer","Coalescing","Cloud","Formations", + "Cohorting","Exemplars","Collecting","Meteor","Particles","Compounding","Inert","Tessellations","Compressing","Fish","Files", + "Computing","Optimal","Bin","Packing","Concatenating","Sub-Contractors","Containing","Existential","Buffer","Debarking","Ark","Ramp", + "Debunching","Unionized","Commercial","Services","Deciding","What","Message","to","Display","Next","Decomposing","Singular","Values", + "Decrementing","Tectonic","Plates","Deleting","Ferry","Routes","Depixelating","Inner","Mountain","Surface","Back","Faces","Depositing","Slush","Funds", + "Destabilizing","Economic","Indicators","Determining","Width","of","Blast","Fronts","Deunionizing","Bulldozers","Dicing","Models", + "Diluting","Livestock","Nutrition","Variables","Downloading","Satellite","Terrain","Data","Exposing","Flash","Variables","to","Streak","System", + "Extracting","Resources","Factoring","Pay","Scale","Fixing","Election","Outcome","Matrix","Flood-Filling","Ground","Water","Flushing","Pipe","Network", + "Gathering","Particle","Sources","Generating","Jobs","Gesticulating","Mimes","Graphing","Whale","Migration","Hiding","Willio","Webnet","Mask", + "Implementing","Impeachment","Routine","Increasing","Accuracy","of","RCI","Simulators","Increasing","Magmafacation","Initializing","My","Sim","Tracking","Mechanism", + "Initializing","Rhinoceros","Breeding","Timetable","Initializing","Robotic","Click-Path","AI","Inserting","Sublimated","Messages", + "Integrating","Curves","Integrating","Illumination","Form","Factors","Integrating","Population","Graphs","Iterating","Cellular","Automata", + "Lecturing","Errant","Subsystems","Mixing","Genetic","Pool","Modeling","Object","Components","Mopping","Occupant","Leaks","Normalizing","Power", + "Obfuscating","Quigley","Matrix","Overconstraining","Dirty","Industry","Calculations","Partitioning","City","Grid","Singularities", + "Perturbing","Matrices","Pixalating","Nude","Patch","Polishing","Water","Highlights","Populating","Lot","Templates","Preparing","Sprites","for","Random","Walks", + "Prioritizing","Landmarks","Projecting","Law","Enforcement","Pastry","Intake","Realigning","Alternate","Time","Frames","Reconfiguring","User","Mental","Processes", + "Relaxing","Splines","Removing","Road","Network","Speed","Bumps","Removing","Texture","Gradients","Removing","Vehicle","Avoidance","Behavior", + "Resolving","GUID","Conflict","Retracting","Phong","Shader","Retrieving","from","Back","Store","Reverse","Engineering","Image","Consultant", + "Routing","Neural","Network","Infanstructure","Scattering","Rhino","Food","Sources","Scrubbing","Terrain","Searching","for","Llamas", + "Seeding","Architecture","Simulation","Parameters","Sequencing","Particles","Setting","Advisor","Moods","Setting","Inner","Deity","Indicators", + "Setting","Universal","Physical","Constants","Sonically","Enhancing","Occupant-Free","Timber","Speculating","Stock","Market","Indices", + "Splatting","Transforms","Stratifying","Ground","Layers","Sub-Sampling","Water","Data","Synthesizing","Gravity","Synthesizing","Wavelets", + "Time-Compressing","Simulator","Clock","Unable","to","Reveal","Current","Activity","Weathering","Buildings","Zeroing","Crime","Network", + "Reticulating","Splines"]; + return reticulating[ Math.floor( Math.random() * reticulating.length) - 1] + " " + + reticulating[Math.floor(Math.random() * reticulating.length) - 1] + " " + + reticulating[Math.floor(Math.random() * reticulating.length) - 1]; + }, + + getMapId() { + return 'e1-m.lttmm'; + }, + + generateMap() { + let defaultTile = "grass"; + let map = []; + + state.minX = -Math.floor(state.mapSizeX/2); + if(state.mapSizeX%2){ + state.maxX = Math.floor(state.mapSizeX/2); + }else{ + state.maxX = Math.floor(state.mapSizeX/2)+1; + } + + state.minY = -Math.floor(state.mapSizeY/2); + if(state.mapSizeY%2){ + state.maxY = Math.floor(state.mapSizeY/2); + }else{ + state.maxY = Math.floor(state.mapSizeY/2)+1; + } + + for(let m = state.maxY; m >= state.minY; m--){ + let xArr = []; + for(let i = state.minX; i <= state.maxX; i++){ + xArr.push({ x: i, y: m, z: 0, typeId: defaultTile }); + } + map.push(xArr); + } + state.lttMap = map; + state.mapName = this.getMapName(); + } + +} + +export default { + state, + methods +} diff --git a/src/store/store-flag.d.ts b/src/store/store-flag.d.ts new file mode 100644 index 0000000000000000000000000000000000000000..7677175b003245a3d07a7608d33d8e501042d52d --- /dev/null +++ b/src/store/store-flag.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +// THIS FEATURE-FLAG FILE IS AUTOGENERATED, +// REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING +import "quasar/dist/types/feature-flag"; + +declare module "quasar/dist/types/feature-flag" { + interface QuasarFeatureFlags { + store: true; + } +}