Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Map Generator #15

Merged
merged 17 commits into from
Nov 27, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
278 changes: 139 additions & 139 deletions package-lock.json

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,13 @@
"@types/jsdom": "^21.1.7",
"@types/lodash": "^4.17.13",
"@types/mocha": "^10.0.10",
"@typescript-eslint/eslint-plugin": "^8.15.0",
"@typescript-eslint/parser": "^8.15.0",
"@typescript-eslint/eslint-plugin": "^8.16.0",
"@typescript-eslint/parser": "^8.16.0",
"@vite-pwa/assets-generator": "^0.2.6",
"@vitejs/plugin-legacy": "^5.4.3",
"@vitejs/plugin-vue": "^5.2.0",
"@vitest/coverage-istanbul": "^2.1.5",
"@vitest/eslint-plugin": "^1.1.10",
"@vitejs/plugin-vue": "^5.2.1",
"@vitest/coverage-istanbul": "^2.1.6",
"@vitest/eslint-plugin": "^1.1.11",
"@vue/eslint-config-typescript": "^14.1.4",
"babel-plugin-istanbul": "^7.0.0",
"chai": "^5.1.2",
Expand All @@ -54,6 +54,6 @@
"typescript": "^5.7.2",
"vite": "^5.4.11",
"vite-plugin-pwa": "^0.21.0",
"vitest": "^2.1.5"
"vitest": "^2.1.6"
}
}
Binary file added resources/sector-map-indexes.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/sector-map-indexes.pptx
Binary file not shown.
Binary file added src/assets/icons/map-deep-space-sector/11a.webp
Binary file not shown.
Binary file added src/assets/icons/map-deep-space-sector/11b.webp
Binary file not shown.
Binary file added src/assets/icons/map-deep-space-sector/12a.webp
Binary file not shown.
Binary file added src/assets/icons/map-deep-space-sector/12b.webp
Binary file not shown.
Binary file added src/assets/icons/map-deep-space-sector/13a.webp
Binary file not shown.
Binary file not shown.
Binary file added src/assets/icons/map-deep-space-sector/14a.webp
Binary file not shown.
Binary file added src/assets/icons/map-deep-space-sector/14b.webp
Binary file not shown.
Binary file added src/assets/icons/map-deep-space-sector/15a.webp
Binary file not shown.
Binary file added src/assets/icons/map-deep-space-sector/15b.webp
Binary file not shown.
Binary file added src/assets/icons/map-deep-space-sector/16a.webp
Binary file not shown.
Binary file not shown.
Binary file added src/assets/icons/map-deep-space-sector/17a.webp
Binary file not shown.
Binary file added src/assets/icons/map-deep-space-sector/17b.webp
Binary file not shown.
Binary file added src/assets/icons/map-deep-space-sector/18a.webp
Binary file not shown.
Binary file added src/assets/icons/map-deep-space-sector/18b.webp
Binary file not shown.
Binary file added src/assets/icons/map-interspace/asteroid.webp
Binary file not shown.
Binary file added src/assets/icons/map-interspace/eclipse.webp
Binary file not shown.
Binary file added src/assets/icons/map-interspace/empty.webp
Binary file not shown.
Binary file added src/assets/icons/map-interspace/proto.webp
Binary file not shown.
Binary file added src/assets/icons/map-interspace/rebellion.webp
Binary file not shown.
Binary file added src/assets/icons/map-interspace/tfmars.webp
Binary file not shown.
Binary file added src/assets/icons/map-interspace/twilight.webp
Binary file not shown.
Binary file added src/assets/icons/map-space-sector/01.webp
Binary file not shown.
Binary file added src/assets/icons/map-space-sector/02.webp
Binary file not shown.
Binary file added src/assets/icons/map-space-sector/03.webp
Binary file not shown.
Binary file added src/assets/icons/map-space-sector/04.webp
Binary file not shown.
Binary file added src/assets/icons/map-space-sector/05-outline.webp
Binary file not shown.
Binary file added src/assets/icons/map-space-sector/05.webp
Binary file not shown.
Binary file added src/assets/icons/map-space-sector/06-outline.webp
Binary file not shown.
Binary file added src/assets/icons/map-space-sector/06.webp
Binary file not shown.
Binary file added src/assets/icons/map-space-sector/07-outline.webp
Binary file not shown.
Binary file added src/assets/icons/map-space-sector/07.webp
Binary file not shown.
Binary file added src/assets/icons/map-space-sector/08.webp
Binary file not shown.
Binary file added src/assets/icons/map-space-sector/09.webp
Binary file not shown.
Binary file added src/assets/icons/map-space-sector/10.webp
Binary file not shown.
188 changes: 188 additions & 0 deletions src/components/setup/MapRandomizer.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,188 @@
<template>
<button class="btn btn-sm btn-secondary me-2" @click="mapGenerator.randomize()">{{t('action.randomize')}}</button>
<button class="btn btn-sm btn-secondary me-2" @click="mapGenerator.reset()">{{t('action.reset')}}</button>
<div class="row mt-3">
<div class="col">
<div class="mapWrapper" :class="{'alert':!isValid, 'alert-danger':!isValid}">
<p v-if="!isValid" v-html="t('mapRandomizer.invalidMap')"></p>
<div class="map" :class="{large:!twoPlayerMap,small:twoPlayerMap}">
<div v-for="spaceSector of spaceSectors" :key="spaceSector.id" class="spaceSector" @click="spaceSector.rotate()"
:style="`transform: rotate(${spaceSector.rotation*60}deg);`">
<AppIcon type="map-space-sector" :name="`${spaceSector.id + (spaceSector.outline ? '-outline' : '')}`" extension="webp"/>
<svg class="overlay">
<defs>
<polygon id="spaceSectorArrow" points="8,5 13,10 3,10" style="fill:#fff" />
</defs>
<circle cx="74.75" cy="81" r="25" class="circle" />
<text x="61" y="90" class="id" :class="{outline:spaceSector.outline}">{{spaceSector.id}}</text>
<use x="68" y="55" xlink:href="#spaceSectorArrow"/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col">
<div class="alert alert-info" v-html="t('mapRandomizer.externalMapGenerator')"></div>
</div>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'
import AppIcon from '../structure/AppIcon.vue'
import { useStateStore } from '@/store/state'
import MapGenerator from '@/services/map/MapGenerator';
import SpaceSector from '@/services/map/SpaceSector';

