diff --git a/RELEASE.md b/RELEASE.md index de55270..344adcd 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -1,5 +1,5 @@ -## v0.3.13 - in progress - updated 2023-05-21 +## v0.3.14 - in progress - updated 2023-12-16 ### platform * [done] improve API integration with galaxies [v0.3.1] * [done] document multiverse API integration [starpeace-server-multiverse-api] @@ -32,9 +32,9 @@ * [done] bookmarks manage and performance fixes [v0.3.11] * [done] tycoon details API [v0.3.12] * [done] fixed galaxy and research menu bugs [v0.3.13] -* [in progress] building inspect API [v0.3.13] -* [in progress] improve auth and remember me token and error handling -* [pending] player, building, and planet event handling +* [done] building inspect API [v0.3.13] +* [done] player and building event handling [v0.3.13] +* [in progress] admin API [v0.3.14] ### assets * [done] finish initial language translation for assets [v0.3.1] @@ -47,6 +47,7 @@ * [done] building sign assets [v0.3.5] * [done] headquarters requirements for research per seal [v0.3.5] * [done] fixing building foundation configurations [v0.3.6] +* [in progress] fix blur in created sprite spreets [v0.3.14] ### gameplay * [done] update UI and menus for better concept of universes and galaxies [v0.3.1] @@ -69,6 +70,7 @@ * [done] onscreen building text rendering on selection [v0.3.10] * [done] construction descriptions for commerce, real estate, and services [v0.3.10] * [done] tycoon details menu [v0.3.12] -* [in progress] building inspect menu [v0.3.13] -* [pending] city-specific ribbon ticker updates -* [pending] integrate player and planet events with news ticker +* [done] building inspect menu [v0.3.13] +* [done] selected building text for IFEL buildings [v0.3.13] +* [done] cashflow and construction included in selected building text [v0.3.13] +* [done] integrate building events with news ticker [v0.3.13] diff --git a/ROADMAP.md b/ROADMAP.md index eea3b8a..4ef0590 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -4,6 +4,7 @@ Some of the tentative future features and rough planned version are outlined bel ## v0.5 ### platform +* [pending] improve auth and remember me token and error handling * [pending] minimum distance between buildings (statue and tower) * [pending] manage city zones API integration * [pending] follow tycoon support @@ -19,6 +20,9 @@ Some of the tentative future features and rough planned version are outlined bel * [pending] tycoon company rename and disolve API * [pending] tycoon initial suppliers and IFEL products API * [pending] tycoon strategy API +* [pending] inspect menu trade settings +* [pending] fix construction hover image z-order +* [pending] improve building metadata and details events in inspect menu ### assets * [pending] car assets @@ -26,6 +30,7 @@ Some of the tentative future features and rough planned version are outlined bel * [pending] dedicated research buildings per category and seal ### gameplay +* [pending] city-specific ribbon ticker updates * [pending] building stage support (timber, movies, farms) * [pending] limit seals unless required level or nobility * [pending] road proximity building construction rules @@ -51,15 +56,13 @@ Some of the tentative future features and rough planned version are outlined bel * [pending] building negative-income tinting rendering * [pending] fixed table headers (inspect menus) * [pending] mayor townhall management (min wage) -* [pending] building connect action support * [pending] planet capital and president politics inspect menu * [pending] improve townhall population label translations in inspect menu * [pending] improve products select in inspect menu (control and shift clicking) * [pending] construction descriptions for civics * [pending] add prestige to construction descriptions -* [pending] selected building text for warehouses -* [pending] selected building text for IFEL buildings -* [pending] cashflow and status included in selected building text * [pending] footer menu company scroll support * [pending] tycoon details loans apply and repay * [pending] tycoon details corporation and company P&L +* [pending] advanced status included in selected building text +* [pending] selected building text for warehouses diff --git a/assets/stylesheets/starpeace-bulma.sass b/assets/stylesheets/starpeace-bulma.sass index 8bc77d6..6438c6b 100644 --- a/assets/stylesheets/starpeace-bulma.sass +++ b/assets/stylesheets/starpeace-bulma.sass @@ -1,4 +1,13 @@ +@import 'bulma/sass/utilities/_all' +@import 'bulma/sass/base/_all' +@import 'bulma/sass/elements/_all' +@import 'bulma/sass/form/_all' +@import 'bulma/sass/components/_all' +@import 'bulma/sass/grid/_all' +@import 'bulma/sass/helpers/_all' +@import 'bulma/sass/layout/_all' + @import '~/assets/stylesheets/starpeace-variables' html @@ -68,7 +77,7 @@ html &:before, &:after - content: "" + content: '' position: absolute background-image: -webkit-linear-gradient($sp-card-border-top, $sp-card-border-bottom) background-image: -moz-linear-gradient($sp-card-border-top, $sp-card-border-bottom) @@ -176,7 +185,7 @@ html &:before, &:after - content: "" + content: '' position: absolute bottom: 0 top: 0 diff --git a/assets/stylesheets/starpeace-inspect.sass b/assets/stylesheets/starpeace-inspect.sass index d818d1d..5bbea20 100644 --- a/assets/stylesheets/starpeace-inspect.sass +++ b/assets/stylesheets/starpeace-inspect.sass @@ -10,18 +10,33 @@ top: calc(40% - 4rem) width: 8rem +.loading-image-inline + background-size: 1.25rem + height: 1.25rem + width: 1.25rem + .sp-slider - display: inline-flex + display: flex + + input[type="range" i] + accent-color: $sp-primary + color: $sp-primary + width: 100% span margin-left: .5rem .basic-table + tr + &:not(:last-child) + th, + td + border-bottom: 1px solid $sp-dark-bg + th, td - border-bottom: 1px solid $sp-dark-bg vertical-align: middle &:not(:first-child) @@ -75,16 +90,23 @@ border-bottom-color: $sp-dark-bg color: #fff + &:not(:first-child) + a + border-left: 1px solid $sp-dark-bg + border-right: 1px solid $sp-dark-bg + a border-bottom-color: $sp-primary-bg color: $sp-primary letter-spacing: .05rem + padding: .5rem 1.5rem text-transform: uppercase &:active, &:hover background-color: $sp-primary-bg border-bottom-color: $sp-primary-bg + border-color: $sp-primary-bg color: #fff .inspect-body @@ -93,13 +115,38 @@ position: relative overflow: hidden - .column - &.extra-padding-left - padding-left: 2rem - - &.extra-padding-right - padding-right: 2rem - .button letter-spacing: .1rem text-transform: uppercase + +.sp-sub-tabs + direction: rtl + overflow-y: auto + + .sp-tabs-menu + direction: ltr + + ul + flex-direction: column + + li + display: flex + justify-content: flex-end + text-align: right + + a + border-radius: 0 + color: $sp-primary + letter-spacing: .05rem + text-transform: uppercase + + &:hover + color: $sp-light + + &:active + color: lighten($sp-light, 10%) + + &.is-active + a + background-color: $sp-dark-bg + color: #fff \ No newline at end of file diff --git a/assets/stylesheets/starpeace.sass b/assets/stylesheets/starpeace.sass index f753340..43dad29 100644 --- a/assets/stylesheets/starpeace.sass +++ b/assets/stylesheets/starpeace.sass @@ -95,6 +95,26 @@ h3 border-radius: 9999em box-shadow: rgba(255, 255, 255, 0.25) 0 0 1px 0 inset +.sp-select + &::after + border-color: $sp-primary !important + + select + background-color: $sp-dark-bg + border: 1px solid $sp-dark + color: $sp-light + outline: none !important + + &:focus, + &:hover + outline: none !important + border: 1px solid $sp-dark + + option + background-color: $sp-dark-bg + color: $sp-primary + + .sp-profile .profile-container padding-bottom: 150% @@ -123,11 +143,29 @@ h3 color: darken($sp-primary, 5%) font-size: .7rem letter-spacing: 0.05rem + position: relative text-transform: uppercase + .sp-kv-value color: #ddd font-size: 1.1rem margin-left: .5rem + position: relative + + &.centered + vertical-align: middle + + +.sp-has-dark-background + background-color: $sp-dark-bg + + +.sp-notification + &.is-warning + background-color: $sp-light-bg + color: #FFF + + // remove border around research tree component .vis-network diff --git a/buildspec.yml b/buildspec.yml index c0e3a75..cd715b5 100644 --- a/buildspec.yml +++ b/buildspec.yml @@ -7,7 +7,6 @@ phases: commands: - echo Entered the install phase... - npm update -g npm - - npm install -g grunt-cli pre_build: commands: diff --git a/components/application-desktop.vue b/components/application-desktop.vue index 851b305..72c71ac 100644 --- a/components/application-desktop.vue +++ b/components/application-desktop.vue @@ -24,7 +24,7 @@ client-only menu-help(v-show="is_menu_visible('help')" :client_state='client_state') menu-rankings-main-menu(v-show="is_menu_visible('rankings')" :ajax_state='ajax_state' :client_state='client_state') menu-release-notes(v-show="is_menu_visible('release_notes')" :client_state='client_state') - menu-research-main-menu(v-show="is_menu_visible('research')" :ajax_state='ajax_state' :client_state='client_state') + menu-research-main-menu(v-show="is_menu_visible('research')" :client-state='client_state') menu-galaxy-menu(v-show="is_menu_visible('galaxy')" :ajax_state='ajax_state' :client_state='client_state') menu-town-search-main-menu(v-show="is_menu_visible('town_search')" :client_state='client_state') menu-tycoon-details-main-menu(v-show="is_menu_visible('tycoon')" :client_state='client_state') @@ -37,7 +37,7 @@ client-only toolbar-overlay(:client_state='client_state') toolbar-minimap(:client_state='client_state') toolbar-ribbon(:client_state='client_state') - toolbar-inspect(:ajax_state='ajax_state' :client_state='client_state') + toolbar-inspect(:client-state='client_state') toolbar-menubar(:ajax_state='ajax_state' :client_state='client_state') toolbar-details(:ajax_state='ajax_state' :client_state='client_state') @@ -48,7 +48,7 @@ client-only + + diff --git a/components/menu/construction/industry-category-controls.vue b/components/menu/construction/industry-category-controls.vue new file mode 100644 index 0000000..2d21502 --- /dev/null +++ b/components/menu/construction/industry-category-controls.vue @@ -0,0 +1,100 @@ + + + + + diff --git a/components/menu/construction/main-menu.vue b/components/menu/construction/main-menu.vue index cc2d93d..3d85b00 100644 --- a/components/menu/construction/main-menu.vue +++ b/components/menu/construction/main-menu.vue @@ -5,236 +5,210 @@ .card-header-icon.card-close(@click.stop.prevent="client_state.menu.toggle_menu('construction')") font-awesome-icon(:icon="['fas', 'times']") - .card-content.sp-menu-background.overall-container - .field.filter-input-container - .control.has-icons-left.is-expanded - input.input(type="text", placeholder="Filter") - span.icon.is-left - font-awesome-icon(:icon="['fas', 'search-location']") - nav.breadcrumb.is-medium.menu-breadcrumb - ul - li(:class='root_breadcrumb_class') - a(@click.stop.prevent='select_root_breadcrumb') - template(v-if='company_seal_id') - span.icon.is-small - misc-company-seal-icon.company-seal(:seal_id="company_seal_id") - span {{company_seal_name}} - template(v-else-if='true') - span.icon.is-small - font-awesome-icon.tycoon-icon(:icon="['fas', 'user-secret']") - span {{$translate('identity.visitor')}} - template(v-if='selected_menu_industry_category_id') - li.is-active - a.construction-breadcrumb-item - span {{text_for_category(selected_menu_industry_category_id)}} + .card-content.sp-menu-background.overall-container #construction-image-pending(ref="pendingContainer") #construction-image-webgl-container(ref="previewContainer") - aside.sp-menu-category.sp-scrollbar(v-if="has_selected_menu_category") - template(v-for="info in sort_buildings(buildings_for_company_by_category[selected_menu_industry_category_id])") - a.is-building-item(@click.stop.prevent="toggle_building(info)" :class="{'active': selected_building_id == info.id}") - misc-industry-type-icon(:industry_type="info.industry_type_id" small) - span.is-building-label {{building_name(info)}} - .construction-disabled(v-show="!can_construct_building(info)") - - a.construct-action(@click.stop.prevent="select_building(info)" :disabled='!can_construct_building(info)') - .tile.is-ancestor.is-item-details(v-show="selected_building_id == info.id") - .tile.is-parent.is-vertical - .tile.is-parent.is-item-details-top - article.tile.is-child.is-7(:ref="'previewItem.' + info.id") - article.tile.is-child - .building-cost - misc-money-text(:value='building_cost(info.id)', no_styling=true, as_thousands=true) - .building-size {{building_size(info)}}m² - .tile.is-parent.is-item-details-bottom - article.tile.is-child - .building-description {{building_description(info)}} - .building-research(v-show="info.required_invention_ids.length") - span.research-label {{$translate('ui.menu.construction.requires')}}: - template(v-for='id,index in info.required_invention_ids') - template(v-if='is_invention_completed(id)') - span.research-completed {{invention_name(id)}} - template(v-else) - a.research-pending(@click.stop.prevent='select_invention(id)') {{invention_name(id)}} - span.research-separator(v-if="index < info.required_invention_ids.length - 1") {{separator_label_for_index(index, info.required_invention_ids.length)}} - button.button.is-fullwidth.is-starpeace.construct-button(@click.stop.prevent="select_building(info)", :disabled='!can_construct_building(info)') {{$translate('ui.menu.construction.construct_building')}} - - aside.sp-menu-overall.sp-scrollbar(v-else) - .tile.is-ancestor.construction-items - .tile.is-6.is-vertical.is-parent - .tile.is-child - a.construction-toggle(@click.stop.prevent="select_category('SERVICE')" :class="{'disabled': !category_has_buildings('SERVICE')}") - misc-industry-category-icon(category='SERVICE') - span.toggle-label {{text_for_category('SERVICE')}} - .disabled-overlay - .tile.is-child - a.construction-toggle(@click.stop.prevent="select_category('INDUSTRY')" :class="{'disabled': !category_has_buildings('INDUSTRY')}") - misc-industry-category-icon(category='INDUSTRY') - span.toggle-label {{text_for_category('INDUSTRY')}} - .disabled-overlay - .tile.is-child - a.construction-toggle(@click.stop.prevent="select_category('LOGISTICS')" :class="{'disabled': !category_has_buildings('LOGISTICS')}") - misc-industry-category-icon(category='LOGISTICS') - span.toggle-label {{text_for_category('LOGISTICS')}} - .disabled-overlay - .tile.is-6.is-vertical.is-parent - .tile.is-child - a.construction-toggle(@click.stop.prevent="select_category('CIVIC')" :class="{'disabled': !category_has_buildings('CIVIC')}") - misc-industry-category-icon(category='CIVIC') - span.toggle-label {{text_for_category('CIVIC')}} - .disabled-overlay - .tile.is-child - a.construction-toggle(@click.stop.prevent="select_category('COMMERCE')" :class="{'disabled': !category_has_buildings('COMMERCE')}") - misc-industry-category-icon(category='COMMERCE') - span.toggle-label {{text_for_category('COMMERCE')}} - .disabled-overlay - .tile.is-child - a.construction-toggle(@click.stop.prevent="select_category('REAL_ESTATE')" :class="{'disabled': !category_has_buildings('REAL_ESTATE')}") - misc-industry-category-icon(category='REAL_ESTATE') - span.toggle-label {{text_for_category('REAL_ESTATE')}} - .disabled-overlay - - #no-company-modal.modal-background(v-show='has_no_company') + template(v-if='isTycoon && companyId && !company || companyPromise') + .sp-loading.is-flex.is-align-items-center.is-justify-content-center + img.starpeace-logo + + template(v-else) + .field.filter-input-container + .control.has-icons-left.is-expanded + input.input(type="text", placeholder="Filter") + span.icon.is-left + font-awesome-icon(:icon="['fas', 'search-location']") + nav.breadcrumb.is-medium.menu-breadcrumb + ul + li(:class="{'is-active': !selectedIndustryCategoryId}") + a(@click.stop.prevent='selectRootBreadcrumb') + template(v-if='companySealId') + span.icon.is-small + misc-company-seal-icon.company-seal(:seal_id="companySealId") + span {{ $companySealShortLabel(companySealId) }} + template(v-else) + span.icon.is-small + font-awesome-icon.tycoon-icon(:icon="['fas', 'user-secret']") + span {{$translate('identity.visitor')}} + + template(v-if='selectedIndustryCategoryId') + li.is-active + a.construction-breadcrumb-item + span {{ $industryCategoryLabel(selectedIndustryCategoryId) }} + + template(v-if="selectedIndustryCategoryId") + menu-construction-industry-category-construct( + :client-state='client_state' + :company='company' + :company-buildings-by-category-id='companyBuildingsByCategoryId' + :selected-industry-category-id='selectedIndustryCategoryId' + @select='selectDefinitionId' + ) + + template(v-else) + menu-construction-industry-category-controls( + :client-state='client_state' + :company='company' + :company-buildings-by-category-id='companyBuildingsByCategoryId' + @select='selectCategoryId' + ) + + #no-company-modal.modal-background(v-if='hasNoCompany') .content span {{$translate('ui.menu.construction.company_required.label')}} - a(@click.stop.prevent='toggle_form_company_menu') {{$translate('ui.menu.construction.company_required.action')}} + a(@click.stop.prevent='toggleFormCompanyMenu') {{$translate('ui.menu.construction.company_required.action')}} @@ -242,6 +216,18 @@ export default { diff --git a/components/menu/research/details.vue b/components/menu/research/details.vue index a87e5e9..e7252c7 100644 --- a/components/menu/research/details.vue +++ b/components/menu/research/details.vue @@ -1,116 +1,160 @@ + + diff --git a/components/misc/resource-price-slider.vue b/components/misc/resource-price-slider.vue new file mode 100644 index 0000000..6c4863a --- /dev/null +++ b/components/misc/resource-price-slider.vue @@ -0,0 +1,78 @@ + + + + + diff --git a/components/misc/system-message-panel.vue b/components/misc/system-message-panel.vue index b77bc4f..0300209 100644 --- a/components/misc/system-message-panel.vue +++ b/components/misc/system-message-panel.vue @@ -7,8 +7,7 @@ diff --git a/components/toolbar/inspect/shared/tab-history.vue b/components/toolbar/inspect/shared/tab-history.vue new file mode 100644 index 0000000..0049bf1 --- /dev/null +++ b/components/toolbar/inspect/shared/tab-history.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/components/toolbar/inspect/shared/tab-jobs.vue b/components/toolbar/inspect/shared/tab-jobs.vue index 06d73bc..d8a7c23 100644 --- a/components/toolbar/inspect/shared/tab-jobs.vue +++ b/components/toolbar/inspect/shared/tab-jobs.vue @@ -1,183 +1,96 @@ diff --git a/components/toolbar/inspect/shared/tab-management.vue b/components/toolbar/inspect/shared/tab-management.vue new file mode 100644 index 0000000..b7f53dc --- /dev/null +++ b/components/toolbar/inspect/shared/tab-management.vue @@ -0,0 +1,296 @@ + + + + + diff --git a/components/toolbar/inspect/shared/tab-products.vue b/components/toolbar/inspect/shared/tab-products.vue index 0530116..b1ad5cf 100644 --- a/components/toolbar/inspect/shared/tab-products.vue +++ b/components/toolbar/inspect/shared/tab-products.vue @@ -1,33 +1,53 @@ + + diff --git a/components/toolbar/inspect/shared/tab-services.vue b/components/toolbar/inspect/shared/tab-services.vue new file mode 100644 index 0000000..11bacb8 --- /dev/null +++ b/components/toolbar/inspect/shared/tab-services.vue @@ -0,0 +1,147 @@ + + + + + diff --git a/components/toolbar/inspect/shared/tab-storage.vue b/components/toolbar/inspect/shared/tab-storage.vue new file mode 100644 index 0000000..6b23761 --- /dev/null +++ b/components/toolbar/inspect/shared/tab-storage.vue @@ -0,0 +1,128 @@ + + + + + diff --git a/components/toolbar/inspect/shared/tab-store-products.vue b/components/toolbar/inspect/shared/tab-store-products.vue new file mode 100644 index 0000000..117086f --- /dev/null +++ b/components/toolbar/inspect/shared/tab-store-products.vue @@ -0,0 +1,194 @@ + + + + + diff --git a/components/toolbar/inspect/shared/tab-supplies.vue b/components/toolbar/inspect/shared/tab-supplies.vue new file mode 100644 index 0000000..bd435c4 --- /dev/null +++ b/components/toolbar/inspect/shared/tab-supplies.vue @@ -0,0 +1,328 @@ + + + + + diff --git a/components/toolbar/inspect/tab-headquarters-research.vue b/components/toolbar/inspect/tab-headquarters-research.vue new file mode 100644 index 0000000..d77e690 --- /dev/null +++ b/components/toolbar/inspect/tab-headquarters-research.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/components/toolbar/inspect/toolbar-inspect-building.vue b/components/toolbar/inspect/toolbar-inspect-building.vue index 4e21718..bd5940a 100644 --- a/components/toolbar/inspect/toolbar-inspect-building.vue +++ b/components/toolbar/inspect/toolbar-inspect-building.vue @@ -2,35 +2,198 @@ .inspect-details .inspect-tabs.tabs.is-small.is-marginless ul - template(v-for='tab,index in tabs') - li(:class="{ 'is-active': index == tab_index }" @click.stop.prevent='tab_index = index') + template(v-for='tab in tabs') + li(:class="{ 'is-active': tab.id == tabId }" @click.stop.prevent='tabId = tab.id') a - span {{tab}} + span {{ $translate(tab.label) }} - .inspect-body.is-marginless + .inspect-body.columns.is-marginless + template(v-if="tabId == 'general'") + .column.is-paddingless.is-relative.is-clipped + toolbar-inspect-shared-tab-general( + :client-state='clientState' + :building='building' + :definition='definition' + :simulation='simulation' + :building-details='buildingDetails' + @refresh-details="$emit('refresh-details')" + ) + + template(v-if="tabId == 'research'") + .column.is-paddingless.is-relative.is-clipped + toolbar-inspect-tab-headquarters-research( + :client-state='clientState' + :building='building' + :definition='definition' + :simulation='simulation' + ) + + template(v-else-if="tabId == 'operations' || tabId == 'supplies'") + .column.is-paddingless.is-relative.is-clipped + toolbar-inspect-shared-tab-supplies( + :client-state='clientState' + :building='building' + :definition='definition' + :simulation='simulation' + :supplies='buildingDetails.inputs' + ) + + template(v-else-if="tabId == 'products'") + .column.is-paddingless.is-relative.is-clipped + toolbar-inspect-shared-tab-products( + :client-state='clientState' + :building='building' + :definition='definition' + :simulation='simulation' + :products='buildingDetails.outputs' + ) + + template(v-else-if="tabId == 'services'") + .column.is-paddingless.is-relative.is-clipped + toolbar-inspect-shared-tab-services( + :client-state='clientState' + :building='building' + :definition='definition' + :simulation='simulation' + :services='buildingDetails.services' + ) + + template(v-else-if="tabId == 'jobs'") + .column.is-paddingless.is-relative.is-clipped + toolbar-inspect-shared-tab-jobs( + :client-state='clientState' + :building='building' + :definition='definition' + :simulation='simulation' + :jobs='buildingDetails.labors' + ) + + template(v-else-if="tabId == 'management'") + .column.is-paddingless.is-relative.is-clipped + toolbar-inspect-shared-tab-management( + :client-state='clientState' + :building='building' + :definition='definition' + :simulation='simulation' + :building-details='buildingDetails' + @refresh-details="$emit('refresh-details')" + ) + + template(v-else-if="tabId == 'history'") + .column.is-paddingless.is-relative.is-clipped + toolbar-inspect-shared-tab-history( + :client-state='clientState' + :building='building' + :definition='definition' + :simulation='simulation' + ) @@ -38,5 +201,4 @@ export default { diff --git a/components/toolbar/inspect/toolbar-inspect-portal.vue b/components/toolbar/inspect/toolbar-inspect-portal.vue index e89dd21..6f6fa46 100644 --- a/components/toolbar/inspect/toolbar-inspect-portal.vue +++ b/components/toolbar/inspect/toolbar-inspect-portal.vue @@ -2,36 +2,51 @@ .inspect-details .inspect-tabs.tabs.is-small.is-marginless ul - template(v-for='tab,index in tabs') - li(:class="{ 'is-active': index == tab_index }" @click.stop.prevent='tab_index = index') + template(v-for='tab in tabs') + li(:class="{ 'is-active': tab.id == tabId }" @click.stop.prevent='tabId = tab.id') a - span {{tab}} + span {{ $translate(tab.label) }} .inspect-body.is-marginless + template(v-if="tabId == 'general'") + .column.is-paddingless.is-relative.is-clipped.p-4 + span.is-italic {{ message }} @@ -40,4 +55,6 @@ export default { @import '~/assets/stylesheets/starpeace-variables' @import '~/assets/stylesheets/starpeace-inspect' +.inspect-body + color: $sp-primary diff --git a/components/toolbar/inspect/toolbar-inspect-townhall.vue b/components/toolbar/inspect/toolbar-inspect-townhall.vue index 61b9af5..1a040f4 100644 --- a/components/toolbar/inspect/toolbar-inspect-townhall.vue +++ b/components/toolbar/inspect/toolbar-inspect-townhall.vue @@ -6,33 +6,23 @@ template(v-else) .inspect-tabs.tabs.is-small.is-marginless ul - li(:class="{ 'is-active': tab_index == 0 }" @click.stop.prevent='tab_index = 0') - a {{$translate('toolbar.inspect.common.tabs.general')}} - li(:class="{ 'is-active': tab_index == 1 }" @click.stop.prevent='tab_index = 1') - a {{$translate('toolbar.inspect.townhall.tabs.commerce')}} - li(:class="{ 'is-active': tab_index == 2 }" @click.stop.prevent='tab_index = 2') - a {{$translate('toolbar.inspect.townhall.tabs.taxes')}} - li(:class="{ 'is-active': tab_index == 3 }" @click.stop.prevent='tab_index = 3') - a {{$translate('toolbar.inspect.townhall.tabs.employment')}} - li(:class="{ 'is-active': tab_index == 4 }" @click.stop.prevent='tab_index = 4') - a {{$translate('toolbar.inspect.townhall.tabs.housing')}} - li(:class="{ 'is-active': tab_index == 5 }" @click.stop.prevent='tab_index = 5') - a {{$translate('toolbar.inspect.common.tabs.jobs')}} + li(v-for='tab in tabs' :class="{ 'is-active': tabId == tab.id }" @click.stop.prevent='tabId = tab.id') + a {{$translate(tab.label)}} .inspect-body.columns.is-marginless - template(v-if='tab_index == 0') + template(v-if="tabId == 'general'") .column.is-narrow.sp-scrollbar.service-levels table.basic-table.condensed thead tr th.sp-kv-key {{$translate('ui.menu.town_search.panel.details.qol.label')}} - th.has-text-right.sp-kv-value {{$format_percent(.9)}} + th.has-text-right.sp-kv-value {{$formatPercent(qol)}} tbody tr(v-for='level in service_levels') - td.sp-kv-key {{label_for_type(level.type)}} - td.has-text-right.sp-kv-value {{$format_percent(level.value)}} + td.sp-kv-key {{labelForServiceTypeId(level.typeId)}} + td.has-text-right.sp-kv-value {{$formatPercent(level.value)}} - .column.is-narrow.extra-padding-left.extra-padding-right.politics + .column.is-narrow.px-5.politics div span.sp-kv-key {{$translate('ui.menu.politics.details.mayor.label')}}: span.sp-kv-value @@ -42,7 +32,7 @@ template(v-if='mayor') div span.sp-kv-key {{$translate('ui.menu.politics.details.overall_rating.label')}}: - span.sp-kv-value {{$format_percent(mayor_overall_rating)}} + span.sp-kv-value {{$formatPercent(mayor_overall_rating)}} div span.sp-kv-key {{$translate('ui.menu.politics.details.terms.label')}}: span.sp-kv-value {{mayor.terms}} @@ -53,12 +43,12 @@ a.button.is-fullwidth.is-starpeace(@click.stop.prevent='show_politics') {{$translate('ui.menu.town_search.panel.action.show_politics')}} - .column.is-narrow.extra-padding-left.population + .column.is-narrow.pl-5.population table.basic-table thead tr th - th.has-text-right.sp-kv-key(v-for='population in populations') {{population.type}} + th.has-text-right.sp-kv-key(v-for='population in populations') {{ resourceTypeLabel(population.resourceId) }} tbody tr td.sp-kv-key {{$translate('toolbar.inspect.townhall.label.population')}} @@ -70,7 +60,7 @@ td.sp-kv-key {{$translate('toolbar.inspect.townhall.label.homelessness')}} td.has-text-right.sp-kv-value(v-for='population in populations') {{format_homelessness(population)}} - template(v-else-if='tab_index == 1') + template(v-else-if="tabId == 'commerce'") .column.sp-scrollbar.commerce table.basic-table.sp-striped.sp-solid-header.sp-sticky-header thead @@ -85,17 +75,17 @@ th.has-text-right.sp-kv-key {{$translate('toolbar.inspect.townhall.label.quality')}} tbody tr(v-for='commerce in commerces') - td.sp-kv-value {{industry_type_label(commerce.industry_type_id)}} + td.sp-kv-value {{industryTypeLabel(commerce.industryTypeId)}} td.has-text-right.sp-kv-value {{commerce.demand.toLocaleString()}} td.has-text-right.sp-kv-value {{commerce.supply.toLocaleString()}} td.has-text-right.sp-kv-value {{commerce.capacity.toLocaleString()}} - td.has-text-right.sp-kv-value {{$format_percent(commerce.ratio)}} - td.has-text-right.sp-kv-value {{$format_money(commerce.ifel_price)}} - td.has-text-right.sp-kv-value {{$format_money(commerce.average_price)}} ({{$format_percent(commerce.ifel_price > 0 ? commerce.average_price / commerce.ifel_price : 0)}}) - td.has-text-right.sp-kv-value {{$format_percent(commerce.quality)}} + td.has-text-right.sp-kv-value {{$formatPercent(commerce.ratio)}} + td.has-text-right.sp-kv-value {{$format_money(commerce.ifelPrice)}} + td.has-text-right.sp-kv-value {{$format_money(commerce.average_price)}} ({{$formatPercent(commerce.averagePrice, commerce.ifelPrice)}}) + td.has-text-right.sp-kv-value {{$formatPercent(commerce.quality)}} - template(v-else-if='tab_index == 2') + template(v-else-if="tabId == 'taxes'") .column.sp-scrollbar.taxes table.basic-table.sp-striped.sp-solid-header.sp-sticky-header thead @@ -105,136 +95,231 @@ th.has-text-right.sp-kv-key {{$translate('toolbar.inspect.townhall.label.last_year')}} tbody tr(v-for='tax in taxes') - td.sp-kv-value {{industry_category_label(tax.industry_category_id)}} - {{industry_type_label(tax.industry_type_id)}} - td.has-text-right.sp-kv-value {{$format_percent(tax.tax_rate)}} - td.has-text-right.sp-kv-value {{$format_money(tax.last_year)}} + td.sp-kv-value {{industryCategoryLabel(tax.industryCategoryId)}} - {{industryTypeLabel(tax.industryTypeId)}} + td.has-text-right.sp-kv-value {{$formatPercent(tax.taxRate)}} + td.has-text-right.sp-kv-value {{$format_money(tax.lastYear)}} - template(v-else-if='tab_index == 3') + template(v-else-if="tabId == 'employment'") .column.is-narrow.employment + datalist(id='wage-markers') + option(value=0) + option(value=100) + option(value=250) table.basic-table thead tr th - th.has-text-right.sp-kv-key(v-for='employment in employments') {{employment.type}} + th.has-text-right.sp-kv-key(v-for='employment in employments') {{ resourceTypeLabel(employment.resourceId) }} tbody + tr + td.sp-kv-key {{$translate('toolbar.inspect.townhall.label.total')}} + td.has-text-right.sp-kv-value(v-for='employment in employments') {{ employment.total }} tr td.sp-kv-key {{$translate('toolbar.inspect.townhall.label.vacancies')}} - td.has-text-right.sp-kv-value(v-for='employment in employments') {{employment.vacancies}} + td.has-text-right.sp-kv-value(v-for='employment in employments') {{ employment.vacancies }} tr - td.sp-kv-key {{$translate('toolbar.inspect.townhall.label.spending_power')}} - td.has-text-right.sp-kv-value(v-for='employment in employments') {{$format_percent(employment.spending_power)}} + td.sp-kv-key {{$translate('toolbar.inspect.townhall.label.spending_power') }} + td.has-text-right.sp-kv-value(v-for='employment in employments') {{ $formatPercent(employment.spendingPower) }} tr td.sp-kv-key {{$translate('toolbar.inspect.townhall.label.average_wage')}} - td.has-text-right.sp-kv-value(v-for='employment in employments') {{$format_percent(employment.average_wage)}} + td.has-text-right.sp-kv-value(v-for='employment in employments') {{ $formatPercent(employment.averageWage) }} tr td.sp-kv-key {{$translate('toolbar.inspect.townhall.label.minimum_wage')}} td.has-text-right.sp-kv-value(v-for='employment in employments') .sp-slider - input(type='range' min='0' max='200' value='100' disabled) - span {{$format_percent(employment.minimum_wage)}} + input(type='range' list='wage-markers' min='0' max='250' value='100' disabled) + span {{$formatPercent(employment.minimum_wage)}} - template(v-else-if='tab_index == 4') + template(v-else-if="tabId == 'housing'") .column.is-narrow.housing table.basic-table thead tr th - th.has-text-right.sp-kv-key(v-for='housing in housings') {{housing.type}} + th.has-text-right.sp-kv-key(v-for='housing in housings') {{ resourceTypeLabel(housing.resourceId) }} tbody + tr + td.sp-kv-key {{$translate('toolbar.inspect.townhall.label.total')}} + td.has-text-right.sp-kv-value(v-for='housing in housings') {{ housing.total }} tr td.sp-kv-key {{$translate('toolbar.inspect.townhall.label.vacancies')}} - td.has-text-right.sp-kv-value(v-for='housing in housings') {{housing.vacancies}} + td.has-text-right.sp-kv-value(v-for='housing in housings') {{ housing.vacancies }} tr - td.sp-kv-key {{$translate('toolbar.inspect.townhall.label.average_rent')}} - td.has-text-right.sp-kv-value(v-for='housing in housings') {{$format_percent(housing.average_rent)}} + td.sp-kv-key {{$translate('toolbar.inspect.townhall.label.average_rent') }} + td.has-text-right.sp-kv-value(v-for='housing in housings') {{ $formatPercent(housing.averageRent) }} tr td.sp-kv-key {{$translate('toolbar.inspect.townhall.label.quality_index')}} - td.has-text-right.sp-kv-value(v-for='housing in housings') {{$format_percent(housing.quality_index)}} + td.has-text-right.sp-kv-value(v-for='housing in housings') {{ $formatPercent(housing.qualityIndex) }} + + template(v-else-if="tabId == 'jobs'") + .column.is-paddingless.is-relative.is-clipped + toolbar-inspect-shared-tab-jobs( + :client-state='clientState' + :jobs='jobs' + :building='building' + :definition='definition' + :simulation='simulation' + ) @@ -154,9 +126,4 @@ export default { diff --git a/components/toolbar/toolbar-details.vue b/components/toolbar/toolbar-details.vue index 7760079..fda3a8c 100644 --- a/components/toolbar/toolbar-details.vue +++ b/components/toolbar/toolbar-details.vue @@ -1,6 +1,8 @@