laneya2

commit

d66785a9bb24cb9b25818b48bdf18a43a6f413e1

parent

31d60d419356d354e83a666b6ca148957ba07d8f

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2024-09-27 16:22

client: add inventory menu

Diffstat

2 files changed, 82 insertions, 10 deletions

diff --git a/static/main.js b/static/main.js

@@ -52,6 +52,10 @@ var game = {
   52    52     objects: {},
   53    53     health: 1,
   54    54     healthTotal: 1,
   -1    55     inventory: {
   -1    56         'potion': 1,
   -1    57         'dagger': 1,
   -1    58     },
   55    59 
   56    60     getRect(pos, withWalls) {
   57    61         for (const rect of this.rects) {
@@ -160,6 +164,9 @@ var game = {
  160   164 var screen = {
  161   165     rows: null,
  162   166     cols: null,
   -1   167     menuOpen: false,
   -1   168     menuCursor: 0,
   -1   169     menuOffset: 0,
  163   170 
  164   171     updateSize() {
  165   172         this.rows = binSearch(v => {
@@ -173,6 +180,17 @@ var screen = {
  173   180         this.render();
  174   181     },
  175   182 
   -1   183     toggleMenu() {
   -1   184         if (this.menuOpen) {
   -1   185             this.menuOpen = false;
   -1   186         } else {
   -1   187             this.menuOpen = true;
   -1   188             this.menuCursor = 0;
   -1   189             this.menuOffset = 0;
   -1   190         }
   -1   191         this.render();
   -1   192     },
   -1   193 
  176   194     commitSpan(text, color) {
  177   195         if (color === -1) {
  178   196             $pre.append(text);
@@ -191,6 +209,37 @@ var screen = {
  191   209         $pre.append('\n');
  192   210     },
  193   211 
   -1   212     renderMenu() {
   -1   213         var rows = this.rows - 3;
   -1   214         var items = Object.entries(game.inventory);
   -1   215         items.sort();
   -1   216 
   -1   217         if (this.menuCursor > items.length - 1) {
   -1   218             this.menuCursor = items.length - 1;
   -1   219         }
   -1   220         if (this.menuCursor < 0) {
   -1   221             this.menuCursor = 0;
   -1   222         }
   -1   223 
   -1   224         if (this.menuOffset < this.menuCursor - rows + 1) {
   -1   225             this.menuOffset = this.menuCursor - rows + 1;
   -1   226         }
   -1   227         if (this.menuOffset > this.menuCursor) {
   -1   228             this.menuOffset = this.menuCursor;
   -1   229         }
   -1   230 
   -1   231         for (let i = 0; i < rows; i++) {
   -1   232             if (i + this.menuOffset < items.length) {
   -1   233                 var [name, count] = items[i + this.menuOffset];
   -1   234                 var line = ` ${count.toString().padStart(2)} ${name}`
   -1   235                     .padEnd(this.cols).substr(0, this.cols);
   -1   236                 var color = i + this.menuOffset === this.menuCursor ? 'inverse' : -1;
   -1   237                 this.commitSpan(line, color);
   -1   238             }
   -1   239             $pre.append('\n');
   -1   240         }
   -1   241     },
   -1   242 
  194   243     renderMap() {
  195   244         var xOffset = -(this.cols >> 1);
  196   245         var yOffset = -(this.rows >> 1);
@@ -223,7 +272,11 @@ var screen = {
  223   272         $pre.innerHTML = '';
  224   273 
  225   274         this.renderHealth();
  226    -1         this.renderMap();
   -1   275         if (this.menuOpen) {
   -1   276             this.renderMenu();
   -1   277         } else {
   -1   278             this.renderMap();
   -1   279         }
  227   280     },
  228   281 };
  229   282 
@@ -272,16 +325,31 @@ socket.onmessage = function(event) {
  272   325 };
  273   326 
  274   327 document.onkeydown = function(event) {
  275    -1     if (event.key === 'ArrowUp') {
  276    -1         send({action: 'move', dir: 'up'});
  277    -1     } else if (event.key === 'ArrowRight') {
  278    -1         send({action: 'move', dir: 'right'});
  279    -1     } else if (event.key === 'ArrowDown') {
  280    -1         send({action: 'move', dir: 'down'});
  281    -1     } else if (event.key === 'ArrowLeft') {
  282    -1         send({action: 'move', dir: 'left'});
   -1   328     if (screen.menuOpen) {
   -1   329         if (event.key === 'ArrowUp') {
   -1   330             screen.menuCursor -= 1;
   -1   331         } else if (event.key === 'ArrowDown') {
   -1   332             screen.menuCursor += 1;
   -1   333         } else if (event.key === 'i') {
   -1   334             screen.toggleMenu();
   -1   335         } else {
   -1   336             return;
   -1   337         }
   -1   338         screen.render();
  283   339     } else {
  284    -1         return;
   -1   340         if (event.key === 'ArrowUp') {
   -1   341             send({action: 'move', dir: 'up'});
   -1   342         } else if (event.key === 'ArrowRight') {
   -1   343             send({action: 'move', dir: 'right'});
   -1   344         } else if (event.key === 'ArrowDown') {
   -1   345             send({action: 'move', dir: 'down'});
   -1   346         } else if (event.key === 'ArrowLeft') {
   -1   347             send({action: 'move', dir: 'left'});
   -1   348         } else if (event.key === 'i') {
   -1   349             screen.toggleMenu();
   -1   350         } else {
   -1   351             return;
   -1   352         }
  285   353     }
  286   354     event.preventDefault();
  287   355 };

diff --git a/static/style.css b/static/style.css

@@ -42,6 +42,10 @@ pre {
   42    42 .color-5 { color: #96a }
   43    43 .color-6 { color: #299 }
   44    44 .color-7 { color: #555 }
   -1    45 .color-inverse {
   -1    46 	background: var(--fg);
   -1    47 	color: var(--bg);
   -1    48 }
   45    49 
   46    50 @media (prefers-color-scheme: dark) {
   47    51 	:root {