Skip to content

Commit fb54c68

Browse files
fezcodefezcode
committed
feat: add achievements with cryptic descriptions
1 parent 73c1d7b commit fb54c68

File tree

3 files changed

+47
-20
lines changed

3 files changed

+47
-20
lines changed

‎src/config/achievements.js‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ import {
3131
TargetIcon,
3232
BrainIcon,
3333
YinYangIcon,
34-
ArrowsClockwiseIcon
34+
ArrowsClockwiseIcon,
35+
CirclesFourIcon,
3536
} from '@phosphor-icons/react';
3637

3738
export const ACHIEVEMENTS = [
@@ -680,13 +681,6 @@ export const ACHIEVEMENTS = [
680681
icon: <ArrowsClockwiseIcon size={32} weight="duotone" />,
681682
category: 'Secret',
682683
},
683-
{
684-
id: 'clean_slate',
685-
title: 'Clean Slate',
686-
description: 'Tabula Rasa.',
687-
icon: <TrashIcon size={32} weight="duotone" />,
688-
category: 'Secret',
689-
},
690684
{
691685
id: 'konami_code',
692686
title: 'Konami Code',
@@ -743,4 +737,25 @@ export const ACHIEVEMENTS = [
743737
icon: <SkullIcon size={32} weight="duotone" />,
744738
category: 'Secret',
745739
},
740+
{
741+
id: 'entropy_increaser',
742+
title: 'Entropy Increaser',
743+
description: 'Disorder is inevitable.',
744+
icon: <CirclesFourIcon size={32} weight="duotone" />,
745+
category: 'Secret',
746+
},
747+
{
748+
id: 'sos_signal',
749+
title: 'A Universal plea',
750+
description: 'THE universal plea.',
751+
icon: <PhoneIcon size={32} weight="duotone" />,
752+
category: 'Secret',
753+
},
754+
{
755+
id: 'clean_slate',
756+
title: 'Clean Slate',
757+
description: 'Tabula Rasa.',
758+
icon: <TrashIcon size={32} weight="duotone" />,
759+
category: 'Secret',
760+
},
746761
];

‎src/pages/apps/BubbleWrapPage.js‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import React, { useState, useEffect } from 'react';
2-
import { Link } from 'react-router-dom';
3-
import { ArrowLeftIcon, CirclesFourIcon } from '@phosphor-icons/react';
1+
import React, {useState, useEffect} from 'react';
2+
import {Link} from 'react-router-dom';
3+
import {ArrowLeftIcon, CirclesFourIcon} from '@phosphor-icons/react';
44
import colors from '../../config/colors';
55
import useSeo from '../../hooks/useSeo';
66
import BreadcrumbTitle from '../../components/BreadcrumbTitle';
7+
import {useAchievements} from '../../context/AchievementContext';
78

89
const BUBBLE_COUNT = 100; // Number of bubbles
910

@@ -21,6 +22,7 @@ const BubbleWrapPage = () => {
2122
twitterImage: 'https://fezcode.github.io/logo512.png',
2223
});
2324

25+
const {unlockAchievement} = useAchievements();
2426
const [bubbles, setBubbles] = useState(Array(BUBBLE_COUNT).fill(false));
2527
const [popCount, setPopCount] = useState(0);
2628

@@ -31,6 +33,12 @@ const BubbleWrapPage = () => {
3133
setAudioContext(new (window.AudioContext || window.webkitAudioContext)());
3234
}, []);
3335

36+
useEffect(() => {
37+
if (popCount === BUBBLE_COUNT) {
38+
unlockAchievement('entropy_increaser');
39+
}
40+
}, [popCount, unlockAchievement]);
41+
3442
const playPopSound = () => {
3543
if (!audioContext) return;
3644

@@ -79,11 +87,11 @@ const BubbleWrapPage = () => {
7987
to="/apps"
8088
className="group text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4"
8189
>
82-
<ArrowLeftIcon className="text-xl transition-transform group-hover:-translate-x-1" />{' '}
90+
<ArrowLeftIcon className="text-xl transition-transform group-hover:-translate-x-1"/>
8391
Back to Apps
8492
</Link>
85-
<BreadcrumbTitle title="Bubble Wrap" slug="pop" />
86-
<hr className="border-gray-700" />
93+
<BreadcrumbTitle title="Bubble Wrap" slug="pop"/>
94+
<hr className="border-gray-700"/>
8795
<div className="flex justify-center items-center mt-16">
8896
<div
8997
className="group bg-transparent border rounded-lg shadow-2xl p-6 flex flex-col justify-between relative transform overflow-hidden h-full w-full max-w-3xl"
@@ -99,9 +107,9 @@ const BubbleWrapPage = () => {
99107
></div>
100108
<div className="relative z-10 p-1 text-center">
101109
<h1 className="text-3xl font-arvo font-normal mb-4 text-app flex items-center justify-center gap-2">
102-
<CirclesFourIcon size={32} /> Bubble Wrap
110+
<CirclesFourIcon size={32}/> Bubble Wrap
103111
</h1>
104-
<hr className="border-gray-700 mb-6" />
112+
<hr className="border-gray-700 mb-6"/>
105113

106114
<div className="flex justify-between items-center mb-6 px-4">
107115
<div className="text-xl font-bold">Popped: {popCount}</div>
@@ -124,10 +132,10 @@ const BubbleWrapPage = () => {
124132
onClick={() => popBubble(index)}
125133
className={`w-12 h-12 rounded-full border-2 transition-all duration-100 relative overflow-hidden focus:outline-none
126134
${
127-
isPopped
128-
? 'bg-transparent scale-95 opacity-50 border-gray-600'
129-
: 'bg-white/10 hover:bg-white/20 scale-100 cursor-pointer'
130-
}`}
135+
isPopped
136+
? 'bg-transparent scale-95 opacity-50 border-gray-600'
137+
: 'bg-white/10 hover:bg-white/20 scale-100 cursor-pointer'
138+
}`}
131139
style={{
132140
borderColor: isPopped ? 'gray' : cardStyle.color,
133141
boxShadow: isPopped

‎src/pages/apps/MorseCodeTranslatorPage.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
33
import { ArrowLeftIcon, SpeakerSimpleHighIcon } from '@phosphor-icons/react';
44
import useSeo from '../../hooks/useSeo';
55
import BreadcrumbTitle from '../../components/BreadcrumbTitle';
6+
import { useAchievements } from '../../context/AchievementContext';
67

78
const MORSE_CODE_MAP = {
89
A: '.-',
@@ -72,6 +73,7 @@ const MorseCodeTranslatorPage = () => {
7273
twitterImage: 'https://fezcode.github.io/logo512.png',
7374
});
7475

76+
const { unlockAchievement } = useAchievements();
7577
const [text, setText] = useState('');
7678
const [morseCode, setMorseCode] = useState('');
7779

@@ -83,6 +85,7 @@ const MorseCodeTranslatorPage = () => {
8385
.map((char) => MORSE_CODE_MAP[char] || '')
8486
.join(' ');
8587
setMorseCode(newMorseCode);
88+
if (newText === 'SOS') unlockAchievement('sos_signal');
8689
};
8790

8891
const handleMorseChange = (e) => {
@@ -93,6 +96,7 @@ const MorseCodeTranslatorPage = () => {
9396
.map((code) => REVERSE_MORSE_CODE_MAP[code] || '')
9497
.join('');
9598
setText(newText);
99+
if (newText === 'SOS') unlockAchievement('sos_signal');
96100
};
97101

98102
const playMorseCode = () => {

0 commit comments

Comments
 (0)