ACHIEVEMENTS: Support achievements with no matching Steam achievement #1930

femboyfireball · 2025-01-28T20:14:01Z

Bitburner achievements have been limited by Steam's cap of 100 achievements for games with limited profile features, but we can add more achievements internally. This change makes a few changes to allow the creation of new Bitburner achievements with no equivalent Steam achievement, including adding an optional NotInSteam boolean to the Achievement interface, and updates the Achievements page with new UI to display this to players. I tested the changes by temporarily setting NotInSteam to true for several existing achievements, and finally adding a new achievement (all in a different branch not in this pull request, achievements-test in my fork). The achievement README, which describes how to add a new achievement, was updated to (hopefully) explain how to do so going forward.

The achievements still properly save and load on both the web and electron versions, and connecting to Steam did not cause any issues.

NOTE: This is a continuation of #1508 due to the author abandoning the PR.

Screenshots of UI changes:
(note that the branch actually being merged would still show, e.g., Acquired (1/98, 1/98 for Steam))

catloversg · 2025-01-29T13:54:21Z

assets/Steam/achievements/pack-for-web-mac.sh

+  # Make background transparent and replace green with black
+  # The icons will be recolored by css filters matching the player's theme
+  # MacOS uses FreeBSD-style sed instead of GNU sed
+  sed -i '' "s/fill:#000000;/fill-opacity: 0%;/g" "$i"


Please check the suggestion from d0sboots at https://github.com/bitburner-official/bitburner-src/pull/1508/files/562479c5cc117709126b7c01e04ecfb6d2545cb7#r1689124659.

I think you forgot to remove this file.

catloversg · 2025-01-29T13:56:32Z

src/Achievements/AchievementCategory.tsx

+  title: string;
+  achievements: { achievement: Achievement }[];
+  allAchievements?: { achievement: Achievement }[];
+  pad?: boolean;


Optional: Use another suggestive name for this variable. For example: needPadding or usePadding.

catloversg · 2025-01-29T14:07:40Z

src/Achievements/AchievementCategory.tsx

