Skip to content

Commit 13a63b8

Browse files
fezcodefezcode
committed
DND: From Serfs and Frauds 5
1 parent d2bd156 commit 13a63b8

File tree

6 files changed

+161
-21
lines changed

6 files changed

+161
-21
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717
"react-markdown": "^10.1.0",
1818
"react-router-dom": "^7.9.4",
1919
"react-scripts": "5.0.1",
20+
"react-slick": "^0.31.0",
2021
"react-syntax-highlighter": "^15.6.6",
22+
"slick-carousel": "^1.8.1",
2123
"web-vitals": "^2.1.4"
2224
},
2325
"scripts": {

‎public/dnd/episodes.json‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"episodes": [
66
{ "id": 1, "filename": "episode1.txt", "title": "Episode 1: The Whispering Woods", "author": "fezcode" },
77
{ "id": 2, "filename": "episode2.txt", "title": "Episode 2: The Goblin Ambush", "author": "fezcode" }
8-
]
8+
],
9+
"overlay": "red"
910
},
1011

1112
{
@@ -14,7 +15,8 @@
1415
"episodes": [
1516
{ "id": 1, "filename": "episode1.txt", "title": "Episode 1: The Whispering Woods", "author": "fezcode" },
1617
{ "id": 2, "filename": "episode2.txt", "title": "Episode 2: The Goblin Ambush", "author": "fezcode" }
17-
]
18+
],
19+
"overlay": "blue"
1820
},
1921

2022
{
@@ -23,7 +25,8 @@
2325
"episodes": [
2426
{ "id": 1, "filename": "episode1.txt", "title": "Episode 1: The Whispering Woods", "author": "fezcode" },
2527
{ "id": 2, "filename": "episode2.txt", "title": "Episode 2: The Goblin Ambush", "author": "fezcode" }
26-
]
28+
],
29+
"overlay": "black"
2730
},
2831

2932
{
@@ -32,6 +35,7 @@
3235
"episodes": [
3336
{ "id": 1, "filename": "episode1.txt", "title": "Episode 1: The Whispering Woods", "author": "fezcode" },
3437
{ "id": 2, "filename": "episode2.txt", "title": "Episode 2: The Goblin Ambush", "author": "fezcode" }
35-
]
38+
],
39+
"overlay": "green"
3640
}
3741
]

‎src/components/DndCard.js‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,26 @@ import React from 'react';
22
import { Link } from 'react-router-dom';
33
import '../styles/dnd.css';
44

