added text updates for project n5 devlog; added wide option for alt title banner
This commit is contained in:
@@ -8,6 +8,7 @@
|
||||
banner = "",
|
||||
bannerAlt = "",
|
||||
pixelated,
|
||||
wide,
|
||||
}: {
|
||||
title: string;
|
||||
date?: string;
|
||||
@@ -15,11 +16,28 @@
|
||||
banner?: string;
|
||||
bannerAlt?: string;
|
||||
pixelated?: boolean;
|
||||
wide?: boolean;
|
||||
} = $props();
|
||||
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
{#if wide}
|
||||
<div class="subcontainer">
|
||||
<div class="img-container-wide">
|
||||
{#if pixelated}
|
||||
<img class="pixelated-img" src="{banner}" alt="{bannerAlt}">
|
||||
{:else}
|
||||
<img src="{banner}" alt="{bannerAlt}">
|
||||
{/if}
|
||||
<div class="text-container-wide">
|
||||
<div class="text-align-container-wide">
|
||||
{@render titles({title, subtitle, date})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="subcontainer">
|
||||
<div class="img-container">
|
||||
{#if pixelated}
|
||||
@@ -29,17 +47,22 @@
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-container">
|
||||
<h1 class="title">{title}</h1>
|
||||
{#if subtitle}
|
||||
<p class="subtitle">[ {subtitle} ]</p>
|
||||
{/if}
|
||||
{#if date}
|
||||
<p class="date">» {date}</p>
|
||||
{/if}
|
||||
{@render titles({title, subtitle, date})}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
|
||||
<h1 class="title">{title}</h1>
|
||||
{#if subtitle}
|
||||
<p class="subtitle">[ {subtitle} ]</p>
|
||||
{/if}
|
||||
{#if date}
|
||||
<p class="date">» {date}</p>
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
<SeparatorLine />
|
||||
|
||||
<style>
|
||||
@@ -62,6 +85,26 @@
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.img-container-wide {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-align-container-wide {
|
||||
margin: auto 24px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.text-container-wide {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
background-color: #000000bb;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
width: 48%;
|
||||
margin: auto 24px;
|
||||
|
||||
53
src/routes/admin/devlog/+page.svelte
Normal file
53
src/routes/admin/devlog/+page.svelte
Normal file
@@ -0,0 +1,53 @@
|
||||
<script lang="ts">
|
||||
import BannerTitleAlt from "$lib/banner-title-alt.svelte";
|
||||
import Content from "$lib/content.svelte";
|
||||
|
||||
let text = $state("");
|
||||
let secret = $state("");
|
||||
|
||||
let sendUpdate = function() {
|
||||
var timestamp = Date.now();
|
||||
console.log(text);
|
||||
console.log(timestamp);
|
||||
|
||||
// var xhr = new XMLHttpRequest();
|
||||
// xhr.open("POST", "https://server.denizk0461.dev:2761/newEntry", true);
|
||||
// xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
// xhr.send(JSON.stringify({
|
||||
// Timestamp: timestamp,
|
||||
// Text: text,
|
||||
// Secret: secret,
|
||||
// }));
|
||||
fetch(
|
||||
"https://server.denizk0461.dev:2761/newEntry",
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Accept": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
Timestamp: timestamp,
|
||||
Text: text,
|
||||
Secret: secret,
|
||||
})
|
||||
}
|
||||
)
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Devlog Admin Page | denizk0461</title>
|
||||
</svelte:head>
|
||||
|
||||
<BannerTitleAlt
|
||||
title="Devlog Admin Page"
|
||||
banner="/common/me/a.webp"
|
||||
subtitle="plant mothers only!"
|
||||
/>
|
||||
|
||||
<Content>
|
||||
<input bind:value="{text}">
|
||||
<input type="password" bind:value="{secret}">
|
||||
<button onclick={sendUpdate}>asdf</button>
|
||||
</Content>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user