feat: show proper compatibility info

Feyko · Feyko · commit 49281eb88fa1 · 2022-06-15T21:32:36.000+02:00
diff --git a/src/gql/home/mods.graphql b/src/gql/home/mods.graphql
@@ -26,6 +26,16 @@ query GetMods($offset: Int!, $limit: Int!, $search: String, $order: Order, $orde
           sml_version
         }
       }
+      compatibility {
+        EA {
+          note
+          state
+        }
+        EXP {
+          note
+          state
+        }
+      }
     }
   }
 }
diff --git a/src/gql/mods/mod.graphql b/src/gql/mods/mod.graphql
@@ -43,5 +43,15 @@ query GetMod($mod: String!) {
         avatar
       }
     }
+    compatibility {
+      EA {
+        note
+        state
+      }
+      EXP {
+        note
+        state
+      }
+    }
   }
 }
diff --git a/src/lib/components/mods/ModCard.svelte b/src/lib/components/mods/ModCard.svelte
@@ -4,10 +4,14 @@
   import IconButton, { Icon } from '@smui/icon-button';
   import FicsitCard from '$lib/components/general/FicsitCard.svelte';
   import { installMod } from '$lib/stores/launcher';
-  import { modStatus } from '$lib/utils/mod';
   import { prettyNumber } from '$lib/utils/formatting';
+  import OutdatedBanner from '$lib/components/mods/compatibility/OutdatedBanner.svelte';
+  import CompatibilityButton from '$lib/components/mods/compatibility/CompatibilityButton.svelte';
 
