From: xangelo Date: Mon, 9 May 2022 05:48:02 +0000 (-0400) Subject: overhaul using augmented-ui X-Git-Url: https://git.xangelo.ca/?a=commitdiff_plain;h=eec9780142ca4cc052d9575528d6dc6f3bfc4fe6;p=browser-rts.git overhaul using augmented-ui This is a major overhau of the UI to something that fits the new theme ... SPACE! overall the design is very simplistic with a fairly muted background to allow for focus on the gameplay. --- diff --git a/public/assets/bg/green_nebula_4.png b/public/assets/bg/green_nebula_4.png new file mode 100644 index 0000000..e8cdb3f Binary files /dev/null and b/public/assets/bg/green_nebula_4.png differ diff --git a/public/game.html b/public/game.html index 2eaff16..07e38fb 100644 --- a/public/game.html +++ b/public/game.html @@ -1,13 +1,54 @@ - - Tick City - - - - - - - - + + + Tick City + + + + + + + + + + + + +
+
+
+
+

Nav

+ +
+
+
+
+ +
+
+ + \ No newline at end of file diff --git a/public/index.html b/public/index.html index 80324eb..8cdfc07 100644 --- a/public/index.html +++ b/public/index.html @@ -1,67 +1,89 @@ - - Tick City - - - - - - - -

Alpha Kingdom Management

-

Hey, welcome to this alpha version of a kingdom management game. I've always loved building browser based games and this is - one in a long line. There's little to no branding just yet, just a simple time-based kingdom management game -

- - - - - -
-

Signup

-
-
- - -
-
- - -
- -
+ + Tick City + + + + + + + + + + +

Antares

+
+
+

Welcome to Antares, a free-to-play browser based strategy game.

+

We're very early in development, but are always looking for new players to sign up and test things out. Just note + that the likelihood of you running into a broken feature or a bug is quite high at this point. If you do + encouter a bug or issue, feel free to post in our forums and one of the devs will take a look. +

-
-

Login

-
-
- - +

Upcoming Features

+

Species

+

+ Work is being done to add different Species to the game to allow further customization and strategy options. +

+

More Buildings

+

We're pretty light on buildings at the moment but we have plans for a few more:

+
    +
  • Homes
    • +
  • Banks
    • +
  • Mills
    • +
  • Quarries
    • +
  • Spy Hideouts
    • +
  • Mage Towers
    • +
+
+
+
+
+

Signup

+ +
+ + +
+
+ + +
+ + +
-
- - +
+
+

Login

+
+
+ + +
+
+ + +
+ +
+
+
- - -
+ + + +
+
-

Upcoming Features

-

Fantasy Races

-

All good kingdom management games need to give you the ability to pick your fantasy race. Once you decide on the race of your leader you'll be given various perks/units/buildings that differ from all the others. You'll also have access to a "Race Chat" where only other members of your chosen race can see each other speak.

-

More Buildings

-

We're pretty light on buildings at the moment but we have plans for a few more:

