Skip to content

Commit e1826b3

Browse files
fezcodefezcode
committed
DND: From Serfs and Frauds 8
1 parent 77aae05 commit e1826b3

File tree

6 files changed

+24
-15
lines changed

6 files changed

+24
-15
lines changed

‎.eslintrc.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
{
2+
"env": {
3+
"node": true
4+
},
25
"extends": [
36
"react-app",
47
"react-app/jest"

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,13 @@
2323
"web-vitals": "^2.1.4"
2424
},
2525
"scripts": {
26+
"prestart": "node scripts/generateWallpapers.js",
2627
"start": "craco start",
2728
"prebuild": "node scripts/generateWallpapers.js",
2829
"build": "craco build",
2930
"test": "craco test",
3031
"eject": "react-scripts eject",
31-
"lint": "eslint src/**/*.{js,jsx} --fix",
32+
"lint": "eslint \"src/**/*.{js,jsx}\" \"scripts/**/*.js\" --fix",
3233
"format": "prettier --write \"src/**/*.{js,jsx,css,json}\"",
3334
"predeploy": "npm run build",
3435
"deploy": "gh-pages -d build -b gh-pages"

‎scripts/generateWallpapers.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
const fs = require('fs');
22
const path = require('path');
33

4-
const wallpapersDir = path.join(__dirname, '..' , 'public', 'images', 'dnd', 'wallies');
5-
const outputFile = path.join(__dirname, '..' , 'src', 'utils', 'dndWallpapers.js');
4+
const wallpapersDir = path.join(__dirname, '..', 'public', 'images', 'dnd', 'wallies');
5+
const outputFile = path.join(__dirname, '..', 'src', 'utils', 'dndWallpapers.js');
66

77
fs.readdir(wallpapersDir, (err, files) => {
88
if (err) {
@@ -15,11 +15,14 @@ fs.readdir(wallpapersDir, (err, files) => {
1515
return ext === '.jpg' || ext === '.png' || ext === '.jpeg' || ext === '.gif';
1616
});
1717

18-
const wallpaperPaths = imageFiles.map(file => `'/images/dnd/wallies/${file}'`);
18+
// Construct each path string with quotes and indentation
19+
const formattedPaths = imageFiles.map(file => ` '/images/dnd/wallies/${file}'`);
20+
21+
// Join them with a comma and newline
22+
const arrayContent = formattedPaths.join(',\n');
1923

2024
const content = `const dndWallpapers = [
21-
${wallpaperPaths.join(',
22-
')}
25+
${arrayContent}
2326
];
2427
2528
export default dndWallpapers;
@@ -32,4 +35,4 @@ export default dndWallpapers;
3235
}
3336
console.log('dndWallpapers.js generated successfully!');
3437
});
35-
});
38+
});

‎src/pages/DndLorePage.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import usePageTitle from '../utils/usePageTitle';
55
import '../styles/dnd.css';
66
import { DndContext } from '../context/DndContext'; // Import DndContext
77
import { parseWallpaperName } from '../utils/dndUtils'; // Import parseWallpaperName
8+
import dndWallpapers from '../utils/dndWallpapers';
89
import DndCard from '../components/DndCard'; // Import DndCard
910
import Slider from 'react-slick'; // Import Slider
1011
import 'slick-carousel/slick/slick.css'; // Import slick-carousel CSS
@@ -31,9 +32,12 @@ const pageTransition = {
3132
function DndLorePage() {
3233
usePageTitle('The Lore');
3334
const { setBgImageName, setBreadcrumbs } = useContext(DndContext); // Get setBgImageName and setBreadcrumbs from context
35+
const [bgImage, setBgImage] = useState(''); // State for background image
3436

3537
useEffect(() => {
36-
setBgImageName(parseWallpaperName('artem-sapegin-XGDBdSQ70O0-unsplash.jpg')); // Set parsed name for the static background
38+
const randomImage = dndWallpapers[Math.floor(Math.random() * dndWallpapers.length)];
39+
setBgImage(randomImage);
40+
setBgImageName(parseWallpaperName(randomImage.split('/').pop()));
3741
setBreadcrumbs([
3842
{ label: 'D&D Home', path: '/dnd' },
3943
{ label: 'The Lore', path: '/dnd/lore' },
@@ -97,7 +101,7 @@ function DndLorePage() {
97101
transition={pageTransition}
98102
className="dnd-page-container"
99103
>
100-
<div className="dnd-hero" style={{ position: 'relative' }}>
104+
<div className="dnd-hero" style={{ backgroundImage: `url(${process.env.PUBLIC_URL}${bgImage})`, position: 'relative' }}>
101105
<h1 className="dnd-title-box">
102106
<span className="dnd-hero-title-white">The Lore</span>
103107
</h1>

‎src/styles/dnd.css‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@
22
@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap');
33

44
.dnd-page-container {
5-
background: linear-gradient(rgba(40, 44, 52, 0.6), rgba(40, 44, 52, 0.6)), url('../../public/images/dnd/wallies/artem-sapegin-XGDBdSQ70O0-unsplash.jpg');
6-
background-size: cover;
7-
background-position: center;
85
color: #fff;
96
font-family: 'MedievalSharp', cursive;
107
padding-top: 5rem;
@@ -329,7 +326,7 @@
329326
border: 1px solid #E09500;
330327
padding: 0.5rem 1rem;
331328
border-radius: 5px;
332-
background-color: rgba(100, 60, 0, 0.5);
329+
background-color: rgba(90, 54, 0, 0.8);
333330
display: inline-block; /* To apply padding and border correctly */
334331
white-space: nowrap; /* Prevent text wrapping */
335332
}

‎src/utils/dndWallpapers.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
const dndWallpapers = [
22
'/images/dnd/wallies/artem-sapegin-XGDBdSQ70O0-unsplash.jpg',
3+
'/images/dnd/wallies/carlos-cram-ttJt5X9Hmu8-unsplash.jpg',
34
'/images/dnd/wallies/ember-navarro-3q2TzsUUVIo-unsplash.jpg',
5+
'/images/dnd/wallies/galxrax-rax-oGAf4jsC0Fw-unsplash.jpg',
46
'/images/dnd/wallies/jr-korpa-RADGP_E2pBk-unsplash.jpg',
5-
'/images/dnd/wallies/muhammad-haikal-sjukri--RMBf_xSf2U-unsplash.jpg',
6-
'/images/dnd/wallies/vida-huang-XHiLiBfp7UM-unsplash.jpg',
7+
'/images/dnd/wallies/muhammad-haikal-sjukri--RMBf_xSf2U-unsplash.jpg'
78
];
89

910
export default dndWallpapers;

0 commit comments

Comments
 (0)