Skip to content

Commit 355e362

Browse files
JorchCortezJorchCortez
authored
Merge pull request #14 from TheCodeRaccoons/te-taking-project
More project updates
2 parents 67f1efc + db9ee91 commit 355e362

12 files changed

Lines changed: 123 additions & 102 deletions

File tree

‎src/App.css‎

Lines changed: 6 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -303,40 +303,13 @@ section.sv-container{
303303
padding: 15px 0;
304304
}
305305

306-
/*Skills*/
307306
.wrapper{
308-
width: 100%;
309-
height: 100%;
310-
display: flex;
311-
flex-wrap: wrap;
312-
justify-content: center;
313-
align-items: center;
314-
}
315-
.stats-container{
316-
width: 100%;
317-
height: 100%;
318-
margin-top: -13px;
319-
padding: 2.5%;
320-
border-image: url('./Media/Windows/Window5.png') 16 16 16 16 fill stretch;
321-
border-style: solid;
322-
image-rendering: pixelated;
323-
border-width: 35px;
324-
overflow: hidden;
325-
}
326-
.achievement-container{
327-
width: 90%;
328-
min-height: 450px;
329-
height: auto;
330-
}
331-
332-
.skill-info{
333-
padding: 30px 0;
334-
width: 100%;
335-
height: 400px;
336-
display: flex;
337-
flex-wrap: wrap;
338-
align-items: center;
339-
justify-content: center;
307+
width: 100%;
308+
height: 100%;
309+
display: flex;
310+
flex-wrap: wrap;
311+
justify-content: center;
312+
align-items: center;
340313
}
341314

