You've already forked AstralRinth
forked from didirus/AstralRinth
Envs v3 frontend (#4267)
* New envs frontend * lint fix * Add blog post, user-facing changes, dashboard warning, project page member warning, and migration reviewing. maybe some other misc stuff * lint * lint * ignore .data in .prettierignore * i18n as fuck * fix proj page * Improve news markdown rendering * improve phrasing of initial paragraph * Fix environments not reloading after save * index.ts instead of underscored name * shrink-0 back on these icons
This commit is contained in:
Prospector
@@ -26,8 +26,17 @@
|
||||
</TagItem>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="showEnvironments" class="flex flex-col gap-2">
|
||||
<h3 class="text-primary text-base m-0">{{ formatMessage(messages.environments) }}</h3>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<TagItem v-for="tag in primaryEnvironmentTags" :key="`environment-tag-${tag.message.id}`">
|
||||
<component :is="tag.icon" />
|
||||
{{ formatMessage(tag.message) }}
|
||||
</TagItem>
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
v-if="
|
||||
v-else-if="
|
||||
(project.project_type === 'mod' || project.project_type === 'modpack') &&
|
||||
!(project.client_side === 'unsupported' && project.server_side === 'unsupported') &&
|
||||
!(project.client_side === 'unknown' && project.server_side === 'unknown')
|
||||
@@ -76,9 +85,10 @@
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ClientIcon, MonitorSmartphoneIcon, ServerIcon, UserIcon } from '@modrinth/assets'
|
||||
import type { GameVersionTag, PlatformTag } from '@modrinth/utils'
|
||||
import type { EnvironmentV3, GameVersionTag, PlatformTag, ProjectV3Partial } from '@modrinth/utils'
|
||||
import { formatCategory, getVersionsToDisplay } from '@modrinth/utils'
|
||||
import { defineMessages, useVIntl } from '@vintl/vintl'
|
||||
import { defineMessage, defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
|
||||
import { type Component, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import TagItem from '../base/TagItem.vue'
|
||||
@@ -88,7 +98,9 @@ const router = useRouter()
|
||||
|
||||
type EnvironmentValue = 'optional' | 'required' | 'unsupported' | 'unknown'
|
||||
|
||||
defineProps<{
|
||||
const TYPES_WITH_ENVS = ['mod', 'modpack'] as const
|
||||
|
||||
const props = defineProps<{
|
||||
project: {
|
||||
actualProjectType: string
|
||||
project_type: string
|
||||
@@ -102,23 +114,112 @@ defineProps<{
|
||||
gameVersions: GameVersionTag[]
|
||||
loaders: PlatformTag[]
|
||||
}
|
||||
v3Metadata?: ProjectV3Partial
|
||||
}>()
|
||||
|
||||
const showEnvironments = computed(
|
||||
() =>
|
||||
TYPES_WITH_ENVS.some((x) => props.v3Metadata?.project_types.includes(x)) &&
|
||||
primaryEnvironment.value,
|
||||
)
|
||||
|
||||
const primaryEnvironment = computed<EnvironmentV3 | undefined>(() =>
|
||||
props.v3Metadata?.environment?.find((x) => x !== 'unknown'),
|
||||
)
|
||||
|
||||
type EnvironmentTag = {
|
||||
icon: Component
|
||||
message: MessageDescriptor
|
||||
environments: EnvironmentV3[]
|
||||
}
|
||||
|
||||
const environmentTags: EnvironmentTag[] = [
|
||||
{
|
||||
icon: ClientIcon,
|
||||
message: defineMessage({
|
||||
id: `project.about.compatibility.environments.client-side`,
|
||||
defaultMessage: 'Client-side',
|
||||
}),
|
||||
environments: [
|
||||
'client_only',
|
||||
'client_only_server_optional',
|
||||
'client_or_server',
|
||||
'client_or_server_prefers_both',
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: ServerIcon,
|
||||
message: defineMessage({
|
||||
id: `project.about.compatibility.environments.server-side`,
|
||||
defaultMessage: 'Server-side',
|
||||
}),
|
||||
environments: [
|
||||
'server_only',
|
||||
'server_only_client_optional',
|
||||
'client_or_server',
|
||||
'client_or_server_prefers_both',
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: ServerIcon,
|
||||
message: defineMessage({
|
||||
id: `project.about.compatibility.environments.dedicated-servers-only`,
|
||||
defaultMessage: 'Dedicated servers only',
|
||||
}),
|
||||
environments: ['dedicated_server_only'],
|
||||
},
|
||||
{
|
||||
icon: UserIcon,
|
||||
message: defineMessage({
|
||||
id: `project.about.compatibility.environments.singleplayer-only`,
|
||||
defaultMessage: 'Singleplayer only',
|
||||
}),
|
||||
environments: ['singleplayer_only'],
|
||||
},
|
||||
{
|
||||
icon: UserIcon,
|
||||
message: defineMessage({
|
||||
id: `project.about.compatibility.environments.singleplayer`,
|
||||
defaultMessage: 'Singleplayer',
|
||||
}),
|
||||
environments: ['server_only'],
|
||||
},
|
||||
{
|
||||
icon: MonitorSmartphoneIcon,
|
||||
message: defineMessage({
|
||||
id: `project.about.compatibility.environments.client-and-server`,
|
||||
defaultMessage: 'Client and server',
|
||||
}),
|
||||
environments: [
|
||||
'client_and_server',
|
||||
'client_only_server_optional',
|
||||
'server_only_client_optional',
|
||||
'client_or_server_prefers_both',
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const primaryEnvironmentTags = computed(() => {
|
||||
return primaryEnvironment.value
|
||||
? environmentTags.filter((x) => x.environments.includes(primaryEnvironment.value ?? 'unknown'))
|
||||
: []
|
||||
})
|
||||
|
||||
const messages = defineMessages({
|
||||
title: {
|
||||
id: 'project.about.compatibility.title',
|
||||
id: `project.about.compatibility.title`,
|
||||
defaultMessage: 'Compatibility',
|
||||
},
|
||||
minecraftJava: {
|
||||
id: 'project.about.compatibility.game.minecraftJava',
|
||||
id: `project.about.compatibility.game.minecraftJava`,
|
||||
defaultMessage: 'Minecraft: Java Edition',
|
||||
},
|
||||
platforms: {
|
||||
id: 'project.about.compatibility.platforms',
|
||||
id: `project.about.compatibility.platforms`,
|
||||
defaultMessage: 'Platforms',
|
||||
},
|
||||
environments: {
|
||||
id: 'project.about.compatibility.environments',
|
||||
id: `project.about.compatibility.environments`,
|
||||
defaultMessage: 'Supported environments',
|
||||
},
|
||||
})
|
||||
|
||||
14
packages/ui/src/components/project/index.ts
Normal file
14
packages/ui/src/components/project/index.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
// Settings
|
||||
export * from './settings'
|
||||
|
||||
// Other
|
||||
export { default as NewProjectCard } from './NewProjectCard.vue'
|
||||
export { default as ProjectBackgroundGradient } from './ProjectBackgroundGradient.vue'
|
||||
export { default as ProjectHeader } from './ProjectHeader.vue'
|
||||
export { default as ProjectPageDescription } from './ProjectPageDescription.vue'
|
||||
export { default as ProjectPageVersions } from './ProjectPageVersions.vue'
|
||||
export { default as ProjectSidebarCompatibility } from './ProjectSidebarCompatibility.vue'
|
||||
export { default as ProjectSidebarCreators } from './ProjectSidebarCreators.vue'
|
||||
export { default as ProjectSidebarDetails } from './ProjectSidebarDetails.vue'
|
||||
export { default as ProjectSidebarLinks } from './ProjectSidebarLinks.vue'
|
||||
export { default as ProjectStatusBadge } from './ProjectStatusBadge.vue'
|
||||
@@ -0,0 +1,271 @@
|
||||
<script setup lang="ts">
|
||||
import type { EnvironmentV3 } from '@modrinth/utils'
|
||||
import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
import LargeRadioButton from '../../../base/LargeRadioButton.vue'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const value = defineModel<EnvironmentV3 | undefined>({ required: true })
|
||||
|
||||
type EnvironmentRadioOption = {
|
||||
title: MessageDescriptor
|
||||
description?: MessageDescriptor
|
||||
}
|
||||
|
||||
const OUTER_OPTIONS = {
|
||||
client: {
|
||||
title: defineMessage({
|
||||
id: 'project.settings.environment.client_only.title',
|
||||
defaultMessage: 'Client-side only',
|
||||
}),
|
||||
description: defineMessage({
|
||||
id: 'project.settings.environment.client_only.description',
|
||||
defaultMessage:
|
||||
'All functionality is done client-side and is compatible with vanilla servers.',
|
||||
}),
|
||||
suboptions: {},
|
||||
},
|
||||
server: {
|
||||
title: defineMessage({
|
||||
id: 'project.settings.environment.server_only.title',
|
||||
defaultMessage: 'Server-side only',
|
||||
}),
|
||||
description: defineMessage({
|
||||
id: 'project.settings.environment.server_only.description',
|
||||
defaultMessage:
|
||||
'All functionality is done server-side and is compatible with vanilla clients.',
|
||||
}),
|
||||
suboptions: {
|
||||
singleplayer: {
|
||||
title: defineMessage({
|
||||
id: 'project.settings.environment.server_only.supports_singleplayer.title',
|
||||
defaultMessage: 'Works in singleplayer too',
|
||||
}),
|
||||
},
|
||||
dedicated: {
|
||||
title: defineMessage({
|
||||
id: 'project.settings.environment.server_only.dedicated_only.title',
|
||||
defaultMessage: 'Dedicated server only',
|
||||
}),
|
||||
},
|
||||
},
|
||||
},
|
||||
client_and_server: {
|
||||
title: defineMessage({
|
||||
id: 'project.settings.environment.client_and_server.title',
|
||||
defaultMessage: 'Client and server',
|
||||
}),
|
||||
description: defineMessage({
|
||||
id: 'project.settings.environment.client_and_server.description',
|
||||
defaultMessage:
|
||||
'Has some functionality on both the client and server, even if only partially.',
|
||||
}),
|
||||
suboptions: {
|
||||
required_both: {
|
||||
title: defineMessage({
|
||||
id: 'project.settings.environment.client_and_server.required_both.title',
|
||||
defaultMessage: 'Required on both',
|
||||
}),
|
||||
},
|
||||
optional_client: {
|
||||
title: defineMessage({
|
||||
id: 'project.settings.environment.client_and_server.optional_client.title',
|
||||
defaultMessage: 'Optional on client',
|
||||
}),
|
||||
},
|
||||
optional_server: {
|
||||
title: defineMessage({
|
||||
id: 'project.settings.environment.client_and_server.optional_server.title',
|
||||
defaultMessage: 'Optional on server',
|
||||
}),
|
||||
},
|
||||
optional_both_prefers_both: {
|
||||
title: defineMessage({
|
||||
id: 'project.settings.environment.client_and_server.optional_both_prefers_both.title',
|
||||
defaultMessage: 'Optional on both, works best when installed on both sides',
|
||||
}),
|
||||
},
|
||||
optional_both: {
|
||||
title: defineMessage({
|
||||
id: 'project.settings.environment.client_and_server.optional_both.title',
|
||||
defaultMessage: 'Optional on both, works the same if installed on either side',
|
||||
}),
|
||||
},
|
||||
},
|
||||
},
|
||||
singleplayer: {
|
||||
title: defineMessage({
|
||||
id: 'project.settings.environment.singleplayer.title',
|
||||
defaultMessage: 'Singleplayer only',
|
||||
}),
|
||||
description: defineMessage({
|
||||
id: 'project.settings.environment.singleplayer.description',
|
||||
defaultMessage: `Only functions in Singleplayer or when not connected to a Multiplayer server.`,
|
||||
}),
|
||||
suboptions: {},
|
||||
},
|
||||
} as const satisfies Record<
|
||||
string,
|
||||
EnvironmentRadioOption & { suboptions: Record<string, EnvironmentRadioOption> }
|
||||
>
|
||||
type OuterOptionKey = keyof typeof OUTER_OPTIONS
|
||||
type SubOptionKey = ValidKeys<(typeof OUTER_OPTIONS)[keyof typeof OUTER_OPTIONS]['suboptions']>
|
||||
|
||||
const currentOuterOption = ref<OuterOptionKey>()
|
||||
const currentSubOption = ref<SubOptionKey>()
|
||||
|
||||
const computedOption = computed<EnvironmentV3>(() => {
|
||||
switch (currentOuterOption.value) {
|
||||
case 'client':
|
||||
return 'client_only'
|
||||
case 'server':
|
||||
switch (currentSubOption.value) {
|
||||
case 'singleplayer':
|
||||
return 'server_only'
|
||||
case 'dedicated':
|
||||
return 'dedicated_server_only'
|
||||
default:
|
||||
return 'unknown'
|
||||
}
|
||||
case 'client_and_server':
|
||||
switch (currentSubOption.value) {
|
||||
case 'required_both':
|
||||
return 'client_and_server'
|
||||
case 'optional_client':
|
||||
return 'server_only_client_optional'
|
||||
case 'optional_server':
|
||||
return 'client_only_server_optional'
|
||||
case 'optional_both_prefers_both':
|
||||
return 'client_or_server_prefers_both'
|
||||
case 'optional_both':
|
||||
return 'client_or_server'
|
||||
default:
|
||||
return 'unknown'
|
||||
}
|
||||
case 'singleplayer':
|
||||
return 'singleplayer_only'
|
||||
default:
|
||||
return 'unknown'
|
||||
}
|
||||
})
|
||||
|
||||
function loadEnvironmentValues(env?: EnvironmentV3) {
|
||||
switch (env) {
|
||||
case 'client_and_server':
|
||||
currentOuterOption.value = 'client_and_server'
|
||||
currentSubOption.value = 'required_both'
|
||||
break
|
||||
case 'client_only':
|
||||
currentOuterOption.value = 'client'
|
||||
currentSubOption.value = undefined
|
||||
break
|
||||
case 'client_only_server_optional':
|
||||
currentOuterOption.value = 'client_and_server'
|
||||
currentSubOption.value = 'optional_server'
|
||||
break
|
||||
case 'singleplayer_only':
|
||||
currentOuterOption.value = 'singleplayer'
|
||||
currentSubOption.value = undefined
|
||||
break
|
||||
case 'server_only':
|
||||
currentOuterOption.value = 'server'
|
||||
currentSubOption.value = 'singleplayer'
|
||||
break
|
||||
case 'server_only_client_optional':
|
||||
currentOuterOption.value = 'client_and_server'
|
||||
currentSubOption.value = 'optional_client'
|
||||
break
|
||||
case 'dedicated_server_only':
|
||||
currentOuterOption.value = 'server'
|
||||
currentSubOption.value = 'dedicated'
|
||||
break
|
||||
case 'client_or_server':
|
||||
currentOuterOption.value = 'client_and_server'
|
||||
currentSubOption.value = 'optional_both'
|
||||
break
|
||||
case 'client_or_server_prefers_both':
|
||||
currentOuterOption.value = 'client_and_server'
|
||||
currentSubOption.value = 'optional_both_prefers_both'
|
||||
break
|
||||
default:
|
||||
currentOuterOption.value = undefined
|
||||
currentSubOption.value = undefined
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// Keep parent in sync when local radio selections change
|
||||
watch(computedOption, (newValue) => {
|
||||
if (value.value !== newValue) {
|
||||
value.value = newValue
|
||||
}
|
||||
})
|
||||
|
||||
// Keep local selections in sync when parent model changes
|
||||
watch(
|
||||
() => value.value,
|
||||
(newVal) => {
|
||||
loadEnvironmentValues(newVal)
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
const simulateSave = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template
|
||||
v-for="({ title, description, suboptions }, key, index) in OUTER_OPTIONS"
|
||||
:key="`env-option-${key}`"
|
||||
>
|
||||
<LargeRadioButton
|
||||
class="!w-full"
|
||||
:class="{ 'mt-2': index > 0 }"
|
||||
:selected="currentOuterOption === key"
|
||||
@select="
|
||||
() => {
|
||||
if (currentOuterOption !== key) {
|
||||
currentSubOption = suboptions ? (Object.keys(suboptions)[0] as SubOptionKey) : undefined
|
||||
}
|
||||
currentOuterOption = key
|
||||
simulateSave = false
|
||||
}
|
||||
"
|
||||
>
|
||||
<span class="flex flex-col">
|
||||
<span>{{ formatMessage(title) }}</span>
|
||||
<span v-if="description" class="text-sm text-secondary">{{
|
||||
formatMessage(description)
|
||||
}}</span>
|
||||
</span>
|
||||
</LargeRadioButton>
|
||||
<div v-if="suboptions" class="pl-8">
|
||||
<LargeRadioButton
|
||||
v-for="(
|
||||
{ title: suboptionTitle, description: suboptionDescription }, suboptionKey
|
||||
) in suboptions"
|
||||
:key="`env-option-${key}-${suboptionKey}`"
|
||||
class="!w-full mt-2"
|
||||
:class="{
|
||||
'opacity-50': currentOuterOption !== key,
|
||||
}"
|
||||
:selected="currentSubOption === suboptionKey"
|
||||
@select="
|
||||
() => {
|
||||
currentOuterOption = key
|
||||
currentSubOption = suboptionKey
|
||||
}
|
||||
"
|
||||
>
|
||||
<span class="flex flex-col">
|
||||
<span>{{ formatMessage(suboptionTitle) }}</span>
|
||||
<span v-if="suboptionDescription" class="text-sm text-secondary">{{
|
||||
formatMessage(suboptionDescription)
|
||||
}}</span>
|
||||
</span>
|
||||
</LargeRadioButton>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
2
packages/ui/src/components/project/settings/index.ts
Normal file
2
packages/ui/src/components/project/settings/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
// Environment
|
||||
export { default as ProjectSettingsEnvSelector } from './environment/ProjectSettingsEnvSelector.vue'
|
||||
Reference in New Issue
Block a user