export default defineComponent({
name: 'MapRandomizer',
components: {
AppIcon
},
setup() {
const { t } = useI18n()
const state = useStateStore()

const { playerCount, botCount } = state.setup.playerSetup
const totalPlayerCount = playerCount + botCount
const mapGenerator = new MapGenerator(totalPlayerCount)

return { t, state, totalPlayerCount, mapGenerator }
},
computed: {
spaceSectors() : readonly SpaceSector[] {
return this.mapGenerator.spaceSectors
},
isValid() : boolean {
return this.mapGenerator.isValid()
},
twoPlayerMap() : boolean {
return this.totalPlayerCount < 3
}
},
methods: {
}
})
</script>

<style lang="scss" scoped>
.mapWrapper {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.map {
.spaceSector {
position: absolute;
display: inline-block;
width: 150px;
filter: drop-shadow(0 0 0.25rem #fff);
cursor: pointer;
user-select: none;
img {
width: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
.circle {
fill:#000;
filter: drop-shadow(0 0 0.25rem #fff);
}
.id {
fill: #fff;
font-size: 1.5rem;
font-weight: bold;
&.outline {
fill: none;
stroke: #fff;
stroke-width: 1px;
font-weight: 800;
}
}
}
}
&.large {
position: relative;
height: 440px;
width: 570px;
transform: translate(-18px,38px) rotate(30deg);
margin-bottom: 76px;
.spaceSector:nth-child(1) {
left: 84px;
}
.spaceSector:nth-child(2) {
top: 16px;
left: calc(84px + 140px);
}
.spaceSector:nth-child(3) {
top: 32px;
left: calc(84px + 140px + 140px);
}
.spaceSector:nth-child(4) {
top: 114px;
}
.spaceSector:nth-child(5) {
top: calc(114px + 16px);
left: 140px;
}
.spaceSector:nth-child(6) {
top: calc(114px + 32px);
left: calc(140px + 140px);
}
.spaceSector:nth-child(7) {
top: calc(114px + 48px);
left: calc(140px + 140px + 140px);
}
.spaceSector:nth-child(8) {
top: calc(244px);
left: 56px;
}
.spaceSector:nth-child(9) {
top: calc(244px + 16px);
left: calc(56px + 140px);
}
.spaceSector:nth-child(10) {
top: calc(244px + 32px);
left: calc(56px + 140px + 140px);
}
}
&.small {
position: relative;
height: 440px;
width: 430px;
transform: translate(-10px,2px) rotate(30deg);
margin-bottom: -8px;
.spaceSector:nth-child(1) {
left: 84px;
}
.spaceSector:nth-child(2) {
top: 16px;
left: calc(84px + 140px);
}
.spaceSector:nth-child(3) {
top: 114px;
}
.spaceSector:nth-child(4) {
top: calc(114px + 16px);
left: 140px;
}
.spaceSector:nth-child(5) {
top: calc(114px + 32px);
left: calc(140px + 140px);
}
.spaceSector:nth-child(6) {
top: calc(244px);
left: 56px;
}
.spaceSector:nth-child(7) {
top: calc(244px + 16px);
left: calc(56px + 140px);
}
}
}
</style>
59 changes: 36 additions & 23 deletions src/components/setup/TilesSetup.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@
<span v-html="t('setupTiles.scoringRoundTiles')"></span>:<br/>
<AppIcon v-for="tile of scoringRoundTiles" :key="tile" type="scoring-round" :name="tile" class="scoringRoundTileIcon"/><br/>
<button class="btn btn-sm btn-secondary me-2" data-bs-toggle="modal" data-bs-target="#scoringRoundTilesModal">{{t('setupTiles.select')}}</button>
<button class="btn btn-sm btn-secondary me-2" @click="randomizeScoringRoundTiles">{{t('setupTiles.randomize')}}</button>
<button class="btn btn-sm btn-secondary me-2" @click="randomizeScoringRoundTiles">{{t('action.randomize')}}</button>
</li>
<li>
<span v-html="t('setupTiles.scoringFinalTiles')"></span>:<br/>
<AppIcon v-for="tile of scoringFinalTiles" :key="tile" type="scoring-final" :name="tile" class="scoringFinalTileIcon"/><br/>
<button class="btn btn-sm btn-secondary me-2" data-bs-toggle="modal" data-bs-target="#scoringFinalTilesModal">{{t('setupTiles.select')}}</button>
<button class="btn btn-sm btn-secondary me-2" @click="randomizeScoringFinalTiles">{{t('setupTiles.randomize')}}</button>
<button class="btn btn-sm btn-secondary me-2" @click="randomizeScoringFinalTiles">{{t('action.randomize')}}</button>
</li>
<li>
<span v-html="t('setupTiles.roundBooster', {count:roundBoosterCount})"></span><br/>
Expand All @@ -25,31 +25,38 @@
<button class="btn btn-outline-secondary me-2 mb-2" data-bs-toggle="collapse" data-bs-target="#randomizedSetup">
{{t('setupTiles.tileRandomizer.title')}} &#x25BC;
</button>
<a href="https://rygg-gaard.no/gaia/" target="_blank" rel="noopener" class="btn btn-outline-secondary me-2 mb-2">
{{t('setupTiles.map')}}
</a>
<button class="btn btn-outline-secondary me-2 mb-2" data-bs-toggle="collapse" data-bs-target="#mapRandomizer">
{{t('setupTiles.map')}} &#x25BC;
</button>
</div>
<div class="collapse mt-2" id="randomizedSetup">
<div class="alert alert-secondary fst-italic">
<span v-html="t('setupTiles.tileRandomizer.notice')"></span>
<button class="btn btn-sm btn-secondary ms-2" @click="randomizeRoundBoostersResearchBoard">{{t('setupTiles.randomize')}}</button>
</div>
<div id="randomizerCollapseParent">
<div class="collapse mt-2" id="randomizedSetup" data-bs-parent="#randomizerCollapseParent">
<div class="alert alert-secondary fst-italic">
<span v-html="t('setupTiles.tileRandomizer.notice')"></span>
<button class="btn btn-sm btn-secondary ms-2" @click="randomizeRoundBoostersResearchBoard">{{t('action.randomize')}}</button>
</div>

<h5 v-html="t('setupTiles.tileRandomizer.roundBoosters')"></h5>
<AppIcon v-for="id of roundBoosterTiles" :key="id" type="round-booster" :name="id.toString()" class="roundBoosterTile"/>
<h5 v-html="t('setupTiles.tileRandomizer.roundBoosters')"></h5>
<AppIcon v-for="id of roundBoosterTiles" :key="id" type="round-booster" :name="id.toString()" class="roundBoosterTile"/>

<h5 v-html="t('setupTiles.tileRandomizer.researchBoard')"></h5>
<div class="researchBoard">
<img src="@/assets/research-board.jpg" alt="" class="background"/>
<AppIcon type="federation-token" :name="researchFederationToken.toString()" class="federationToken"/>
<div class="techAdvanced">
<AppIcon v-for="id of techAdvancedTiles" :key="id" type="tech-advanced-tile" :name="id.toString()" class="tile"/>
</div>
<div class="techStandard">
<AppIcon v-for="(id,index) of techStandardTiles" :key="id" type="tech-standard-tile" :name="id.toString()" class="tile"
:class="{'column': index < 6, 'common': index >= 6}"/>
<h5 v-html="t('setupTiles.tileRandomizer.researchBoard')"></h5>
<div class="researchBoardWrapper">
<div class="researchBoard">
<img src="@/assets/research-board.jpg" alt="" class="background"/>
<AppIcon type="federation-token" :name="researchFederationToken.toString()" class="federationToken"/>
<div class="techAdvanced">
<AppIcon v-for="id of techAdvancedTiles" :key="id" type="tech-advanced-tile" :name="id.toString()" class="tile"/>
</div>
<div class="techStandard">
<AppIcon v-for="(id,index) of techStandardTiles" :key="id" type="tech-standard-tile" :name="id.toString()" class="tile"
:class="{'column': index < 6, 'common': index >= 6}"/>
</div>
</div>
</div>
</div>
<div class="collapse mt-2" id="mapRandomizer" data-bs-parent="#randomizerCollapseParent">
<MapRandomizer/>
</div>
</div>

<ModalDialog id="scoringRoundTilesModal" :title="t('setupTiles.scoringRoundTiles')" :size-lg="true">
Expand Down Expand Up @@ -105,6 +112,7 @@ import { useStateStore } from '@/store/state'
import ScoringRoundTile from '@/services/enum/ScoringRoundTile'
import ScoringFinalTile from '@/services/enum/ScoringFinalTile'
import ModalDialog from '@brdgm/brdgm-commons/src/components/structure/ModalDialog.vue'
import MapRandomizer from './MapRandomizer.vue'

const SCORING_ROUND_TILES_COUNT = 6
const SCORING_FINAL_TILES_COUNT = 2
Expand All @@ -119,7 +127,8 @@ export default defineComponent({
name: 'TilesSetup',
components: {
AppIcon,
ModalDialog
ModalDialog,
MapRandomizer
},
emits: {
scoringTiles: (_scoringRoundTiles: ScoringRoundTile[], _scoringFinalTiles: ScoringFinalTile[]) => true // eslint-disable-line @typescript-eslint/no-unused-vars
Expand Down Expand Up @@ -248,6 +257,10 @@ li {
margin-right: 0.5rem;
margin-bottom: 1rem;
}
.researchBoardWrapper {
width: 100%;
overflow-x: auto;
}
.researchBoard {
position: relative;
width: 600px;
Expand Down
10 changes: 7 additions & 3 deletions src/locales/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,18 @@
"available": "Verfügbar:",
"selected": "Ausgewählt:",
"none": "(keine)",
"randomize": "Zufällig wählen",
"map": "Kartengenerator (extern)",
"map": "Kartengenerator",
"tileRandomizer": {
"title": "Rundenbooster und Forschungstableau",
"notice": "Die konkrete Auswahl von Rundenboostern und Plättchen auf dem Forschungstableau ist für die Applikation nicht relevant.",
"roundBoosters": "Rundenbooster",
"researchBoard": "Forschungstableau"
}
},
"mapRandomizer": {
"invalidMap": "Diese Karte ist ungültig.",
"externalMapGenerator": "Alternativ kannst du einen <a href='https://boardgamehelpers.com/GaiaProject/' target='_blank' rel='noopener'>externen Map Generator</a> mit mehr Möglichkeiten verwenden."
},
"setupGameAutoma": {
"title": "Automa Spielaufbau",
"structures": "Der Automa erhält alle seine Gebäude.",
Expand Down Expand Up @@ -205,7 +208,8 @@
"back": "Zurück",
"close": "Schließen",
"reset": "Zurücksetzen",
"pass": "Passen"
"pass": "Passen",
"randomize": "Zufällig"
},
"footer": {
"credits": "Credits"
Expand Down
10 changes: 7 additions & 3 deletions src/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,18 @@
"available": "Available:",
"selected": "Selected:",
"none": "(none)",
"randomize": "Randomize",
"map": "Map Randomizer (external)",
"map": "Map Randomizer",
"tileRandomizer": {
"title": "Round Boosters and Research Board",
"notice": "The actual selection of round boosters and research board tiles is not relevant for the application.",
"roundBoosters": "Round Boosters",
"researchBoard": "Research Board"
}
},
"mapRandomizer": {
"invalidMap": "This Map is invalid.",
"externalMapGenerator": "Alternatively, you can use use an <a href='https://boardgamehelpers.com/GaiaProject/' target='_blank' rel='noopener'>external Map Generator</a> with more options."
},
"setupGameAutoma": {
"title": "Automa Setup",
"structures": "Prepare the Automa supply with all it's structures.",
Expand Down Expand Up @@ -205,7 +208,8 @@
"back": "Back",
"close": "Close",
"reset": "Reset",
"pass": "Pass"
"pass": "Pass",
"randomize": "Randomize"
},
"footer": {
"credits": "Credits"
Expand Down
Loading