Skip to content

Commit

Permalink
Refactor website (#14)
Browse files Browse the repository at this point in the history 
* Refactor CSS variables for consistency and readability

* Format code and add super linter

* Update copyright year to 2024

* Setup v2

* Replace `'` with `"`

* Removed old JS code

* Add script to load champions dynamically

* Refactor language selection logic in main.js

* Add script to load champions dynamically

* Refactor CSS styles for champion cards

* Add search functionality

* Lint CSS

* Make search bar more responsive

* Resize header because it was smaller than the search bar

* Rename variables for better maintainability

* Add modal functionality

* Use champion id to open modal

* Remove background scrolling when modal is opened

* Add champion abilities rendering

* Refactor modal layout and styling

* Reorder alphabetically

* Add ability images

* Add lazy loading for champions images

* Improve modal image responsiveness

* Add difficulty meter

* Lint HTML images

* Add League of Legends theme test

* Use ability description instead of tooltip

* Add champion roles

* Refactor modal CSS
  • Loading branch information
@Vianpyro
Vianpyro authored Oct 3, 2024
1 parent 31dbdde commit 01c6272
Show file tree
Hide file tree
Showing 27 changed files with 668 additions and 723 deletions.
35 changes: 35 additions & 0 deletions .github/workflows/super-linter.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
name: Lint

on: # yamllint disable-line rule:truthy
push: null

permissions:
contents: read # This is sufficient for read access.
statuses: write # This is needed to update status checks.

jobs:
build:
name: Lint
runs-on: ubuntu-latest

steps:
- name: Checkout code
uses: actions/checkout@v4
with:
# super-linter needs the full git history to get the
# list of files that changed across commits
fetch-depth: 0

- name: Super-linter
uses: super-linter/[email protected]
env:
# To report GitHub Actions status checks
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
VALIDATE_ALL_CODEBASE: false
VALIDATE_CSS_PRETTIER: false
VALIDATE_HTML_PRETTIER: false
VALIDATE_JAVASCRIPT_PRETTIER: false
VALIDATE_JAVASCRIPT_STANDARD: false
VALIDATE_JSON_PRETTIER: false
VALIDATE_YAML_PRETTIER: false
11 changes: 11 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"editor.rulers": [
100
],
"editor.tabSize": 4,
"editor.insertSpaces": true,
"editor.formatOnSave": true,
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true
}
2 changes: 1 addition & 1 deletion LICENSE
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2021 Vianpyro
Copyright (c) 2021-2024 Vianney Veremme

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
147 changes: 50 additions & 97 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,110 +1,63 @@
<!DOCTYPE html>
<html lang="en">

<head>
<link rel="icon" href="favicon.ico" type="image" sizes="609x609">
<link rel="stylesheet" href="resources/css/league_of_help/champions.css">
<link rel="stylesheet" href="resources/css/league_of_help/modal.css">
<link rel="stylesheet" href="resources/css/league_of_help/search_bar.css">
<link rel="stylesheet" href="resources/css/champions.css">
<link rel="stylesheet" href="resources/css/league_of_legends.css">
<link rel="stylesheet" href="resources/css/modal.css">
<link rel="stylesheet" href="resources/css/styles.css">
<script src="resources/javascript/main.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>League of Help</title>
</head>

