Merge pull request #1 from joshuacurtiss/settings

Add Settings Screens

custom-words.txt

@@ -8,12 +8,22 @@ fullpath
 gameover
 horiz
 invuln
+lshoulder
+lstick
+ltrigger
 newdir
+newval
 nvmrc
 powerup
 powerups
+rshoulder
+rstick
+rtrigger
+sfx
 stairleft
 stairright
 stairtop
 stairtops
+topright
 unuse
+vals

src/abilities/Salt.ts

@@ -1,4 +1,4 @@
-import { k } from '../kaboom';
+import { k, getVol, DATA_SFX_VOL } from '../kaboom';
 import { Comp } from 'kaboom';
 import { ON_DIR_CHANGE } from '../abilities/Walk';
 
@@ -64,7 +64,7 @@ export function canSalt(): SaltComp {
                   z(50),
                   "salt",
                ]);
-         play('pepper');
+         play('pepper', { volume: getVol(DATA_SFX_VOL) });
          const anim = saltDir.x ? 'throw' : saltDir.y<0 ? 'throw-up' : 'throw-down';
          this.flipX = saltDir.x>0;
          this.play(anim);

src/abilities/Score.ts

@@ -1,4 +1,4 @@
-import { k } from '../kaboom';
+import { k, getVol, DATA_SFX_VOL } from '../kaboom';
 import { Comp } from 'kaboom';
 
 const { play } = k;
