Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve roadmap page visually #74

Closed
wants to merge 6 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added dist/assets/frontier-defense-poster.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added dist/assets/screenshot-dust2-northstar.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added dist/assets/screenshot-mad-mod-download.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added dist/assets/screenshot-runoff-northstar.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 50 additions & 0 deletions dist/data/roadmap.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
[
{
"title": "Frontier Defense",
"description": "The beloved PvE mode in Northstar. Both in its vanilla version as well as extended with cut content and extra features",
"image": "/assets/frontier-defense-poster.jpg",
"image_alt_text": "Two Tians in front of the Frontier Defense harvester with another two Titans in the back."
},
{
"title": "Mod Auto Download",
"description": "Download custom mods such as gamemodes and maps when joining a server in a safe way.",
"image": "/assets/screenshot-mad-mod-download.png",
"image_alt_text": "A screenshot showing mod auto download in action."
},
{
"title": "Titanfall1 maps",
"description": "Bringing maps from Titanfall1 into Northstar",
"image": "/assets/screenshot-runoff-northstar.png",
"image_alt_text": "A screenshot of the Runoff map from Titanfall1 loaded into Titanfall2 using Northstar."
},
{
"title": "Custom maps",
"description": "Create tools for building custom maps so that the community can create their own maps",
"image": "/assets/screenshot-dust2-northstar.png",
"image_alt_text": "A screenshot of a development version of the dust2 map in Northstar."
},
{
"title": "Custom RUI",
"description": "Reverse Respawn's UI system to allow for custom crosshairs and UI elements",
"image": "/assets/NorthstarPromoPosterOG.jpg",
"image_alt_text": "The Northstar Promo poster showing a Northstar Titan using their FlightCore ability with the Northstar logo and text in front of it."
},
{
"title": "Modded Persistence",
"description": "Reverse and extend the persistence system to allow players to store custom weapons and Titans in their loadouts",
"image": "/assets/NorthstarPromoPosterOG.jpg",
"image_alt_text": "The Northstar Promo poster showing a Northstar Titan using their FlightCore ability with the Northstar logo and text in front of it."
},
{
"title": "Party System",
"description": "Implement the vanilla party system so you can group up with friends and join servers together",
"image": "/assets/NorthstarPromoPosterOG.jpg",
"image_alt_text": "The Northstar Promo poster showing a Northstar Titan using their FlightCore ability with the Northstar logo and text in front of it."
},
{
"title": "...whatever the future holds",
"description": "Do you have an idea for Northstar? Wanna help? Join our Discord and talk to us!",
"image": "/assets/NorthstarPromoPosterOG.jpg",
"image_alt_text": "The Northstar Promo poster showing a Northstar Titan using their FlightCore ability with the Northstar logo and text in front of it."
}
]
16 changes: 5 additions & 11 deletions dist/roadmap/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<link rel="stylesheet" href="/style/header.css">
<link rel="stylesheet" href="/style/footer.css">
<link rel="stylesheet" href="/style/common.css">
<link rel="stylesheet" href="/style/roadmap.css">
<link rel="shortcut icon" href="/assets/favicon-32.png" type="image/png">

<!-- Primary Meta Tags -->
Expand All @@ -32,6 +33,7 @@
<meta property="twitter:image" content="/assets/NorthstarPromoPosterOG.jpg">

<link rel="preload" href="/assets/titanfall_new.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="/data/roadmap.json" as="fetch" crossorigin>
</head>
<body>
<div id="top">
Expand All @@ -53,16 +55,7 @@
</div>
<div class="pane">
<div class="section">Roadmap</div>
<ul>
<li>Frontier Defense</li>
<li>Mod download on server join</li>
<li>Titanfall1 maps</li>
<li>Custom maps and corresponding tooling</li>
<li>Custom RUI</li>
<li>Modded persistence</li>
<li>Party system</li>
<li>...and whatever else the future holds</li>
</ul>
<div class="roadmap-container" id="roadmap"/>
</div>

<br style="font-size: 32px;">
Expand All @@ -72,6 +65,7 @@
<a ondragstart="return false;" href="https://r2northstar.readthedocs.io/"><img src="/assets/icon_moddingdocs.svg" alt="Modding Documentation"/>Modding Docs</a>
<a ondragstart="return false;" href="/discord"><img src="/assets/icon_discord.svg" alt="Discord Server"/>Discord</a>
</div>
<script src="/script/index.js"></script>
<script src="/script/roadmap.js" onload="loadsRoadmap()"></script>
<script src="/script/index.js"></script>
</body>
</html>
30 changes: 30 additions & 0 deletions dist/script/roadmap.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
var template = `
<div class="roadmap-card">
<img src="IMAGE" alt="IMAGE_ALT_TEXT">
<div class="roadmap-card-content">
<div class="roadmap-card-title">TITLE</div>
<div class="roadmap-card-text">DESCRIPTION</div>
</div>
</div>
`

function addRoadmapItem(group, icon, image_alt_text, title, description) {

var x = template.replace("IMAGE", icon)
.replace("IMAG_ALT_TEXT", image_alt_text)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo here, alt text won't actually get set

Copy link
Member Author

@GeckoEidechse GeckoEidechse Jul 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, thanks <3

.replace("TITLE", title)
.replace("DESCRIPTION", description);

document.getElementById(group).insertAdjacentHTML("beforeend", x);
}

function loadsRoadmap() {
fetch('/data/roadmap.json')
.then(response => response.json())
.then(data => {
data.forEach(item => {
addRoadmapItem("roadmap", item.image, item.image_alt_text, item.title, item.description);
});
})
.catch(error => console.error('Error fetching the JSON file:', error));
}
34 changes: 34 additions & 0 deletions dist/style/roadmap.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
.roadmap-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}

.roadmap-card {
background-color: white;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The white background looks kind of out of place to me, perhaps going for dark blue with white text is better?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will give it a try o7

Although I guess at this point this PR has been superseded by #75 lol

border-radius: 10px;
width: 300px;
overflow: hidden;
text-align: center;
}

.roadmap-card img {
width: 100%;
height: auto;
}

.roadmap-card-content {
padding: 20px;
}

.roadmap-card-title {
font-size: 1.5em;
margin: 10px 0;
color: #666;
}

.roadmap-card-text {
font-size: 1em;
color: #666;
}