342315
.a-title{

‎src/Components/Achievements/Achievements.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ const Achievements = ({
2222
professions,
2323
shippedItems,
2424
cropsShipped,
25-
mineralsFound,
2625
cookedItems,
2726
museumCollection,
2827
availableSpecialRequests,
@@ -47,7 +46,7 @@ const Achievements = ({
4746
{img: TabQuests, alt: "Quests"},
4847
{img: TabGrandpa, alt: "Grandpa's evaluation"}
4948
];
50-
49+
console.log("Professions in Achievements:", professions);
5150
return (
5251
<div className="file-container">
5352
<img className="star" alt="star" src={Star}></img>

‎src/Components/Skills/SkillContainer/SkillContainer.css‎

Lines changed: 57 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,31 @@
11
/* SkillContainer Component Styles */
2+
3+
:root {
4+
--active-box-shadow:
5+
inset 2px -2px 2px rgba(0, 0, 0, 0.5),
6+
inset -2px 2px 2px rgba(250, 240, 224, 0.5),
7+
-2px 2px 2px rgba(0, 0, 0, 0.5);
8+
}
9+
210
.skill-container {
311
position: relative;
4-
width: 28%;
5-
height: auto;
6-
margin: 1%;
7-
padding: 1%;
8-
-webkit-background-size: cover;
9-
-moz-background-size: cover;
10-
-o-background-size: cover;
11-
background-size: 100% 100%;
12+
width: 48rem;
13+
height: auto;
1214
display: flex;
1315
flex-direction: column;
1416
align-items: center;
15-
justify-content: space-between;
16-
border-image: url(/src/Media/Windows/Window5.png) 2 fill stretch;
17-
border-style: solid;
18-
image-rendering: pixelated;
19-
border-width: 4px;
17+
justify-content: space-between;
18+
}
19+
20+
.skill-container__item {
21+
width: 100%;
22+
height: auto;
23+
display: flex;
24+
flex-direction: row;
25+
align-items: center;
26+
justify-content: flex-end;
27+
gap: 0.5rem;
28+
font-size: 1.5rem;
2029
}
2130

2231
.skill-container__title {
@@ -52,44 +61,51 @@
5261
text-align: center;
5362
}
5463

55-
.skill-container__stats-line {
56-
margin: 0.2rem 0;
64+
.skill-container__icon {
65+
width: 2rem;
66+
height: 2rem;
67+
cursor: help;
68+
}
69+
70+
.skill-container__icon:hover {
71+
transform: scale(1.1);
72+
}
73+
74+
.skill-container__level-indicators {
5775
display: flex;
58-
flex-direction: column;
59-
gap: 6px;
76+
gap: 0.5rem;
6077
}
6178

62-
.skill-container__progress-bar {
63-
width: 100%;
64-
height: 12px;
65-
background-color: #3a3a3a;
66-
border-radius: 6px;
79+
.skill-container__level-block {
80+
border-radius: 0.25rem;
6781
overflow: hidden;
68-
border: 2px solid #8b4513;
69-
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
82+
height: 1.25rem;
83+
border: 0.125rem solid #C88D36;
84+
background-color: #C87D1B;
85+
box-shadow: inset -2px 2px 2px rgba(0, 0, 0, 0.5),
86+
-2px 2px 2px rgba(0, 0, 0, 0.5);
7087
}
7188

72-
.skill-container__progress-fill {
73-
height: 100%;
74-
background: linear-gradient(90deg, #4caf50, #81c784);
75-
border-radius: 4px;
76-
transition: width 0.3s ease;
77-
min-width: 2px;
78-
box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
89+
.skill-container__level-block.sm {
90+
width: 1.5rem;
91+
&.active {
92+
background-color: #DF003B;
93+
box-shadow: var(--active-box-shadow);
94+
}
7995
}
8096

81-
.skill-container__icon {
82-
position: absolute;
83-
bottom: -12px;
84-
left: -12px;
85-
width: 40px;
86-
height: 40px;
87-
cursor: help;
88-
transition: transform 0.2s ease-in-out;
97+
.skill-container__level-block.lg {
98+
width: 3rem;
99+
&.active {
100+
background-color: #FFA301;
101+
box-shadow: var(--active-box-shadow);
102+
}
89103
}
90104

91-
.skill-container__icon:hover {
92-
transform: scale(1.1);
105+
.skill-container__level-no {
106+
width: 2ch;
107+
font-weight: 600;
108+
font-size: 2rem;
93109
}
94110

95111
/* Responsive adjustments */

‎src/Components/Skills/SkillContainer/SkillContainer.tsx‎

Lines changed: 20 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import './SkillContainer.css';
2+
import {CombatMastery, ForagingMastery, FarmingMastery, MiningMastery, FishingMastery} from '@media/Masteries';
23

34
type SkillProps = {
45
skillImg: string;
@@ -17,10 +18,7 @@ const Skills = ({
1718
levelInfo
1819
}: SkillProps) => {
1920
const currentLevel = (xp >= levelInfo.val) ? levelInfo.id : levelInfo.id - 1;
20-
const xpToNextLevel = (xp >= 15000) ? 0 : (levelInfo.val - xp);
21-
const xpToMax = (xp >= 15000) ? "Maxed" : 15000 - xp;
2221

23-
// Calculate progress within current level
2422
const currentLevelXpRequirement = levelInfo.id > 1 ? Math.floor(levelInfo.val * 0.85) : 0;
2523
const nextLevelXpRequirement = levelInfo.val;
2624
const xpInCurrentLevel = Math.max(0, xp - currentLevelXpRequirement);
@@ -34,32 +32,28 @@ const Skills = ({
3432
}
3533

3634
return (
37-
<div className="skill-container">
38-
<p className="skill-container__title">
39-
{`${skillName} lvl ${currentLevel}`}
40-
</p>
41-
<div className="skill-container__stats">
42-
<div className="skill-container__stats-line">
43-
<div className="skill-container__progress-bar">
44-
<div
45-
className="skill-container__progress-fill"
46-
style={{
47-
width: `${progressPercentage}%`
48-
}}
49-
></div>
50-
</div>
51-
{xpToNextLevel > 0 ? `${xpToNextLevel}XP to next level` : "Max Level Reached"}
52-
{/* {xp} / {levelInfo.val} */}
35+
<div className="skill-container">
36+
<div className='skill-container__item'>
37+
<span>{`${skillName}`}</span>
38+
<img
39+
src={skillImg}
40+
alt={skillName}
41+
title={`${skillName} - Level ${currentLevel}`}
42+
className='skill-container__icon'
43+
/>
44+
<div className='skill-container__level-indicators' >
45+
{Array.from({ length: 10 }).map((_, index) => (
46+
<div
47+
key={index}
48+
role="presentation"
49+
className={`skill-container__level-block ${index === 4 || index === 9 ? 'lg' : 'sm'} ${currentLevel > index ? 'active' : ''}`}
50+
/>
51+
))}
5352
</div>
53+
<span className='skill-container__level-no'>{`${currentLevel}`}</span>
5454
</div>
55-
<img
56-
src={skillImg}
57-
alt={skillName}
58-
className="skill-container__icon"
59-
title={`${skillName} - Level ${currentLevel}`}
60-
/>
6155
</div>
62-
);
56+
)
6357
};
6458

6559
export default Skills;

‎src/Components/Skills/Skills.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
2+
.stats-container{
3+
width: 100%;
4+
height: 100%;
5+
margin-top: -13px;
6+
padding: 0;
7+
border-image: url('../../Media/Windows/Window5.png') 16 16 16 16 fill stretch;
8+
border-style: solid;
9+
image-rendering: pixelated;
10+
border-width: 35px;
11+
overflow: hidden;
12+
display: flex;
13+
flex-direction: row;
14+
}
15+
16+
.achievement-container{
17+
width: 90%;
18+
min-height: 450px;
19+
height: auto;
20+
}
21+
22+
.skill-info{
23+
width: 100%;
24+
height: 400px;
25+
display: flex;
26+
flex-direction: column;
27+
align-items: center;
28+
justify-content: center;
29+
gap: 1rem;
30+
}

‎src/Components/Skills/Skills.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useState } from 'react'
22
import SkillContainer from './SkillContainer/SkillContainer'
33
import {Farming, Mining, Foraging, Fishing, Combat} from '@media/Skills'
44
import type { experienceType } from 'types/displayDataTypes'
5+
import './Skills.css'
56

67
interface SkillsProps {
78
experience: experienceType[];
@@ -12,6 +13,9 @@ const Skills = ({ experience }: SkillsProps) => {
1213
console.log("Skills data:", experience);
1314
return (
1415
<section className="stats-container">
16+
<div className="section-title">
17+
<h2>Skills</h2>
18+
</div>
1519
<div className="skill-info">
1620
{experience.map((item, i: number) => (i === 5) ? "" :
1721
<SkillContainer

‎src/Media/Masteries/Combat_Skill_Icon.png‎

3.07 KB
Loading

‎src/Media/Masteries/Farming_Skill_Icon.png‎

2.42 KB
Loading

‎src/Media/Masteries/Fishing_Skill_Icon.png‎

2.42 KB
Loading

‎src/Media/Masteries/Foraging_Skill_Icon.png‎

2.47 KB
Loading

0 commit comments

Comments
 (0)