@@ -22,7 +22,7 @@ export function canScore(): ScoreComp {
       },
       set score(newScore) {
          if (score % NEW_LIFE_SCORE_THRESHOLD > newScore % NEW_LIFE_SCORE_THRESHOLD) {
-            play('powerup');
+            play('powerup', { volume: getVol(DATA_SFX_VOL) });
             this.lives+=1;
          }
          score = newScore;

src/kaboom.ts

@@ -1,8 +1,47 @@
-import kaboom, { KaboomCtx } from 'kaboom';
+import kaboom, { GamepadButton, KaboomCtx, Key } from 'kaboom';
+import { PeterControls } from './objects/Peter';
 
 // Game Constants
 export const GAME_WIDTH = 256;
 export const GAME_HEIGHT = 224;
+export const DEFAULT_VOL: number = 50;
+export const DEFAULT_CONTROLS: PeterControls[] = [
+   {
+      action: 'space',
+      pause: 'escape',
+      left: 'left',
+      right: 'right',
+      up: 'up',
+      down: 'down',
+   },
+   {
+      action: 'meta',
+      pause: 'escape',
+      left: 'a',
+      right: 'd',
+      up: 'w',
+      down: 's',
+   },
+   {
+      action: 'shift',
+      pause: 'escape',
+      left: 'j',
+      right: 'l',
+      up: 'i',
+      down: 'k',
+   },
+   {
+      action: 'south',
+      pause: 'start',
+      left: 'dpad-left',
+      right: 'dpad-right',
+      up: 'dpad-up',
+      down: 'dpad-down',
+   },
+];
+export const DATA_MUSIC_VOL = 'bt_music_vol';
+export const DATA_SFX_VOL = 'bt_sfx_vol';
+export const DATA_CONTROLS = 'bt_controls';
 
 // Kaboom Instance
 export const k: KaboomCtx = kaboom({
@@ -16,8 +55,43 @@ export const k: KaboomCtx = kaboom({
 });
 k.setFullscreen(true);
 
+// Game Defaults
+k.getData(DATA_MUSIC_VOL, DEFAULT_VOL);
+k.getData(DATA_SFX_VOL, DEFAULT_VOL);
+k.getData(DATA_CONTROLS, DEFAULT_CONTROLS);
+
 // Game Constants (using Kaboom context)
 export const BURGERTIME_BLUE = k.rgb(0, 149, 255);
+export const DIR = {
+   'left': k.vec2(-1, 0),
+   'right': k.vec2(1, 0),
+   'up': k.vec2(0, -1),
+   'down': k.vec2(0, 1),
+}
+
+// Sound Handling
+export function getVol(which: string): number {
+   return k.getData(which, DEFAULT_VOL) / 100;
+}
+
+// Type Guards
+export function isGamepadButton(key: string): key is GamepadButton {
+   return [
+      "north", "east", "south", "west", "ltrigger", "rtrigger", "lshoulder", "rshoulder", "select",
+      "start", "lstick", "rstick", "dpad-up", "dpad-right", "dpad-down", "dpad-left", "home", "capture",
+   ].includes(key);
+}
+export function isKey(key: string): key is Key {
+   return [
+      "f1", "f2", "f3", "f4", "f5", "f6", "f7", "f8", "f9", "f10", "f11", "f12",
+      "`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=",
+      "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\",
+      "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'",
+      "z", "x", "c", "v", "b", "n", "m", ",", ".", "/",
+      "escape", "backspace", "enter", "tab", "control", "alt", "meta", "space", " ",
+      "left", "right", "up", "down", "shift",
+   ].includes(key);
+}
 
 // Debugging
 export const urlParams = new URLSearchParams(location.search)

src/main.ts

@@ -1,6 +1,8 @@
 import { k } from './kaboom';
 import GameOverScene from './scenes/GameOverScene';
 import GameScene from './scenes/GameScene';
+import SetControlsScene from './scenes/SetControlsScene';
+import SetVolumeScene from './scenes/SetVolumeScene';
 import StartScene from './scenes/StartScene';
 
 const {
@@ -62,6 +64,10 @@ loadSprite("peter", "peter.png", {
       dead: { from: 17, to: 18, loop: true, speed: 8 }
    },
 });
+loadSprite("arrow-right", "arrow-right.png");
+loadSprite("arrow-up", "arrow-up.png");
+loadSprite("audio-speaker", "audio-speaker.png");
+loadSprite("music-note", "music-note.png");
 loadSprite("title", "title.png");
 loadSprite("floor", "floor.png", { sliceX: 2 });
 loadSprite("floor-stair-blue", "floor-stair-blue.png", { sliceX: 2 });
@@ -77,4 +83,6 @@ loadSprite("stair-green", "stair-green.png", { sliceX: 2 });
 scene("start", StartScene);
 scene("game", GameScene);
 scene("gameover", GameOverScene);
+scene("setVolume", SetVolumeScene);
+scene("setControls", SetControlsScene);
 go("start");

src/menu/Action.ts

@@ -0,0 +1,34 @@
+import { Comp, GameObj } from 'kaboom';
+
+export interface ActionComp extends Comp {
+   get action(): Function;
+   set action(newFn: Function);
+};
+
+export function isActionComp(obj: GameObj): obj is GameObj<ActionComp> {
+   return obj.is('can-action');
+}
+
+function wrapAction(newFn: Function, prevFn: Function): Function {
+   return ()=>{
+      prevFn();
+      newFn();
+   };
+}
+
+export function action(actionFunction: Function = ()=>{}): ActionComp {
+   let actionFn: Function;
+   return {
+      id: 'can-action',
+      get action() {
+         return actionFn;
+      },
+      set action(newFn: Function) {
+         const defaultFn = ()=>this.trigger('action', this);
+         actionFn = wrapAction(newFn, defaultFn);
+      },
+      add() {
+         this.action = actionFunction;
+      },
+   };
+};

src/menu/Button.ts

@@ -0,0 +1,103 @@
+import {
+   AnchorComp,
+   AreaComp,
+   Color,
+   ColorComp,
+   Comp,
+   GameObj,
+   PosComp,
+   RectComp,
+   RectCompOpt,
+   TextComp,
+   TextCompOpt,
+   Vec2,
+} from 'kaboom';
+import { k } from '../kaboom';
+import { ActionComp, action } from './Action';
+import { FocusComp, focus } from './Focus';
+
+const {
+   add,
+   anchor,
+   area,
+   color,
+   pos,
+   rgb,
+   rect,
+   setCursor,
+   text,
+   vec2,
+   width,
+   BLACK,
+} = k;
+
+export type Button = GameObj<RectComp & AnchorComp & PosComp & AreaComp & ColorComp & ActionComp & FocusComp & ButtonComp>;
+
+export interface ButtonComp extends Comp {
+   get text(): string;
+   set text(newLabel: string);
+   textObj?: GameObj<AnchorComp & TextComp>;
+}
+
+export interface ButtonCompOpt {
+   color: Color;
+   focusColor: Color;
+   pos: Vec2;
+   width: number;
+   height: number;
+   text: string;
+   action: Function;
+   rectOpt: RectCompOpt;
+   textOpt: TextCompOpt;
+};
+
+export const ButtonCompOptDefaults: ButtonCompOpt = {
+   color: BLACK,
+   focusColor: rgb(80, 80, 80),
+   pos: vec2(0),
+   width: width()/2,
+   height: 18,
+   text: 'Button',
+   action: ()=>{},
+   rectOpt: { radius: 2 },
+   textOpt: { size: 8 },
+};
+
+export function button(options: Partial<ButtonCompOpt> = {}): ButtonComp {
+   const opt = Object.assign({}, ButtonCompOptDefaults, options);
+   return {
+      id: 'button',
+      require: ['can-action', 'can-focus', "color"],
+      get text(): string {
+         return this.textObj.text;
+      },
+      set text(newText: string) {
+         this.textObj.text = newText;
+      },
+      add() {
+         this.textObj = this.add([
+            anchor('center'),
+            text(opt.text, opt.textOpt),
+         ]);
+         this.on('blur', ()=>this.color = opt.color);
+         this.on('focus', ()=>this.color = opt.focusColor);
+         this.onClick(this.action);
+         this.onHover(this.focus);
+         this.onHoverUpdate(()=>setCursor('pointer'));
+      },
+   };
+}
+
+export function addButton(options: Partial<ButtonCompOpt> = {}): Button {
+   const opt = Object.assign({}, ButtonCompOptDefaults, options);
+   return add([
+      rect(opt.width, opt.height, opt.rectOpt),
+      anchor('center'),
+      pos(opt.pos),
+      area(),
+      color(opt.color),
+      action(opt.action),
+      focus(),
+      button(opt),
+   ]);
+}

src/menu/Focus.ts

@@ -0,0 +1,33 @@
+import { Comp, GameObj } from 'kaboom';
+
+export interface FocusComp extends Comp {
+   get isBlurred(): boolean;
+   get isFocused(): boolean;
+   blur: Function;
+   focus: Function;
+};
+
+export function isFocusComp(obj: GameObj): obj is GameObj<FocusComp> {
+   return obj.is('can-focus');
+}
+
+export function focus(): FocusComp {
+   let foc = false;
+   return {
+      id: 'can-focus',
+      get isFocused() {
+         return foc;
+      },
+      get isBlurred() {
+         return !foc;
+      },
+      focus() {
+         foc = true;
+         this.trigger('focus')
+      },
+      blur() {
+         foc = false;
+         this.trigger('blur')
+      },
+   };
+};