rob
/
cyberegg2077
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

mostly UI/UX updates and exposing the Nice Game SDK package.json to the view

develop
Rob Colbert 2 years ago
parent
fb68f732c4
commit
5803a29bc4
12 changed files with 171 additions and 104 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      game/js/game-app.js
  2. 7
      game/js/lib/game-enemies.js
  3. 31
      game/js/lib/game-player.js
  4. 2
      game/less/lib/brand-link.less
  5. 117
      game/less/lib/button.less
  6. 3
      game/less/lib/game-view.less
  7. 1
      game/less/lib/main.less
  8. 66
      game/less/lib/responsive.less
  9. 5
      game/less/style.less
  10. 14
      game/views/game-view.pug
  11. 5
      game/views/layout.pug
  12. 2
      nice-harness.js

22
game/js/game-app.js
View File

@ -114,7 +114,7 @@ export default class GameApp extends NiceGame {
this.startMusicStream('/dist/assets/audio/music/idra');
this.loadAudio();
this.tex.moveSpeed = 2;
this.player.moveSpeed = 2;
this.eggs.clear();
this.oldWantsThrowEgg = false;
@ -167,11 +167,11 @@ export default class GameApp extends NiceGame {
renderMenu (ctx) {
this.background.render(ctx);
this.tex.render(ctx);
this.player.render(ctx);
}
updateGame (elapsed, now) {
this.tex.update(elapsed, now);
this.player.update(elapsed, now);
/*
* Use this.oldWantsThrowEgg to gate button presses and only throw the
@ -224,7 +224,7 @@ export default class GameApp extends NiceGame {
this.renderPlayfield(ctx);
this.eggs.render(ctx);
this.tex.render(ctx);
this.player.render(ctx);
}
renderPlayfield (ctx) {
@ -249,8 +249,8 @@ export default class GameApp extends NiceGame {
const moveSpeed = 4 + (Math.random() * 2);
this.log.info('throwEgg', 'throwing egg');
this.eggs.throwEgg(new NiceVector2d(
this.tex.position.x,
this.tex.position.y - 48,
this.player.position.x,
this.player.position.y - 48,
), moveSpeed);
this.audio.playSound('throw-egg-001');
@ -268,8 +268,8 @@ export default class GameApp extends NiceGame {
this.background = new GameBackground(this);
jobs.push(this.background.load());
this.tex = new GamePlayer(this);
jobs.push(this.tex.load());
this.player = new GamePlayer(this);
jobs.push(this.player.load());
this.eggs = new GameEggSimulator(this);
jobs.push(this.eggs.load());
@ -297,9 +297,13 @@ export default class GameApp extends NiceGame {
jobs.push(this.audio.loadSound('impact-006', '/dist/assets/audio/sfx/impact-006.wav'));
jobs.push(this.audio.loadSound('impact-007', '/dist/assets/audio/sfx/impact-007.wav'));
jobs.push(this.audio.loadSound('tex-stayfresh', '/dist/assets/audio/vox/tex-stayfresh.wav'));
jobs.push(this.audio.loadSound('tex-biggerfish', '/dist/assets/audio/vox/tex-biggerfish.wav'));
jobs.push(this.audio.loadSound('tex-candy', '/dist/assets/audio/vox/tex-candy.wav'));
jobs.push(this.audio.loadSound('tex-discontent', '/dist/assets/audio/vox/tex-discontent.wav'));
jobs.push(this.audio.loadSound('tex-not-reading','/dist/assets/audio/vox/tex-not-reading.wav'));
jobs.push(this.audio.loadSound('tex-quote-post', '/dist/assets/audio/vox/tex-quote-post.wav'));
jobs.push(this.audio.loadSound('tex-shutuptwo', '/dist/assets/audio/vox/tex-shutuptwo.wav'));
jobs.push(this.audio.loadSound('tex-stayfresh', '/dist/assets/audio/vox/tex-stayfresh.wav'));
jobs.push(this.audio.loadSound('beardson-touchdown', '/dist/assets/audio/sfx/pew-pew-pew.wav'));

7
game/js/lib/game-enemies.js
View File

@ -64,7 +64,7 @@ export default class GameEnemies {
}
this.game.audio.playSound(this.getRandomImpactSound());
if (Math.random() > 0.6) {
this.game.audio.playSound(this.getRandomTexQuote());
this.game.player.playRandomQuip();
}
return true;
});
@ -145,9 +145,4 @@ export default class GameEnemies {
const impactSounds = ['impact-001','impact-002','impact-003','impact-004','impact-005','impact-006','impact-007'];
return impactSounds[Math.floor(Math.random() * impactSounds.length)];
}
getRandomTexQuote ( ) {
const texQuotes = ['tex-stayfresh', 'tex-biggerfish', 'tex-shutuptwo'];
return texQuotes[Math.floor(Math.random() * texQuotes.length)];
}
}

31
game/js/lib/game-player.js
View File

@ -25,9 +25,30 @@ export default class GamePlayer extends NiceSprite {
this.moveSpeed = 12;
this.registration = new NiceVector2d(CELL_WIDTH / 2, CELL_HEIGHT);
this.margin = CELL_WIDTH / 2;
this.quips = [ ];
}
async loadQuip (id) {
this.quips.push(id);
return this.game.audio.loadSound(id, `/dist/assets/audio/vox/${id}.wav`);
}
async load ( ) { return super.load('/dist/assets/img/big-baja-tex.png', CELL_WIDTH, CELL_HEIGHT); }
async load ( ) {
const jobs = [ ];
jobs.push(super.load('/dist/assets/img/big-baja-tex.png', CELL_WIDTH, CELL_HEIGHT));
jobs.push(this.loadQuip('tex-biggerfish'));
jobs.push(this.loadQuip('tex-candy'));
jobs.push(this.loadQuip('tex-discontent'));
jobs.push(this.loadQuip('tex-not-reading'));
jobs.push(this.loadQuip('tex-quote-post'));
jobs.push(this.loadQuip('tex-shutuptwo'));
jobs.push(this.loadQuip('tex-stayfresh'));
return Promise.all(jobs);
}
update ( ) {
const { input } = this.game;
@ -42,4 +63,12 @@ export default class GamePlayer extends NiceSprite {
}
}
}
playRandomQuip ( ) {
this.game.audio.playSound(this.getRandomQuipId());
}
getRandomQuipId ( ) {
return this.quips[Math.floor(Math.random() * this.quips.length)];
}
}

2
game/less/lib/brand-link.less
View File

@ -1,7 +1,7 @@
.brand-link {
display: block;
width: 240px;
margin: 0 auto var(--default-margin) auto;
margin: 0 auto;
img.brand-header {
display: block;

117
game/less/lib/button.less
View File

@ -1,74 +1,75 @@
button {
button.nice-button {
display: block;
width: 80px;
height: 80px;
border: solid 3px;
border-color: rgba(255,255,255, 0);
border-radius: 8px;
width: 80px;
height: 80px;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
button.direction-button {
display: block;
background: var(--direction-btn-color-50pct);
color: white;
font-size: 4em;
font-weight: bold;
font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
&[hidden] {
display: none;
&.direction-button {
background: var(--direction-btn-color-50pct);
color: white;
font-size: 4em;
font-weight: bold;
font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
&[hidden] {
display: none;
}
&.active {
background: var(--direction-btn-color-80pct);
}
img.button-icon {
display: block;
height: 0.8em;
margin: 0 auto;
}
}
&.active {
background: var(--direction-btn-color-80pct);
&.action-button {
background-color: var(--brand-color-50pct);
color: white;
font-size: 2em;
font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
&[hidden] {
display: none;
}
&.active {
background-color: var(--brand-color-80pct);
}
}
img.button-icon {
display: block;
height: 0.8em;
margin: 0 auto;
&.action-button.active,
&.direction-button.active {
border-color: white;
}
}
button.action-button {
background-color: var(--brand-color-50pct);
color: white;
font-size: 2em;
font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
&[hidden] {
display: none;
&.direction-button#btn-move-left {
position: absolute;
bottom: 20px;
left: 20px;
}
&.active {
background-color: var(--brand-color-80pct);
&.direction-button#btn-move-right {
position: absolute;
bottom: 20px;
right: 20px;
}
}
button.action-button.active,
button.direction-button.active {
border-color: white;
}
button.direction-button#btn-move-left {
position: absolute;
bottom: 20px;
left: 20px;
}
button.direction-button#btn-move-right {
position: absolute;
bottom: 20px;
right: 20px;
}
button.action-button#btn-throw-egg {
position: absolute;
bottom: 120px;
right: 20px;
&.action-button#btn-throw-egg {
position: absolute;
bottom: 120px;
right: 20px;
}
}

3
game/less/lib/game-view.less
View File

@ -15,6 +15,7 @@
width: 100%;
max-width: 960px;
margin: 0 auto;
overflow: hidden;
canvas.game-display {
display: block;
@ -69,6 +70,8 @@
font-size: 24px;
font-weight: bold;
cursor: pointer;
}
}
}

1
game/less/lib/main.less
View File

@ -4,7 +4,6 @@ html, body {
}
body {
padding: var(--default-margin) 0;
background-color: var(--background-color);
color: var(--text-color);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

66
game/less/lib/responsive.less
View File

@ -2,38 +2,66 @@
html, body {
padding: 0;
}
.game-display-wrapper {
.margin-block {
margin: 8px 0;
}
.menu-overlay#system-menu {
background-color: blue;
div.os-info {
font-size: 8px;
}
}
.menu-overlay {
img.nice-cartdridge-icon {
max-width: 120px;
height: auto;
margin: 0 auto;
}
.container .game-display-wrapper button.start-button {
left: calc(50% - 100px);
top: calc(50% - 28px);
width: 200px;
height: 56px;
padding: 10px 20px;
background-color: var(--brand-color);
color: white;
border: solid 3px white;
border-radius: 8px;
font-size: 24px;
button#start-button {
width: 200px;
height: 56px;
padding: 5px 10px;
background-color: var(--brand-color);
border-radius: 8px;
font-size: 18px;
}
button.menu-button {
display: block;
width: 180px;
padding: 0 10px;
border-radius: 4px;
font-size: 16px;
}
}
canvas.game-display {
border-radius: 0;
}
}
.container #game-controls button {
#game-controls button {
width: 50px;
height: 50px;
}
.container button.direction-button {
button.direction-button {
font-size: 2em;
}
.container button.action-button {
button.action-button {
font-size: 1.5em;
}
.container button.action-button#btn-throw-egg {
button.action-button#btn-throw-egg {
bottom: 80px;
}
.game-display-wrapper canvas.game-display {
border-radius: 0;
}
}

5
game/less/style.less
View File

@ -1,4 +1,6 @@
@import 'lib/fonts.less';
@import 'lib/variables.less';
@import 'lib/main.less';
@import 'lib/container.less';
@ -8,4 +10,7 @@
@import 'lib/page-footer.less';
@import 'lib/brand-link.less';
@import 'lib/navbar.less';
@import 'lib/system-menu.less';
@import 'lib/responsive.less';

14
game/views/game-view.pug
View File

@ -5,16 +5,22 @@ block game-view
canvas(id="game-display" width="960" height="540").game-display
#system-menu.menu-overlay
button(type="button").menu-button#boot-button BOOT CARTRIDGE
.os-info
.os-version NICE-OS #{pkg.version}
.game-sdk-version SDK #{niceGameSdk.version}
.game-description #{pkg.description}
button(type="button").menu-button#boot-button
img(src="/dist/assets/img/game-cartdridge.svg", alt="Game Cartdridge Icon", width=120).nice-cartdridge-icon.icon-large
span BOOT CARTRIDGE
#main-menu.menu-overlay.menu-transparent
button(type="button").menu-button#start-button Start Game
#game-controls.menu-overlay.menu-transparent
button(type="button").direction-button#btn-move-left
button(type="button").nice-button.direction-button#btn-move-left
img(src='/dist/assets/img/btn-left.svg', alt='Left button icon').button-icon
button(type="button").direction-button#btn-move-right
button(type="button").nice-button.direction-button#btn-move-right
img(src='/dist/assets/img/btn-right.svg', alt='Left button icon').button-icon
button(type="button").action-button#btn-throw-egg 🥚
button(type="button").nice-button.action-button#btn-throw-egg 🥚

5
game/views/layout.pug
View File

@ -17,9 +17,4 @@ html(lang="en")
block game-view
.page-footer
.game-data
.game-title= pkg.niceGame.title
.game-subtitle= pkg.niceGame.description
script(src=`${gameModuleUrl}?v=${pkg.version}`, type="module")

2
nice-harness.js
View File

@ -29,6 +29,7 @@ import express from 'express';
const APP_CONFIG = {
pkg: require('./package.json'),
niceGameSdk: require('./node_modules/dtp-nice-game/package.json'),
};
async function getHomeView (req, res) {
@ -44,6 +45,7 @@ async function getHomeView (req, res) {
harness.app.locals.config = APP_CONFIG;
harness.app.locals.pkg = APP_CONFIG.pkg;
harness.app.locals.niceGameSdk = APP_CONFIG.niceGameSdk;
harness.app.set('view engine', 'pug');
harness.app.set('views', path.join(__dirname, 'game', 'views'));

Write Preview
Loading…
Cancel
Save