+  // The 264px minWidth feels scuffed, but fixes an unknown edge case (Brought up in PR #1508).
+  return (
+    <Accordion defaultExpanded={!!allAchievements} disableGutters square sx={{ minWidth: "264px" }}>


Suggested change

// The 264px minWidth feels scuffed, but fixes an unknown edge case (Brought up in PR #1508).

return (

<Accordion defaultExpanded={!!allAchievements} disableGutters square sx={{ minWidth: "264px" }}>

/**

* For each achievement, we need to display the icon and the detail on the same "row" (icon on the left and detail on

* the right). When the viewport is too small, the detail part of some achievements is "moved" to a separate "row". It

* looks like this:

<achievement 1>

<icon><detail>

</achievement 1>

<achievement 2>

<icon>

<detail>

</achievement 2>

<achievement 3>

<icon><detail>

</achievement 3>

* Using "minWidth" fixes this issue by setting a min value for the width of each row.

*/

return (

<Accordion defaultExpanded={!!allAchievements} disableGutters square sx={{ minWidth: "645px" }}>

I guess that the edge case is what I wrote in the suggested change. Note that using 264px is not enough to fix this issue. Using 645px should be good enough.

Before:

After:

There are other CSS tricks, but it's unnecessary for this PR. Maybe I'll use them in another PR. It's best to keep this one simple.

catloversg · 2025-01-29T14:12:19Z

src/Achievements/AchievementsRoot.tsx

  root: {
    width: 50,
-    padding: theme.spacing(2),


This is not your change, so you can ignore my comment here.

If you don't mind, please test this change and take some screenshots. I'm curious about why we need this change.

catloversg · 2025-01-29T14:16:25Z

src/Achievements/README.md

- Run `node ./tools/fetch-steam-achievements-data DEVKEYHERE`
-  - Get your key here: https://steamcommunity.com/dev/apikey
+- If making a Steam achievement, create the achievement in Steam Dev Portal
+- Run `sh ./assets/Steam/achievements/pack-for-web.sh`, or `pack-for-web-mac.sh` for MacOS


After applying the suggestion from d0sboots to pack-for-web.sh, there is no need for pack-for-web-mac.sh.

+1, revert this particular line

femboyfireball · 2025-01-29T15:59:05Z

Got it, I'll add these in a few hours when I get time

d0sboots · 2025-02-01T00:12:24Z

assets/Steam/achievements/pack-for-web-mac.sh

+  # Make background transparent and replace green with black
+  # The icons will be recolored by css filters matching the player's theme
+  # MacOS uses FreeBSD-style sed instead of GNU sed
+  sed -i '' "s/fill:#000000;/fill-opacity: 0%;/g" "$i"


I think you forgot to remove this file.

d0sboots · 2025-02-01T00:13:11Z

assets/Steam/achievements/pack-for-web.sh

+  sed -i "" "s/fill:#000000;/fill-opacity: 0%;/g" "$i"
+  sed -i "" "s/fill:#00ff00;/fill:#000000;/g" "$i"


It's important that there be no space between -i and the "".

Suggested change

sed -i "" "s/fill:#000000;/fill-opacity: 0%;/g" "$i"

sed -i "" "s/fill:#00ff00;/fill:#000000;/g" "$i"

sed -i"" "s/fill:#000000;/fill-opacity: 0%;/g" "$i"

sed -i"" "s/fill:#00ff00;/fill:#000000;/g" "$i"

d0sboots · 2025-02-01T00:15:26Z

src/Achievements/AchievementData.json

@@ -1,6 +1,5 @@
 {
-  "note": "***** Generated from a script, overwritten by steam achievements data *****",
-  "fetchedOn": 1641517584274,
+  "note": "Originally generated by a script using Steam achievement data. Going forward, must be edited manually.",


Were you able to run this script? I don't think they've changed on Steam since this PR was originally made, but I'm not 100% sure.

d0sboots · 2025-02-01T00:17:04Z

src/Achievements/README.md

- Run `node ./tools/fetch-steam-achievements-data DEVKEYHERE`
-  - Get your key here: https://steamcommunity.com/dev/apikey
+- If making a Steam achievement, create the achievement in Steam Dev Portal
+- Run `sh ./assets/Steam/achievements/pack-for-web.sh`, or `pack-for-web-mac.sh` for MacOS


+1, revert this particular line

d0sboots · 2025-02-07T23:23:41Z

This looks good now, but there's a not-completely-trivial merge conflict I'm gonna let you handle.

femboyfireball changed the title ~~Re-implement PR #1508 with suggested changes~~ ACHIEVEMENTS: Support achievements with no matching Steam achievement Jan 28, 2025

catloversg suggested changes Jan 29, 2025

View reviewed changes

catloversg reviewed Jan 29, 2025

View reviewed changes

d0sboots reviewed Feb 1, 2025

View reviewed changes

femboyfireball closed this Feb 8, 2025

femboyfireball force-pushed the dev branch from 7cac9ee to c99fa44 Compare February 8, 2025 21:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ACHIEVEMENTS: Support achievements with no matching Steam achievement #1930

ACHIEVEMENTS: Support achievements with no matching Steam achievement #1930

femboyfireball commented Jan 28, 2025

catloversg Jan 29, 2025

d0sboots Feb 1, 2025

catloversg Jan 29, 2025

catloversg Jan 29, 2025

catloversg Jan 29, 2025

catloversg Jan 29, 2025

d0sboots Feb 1, 2025

femboyfireball commented Jan 29, 2025

d0sboots Feb 1, 2025

d0sboots Feb 1, 2025

d0sboots Feb 1, 2025

d0sboots Feb 1, 2025

d0sboots commented Feb 7, 2025

-  // The 264px minWidth feels scuffed, but fixes an unknown edge case (Brought up in PR #1508).
-  return (
-    <Accordion defaultExpanded={!!allAchievements} disableGutters square sx={{ minWidth: "264px" }}>
+  /**
+   * For each achievement, we need to display the icon and the detail on the same "row" (icon on the left and detail on
+   * the right). When the viewport is too small, the detail part of some achievements is "moved" to a separate "row". It
+   * looks like this:
+<achievement 1>
+  <icon><detail>
+</achievement 1>
+<achievement 2>
+  <icon>
+  <detail>
+</achievement 2>
+<achievement 3>
+  <icon><detail>
+</achievement 3>
+   * Using "minWidth" fixes this issue by setting a min value for the width of each row.
+   */
+  return (
+    <Accordion defaultExpanded={!!allAchievements} disableGutters square sx={{ minWidth: "645px" }}>

		sed -i "" "s/fill:#000000;/fill-opacity: 0%;/g" "$i"
		sed -i "" "s/fill:#00ff00;/fill:#000000;/g" "$i"

ACHIEVEMENTS: Support achievements with no matching Steam achievement #1930

ACHIEVEMENTS: Support achievements with no matching Steam achievement #1930

Conversation

femboyfireball commented Jan 28, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

femboyfireball commented Jan 29, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

d0sboots commented Feb 7, 2025