Skip to content

Commit 1c17f1e

Browse files
fezcodefezcode
committed
feat: enhance case converter and update project status
- Add Pascal Case and Sentence Case to Case Converter - Implement reusable BrutalistOutputCard component - Update UI with hover glows and improved typography - Update banner.piml for Tier Forge release - Add Tier Forge, Fallout Overlays, and Reading List to timeline and roadmap
1 parent 1e2f231 commit 1c17f1e

File tree

6 files changed

+137
-46
lines changed

6 files changed

+137
-46
lines changed

‎commitlint.config.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@ module.exports = {
55
2,
66
'always',
77
[
8-
'feat',
9-
'fix',
10-
'docs',
11-
'style',
12-
'refactor',
13-
'perf',
14-
'test',
15-
'chore',
16-
'revert',
17-
'ci',
18-
'build',
19-
'content', // Custom type for Fezcodex content
8+
'feat', // New features
9+
'fix', // Bug fixes
10+
'docs', // Documentation only changes
11+
'style', // Changes that do not affect the meaning of the code (white-space, formatting, etc.)
12+
'refactor', // A code change that neither fixes a bug nor adds a feature
13+
'perf', // A code change that improves performance
14+
'test', // Adding missing tests or correcting existing tests
15+
'chore', // Changes to the build process or auxiliary tools and libraries
16+
'revert', // Reverting a previous commit
17+
'ci', // CI configuration files and scripts
18+
'build', // Changes that affect the build system or external dependencies
19+
'content', // Custom type for Fezcodex content
2020
],
2121
],
2222
},

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/banner.piml‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,16 @@
5555
(from) 2026-01-06T00:00:00Z
5656
(to) 2026-01-10T23:59:59Z
5757
(text) AETHER MUSIC PLAYER IS ONLINE: ABSTRACT MUSIC PLAYER. LISTEN TO THE SOUNDS ABOVE THE CLOUDS. ACCESS AT /APPS/AETHER.
58-
(isActive) true
58+
(isActive) false
5959
(link) /apps/aether
6060
(linkText) See Aether
61+
62+
> (banner)
63+
(id) tier-forge-v1
64+
(type) info
65+
(from) 2026-01-11T00:00:00Z
66+
(to) 2026-01-15T23:59:59Z
67+
(text) TIER FORGE IS ONLINE: CONSTRUCT AND VISUALIZE RANKED DATA SETS WITH DRAG-AND-DROP PRECISION. ACCESS AT /APPS/TIER-FORGE.
68+
(isActive) true
69+
(link) /apps/tier-forge
70+
(linkText) See Tier Forge

‎public/roadmap/roadmap.piml‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -328,3 +328,34 @@
328328
(assignee) Gemini
329329
(created_at) 2026-01-08T18:00:00+03:00
330330
(notes) Major content update for Serfs & Frauds campaign.
331+
332+
> (issues)
333+
(id) FEZ-26
334+
(title) Fallout CRT Overlay Protocol
335+
(description) Implement authentic Fallout 3 and New Vegas inspired screen overlays with scanlines, noise, and color variants.
336+
(category) UI/UX
337+
(status) Completed
338+
(priority) High
339+
(assignee) Gemini
340+
(created_at) 2026-01-11T10:00:00+03:00
341+
(notes) Added Amber (NV) and Green (F3) modes in Settings.
342+
343+
> (issues)
344+
(id) FEZ-27
345+
(title) Tier Forge: Tier List Maker
346+
(description) Build a hierarchical ranking application with drag-and-drop support and export capabilities.
347+
(category) Apps
348+
(status) Completed
349+
(priority) High
350+
(assignee) Gemini
351+
(created_at) 2026-01-11T12:00:00+03:00
352+
353+
> (issues)
354+
(id) FEZ-28
355+
(title) Mission Intel Reading List
356+
(description) Create a tactical, high-immersion reading list interface at /reading with theme support and 3D visualization.
357+
(category) UI/UX
358+
(status) Completed
359+
(priority) High
360+
(assignee) Gemini
361+
(created_at) 2026-01-11T15:00:00+03:00

‎src/components/BrutalistOutputCard.jsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react';
2+
import { CopySimpleIcon } from '@phosphor-icons/react';
3+
4+
/**
5+
* A brutalist-styled card for displaying output data with a title, description, and copy functionality.
6+
* Designed to fit the Fezcodex aesthetic with hover glows and mono typography.
7+
*/
8+
const BrutalistOutputCard = ({ title, description, value, onCopy }) => {
9+
return (
10+
<div className="flex flex-col gap-2 p-4 border border-white/10 bg-white/[0.01] rounded-sm group relative overflow-hidden transition-all duration-300 hover:bg-white/[0.02] hover:border-white/20">
11+
{/* Top Border Glow */}
12+
<div className="absolute top-0 left-0 w-full h-[1px] bg-emerald-500/0 group-hover:bg-emerald-500/30 transition-all" />
13+
14+
{/* Bottom Gradient Glow */}
15+
<div className="absolute bottom-0 left-0 w-full h-12 bg-gradient-to-t from-emerald-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500 pointer-events-none" />
16+
17+
<div className="flex items-center justify-between">
18+
<div className="flex flex-col">
19+
<span className="text-[10px] font-mono font-bold text-gray-500 uppercase tracking-widest">
20+
{title}
21+
</span>
22+
{description && (
23+
<span className="text-[9px] font-mono text-gray-600 tracking-tight">
24+
{description}
25+
</span>
26+
)}
27+
</div>
28+
{onCopy && (
29+
<button
30+
onClick={() => onCopy(value)}
31+
className="text-gray-600 hover:text-emerald-400 transition-colors"
32+
title="Copy Output"
33+
>
34+
<CopySimpleIcon size={14} weight="bold" />
35+
</button>
36+
)}
37+
</div>
38+
39+
<div className="font-mono text-sm text-gray-300 break-all line-clamp-2 min-h-[2.5rem] relative z-10">
40+
{value || <span className="opacity-10">---</span>}
41+
</div>
42+
</div>
43+
);
44+
};
45+
46+
export default BrutalistOutputCard;

