Skip to content

Commit

Permalink
updated communities
Browse files Browse the repository at this point in the history
  • Loading branch information
@DarkIntaqt
DarkIntaqt committed Jun 21, 2024
1 parent 3410bea commit 12ac3b3
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 115 deletions.
108 changes: 26 additions & 82 deletions src/css/community.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
width: 100%;
min-height: calc(100vh - 650px);
float: left;
height: 1200px;
background-color: var(--dark0);
}

Expand All @@ -19,7 +18,7 @@
background-position: bottom;
background-size: cover;
background-attachment: fixed;
background-image: url(https://lolcdn.darkintaqt.com/s/community-g2cb.webp)
background-image: url(https://lolcdn.darkintaqt.com/s/community-g2cb.webp);
}

@media only screen and (max-height: 800px) {
Expand All @@ -37,102 +36,51 @@
text-align: center;
}

.floatingIsland {
min-height: 50px;
width: 600px;
background-color: var(--dark1);
.community {
min-height: 150px;
width: 100%;
float: left;
background-color: var(--dark1);
margin: 20px 0;
position: absolute;
border-radius: 10px;
box-shadow: 0 0 5px var(--dark3);
}

.floatingIsland:first-of-type {
top: -50px;
}

.floatingIsland:nth-of-type(2) {
top: 200px;
left: 400px;
}


.floatingIsland:nth-of-type(3) {
top: 400px;
left: 50px;
}

.floatingIsland:nth-of-type(4) {
top: 650px;
left: 350px;
}

.floatingIsland:nth-of-type(5) {
left: 60px;
top: 900px
}

.scrollSection>section>img {
position: absolute;
height: 240px;
z-index: 5;
width: 240px;
filter: brightness(80%);
}

.scrollSection>section>img:nth-of-type(1) {
left: 700px;
top: -100px;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-items: center;
}


.scrollSection>section>img:nth-of-type(2) {
left: 100px;
top: 180px;
}

.scrollSection>section>img:nth-of-type(3) {
left: 700px;
top: 350px;
}

.scrollSection>section>img:nth-of-type(4) {
left: 20px;
top: 650px;
}

.scrollSection>section>img:nth-of-type(5) {
left: 680px;
border-radius: 10px;
top: 900px
}


.floatingIsland>h2 {
.community > div > h2 {
font-size: 1.5rem;
padding: 12px;
width: 100%;
box-sizing: border-box;
color: var(--light0)
color: var(--light0);
}

.community img {
margin: 15px 0;
border-radius: 8px;
}

.floatingIsland>p {
.community > div > p {
font-size: 1rem;
line-height: 1.2rem;
color: var(--light2);
padding: 0 20px 20px;
}

.floatingIsland>p>span {
.community > div > p > span {
width: 100%;
margin-top: 10px;
float: left;
display: flex;
text-align: center;
justify-content: center;
}

.floatingIsland>p>span>a {
.community > div > p > span > a {
display: block;
width: 200px;
border-radius: 10px;
Expand All @@ -142,19 +90,19 @@
padding: 10px;
text-decoration: none;
background-color: var(--selected);
transition: .25s;
transition: 0.25s;
}

.floatingIsland>p>span>a:hover {
.community > div > p > span > a:hover {
box-shadow: 0 0 5px var(--selected);
}

@media only screen and (max-width:1050px) {
@media only screen and (max-width: 1050px) {
.topArea {
margin-top: 100px;
}

.floatingIsland {
.community {
top: 0 !important;
position: relative;
left: 0 !important;
Expand All @@ -163,11 +111,7 @@
float: left;
}

.scrollSection>section>img {
display: none;
}

.scrollSection {
min-height: calc(100vh - 450px)
min-height: calc(100vh - 450px);
}
}
}
75 changes: 42 additions & 33 deletions src/module/Community.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,25 @@ import Loader from "./Loader";

import css from "../css/community.module.css"

const endpoint = "https://challenges.darkintaqt.com/community.json";
const defaultLang = "en";

const langs = navigator.languages || ["en"];

export default class Community extends Component {
constructor(props) {
super(props)

let images = []
let texts = []
let communities = [];

const request = getCache("https://challenges.darkintaqt.com/communities.json")
const request = getCache(endpoint)

if (request !== false) {
images = request.images
texts = request.texts
communities = request
}

this.state = {
images: images,
texts: texts
communities
}

this.loadedStats = this.loadedStats.bind(this)
Expand All @@ -33,47 +35,28 @@ export default class Community extends Component {


loadedStats(data) {
this.setState({ images: data.images, texts: data.texts })
this.setState({ communities: data })
}


componentDidMount() {

if (this.state.images.length === 0 || this.state.texts.length === 0) {
get("https://challenges.darkintaqt.com/communities.json", this.loadedStats)
if (this.state.communities.length === 0) {
get(endpoint, this.loadedStats)
}

}


render() {


if (this.state.images.length === 0 || this.state.texts.length === 0) {

if (this.state.communities.length === 0) {
return <div style={{ width: "100%", float: "left" }}>
<Loader />
<p style={{ color: "white", fontSize: "1rem", textAlign: "center" }}>Loading Communities...</p>
</div>

}


let islands = this.state.texts.map(function (data) {
return <div key={data[0]} className={css.floatingIsland}>
<h2>{data[0]}</h2>
<p>{data[1]}

<span><a href={data[2]} target="_blank" rel="noreferrer"><i className={data[4]} /> {data[3]}</a></span>
</p>
</div>
})
let images = this.state.images.map(function (data) {
return <LazyLoadImage key={data} src={data} height={240} width={240}></LazyLoadImage>
})



document.title = "League of Legends Challenge Community"

return <div className={css.bgArea}>
Expand All @@ -89,9 +72,35 @@ export default class Community extends Component {
<div className={css.scrollSection}>
<section className={`object1000`} style={{ position: 'relative' }}>

{islands}

{images}
{this.state.communities.map((community, i) => {

let uselang = defaultLang;
for (let i = 0; i < langs.length; i++) {
if (community.langs.includes(langs[i])) {
uselang = langs[i];
break;
}
}

// in case a community isnt available in default lang and other langs are not available
if (!community[uselang]) {
return <></>;
}

const translated = community[uselang];

return <div className={css.community} key={i}>
<div>
<h2>{translated.title}</h2>
<p>{translated.description}
<span>
<a href={translated.link}><i className={community.icon} /> {translated.cta}</a>
</span>
</p>
</div>
<LazyLoadImage alt={translated.title} src={community.image} width={210} height={210} />
</div>;
})}

</section>

Expand Down

0 comments on commit 12ac3b3

Please sign in to comment.