5-
const DndCard = ({ title, author, link, backgroundImage, className }) => {
5+
const DndCard = ({ title, author, link, backgroundImage, className, overlayColor }) => {
66
return (
7-
<Link to={link} className={`dnd-card ${className || ''}`} style={{ backgroundImage: `url(${backgroundImage})` }}>
8-
<h3>{title}</h3>
9-
{author && <p className="author-text">{author}</p>}
7+
<Link to={link} className={`dnd-card ${className || ''}`} style={{ backgroundImage: `url(${backgroundImage})`, position: 'relative' }}>
8+
{overlayColor && (
9+
<div
10+
style={{
11+
position: 'absolute',
12+
top: 0,
13+
left: 0,
14+
right: 0,
15+
bottom: 0,
16+
backgroundColor: overlayColor,
17+
opacity: 0.1,
18+
zIndex: 1,
19+
borderRadius: '10px', // Match card border-radius
20+
}}
21+
></div>
22+
)}
23+
<h3 style={{ zIndex: 2 }}>{title}</h3>
24+
{author && <p className="author-text" style={{ zIndex: 2 }}>{author}</p>}
1025
</Link>
1126
);
1227
};

‎src/pages/DndLorePage.js‎

Lines changed: 56 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ import '../styles/dnd.css';
66
import { DndContext } from '../context/DndContext'; // Import DndContext
77
import { parseWallpaperName } from '../utils/dndUtils'; // Import parseWallpaperName
88
import DndCard from '../components/DndCard'; // Import DndCard
9+
import Slider from 'react-slick'; // Import Slider
10+
import 'slick-carousel/slick/slick.css'; // Import slick-carousel CSS
11+
import 'slick-carousel/slick/slick-theme.css'; // Import slick-carousel theme CSS
912

1013
const pageVariants = {
1114
initial: {
@@ -56,6 +59,35 @@ function DndLorePage() {
5659
fetchEpisodes();
5760
}, []);
5861

62+
const settings = {
63+
dots: true,
64+
infinite: true,
65+
speed: 500,
66+
slidesToShow: 3,
67+
slidesToScroll: 1,
68+
autoplay: true,
69+
autoplaySpeed: 3000,
70+
responsive: [
71+
{
72+
breakpoint: 1024,
73+
settings: {
74+
slidesToShow: 2,
75+
slidesToScroll: 1,
76+
infinite: true,
77+
dots: true
78+
}
79+
},
80+
{
81+
breakpoint: 600,
82+
settings: {
83+
slidesToShow: 1,
84+
slidesToScroll: 1,
85+
initialSlide: 1
86+
}
87+
}
88+
]
89+
};
90+
5991
return (
6092
<motion.div
6193
initial="initial"
@@ -65,24 +97,38 @@ function DndLorePage() {
6597
transition={pageTransition}
6698
className="dnd-page-container"
6799
>
68-
<div className="dnd-hero" style={{ position: 'relative', minHeight: '100vh' }}>
100+
<div className="dnd-hero" style={{ position: 'relative' }}>
69101
<h1 className="dnd-title-box">
70102
<span className="dnd-hero-title-white">The Lore</span>
71103
</h1>
72104
<div className="dnd-content-box" style={{ zIndex: 1 }}>
73105
<h2 style={{ color: '#fff', marginBottom: '1.5rem', fontSize: '1.8rem' }}>Books</h2>
74-
<div className="dnd-cards-container" style={{ justifyContent: 'center', gap: '2rem', flexWrap: 'wrap' }}>
106+
<Slider {...settings}>
75107
{episodes.map((book) => (
76-
<DndCard
77-
key={book.bookId}
78-
title={book.bookTitle}
79-
author={book.episodes && book.episodes.length > 0 ? `${book.episodes[0].author}` : "No author information"}
80-
link={`/dnd/books/${book.bookId}`}
81-
backgroundImage={`${process.env.PUBLIC_URL}/images/dnd/book-cover.png`}
82-
/>
108+
<div key={book.bookId} className="px-12"> {/* Add padding for spacing between cards */}
109+
<DndCard
110+
title={book.bookTitle}
111+
author={book.episodes && book.episodes.length > 0 ? `${book.episodes[0].author}` : "No author information"}
112+
link={`/dnd/books/${book.bookId}`}
113+
backgroundImage={`${process.env.PUBLIC_URL}/images/dnd/book-cover.png`}
114+
overlayColor={book.overlay}
115+
/>
116+
</div>
83117
))}
84-
</div>
118+
</Slider>
85119
</div>
120+
<div className="dnd-content-box" style={{ zIndex: 1, marginTop: '2rem' }}>
121+
<h2 style={{ color: '#fff', marginBottom: '1.5rem', fontSize: '1.8rem' }}>All Books</h2>
122+
<ul style={{ listStyle: 'none', padding: 0 }}>
123+
{episodes.map((book) => (
124+
<li key={book.bookId} style={{ marginBottom: '1rem' }}>
125+
<Link to={`/dnd/books/${book.bookId}`} className="dnd-list-item-link">
126+
{book.bookTitle}
127+
</Link>
128+
</li>
129+
))}
130+
</ul>
131+
</div>
86132
</div>
87133
</motion.div>
88134
);

‎src/styles/dnd.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@
77
background-position: center;
88
color: #fff;
99
font-family: 'MedievalSharp', cursive;
10+
padding-top: 5rem;
1011
}
1112

1213
.dnd-hero {
13-
min-height: calc(100vh - 12rem);
14+
min-height: calc(100vh - 5rem);
1415
display: flex;
1516
flex-direction: column;
1617
align-items: center;
@@ -46,7 +47,7 @@
4647
background-color: rgba(50, 30, 30, 0.9); /* New background color, blacker with a pinch of red */
4748
padding: 5rem 2rem 4rem; /* Adjusted top padding */
4849
width: 90%;
49-
max-width: 800px; /* Narrower for better readability */
50+
max-width: 1200px; /* Narrower for better readability */
5051
margin: 2rem auto; /* Center the box */
5152
border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle light border */
5253
border-radius: 8px;
@@ -336,4 +337,15 @@
336337
.dnd-episode-nav-button:hover {
337338
background-color: rgba(150, 90, 0, 0.7); /* Darker on hover */
338339
color: #FFB03A; /* Lighter text on hover */
339-
}
340+
}
341+
342+
.dnd-list-item-link {
343+
color: #E09500;
344+
text-decoration: none;
345+
font-size: 1.5rem;
346+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
347+
}
348+
349+
.dnd-list-item-link:hover {
350+
color: #FFB03A;
351+
}

0 commit comments

Comments
 (0)