2025-04-30 14:50:27 -07:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< title > Indie Game Roadmap< / title >
< style >
body {
font-family: 'Segoe UI', sans-serif;
background-color: #121212;
color: #ffffff;
margin: 0;
padding: 2rem;
}
h1, h2 {
color: #00bfff;
text-align: center;
}
.timeline {
display: flex;
flex-direction: column;
gap: 1.5rem;
max-width: 1000px;
margin: auto;
}
.phase {
background-color: #1f1f1f;
padding: 1rem 1.5rem;
border-left: 5px solid #00bfff;
border-radius: 6px;
box-shadow: 0 0 8px rgba(0, 191, 255, 0.2);
position: relative;
}
.phase h3 {
margin: 0;
font-size: 1.2rem;
color: #00e0ff;
}
.dates {
font-size: 0.9rem;
color: #aaaaaa;
margin-bottom: 0.5rem;
}
.description {
font-size: 1rem;
color: #dddddd;
}
.status {
font-size: 0.8rem;
padding: 2px 6px;
border-radius: 4px;
margin-left: 10px;
text-transform: uppercase;
}
.status.done {
background: #28a745;
color: #fff;
}
.status.progress {
background: #ffc107;
color: #000;
}
.status.not-started {
background: #dc3545;
color: #fff;
}
.toggle {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 0.9rem;
cursor: pointer;
background-color: #2d2d2d;
color: #ffffff;
border: none;
padding: 0.3rem 0.6rem;
border-radius: 4px;
}
< / style >
< script >
async function login() {
const password = document.getElementById('password').value;
const res = await fetch('/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ password })
});
const result = await res.json();
if (result.success) {
document.getElementById('login-status').textContent = '✅ Logged in';
document.getElementById('login-form').style.display = 'none';
loadRoadmap();
} else {
document.getElementById('login-status').textContent = '❌ Incorrect password';
}
}
async function loadRoadmap() {
const res = await fetch('/api/roadmap');
const data = await res.json();
const container = document.getElementById('roadmap');
container.innerHTML = '';
data.forEach(phase => {
const el = document.createElement('div');
el.className = 'phase';
el.innerHTML = `
< strong > ${phase.title}< / strong >
< span class = "status" > [${phase.status}]< / span >
< select onchange = "updateStatus(${phase.id}, this.value)" >
< option value = "not started" $ { phase . status = == ' not started ' ? ' selected ' : ' ' } > Not Started< / option >
< option value = "in progress" $ { phase . status = == ' in progress ' ? ' selected ' : ' ' } > In Progress< / option >
< option value = "done" $ { phase . status = == ' done ' ? ' selected ' : ' ' } > Done< / option >
< / select >
`;
container.appendChild(el);
});
}
async function updateStatus(id, newStatus) {
await fetch('/api/roadmap', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id, status: newStatus })
});
loadRoadmap();
}
// Auto-login check
fetch('/check-auth')
.then(res => res.json())
.then(data => {
if (data.authenticated) {
document.getElementById('login-form').style.display = 'none';
loadRoadmap();
}
});
< / script >
< / head >
< body >
< nav class = "navbar" >
2025-04-30 23:20:49 -07:00
< a href = "https://www.oblistudios.com" > Home< / a > |
< a href = "https://www.oblistudios.com/servermanager.html" > Server Manager< / a > |
< a href = "https://www.oblistudios.com/shardwalker.html" > Shardwalker< / a >
2025-04-30 23:14:26 -07:00
2025-04-30 23:20:49 -07:00
< a href = "http://roadmap.oblistudios.com" class = "btn-roadmap" > 🛠 View Roadmap< / a >
2025-04-30 14:50:27 -07:00
< / nav >
< h1 > Shardwalker: The Mirror's Edge< / h1 >
< div id = "login-panel" style = "text-align:center; margin-bottom:2rem;" >
< input type = "password" id = "admin-pass" placeholder = "Enter admin password" / >
< button onclick = "login()" > Login< / button >
< p id = "login-status" style = "color:#00bfff;" > < / p >
< / div >
< h2 > Indie Dev Production Roadmap< / h2 >
< div class = "timeline" id = "roadmap" >
< div class = "phase" > < h3 > Pre-Production < span class = "status done" > Done< / span > < button class = "toggle" onclick = "toggleStatus(this)" > Toggle< / button > < / h3 > < div class = "dates" > Start: [Today] — End: +30 Days< / div > < div class = "description" > Design docs, game concept, visual target, core loop< / div > < / div >
< div class = "phase" > < h3 > Blockout Maps & Prototypes < span class = "status progress" > In Progress< / span > < button class = "toggle" onclick = "toggleStatus(this)" > Toggle< / button > < / h3 > < div class = "dates" > +31 Days — +75 Days< / div > < div class = "description" > Build test maps, whitebox environments, establish movement/combat feel< / div > < / div >
< div class = "phase" > < h3 > Core Mechanics Development < span class = "status not-started" > Not Started< / span > < button class = "toggle" onclick = "toggleStatus(this)" > Toggle< / button > < / h3 > < div class = "dates" > +76 Days — +135 Days< / div > < div class = "description" > Implement combat, shard-switching, attunement system< / div > < / div >
< div class = "phase" > < h3 > First Playable (Vertical Slice) < span class = "status not-started" > Not Started< / span > < button class = "toggle" onclick = "toggleStatus(this)" > Toggle< / button > < / h3 > < div class = "dates" > +136 Days — +165 Days< / div > < div class = "description" > Basic UI, combat, single map, testable state< / div > < / div >
< div class = "phase" > < h3 > Story & World Design < span class = "status not-started" > Not Started< / span > < button class = "toggle" onclick = "toggleStatus(this)" > Toggle< / button > < / h3 > < div class = "dates" > +166 Days — +210 Days< / div > < div class = "description" > Write lore, quests, dialogue, map flow< / div > < / div >
< div class = "phase" > < h3 > Environment Art & Level Design < span class = "status not-started" > Not Started< / span > < button class = "toggle" onclick = "toggleStatus(this)" > Toggle< / button > < / h3 > < div class = "dates" > +211 Days — +285 Days< / div > < div class = "description" > Model, texture, and populate maps< / div > < / div >
< div class = "phase" > < h3 > Multiplayer Networking Setup < span class = "status not-started" > Not Started< / span > < button class = "toggle" onclick = "toggleStatus(this)" > Toggle< / button > < / h3 > < div class = "dates" > +286 Days — +330 Days< / div > < div class = "description" > Mirror or FishNet implementation, lobby & match start logic< / div > < / div >
< div class = "phase" > < h3 > UI/UX Polish < span class = "status not-started" > Not Started< / span > < button class = "toggle" onclick = "toggleStatus(this)" > Toggle< / button > < / h3 > < div class = "dates" > +331 Days — +360 Days< / div > < div class = "description" > Final HUD, menus, pause screens< / div > < / div >
< div class = "phase" > < h3 > Sound, Music & VFX < span class = "status not-started" > Not Started< / span > < button class = "toggle" onclick = "toggleStatus(this)" > Toggle< / button > < / h3 > < div class = "dates" > +361 Days — +390 Days< / div > < div class = "description" > Placeholders replaced with final effects, transitions< / div > < / div >
< div class = "phase" > < h3 > Beta Playtesting < span class = "status not-started" > Not Started< / span > < button class = "toggle" onclick = "toggleStatus(this)" > Toggle< / button > < / h3 > < div class = "dates" > +391 Days — +420 Days< / div > < div class = "description" > Gather feedback on PvP and solo campaign< / div > < / div >
< div class = "phase" > < h3 > Final Polish & Optimization < span class = "status not-started" > Not Started< / span > < button class = "toggle" onclick = "toggleStatus(this)" > Toggle< / button > < / h3 > < div class = "dates" > +421 Days — +450 Days< / div > < div class = "description" > Bug fixing, performance, controller support< / div > < / div >
< div class = "phase" > < h3 > Marketing & Steam Page Prep < span class = "status not-started" > Not Started< / span > < button class = "toggle" onclick = "toggleStatus(this)" > Toggle< / button > < / h3 > < div class = "dates" > +451 Days — +471 Days< / div > < div class = "description" > Trailer, screenshots, copywriting< / div > < / div >
< div class = "phase" > < h3 > Launch < span class = "status not-started" > Not Started< / span > < button class = "toggle" onclick = "toggleStatus(this)" > Toggle< / button > < / h3 > < div class = "dates" > +472 Days — +479 Days< / div > < div class = "description" > Push to Steam, promote, manage release< / div > < / div >
< / div >
< / body >
< / html >
