"requires": true,
"packages": {
"": {
+ "name": "tick-city",
"dependencies": {
"@bull-board/api": "^3.11.0",
"@bull-board/express": "^3.11.0",
{
- "name": "tick-city",
+ "name": "antares",
+ "private": true,
"scripts": {
"dev": "npx nodemon src/api.ts",
"setup:rebels": "npx ts-node scripts/generate-cities.ts",
<body>
<div class="row">
- <div class="col sidebar">
- <div class="row">
- <div class="col pane" data-augmented-ui="tl-clip tr-2-clip-x br-2-clip-y bl-clip-x border">
- <h2 data-augmented-ui="tl-clip bl-clip none">Nav</h2>
- <ul class="nav">
- <li>
- <a href="#" hx-target="#main" hx-get="/poll/overview" hx-trigger="load, click">Home</a>
- </li>
- <li>
- <a href="#" hx-target="#main" hx-get="/poll/construction" hx-trigger="click">Construction</a>
- </li>
- <li>
- <a href="#" hx-target="#main" hx-get="/poll/unit-training" hx-trigger="click">Unit Training</a>
- </li>
- <li>
- <a href="#" hx-target="#main" hx-get="/poll/map" hx-trigger="click">Map</a>
- </li>
- <li>
- <a href="#" hx-target="#main" hx-get="/poll/mailroom" hx-trigger="click">Mail</a>
- </li>
- </ul>
+ <div class="col">
+ <div class="pane" id="topbar" data-augmented-ui="br-clip bl-clip border">
+ <div class="row">
+ <div class="col" id="nav">
+ <ul>
+ <li>
+ <a href="#" hx-target="#main" hx-get="/poll/overview" hx-trigger="load, click">Home</a>
+ </li>
+ <li>
+ <a href="#" hx-target="#main" hx-get="/poll/construction" hx-trigger="click">Construction</a>
+ </li>
+ <li>
+ <a href="#" hx-target="#main" hx-get="/poll/unit-training" hx-trigger="click">Unit Training</a>
+ </li>
+ <li>
+ <a href="#" hx-target="#main" hx-get="/poll/map" hx-trigger="click">Map</a>
+ </li>
+ <li>
+ <a href="#" hx-target="#main" hx-get="/poll/mailroom" hx-trigger="click">Mail</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col" id="info-bar">
+ <span><b>Gold:</b> 10,000,0000</span>
+ <span><b>Ore:</b> 10,000,000</span>
+ <span><b>Logs:</b> 10,000,0000</span>
+ </div>
</div>
</div>
</div>
- <div class="col" id="main" data-augmented-ui="tl-clip tr-clip br-clip-x bl-clip border">
+ </div>
+ <div class="row">
+ <div class="col">
+ <div id="notifications"></div>
+ <div id="main" data-augmented-ui="tl-clip tr-clip br-clip-x bl-clip border">
+ </div>
</div>
</div>
<footer>
<body id="home">
<h1 data-augmented-ui="tl-clip bl-clip none">Antares</h1>
+ <div class="row">
+ <div class="col" id="notifications"></div>
+ </div>
<div class="row">
<div class="col">
<p>Welcome to <b>Antares</b>, a free-to-play browser based strategy game.</p>
<div class="row">
<div class="col pane" data-augmented-ui="tl-clip tr-2-clip-x br-2-clip-y bl-clip-x border">
<h3 data-augmented-ui="tl-clip bl-clip none">Signup</h3>
- <form hx-post="/accounts">
+ <form hx-post="/accounts" hx-target="#notifications">
<div>
<label>Username:</label>
<input type="text" name="username">
<div class="row">
<div class="col pane" style="margin-top: 2rem; " data-augmented-ui="tl-clip tr-2-clip-x br-2-clip-y bl-clip-x border">
<h3 data-augmented-ui="tl-clip bl-clip none">Login</h3>
- <form hx-post="/login">
+ <form hx-post="/login" hx-target="#notifications">
<div>
<label>Username:</label>
<input type="text" name="username">
:root {
--border: #1c7282;
+ --blended-border: #073b44;
--page-bg: #061619;
--green-bg: #193818;
--green-border: #32821c;
body {
background-color: var(--page-bg);
color: #fff;
- margin: 50px auto 20px;
- width: 1024px;
+ margin: 0 auto 20px;
+ max-width: 1024px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: normal;
font-size: 16px;
float: right;
color: var(--border);
}
-button.danger, .btn.danger {
+.danger {
background-color: #381818;
border-color: #821c1c;
}
-button.danger::after, .btn.danger::after {
+.danger::after {
color: #821c1c
}
-button.success, .btn.success {
+.success {
background-color: var(--green-bg);
border-color: var(--green-border);
}
-button.success::after, .btn.success::after{
+.success::after{
color: #32821c;
}
button:active, .btn:active, button:hover, .btn:hover {
margin-top: 2rem;
}
-.nav {
+#nav, #nav ul {
padding: 0;
margin: 0;
}
-.nav li {
+#nav ul {
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+}
+#nav li {
+ margin: 0;
list-style: none;
+ display: inline-flex;
}
-.nav li a {
- display: block;
+#nav li a {
padding: 10px 25px;
}
-.nav li a:hover {
- background-color: #0d2329;
+#nav li a:hover {
+ background-color: var(--border);
}
-.nav li a::before {
+#nav li a::before {
content: '';
}
-.nav li a::after {
- float: right;
+#nav li a::after {
+ content: '';
+}
+.alert {
+ padding: 10px;
+ font-size: 1rem;
+ margin-bottom: 1.2rem;
+ border-style: solid;
+ border-width: 1px;
}
/** Grid Stuff **/
--aug-border-all: 1px;
--aug-border-bg: var(--border);
}
-.nav {
- margin-bottom: 1rem;
-}
#main {
background-color: var(--page-bg);
padding: 1rem;
}
#corp-ads {
margin-top: 1rem;
+}
+#topbar {
+ margin-bottom: 50px;
+ padding: 0;
+ --aug-border-all: 1px;
+ --aug-border-bg: var(--border);
+ background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(28,114,130,0.5) 100%);
+}
+#topbar > .row {
+ border-bottom: solid 1px var(--blended-border);
+}
+#info-bar {
+ display: flex;
+ flex-basis: 40%;
+ border: solid 0 var(--border);
+ border-left-width: 1px;
+ padding: 10px 25px;
+ background-color: var(--page-bg);
+ justify-content: space-evenly;
}
\ No newline at end of file
// lets create the city!
await cityRepo.create(acct.id);
- return `<p>You are all signed up! You can go ahead and log in</p>`;
+ return `<div class="alert success">You are all signed up! You can go ahead and log in</div>`;
});
server.post<{body: {username: string, password: string}}, void>('/login', async (req, raw, res) => {
building_type: string
}
}, string>('/cost/construction', async req => {
- const amount = parseInt(req.body.amount, 10);
+ const amount = parseInt(req.body.amount.trim(), 10);
+ console.log('checking amount', amount);
+
+ if(isNaN(amount) || amount < 1) {
+ return '';
+ }
const building = await cityRepo.buildingRepository.findBySlug(req.body.building_type);
if(!building) {
}
catch(e) {
console.log(e);
- res.statusCode = (e as HttpError).statusCode || 500;
- res.json(e)
+ //res.statusCode = (e as HttpError).statusCode || 500;
+ res.send(`
+ <div class="alert danger">${e.message}</div>
+ `);
}
finally {
res.end();
import { Account } from "../repository/accounts";
import { ArmyQueueWithAttackedOwner } from "../repository/army";
import { City, CityRepository, CityWithLocation } from "../repository/city";
+import { topbar } from "./topbar";
const cityRepo = new CityRepository();
</form>
`;
- return html;
+ return html + topbar(yourCity);
}
\ No newline at end of file
import { Account } from "../repository/accounts";
import { CityWithLocation } from "../repository/city";
import * as _ from 'lodash';
+import { topbar } from "./topbar";
export function renderKingomOverview(city: CityWithLocation, account: Account): string {
return `
</tr>
</table>
</div>
- `;
+ ${topbar(city)}`;
}
\ No newline at end of file
import { CityWithLocation } from "../repository/city";
import { Building } from '../repository/buildings';
import _ from "lodash";
+import { topbar } from "./topbar";
function progressBar(current, max): string {
const percent = Math.ceil((current/max) * 100);
<td>${city[building.slug]}</td>
<td>
<form hx-post="/build">
- <input type="number" size="6" name="amount" hx-post="/cost/construction" hx-trigger="change" hx-target="#${building.slug}-cost">
+ <input type="number" size="6" name="amount" hx-post="/cost/construction" hx-trigger="keyup" hx-target="#${building.slug}-cost">
<input type="hidden" name="building_type" value="${building.slug}">
<button type="submit">Build</button>
</form>
</table>
</div>
`;
-
- return html + queues;
+ return html + queues + topbar(city);
}
\ No newline at end of file
import { DateTime } from "luxon";
import { MessageWithNames } from "../repository/mail";
+import { topbar } from "./topbar";
export function renderMailroom(mail: MessageWithNames[]): string {
return `
--- /dev/null
+import { City } from "../repository/city";
+
+export function topbar(city: City): string {
+ const oob = `
+ <div class="col" id="info-bar" hx-swap-oob="true">
+ <span><b>Gold:</b> ${city.gold.toLocaleString()}</span>
+ <span><b>Ore:</b> ${city.ore.toLocaleString()}</span>
+ <span><b>Logs:</b> ${city.logs.toLocaleString()}</span>
+ </div>
+ `;
+
+ return oob;
+}
\ No newline at end of file
import { CityWithLocation } from "../repository/city";
import { UnitTrainingQueue } from "../repository/training-queue";
import { Unit } from "../repository/unit";
+import { topbar } from "./topbar";
function progressBar(current, max): string {
const percent = Math.ceil((current/max) * 100);
</div>
`;
- return html + queues;
+ return html + queues + topbar(city);
}
\ No newline at end of file
Home / browser-rts.git / commitdiff