‎src/pages/apps/CaseConverterPage.jsx‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import {
44
ArrowLeftIcon,
55
TextAaIcon,
66
CodeIcon,
7-
CopySimpleIcon,
87
} from '@phosphor-icons/react';
98
import { useToast } from '../../hooks/useToast';
109
import useSeo from '../../hooks/useSeo';
1110
import GenerativeArt from '../../components/GenerativeArt';
1211
import BreadcrumbTitle from '../../components/BreadcrumbTitle';
12+
import BrutalistOutputCard from '../../components/BrutalistOutputCard';
1313

1414
function CaseConverterPage() {
1515
const appName = 'Case Converter';
@@ -32,13 +32,20 @@ function CaseConverterPage() {
3232
const convertToUpperCase = () => inputText.toUpperCase();
3333
const convertToLowerCase = () => inputText.toLowerCase();
3434
const convertToTitleCase = () =>
35-
inputText.replace(/\b\w/g, (char) => char.toUpperCase());
36-
const convertToCamelCase = () =>
35+
inputText.toLowerCase().replace(/\b\w/g, (char) => char.toUpperCase());
36+
const convertToPascalCase = () =>
3737
inputText
38-
.replace(/(?:^|\s)([a-zA-Z])/g, (_, char) => char.toUpperCase())
38+
.toLowerCase()
39+
.replace(/(?:^|\s+)([a-z])/g, (_, char) => char.toUpperCase())
3940
.replace(/\s+/g, '');
41+
const convertToCamelCase = () => {
42+
const pascal = convertToPascalCase();
43+
return pascal.charAt(0).toLowerCase() + pascal.slice(1);
44+
};
4045
const convertToSnakeCase = () => inputText.toLowerCase().replace(/\s+/g, '_');
4146
const convertToKebabCase = () => inputText.toLowerCase().replace(/\s+/g, '-');
47+
const convertToSentenceCase = () =>
48+
inputText.charAt(0).toUpperCase() + inputText.slice(1).toLowerCase();
4249

4350
const copyToClipboard = (text) => {
4451
navigator.clipboard.writeText(text).then(() => {
@@ -103,33 +110,51 @@ function CaseConverterPage() {
103110
</h3>
104111

105112
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
106-
<CaseOutput
113+
<BrutalistOutputCard
107114
title="Uppercase"
115+
description="ALL CHARACTERS CAPITALIZED"
108116
value={convertToUpperCase()}
109117
onCopy={copyToClipboard}
110118
/>
111-
<CaseOutput
119+
<BrutalistOutputCard
112120
title="Lowercase"
121+
description="all characters lowercase"
113122
value={convertToLowerCase()}
114123
onCopy={copyToClipboard}
115124
/>
116-
<CaseOutput
125+
<BrutalistOutputCard
117126
title="Title Case"
127+
description="Capitalize Every Word"
118128
value={convertToTitleCase()}
119129
onCopy={copyToClipboard}
120130
/>
121-
<CaseOutput
131+
<BrutalistOutputCard
132+
title="Sentence Case"
133+
description="Capitalize only the first word"
134+
value={convertToSentenceCase()}
135+
onCopy={copyToClipboard}
136+
/>
137+
<BrutalistOutputCard
122138
title="Camel Case"
139+
description="lowerCaseThenCapitalize"
123140
value={convertToCamelCase()}
124141
onCopy={copyToClipboard}
125142
/>
126-
<CaseOutput
143+
<BrutalistOutputCard
144+
title="Pascal Case"
145+
description="CapitalizeEveryWordNoSpaces"
146+
value={convertToPascalCase()}
147+
onCopy={copyToClipboard}
148+
/>
149+
<BrutalistOutputCard
127150
title="Snake Case"
151+
description="lowercase_with_underscores"
128152
value={convertToSnakeCase()}
129153
onCopy={copyToClipboard}
130154
/>
131-
<CaseOutput
155+
<BrutalistOutputCard
132156
title="Kebab Case"
157+
description="lowercase-with-hyphens"
133158
value={convertToKebabCase()}
134159
onCopy={copyToClipboard}
135160
/>
@@ -141,25 +166,4 @@ function CaseConverterPage() {
141166
);
142167
}
143168

144-
const CaseOutput = ({ title, value, onCopy }) => (
145-
<div className="flex flex-col gap-2 p-4 border border-white/10 bg-white/[0.01] rounded-sm group relative overflow-hidden">
146-
<div className="absolute top-0 left-0 w-full h-[1px] bg-emerald-500/0 group-hover:bg-emerald-500/30 transition-all" />
147-
<div className="flex items-center justify-between">
148-
<span className="text-[9px] font-mono font-bold text-gray-600 uppercase tracking-widest">
149-
{title}
150-
</span>
151-
<button
152-
onClick={() => onCopy(value)}
153-
className="text-gray-600 hover:text-emerald-400 transition-colors"
154-
title="Copy Output"
155-
>
156-
<CopySimpleIcon size={14} weight="bold" />
157-
</button>
158-
</div>
159-
<div className="font-mono text-sm text-gray-300 break-all line-clamp-2 min-h-[2.5rem]">
160-
{value || <span className="opacity-10">---</span>}
161-
</div>
162-
</div>
163-
);
164-
165169
export default CaseConverterPage;

0 commit comments

Comments
 (0)