denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added text updates for project n5 devlog; added wide option for alt title banner

Browse Source
This commit is contained in:
denizk0461
2025-08-19 19:10:34 +02:00
parent aeade6e167
commit 54fa1234c6
3 changed files with 241 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
src/routes/projects/projectn5/devlog/+page.svelte
View File

@@ -1,44 +1,147 @@
<script lang="ts">
import BannerTitle from "$lib/banner-title.svelte";
import Content from "$lib/content.svelte";
import BannerTitleAlt from "$lib/banner-title-alt.svelte";
import ContentSidebar from "$lib/content-sidebar.svelte";
import type { DevlogPost } from "$lib/devlog-posts";
import { posts } from "$lib/devlog-posts";
import { onMount } from 'svelte';
interface DevlogLiveEntry {
timestamp: string;
text: string;
}
let entries: DevlogLiveEntry[] = $state([]);
onMount(() => {
getRecentEntries();
});
async function getRecentEntries() {
let response = await fetch("https://server.denizk0461.dev:2761/recentEntries")
let data = await response.json();
data.forEach(datum => {
var date = new Date(datum.Timestamp)
console.log(datum.Timestamp)
entries.push({
timestamp: `${date.getFullYear()}-${leftpad(date.getMonth() + 1)}-${leftpad(date.getDate())} ${leftpad(date.getHours())}:${leftpad(date.getMinutes())}`,
text: datum.Text,
})
});
console.log(data)
};
// Leftpads a single-digit number to two digits
function leftpad(n: number): String {
var result = n.toString();
if (n < 10) {
result = "0" + result
}
return result;
}
</script>
<svelte:head>
<title>Project N5 Devlog | denizk0461</title>
</svelte:head>
<Content>
<BannerTitle title="Project N5; Development Log" banner="/projects/projectn5/devlog/2024/0323/unity_overview.webp" />
<BannerTitleAlt
title="Project N5; Development Log"
banner="/projects/projectn5/devlog/2024/0323/unity_overview.webp"
wide
/>
<p>This is the development log for my game <strong>Project N5</strong>! It's an action-adventure jump-and-run game inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b> and rebooted on <b>2025-05-16</b>.</p>
<ContentSidebar>
<p>2023 progress updates summarise an entire month's work, respectively. Progress updates thereafter denote noteworthy developments in a more collected format.</p>
<div class="post-container">
{#each posts as post, index}
{@render devlogPost({post, index})}
{/each}
<div slot="side-left" class="live-devlog-panel">
<h2>*New* Small Updates!</h2>
<p>Here I'll post some smaller text only updates about the game's progress!</p>
<div class="live-devlog-container">
{#each entries as entry}
{@render liveUpdate({entry})}
{/each}
</div>
</div>
</Content>
<div slot="main">
<p>This is the development log for my game <strong>Project N5</strong>! It's an action-adventure jump-and-run game inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b> and rebooted on <b>2025-05-16</b>.</p>
<p>2023 progress updates summarise an entire month's work, respectively. Progress updates thereafter denote noteworthy developments in a more collected format.</p>
<div class="post-container">
{#each posts as post, index}
{@render devlogPost({post, index})}
{/each}
</div>
</div>
</ContentSidebar>
{#snippet liveUpdate({entry}: {entry: DevlogLiveEntry})}
<div class="live-devlog-entry notched-small">
<p class="live-devlog-entry-time">{entry.timestamp}</p>
<p class="live-devlog-entry-content">{entry.text}</p>
</div>
{/snippet}
{#snippet devlogPost({post, index}: {post: DevlogPost, index: number})}
<a href="/projects/projectn5/devlog/{post.date}/" class="post">
<div class="post-img-container">
<img class="post-img" src="/projects/projectn5/devlog/previews/{post.date}.webp" alt="Preview image for devlog {post.title}">
<p class="post-number">#{posts.length - index}</p>
</div>
<div class="post-text-container">
<p class="post-date">{post.subtitle}</p>
<p class="post-title">{post.title}</p>
</div>
</a>
<div class="post-supercontainer">
<a href="/projects/projectn5/devlog/{post.date}/" class="post">
<div class="post-img-container">
<img class="post-img" src="/projects/projectn5/devlog/previews/{post.date}.webp" alt="Preview image for devlog {post.title}">
<p class="post-number">#{posts.length - index}</p>
</div>
<div class="post-text-container">
<p class="post-date">{post.subtitle}</p>
<p class="post-title">{post.title}</p>
</div>
</a>
</div>
{/snippet}
<style>
:root {
--color-laura: #C76668CC;
--color-laura-darker: #A55051CC;
}
/* Live update list */
.live-devlog-panel {
margin: 16px;
}
.live-devlog-container {
display: flex;
gap: 4px;
margin: 0 16px;
flex-direction: column;
}
.live-devlog-entry {
background-color: var(--color-background-highlight-hover);
}
.live-devlog-entry-time {
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 700;
width: 100%;
background-color: #00000066;
}
.live-devlog-entry-content, .live-devlog-entry-time {
padding: 8px 16px;
margin: 0;
}
.live-devlog-entry-content {
font-size: 1.0rem;
}
/* Post list */
.post-supercontainer {
width: 30%;
}
.post-container {
max-width: 1200px;
max-width: 1600px;
margin-left: auto;
margin-right: auto;
display: flex;
@@ -48,7 +151,6 @@
}
.post {
width: 40%;
text-decoration: none;
background-color: #00000044;
display: flex;
@@ -153,4 +255,16 @@
padding: 0;
line-height: 1rem;
}
@media screen and (max-width: 1700px) {
.post-supercontainer {
width: 50% !important;
}
}
@media screen and (max-width: 1200px) {
.post-supercontainer {
width: 100% !important;
}
}
</style>