- - - + + + \ No newline at end of file diff --git a/public/scifi.css b/public/scifi.css new file mode 100644 index 0000000..c7c02f2 --- /dev/null +++ b/public/scifi.css @@ -0,0 +1,222 @@ +:root { + --border: #1c7282; + --page-bg: #061619; + --green-bg: #193818; + --green-border: #32821c; +} + +input { + outline: none; +} + +body { + background-color: var(--page-bg); + color: #fff; + margin: 50px auto 20px; + width: 1024px; + font-family: 'Roboto Condensed', sans-serif; + font-weight: normal; + font-size: 16px; + background-image: url('/assets/bg/green_nebula_4.png'); + background-blend-mode: soft-light; +} +hr { + border-color: var(--border); + margin-bottom: 1.2rem; +} + +h1, h2, h3 { + text-transform: uppercase; + font-weight: 300; + line-height: 2.2rem; + border: solid 0 var(--border); + border-left-width: 6px; + border-bottom-width: 2px; + padding-left: 10px; + margin-top: 0; + color :#6ac9db; + text-shadow: 0 0 2px #6ac9db; +} +h1 { + font-size: 2.2rem; +} +h2 { + font-size: 1.7rem; +} +h3 { + font-size: 1.3rem; +} +table { + width: 100%; + margin-bottom: 2rem; + border-spacing: 0; + border: solid 1px var(--border); +} +tr:nth-child(odd) td, tr:nth-child(odd) th { + background-color: #0d2329; +} +th, td { + padding: 0.5rem; +} +p, form, ul, ol { + line-height: 1.3rem; + margin: 0 2rem 2rem 2rem; + flex: inherit; +} + +label { + font-weight: bold; + margin-right: 5px; +} + +button, .btn { + border: solid 1px var(--border); + background-color: #183238; + color: #fff; + font-size: 0.8rem; + cursor: pointer; + padding: 5px 5px 5px 25px; + text-transform: uppercase; + text-align: center; + font-weight: bold; + min-width: 150px; +} +button::after, .btn::after { + content: '\27EB'; + float: right; + color: var(--border); +} +button.danger, .btn.danger { + background-color: #381818; + border-color: #821c1c; +} +button.danger::after, .btn.danger::after { + color: #821c1c +} +button.success, .btn.success { + background-color: var(--green-bg); + border-color: var(--green-border); +} +button.success::after, .btn.success::after{ + color: #32821c; +} +button:active, .btn:active, button:hover, .btn:hover { + background-color: #1a444c; +} +button.success:active, .btn.success:active, button.success:hover, .btn.success:hover { + background-color: #1e4c1a; +} + +input[type="text"], input[type="password"], input[type="number"] { + border: solid 1px var(--border); + background-color: #183238; + color: #fff; + font-size: 0.8rem; + cursor: pointer; + min-width: 120px; + padding: 5px; +} + +a { + font-weight: bold; + color: #fff; + text-decoration: none; +} +a::before { + content: '\27EA'; +} +a::after { + content: '\27EB'; +} +footer { + text-align: center; + border-top: solid 1px var(--border); + padding-top: 1rem; + margin-top: 2rem; +} + +.nav { + padding: 0; + margin: 0; +} +.nav li { + list-style: none; +} +.nav li a { + display: block; + padding: 10px 25px; +} +.nav li a:hover { + background-color: #0d2329; +} +.nav li a::before { + content: ''; +} +.nav li a::after { + float: right; +} + +/** Grid Stuff **/ +.row { + display: flex; +} +.col { + flex-grow: 1; + flex-basis: 50%; + margin-right: 5rem; +} +.col:last-child { + margin-right: 0; +} +.col p { + margin-right: 0; +} + +/** Utility **/ +.right { + float: right; +} +.left { + float: left; +} +.clear { + clear: both; +} +.hidden { + display: none; +} +.text-right { + text-align: right; +} +.text-left { + text-align: left; +} +.text-center { + text-align: center; +} + +/** CUSTOMIZATIONS **/ +form > div { + margin-bottom: 1rem; +} +.sidebar { + flex-basis: 100px; +} +.pane { + background-color: var(--page-bg); + padding: 1rem; + --aug-border-all: 1px; + --aug-border-bg: var(--border); +} +.nav { + margin-bottom: 1rem; +} +#main { + background-color: var(--page-bg); + padding: 1rem; + --aug-border-all: 1px; + --aug-border-bg: var(--border); +} +#corp-ads { + margin-top: 1rem; +} \ No newline at end of file diff --git a/src/api.ts b/src/api.ts index 75fa346..e5e1557 100644 --- a/src/api.ts +++ b/src/api.ts @@ -64,33 +64,6 @@ server.post<{body: {username: string, password: string}}, void>('/login', async }); -server.get<{}, string>('/city', async req => { - const account = await accountRepo.validate(req.authInfo.accountId, req.authInfo.token); - const city = await cityRepo.FindOne({ owner: account.id }); - - - const buildQueues = await cityRepo.getBuildQueues(account.id); - const unitTrainingQueues = await cityRepo.getUnitTrainingQueues(account.id); - - const buildings = await cityRepo.buildingRepository.list(); - const units = await cityRepo.unitRepository.list(); - - let html = ` -

Kingom Overview

- ${renderKingomOverview(city, account)} -
-

Land Development

- ${renderLandDevelopment(city, buildings, buildQueues)} -

Unit Training

- ${renderUnitTraining(city, units, unitTrainingQueues)}, -

Map

- ${renderOverworldMap(await cityRepo.FindAll(), city)} -

Mail

- ${renderMailroom(await mailRepo.listReceivedMessages(account.id))} - `; - return html; -}); - server.post<{body: { soldiers: number, attackers: number, @@ -125,7 +98,7 @@ server.get<{}, string>('/poll/overview', async req => { return renderKingomOverview(city, account); }); -server.get<{}, string>('/queue/construction', async req => { +server.get<{}, string>('/poll/construction', async req => { const account = await accountRepo.validate(req.authInfo.accountId, req.authInfo.token); const city = await cityRepo.FindOne({ owner: account.id }); const buildings = await cityRepo.buildingRepository.list(); @@ -134,7 +107,7 @@ server.get<{}, string>('/queue/construction', async req => { return renderLandDevelopment(city, buildings, buildQueues); }); -server.get<{}, string>('/queue/units', async req => { +server.get<{}, string>('/poll/unit-training', async req => { const account = await accountRepo.validate(req.authInfo.accountId, req.authInfo.token); const city = await cityRepo.FindOne({ owner: account.id }); @@ -144,6 +117,19 @@ server.get<{}, string>('/queue/units', async req => { return renderUnitTraining(city, units, unitTrainingQueues); }); +server.get<{}, string>('/poll/map', async req => { + const account = await accountRepo.validate(req.authInfo.accountId, req.authInfo.token); + const city = await cityRepo.FindOne({ owner: account.id }); + + return renderOverworldMap(await cityRepo.FindAll(), city); +}); + +server.get<{}, string>('/poll/mailroom', async req => { + const account = await accountRepo.validate(req.authInfo.accountId, req.authInfo.token); + + return renderMailroom(await mailRepo.listReceivedMessages(account.id)); +}); + server.post<{ body: { diff --git a/src/render/fight.ts b/src/render/fight.ts index 94d9791..833341e 100644 --- a/src/render/fight.ts +++ b/src/render/fight.ts @@ -36,6 +36,7 @@ export function renderOverworldMap(cities: City[], yourCity: City): string { rows[y] += ''; } let html = ` +

Map

diff --git a/src/render/kingdom-overview.ts b/src/render/kingdom-overview.ts index c44d8f8..802eb01 100644 --- a/src/render/kingdom-overview.ts +++ b/src/render/kingdom-overview.ts @@ -3,7 +3,9 @@ import { City } from "../repository/city"; import * as _ from 'lodash'; export function renderKingomOverview(city: City, account: Account): string { - return `
+ return ` +
+

Kingdom Overview

@@ -46,5 +48,6 @@ export function renderKingomOverview(city: City, account: Account): string {
Lord${city.bushels.toLocaleString()}
- `; + + `; } \ No newline at end of file diff --git a/src/render/land-development.ts b/src/render/land-development.ts index 18b64a7..0f58442 100644 --- a/src/render/land-development.ts +++ b/src/render/land-development.ts @@ -6,8 +6,8 @@ import _ from "lodash"; function progressBar(current, max): string { const percent = Math.ceil((current/max) * 100); return ` -
+
${percent}%
`; @@ -16,7 +16,8 @@ function progressBar(current, max): string { export function renderLandDevelopment(city: City, buildings: Building[], buildQueues: BuildQueue[]): string { const freeSpace = city.totalSpace - city.usedSpace; let html = ` -
+
+

Construction

@@ -31,7 +32,7 @@ export function renderLandDevelopment(city: City, buildings: Building[], buildQu
Free Land${city[building.slug]}
- +
@@ -48,14 +49,13 @@ export function renderLandDevelopment(city: City, buildings: Building[], buildQu const queues = `
-

Build Queues

+

Build Queues

- ${buildQueues.sort((a, b) => { return a.due - b.due; }).map(queue => { diff --git a/src/render/mail.ts b/src/render/mail.ts index 6ca831d..7c20cc5 100644 --- a/src/render/mail.ts +++ b/src/render/mail.ts @@ -3,6 +3,8 @@ import { MessageWithNames } from "../repository/mail"; export function renderMailroom(mail: MessageWithNames[]): string { return ` +
+

Mail

Building Amount Expected Progress
@@ -24,6 +26,7 @@ export function renderMailroom(mail: MessageWithNames[]): string { }).join("\n")}
From
+ `; } @@ -48,6 +51,4 @@ export function renderMessage(msg: MessageWithNames): string {
`; - console.log(msg); - return ''; } \ No newline at end of file diff --git a/src/render/unit-training.ts b/src/render/unit-training.ts index 85cf78d..dfbbb1b 100644 --- a/src/render/unit-training.ts +++ b/src/render/unit-training.ts @@ -6,8 +6,8 @@ import { Unit } from "../repository/unit"; function progressBar(current, max): string { const percent = Math.ceil((current/max) * 100); return ` -
+
${percent}%
`; @@ -16,64 +16,70 @@ function progressBar(current, max): string { export function renderUnitTraining(city: City, units: Unit[], trainingQueues: UnitTrainingQueue[]): string { const unit = _.keyBy(units, 'slug'); let html = ` -
+
+

Unit Training

+ + + + - + - + - + - + - + @@ -83,14 +89,13 @@ export function renderUnitTraining(city: City, units: Unit[], trainingQueues: Un const queues = `
-

Training Queues

+

Training Queues

UnitAvail. +
Soldiers${city.population} Avail.${city.population}
- + - +
Attackers${city.soldiers} Avail.${city.soldiers}
- + - +
Defenders${city.soldiers} Avail.${city.soldiers}
- + - +
Special Attackers${city.attackers} Avail.${city.attackers}
- + - +
Special Defenders${city.defenders} Avail.${city.defenders}
- + - +
- ${trainingQueues.sort((a, b) => { return a.due - b.due; }).map(queue => {
Unit Type Amount Expected Progress