<body>
<aside id="scripts">
<script src="resources/javascript/champions_display_tag.js"></script>
<script src="resources/javascript/champions_load.js"></script>
<script src="resources/javascript/champions_modal.js"></script>
<script src="resources/javascript/champions_search_bar.js"></script>
</aside>
<header></header>
<div id="toptext">
<noscript class="error">You need to enable JavaScript to run this app.</noscript>
With <span id="toptext_champions">more than 150</span> champions,
you’ll find the perfect match for your playstyle. Master one, or master them all.
<div>
<input type="text" id="search_champion" onkeyup="search_champion()"
placeholder="Search for champion..." autocomplete="off" autofocus>
</div>
<div class="error" id="fetch_error"></div>
</div>
<div id="tags"></div>
<div id="wrapper"></div>
<aside id="modal_champion" style="display: none;">
<div id="modal_champion_wrapper" style="overflow: auto;">
<div id="champion_loading_screen">
<img loading="lazy" id="champion_loading_screen_image">
<figcaption id="champion_loading_screen_infos">
<span id="champion_loading_screen_name" title="Champion name"></span>
<span id="champion_meta_tier" title="Meta tier"></span>
<span id="champion_loading_screen_title"></span>
<span id="champion_tags"></span>
<span id="riot_difficulty"><progress id="champion_riot_difficulty" max="10"></progress></span>
</figcaption>
</div>
<span>Abilities:</span>
<div id="champion_spells">
<span id="passive" class="champion_spell tooltip">
<img id="champion_passive_image">
<figcaption id="passive_info"><span id="passive_description" class="tooltip_text"></span></figcaption>
</span>
<span id="q_spell" class="champion_spell tooltip">
<img id="champion_q_spell_image">
<figcaption id="q_spell_info">
<span class="spell_key">Q</span>
<div class="tooltip_text">
<span id="q_spell_description"></span>
<span id="q_spell_cooldowns" class="champion_spell_cooldown"></span>
</div>
</figcaption>
</span>
<span id="w_spell" class="champion_spell tooltip">
<img id="champion_w_spell_image">
<figcaption id="w_spell_info">
<span class="spell_key">W</span>
<div class="tooltip_text">
<span id="w_spell_description"></span>
<span id="w_spell_cooldowns" class="champion_spell_cooldown"></span>
</div>
</figcaption>
</span>
<span id="e_spell" class="champion_spell tooltip">
<img id="champion_e_spell_image">
<figcaption id="e_spell_info">
<span class="spell_key">E</span>
<div class="tooltip_text">
<span id="e_spell_description"></span>
<span id="e_spell_cooldowns" class="champion_spell_cooldown"></span>
</div>
</figcaption>
</span>
<span id="r_spell" class="champion_spell tooltip">
<img id="champion_r_spell_image">
<figcaption id="r_spell_info">
<span class="spell_key">R</span>
<div class="tooltip_text">
<span id="r_spell_description"></span>
<span id="r_spell_cooldowns" class="champion_spell_cooldown"></span>
</div>
</figcaption>
</span>
</div>
<div>
<span id="recommended_items">Recommended items:</span>
<ul id="champion_items"></ul>
</div>
<div style="overflow: auto; margin-left: 30%;">
<span>Tips and tricks:</span>
<br/>
<span id="champion_tips"></span>
<br/>
<span><i><a id="submit_tips" href="https://github.com/Vianpyro/league_of_help/issues">Click here</a> to submit your own tips.</i></span>
</div>
<button id="modal_close">×</button>
<noscript>
<h1 class="error">You need to enable JavaScript to run this app.</h1>
</noscript>

<header>
<h1>With <span id="champions-count">over 150</span> champions, you'll find the perfect match for your playstyle.
Master one, or master them all.</h1>
</header>

<main>
<input type="text" id="search-bar" placeholder="Search for a champion...">

<section id="champions">
<h1 id="loading-champions">Loading champions...</h1>
</section>
</main>

<aside id="modal-container">
<div id="modal">
<button id="close-modal">&Cross;</button>
<section id="modal-left">
<figcaption id="modal-title"></figcaption>
<img class="modal-image" id="modal-image-big" alt="">
<img class="modal-image" id="modal-image-small" alt="">
<progress id="modal-difficulty-meter" max="10"></progress>
<div id="modal-roles"></div>
</section>
<section id="modal-right">
<h3>Abilities:</h3>
<ul id="modal-abilities"></ul>
</section>
</div>
</aside>
<footer></footer>

<footer>
<a href="https://github.com/Vianpyro/League_of_Help/blob/main/LICENSE"> Copyright &copy; 2021-2024</a>
<a href="https://github.com/Vianpyro">Vianney Veremme</a>
</footer>

<aside id="scripts">
<script src="resources/javascript/main.js"></script>
<script src="resources/javascript/load_champions.js" defer></script>
<script src="resources/javascript/modal.js" defer></script>
<script src="resources/javascript/search_champions.js" defer></script>
</aside>
</body>
</html>

</html>
71 changes: 71 additions & 0 deletions resources/css/champions.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
/* Styles for the champions page */

.champion {
display: flex;
flex-direction: column;
align-items: center;
width: 165px;
overflow: hidden;
border-radius: var(--boarder-radius);
box-shadow: var(--highlight-color) 0 0 3px;
text-align: center;
}

.champion img {
width: 100%;
}

.champion p {
color: var(--text-color-secondary);
font-size: small;
}

#champions {
display: flex;
flex-wrap: wrap;
gap: 2.5rem;
justify-content: center;
width: 75%;
}

/* Search bar */

#search-bar {
font-size: x-large;
background-color: var(--background-color-secondary);
background-image: url("../images/search.svg");
background-repeat: no-repeat;
background-size: contain;
border: 1px solid var(--highlight-color);
border-radius: var(--boarder-radius);
padding: 0.5em 1.5em 0.5em 2.5em;
display: flex;
justify-content: center;
}

/* Pseudo classes & elements */

.champion:hover {
background-color: var(--background-color-secondary);
border-radius: calc(var(--boarder-radius) / 2);
box-shadow: var(--highlight-color) 0 0 10px;
cursor: pointer;
transform: scale(1.05);
}

/* Media queries */

@media screen and (width<=850px) {
.champion {
width: 100px;
}

#champions {
width: 100%;
gap: 1rem;
}

#search-bar {
font-size: large;
}
}
80 changes: 0 additions & 80 deletions resources/css/league_of_help/champions.css
View file

This file was deleted.

Loading

0 comments on commit 01c6272

Please sign in to comment.