-  export let mod: Pick<Mod, 'id' | 'mod_reference' | 'name' | 'logo' | 'views' | 'downloads' | 'short_description'> & {
+  export let mod: Pick<
+    Mod,
+    'id' | 'mod_reference' | 'name' | 'logo' | 'views' | 'downloads' | 'short_description' | 'compatibility'
+  > & {
     latestVersions: {
       alpha?: Maybe<Pick<Version, 'id' | 'sml_version'>>;
       beta?: Maybe<Pick<Version, 'id' | 'sml_version'>>;
@@ -35,18 +39,9 @@
         download
       </IconButton>
     {/if}
+    <CompatibilityButton compatibility={mod.compatibility} />
   </div>
   <div slot="outer">
-    {#if modStatus(mod.latestVersions) === 'own-risk'}
-      <div class="mod-own-risk">
-        <div class="mod-inset" />
-        <div class="mod-stripe">USE AT YOUR OWN RISK</div>
-      </div>
-    {:else if modStatus(mod.latestVersions) === 'outdated'}
-      <div class="mod-outdated">
-        <div class="mod-inset" />
-        <div class="mod-stripe">OUTDATED</div>
-      </div>
-    {/if}
+    <OutdatedBanner compatibility={mod.compatibility} />
   </div>
 </FicsitCard>
diff --git a/src/lib/components/mods/ModLogo.svelte b/src/lib/components/mods/ModLogo.svelte
@@ -1,32 +1,16 @@
 <script lang="ts">
   import { assets } from '$app/paths';
-  import { modStatus } from '$lib/utils/mod';
-  import type { Maybe, Version } from '$lib/generated';
+  import type { CompatibilityInfoInput } from '$lib/generated';
+  import OutdatedBanner from '$lib/components/mods/compatibility/OutdatedBanner.svelte';
 
   export let modLogo!: string;
   export let modName!: string;
-  export let latestVersions:
-    | {
-        alpha?: Maybe<Pick<Version, 'sml_version'>>;
-        beta?: Maybe<Pick<Version, 'sml_version'>>;
-        release?: Maybe<Pick<Version, 'sml_version'>>;
-      }
-    | undefined;
+  export let compatibility: CompatibilityInfoInput;
 
   $: logo = modLogo || assets + '/images/no_image.webp';
 </script>
 
 <div class="relative overflow-hidden">
-  {#if modStatus(latestVersions) === 'own-risk'}
-    <div class="mod-own-risk">
-      <div class="mod-inset" />
-      <div class="mod-stripe">USE AT YOUR OWN RISK</div>
-    </div>
-  {:else if modStatus(latestVersions) === 'outdated'}
-    <div class="mod-outdated">
-      <div class="mod-inset" />
-      <div class="mod-stripe">OUTDATED</div>
-    </div>
-  {/if}
+  <OutdatedBanner {compatibility} logo={true} />
   <img class="rounded-lg sm:max-w-lg max-w-full w-full" src={logo} alt="Logo for {modName}" />
 </div>
diff --git a/src/lib/components/mods/compatibility/CompatibilityButton.svelte b/src/lib/components/mods/compatibility/CompatibilityButton.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { CompatibilityInfoInput } from '$lib/generated';
+  import { CompatibilityState } from '$lib/generated';
+  import IconButton from '@smui/icon-button';
+  import Dialog, { Content, Title } from '@smui/dialog';
+  import CompatibilityInfo from '$lib/components/mods/compatibility/CompatibilityInfo.svelte';
+  let open = false;
+
+  export let compatibility: CompatibilityInfoInput;
+
+  let CSSClass = '';
+  if (compatibility) {
+    switch (compatibility.EXP.state) {
+      case CompatibilityState.Broken:
+        CSSClass = 'mod-broken-button';
+        break;
+      case CompatibilityState.Damaged:
+        CSSClass = 'mod-damaged-button';
+        break;
+    }
+  }
+</script>
+
+{#if compatibility}
+  <IconButton
+    class="{CSSClass} material-icons"
+    title="Compatibility issues"
+    on:click={() => {
+      open = true;
+    }}
+  >
+    warning
+  </IconButton>
+
+  <Dialog bind:open>
+    <Title>Compatibility Info</Title>
+    <Content>
+      <CompatibilityInfo {compatibility} />
+    </Content>
+  </Dialog>
+{/if}
diff --git a/src/lib/components/mods/compatibility/CompatibilityInfo.svelte b/src/lib/components/mods/compatibility/CompatibilityInfo.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { CompatibilityInfoInput } from '$lib/generated';
+  import CompatibilityStateText from '$lib/components/mods/compatibility/CompatibilityStateText.svelte';
+
+  export let compatibility: CompatibilityInfoInput;
+</script>
+
+{#if compatibility}
+  <div>Early Access: <CompatibilityStateText state={compatibility.EA.state} /></div>
+  {#if compatibility.EA.note}
+    {compatibility.EA.note}
+  {/if}
+  <br />
+  <div>Experimental: <CompatibilityStateText state={compatibility.EXP.state} /></div>
+  {#if compatibility.EXP.note}
+    {compatibility.EXP.note}
+  {/if}
+{/if}
diff --git a/src/lib/components/mods/compatibility/CompatibilityPopup.svelte b/src/lib/components/mods/compatibility/CompatibilityPopup.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { CompatibilityInfoInput } from '$lib/generated';
+
+  export let compatibility: CompatibilityInfoInput;
+</script>
+
+<h1>
+  {compatibility.EA.state}
+</h1>
diff --git a/src/lib/components/mods/compatibility/CompatibilityStateText.svelte b/src/lib/components/mods/compatibility/CompatibilityStateText.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { CompatibilityState } from '$lib/generated';
+  export let state: CompatibilityState;
+
+  function classForState(state: CompatibilityState): string {
+    return `mod-state-${state.toString().toLowerCase()}`;
+  }
+</script>
+
+<p class="{classForState(state)} mod-state">{state}</p>
diff --git a/src/lib/components/mods/compatibility/OutdatedBanner.svelte b/src/lib/components/mods/compatibility/OutdatedBanner.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { CompatibilityInfoInput } from '$lib/generated';
+  import { CompatibilityState } from '$lib/generated';
+
+  export let compatibility: CompatibilityInfoInput;
+  export let logo = false;
+
+  let CSSClass = '';
+  if (compatibility) {
+    switch (compatibility.EXP.state) {
+      case CompatibilityState.Broken:
+        CSSClass += 'mod-outdated-stripe';
+        CSSClass += ' mod-broken';
+        break;
+      case CompatibilityState.Damaged:
+        CSSClass += 'mod-outdated-stripe';
+        CSSClass += ' mod-damaged';
+        break;
+    }
+  }
+  if (logo) {
+    CSSClass += ' mod-logo-outdated';
+  }
+</script>
+
+<div class={CSSClass}>
+  <!--    <div class="mod-inset"/>-->
+</div>
diff --git a/src/lib/core/graphql.ts b/src/lib/core/graphql.ts
@@ -28,7 +28,10 @@ export const initializeGraphQLClient = (fetch?: LoadInput['fetch']): Client => {
           UserMod: () => null,
           GetGuides: () => null,
           OAuthOptions: () => null,
-          UserRoles: () => null
+          UserRoles: () => null,
+          Compatibility: () => null,
+          CompatibilityInfoInput: () => null,
+          CompatibilityInfo: () => null
         },
         updates: {
           Mutation: {
diff --git a/src/routes/_global.postcss b/src/routes/_global.postcss
@@ -186,40 +186,62 @@ body.accessibility {
   box-shadow: inset 0 0 70px 20px rgba(32, 15, 0, 0.75);
 }
 
-.mod-stripe {
-  box-shadow: 0 0 10px 5px rgba(32, 15, 0, 0.75);
-  z-index: 1;
-  width: 150%;
-  height: 44px;
-  position: absolute;
-  -webkit-backface-visibility: hidden;
-  left: -25%;
-  top: 60px;
-  transform: rotate(-15deg);
-  text-align: center;
-  vertical-align: middle;
-  font-weight: bold;
-  font-size: 34px;
-  color: black;
-  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
-}
-
-.mod-own-risk {
+.mod-outdated-stripe {
   user-select: none;
   pointer-events: none;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  clip-path: polygon(-10% 90%, 10% 110%, 110% 10%, 90% -10%);
+  box-shadow: inset 0 0 70px 20px rgba(32, 15, 0, 0.75);
+}
 
-  & .mod-stripe {
-    background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #abae0f 10px, #abae0f 20px);
-  }
+.mod-damaged {
+  opacity: 30%;
+  background: repeating-linear-gradient(to top right, transparent, transparent 4%, darkorange 4%, darkorange 8%);
 }
 
-.mod-outdated {
-  user-select: none;
-  pointer-events: none;
+.mod-broken {
+  top: -40%;
+  width: 140%;
+  height: 140%;
+  opacity: 50%;
+  background: repeating-linear-gradient(to top right, transparent, transparent 4%, red 4%, red 8%);
+}
 
-  & .mod-stripe {
-    background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #e25700 10px, #e25700 20px);
-  }
+.mod-logo-outdated {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: rotate(0);
+}
+
+.mod-broken-button {
+  color: red !important;
+  font-size: 50px;
+}
+
+.mod-damaged-button {
+  color: darkorange !important;
+  font-size: 40px;
+}
+
+.mod-state {
+  display: inline-block;
+}
+
+.mod-state-works {
+  color: limegreen;
+}
+
+.mod-state-damaged {
+  color: darkorange;
+}
+
+.mod-state-broken {
+  color: red;
 }
 
 @media (min-width: 1279px) {
diff --git a/src/routes/mod/[modId]/index.svelte b/src/routes/mod/[modId]/index.svelte
@@ -84,7 +84,6 @@
   <div class="grid gap-6 xlx:grid-flow-row">
     <div class="flex flex-wrap h-auto justify-between items-center">
       <h1 class="text-4xl font-bold">{$mod.data.mod.name}</h1>
-
       <div>
         {#if canUserEdit}
           <Button variant="outlined" on:click={() => goto(base + '/mod/' + modId + '/edit')}>Edit</Button>
@@ -111,7 +110,7 @@
         <ModLogo
           modLogo={$mod.data.mod.logo}
           modName={$mod.data.mod.name}
-          latestVersions={$mod.data.mod.latestVersions}
+          compatibility={$mod.data.mod.compatibility}
         />
         <ModInfo mod={$mod.data.mod} />
         <ModLatestVersions modId={$mod.data.mod.id} latestVersions={$mod.data.mod.latestVersions} />

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,16 @@ query GetMods($offset: Int!, $limit: Int!, $search: String, $order: Order, $orde`
`26`	`26`	`sml_version`
`27`	`27`	`}`
`28`	`28`	`}`
	`29`	`+ compatibility {`
	`30`	`+ EA {`
	`31`	`+ note`
	`32`	`+ state`
	`33`	`+ }`
	`34`	`+ EXP {`
	`35`	`+ note`
	`36`	`+ state`
	`37`	`+ }`
	`38`	`+ }`
`29`	`39`	`}`
`30`	`40`	`}`
`31`	`41`	`}`
Original file line number	Diff line number	Diff line change
`@@ -43,5 +43,15 @@ query GetMod($mod: String!) {`
`43`	`43`	`avatar`
`44`	`44`	`}`
`45`	`45`	`}`
	`46`	`+ compatibility {`
	`47`	`+ EA {`
	`48`	`+ note`
	`49`	`+ state`
	`50`	`+ }`
	`51`	`+ EXP {`
	`52`	`+ note`
	`53`	`+ state`
	`54`	`+ }`
	`55`	`+ }`
`46`	`56`	`}`
`47`	`57`	`}`