GithubHelp home page GithubHelp logo

airmash-refugees / airmash-frontend Goto Github PK

View Code? Open in Web Editor NEW
43.0 43.0 24.0 6.18 MB

"Semi-pristine" copy of last official Airmash app

Home Page: https://airmash.online

HTML 5.88% JavaScript 62.53% CSS 31.59%

airmash-frontend's People

Contributors

blackcrawler avatar congratulatio avatar dependabot[bot] avatar lgg avatar spatiebot avatar steamroller-airmash avatar tornadomasterrace avatar wight-airmash avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

airmash-frontend's Issues

Possible new indicators

ideas

*Upgrades indicators only appear every 15s and are displayed for 3s.
*When the plane does not move for more than 2s only the plane selection panel is available.

TypeError: howl.play is not a function. (In 'howl.play(useUncompressedAsset ? void 0 : spriteName)', 'howl.play' is undefined)

This error was reported to the /clienterror endpoint:

origin: https://airmash.online
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Safari/605.1.15
error:
  message: s.play is not a function. (In 's.play(o?void 0:e)', 's.play' is undefined)
  line: 1
  column: 787479
  sourceURL: https://airmash.online/assets/engine.js?e2feade811be4b83072a
  stack:
    le@https://airmash.online/assets/engine.js?e2feade811be4b83072a:1:787479
    https://airmash.online/assets/engine.js?e2feade811be4b83072a:1:786257
    respawn@https://airmash.online/assets/engine.js?e2feade811be4b83072a:1:350470
    https://airmash.online/assets/engine.js?e2feade811be4b83072a:1:671696
    E@https://airmash.online/assets/engine.js?e2feade811be4b83072a:1:768352
    https://airmash.online/assets/engine.js?e2feade811be4b83072a:1:772564

Seems that howl was not initialized properly at this point:

var soundId = howl.play(useUncompressedAsset ? void 0 : spriteName);

Fix should be to check if howl and howl.play are defined before attempting to call that function.

Wonky missiles algorithm

I think I need some help in nailing this, if anyone is interested.

The hack posted to Reddit is fun but we could do way better, I'm just not sure how.

Some restrictions:

  • update() runs on increments of fractional frames, so however the algorithm works needs to support that
  • basically it's easy to produce an infinite stream of identical bits on client/server, it looks like this part is a solved problem (xorhash32(pos.x+pos.y+id) or similar)
  • update() on server vs. client might run with different fractions, so must pay careful attention to how bits are drained from the stream so they stay in sync

Ideas

  • "X% of the time, missile flies at a right angle", I love this, but it might look ugly without a little bit of new animation.
  • "aerodynamic instability". Think how a firework flies when it's had its support broken off. I think this would be the funniest option
  • "semi self-correcting wobble". missile veers off wildly but still follows original line within some % of error. so what you get is basically a UI effect that could also take an unsuspecting plane by surprise, but the weapon is still usable at max distance

Sub-ideas:

  • Richochet off walls. I don't know if this should be done for carrot, or if it could be kept in reserve for another missile type. I think ricochet for example could be the primary differentiator e.g. for an xplay baguette missile

Problems:

  • just adding random numbers to speed.x/y doesn't produce the right result. They need to be capped and account for direction and suchlike

I wouldn't mind nailing it in frontend first, so that if it's necessary to patch it into Starmash that only needs to happen once, and it only needs copied into server once


for usopp:

client fires,

server 'spawns a mob', that message includes a bunch of variables, but most importantly (speed.x, speed.y), where e.g.

  • speed.y > 0 = missile flies speed.y pixels up for each frame
  • speed.y < 0 = flies down
  • speed.x > 0 = ...

etc.

(x, y) are set based on angle of plane when it fired

For every frame, and for whatever reason for fractions of a frame, some calculation runs that can modify the speed and absolute position (which usually updates from speed)

It calculates a number 0..1 ("fracFrame") depending on how much of a full frame's worth of change should apply, so you can write

speed.x = fracFrame * (x change)
speed.y = fracFrame * (y change)

And things work out.

In my messing around, I summed 'fracFrame' up over each call into a variable 't', so it turns into the number of frames the missile has been alive for. Then I divided that number down and passed it into Math.sin() and added that to speed.

There is also 'spriteRot' which is the angle it's being fired at. I think the correct application is something like

speed.x = fracFrame * Math.sin(spriteRot) * Math.sin(t/7)
speed.y = fracFrame * Math.cos(spriteRot) * Math.sin(t/7)

But this caused an insane stop-start missile that made no sense at all.

We can also modify position directly, rather than via speed. But speed seems to be the correct variable to change

Missing missiles

Somehow the missiles are not displayed
Screenshot from 2019-12-07 22-26-35
Germany base is also missing
Screenshot from 2019-12-07 22-36-23

Agree on canonical frontend code

@congratulatio and @spatiebot in an unrelated thread:

we should appoint one frontend repository as the canonical frontend. We could take the one from airmash-refugees, but, @wight-airmash, you may have a better one somewhere lying around?

airmash.online is currently using the frontend code at congratulation/ao-frontend.
I could integrate the changes from airmash-refugees/airmash-frontend to make it easier to hack on if that helps?

@congratulatio, please feel free to merge the repositories and anoint one of them as canonical. If I can help, I'll be glad to do so.

Availability improvements

Regarding airmash-refugees/game-ideas#41 and how to prevent similar situations taking the whole game down, I think we should hard code the game server list in the frontend somewhere, and reach out to the /games endpoint to update it with player counts and any additional servers. The game server list is updated infrequently enough that this would be okay.

Sound.clearThruster() ID type mismatch

clearThruster() accepts an int player ID from Player.js, but

'thrustersByName' map (see more-renames branch) is keyed by something like "mob_NNNN" or "player_NNNN"

so it looks like that code is dead?

Bot marker graphics

Related to wight-airmash/ab-server#85, we need some UI changes to indicate when a player is a bot.

As a proof of concept, 5a58e21 combines the level plate with a robot face emoji. It looks like this on the latest Windows release:

bot-players-test-windows10

However this does have some problems:

  • emoji are rendered differently between platforms, and for some of them not at all
  • a player using the same emoji character could still successfully masquerade as a bot, even with the level plate
  • the spacing and sizing are inconsistent, seems a bit off

So this issue is to track replacing this temporary UI with something better.

Special ability disabled when chat typing is open?

Hi! Can you enable the use of special ability when the chat typing window is open?

I don't see any point why special abilities should be disabled when your typing window is open. If someone attacks me when typing, I will have to send it as unfinished or remove it completely (takes time), before I can use my special abilities again.

Frontend at airmash.online needs updating

Adding this issue to remind myself to do this.

The cached game server list (which gets added during a build) is out of date, causing problems for players if the games data service is temporarily unreachable for whatever reason.

Also since the last versioned release (2.0.4) several improvements have been made which should be rolled into a new airmash.online release, rather then just sitting on test.airmash.online:

  • [Feature] custom zoom slider (derps: #32)
  • [Workaround] Unicode rendering issues (derps: c1eef6b, 46e3fd9)
  • [Fix] broken CTF scoreboard (lgg: #30)

Add colored missiles?

Hi, I tried Starmash frontend a bit. They have an option to show missiles as colored, based on the Team color of the shooter.

This actually gives Starmash players a clear advantage over those who play through Airmash.online.

There are situations when countless missiles are flying and it's impossible to keep track who shot every single specific missile on the screen. In Airmash.online, all missiles are grey and I have to dodge every single one, because I cannot always be sure who shot them. In Starmash, those missiles are colored so I always know If I have to dodge them or not.

So, in order to not give Starmash players an advantage, could colored missiles added to Airmash.online as well?

Näyttökuva (112)

This situation in the screenshot is not so complicated, but I have seen many complicated situations where it's a clear advantage to know what missiles you have to dodge and what you don't.

Support for MS Edge

JOS was logged out of the game after pressing enter twice. He was using Edge at that time.

Websocket connection failed

Kids from US are complaining that they got banned because of that message. Could you have a look at the details? I have told them to post screenshots on reddit. Not sure if they would listen to me.

TypeError: undefined is not an object (evaluating 'pixiTextureByName.polygons.scale')

This error was reported to the /clienterror endpoint:

origin: https://airmash.online
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Safari/605.1.15
error:
  message: undefined is not an object (evaluating 's.polygons.scale')
  line: 1
  column: 643149
  sourceURL: https://airmash.online/assets/engine.js?e2feade811be4b83072a&_sm_byp=iVVRJHRr9MQt6r07
  stack:
    v@https://airmash.online/assets/engine.js?e2feade811be4b83072a&_sm_byp=iVVRJHRr9MQt6r07:1:643149
    https://airmash.online/assets/engine.js?e2feade811be4b83072a&_sm_byp=iVVRJHRr9MQt6r07:1:640858
    https://airmash.online/assets/engine.js?e2feade811be4b83072a&_sm_byp=iVVRJHRr9MQt6r07:1:741207

The polygons property was missing from pixiTextureByName at this point:

var initPolygonsScale = function() {
pixiTextureByName.polygons.scale.x = game.scale,
pixiTextureByName.polygons.scale.y = game.scale
};

The call stack above indicates this function was called from resizeRenderer:

initPolygonsScale(),

Likely root cause is that assets/map.json had not been fetched yet (or at all) at that point:

var createMapFromJson = function() {
$.getJSON("assets/map.json", function(mapResponse) {
pixiTextureByName.polygons = new PIXI.Graphics,

Preventing "Offset is outside the bounds of the DataView" error

During the protocol update process, there may be cases when the frontend with the extended schemas has already been deployed but some of the servers have not yet been updated. Because of this, the frontend parser may go beyond the boundaries of the smaller than expected binary packet.

To avoid waiting for all servers to update, it may be usefull to add a condition if the parser has reached the packet boundary:

for (var fieldIdx = 0; fieldIdx < schema.length; fieldIdx++) { 
  if (inputPos === dataView.byteLength) {
    break;
  }

var decodeMessageToDict = function(encoded, t) {
var dataView = new DataView(encoded),
msg = {
c: dataView.getUint8(0, true)
},
inputPos = 1,
schema = ServerMessageSchema[msg.c];
if (null == schema)
return null;
for (var fieldIdx = 0; fieldIdx < schema.length; fieldIdx++) {
var fieldName = schema[fieldIdx][0];
switch (schema[fieldIdx][1]) {

Persistent sounds bug

Most likely candidate is Howler.js via b8549af

Going to have a go at finding a way to diff the replaced and original libs

TypeError: Cannot set property 'x' of undefined

This error was reported to the /clienterror endpoint:

origin: https://airmash.online
user-agent: Mozilla/5.0 (X11; CrOS x86_64 13310.91.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.131 Safari/537.36
error:
  message: Uncaught TypeError: Cannot set property 'x' of undefined
  line: 1
  column: 758897
  url: https://airmash.online/assets/engine.js?e2feade811be4b83072a
  stack:
    TypeError: Cannot set property 'x' of undefined
        at i.network (https://airmash.online/assets/engine.js?e2feade811be4b83072a:1:758897)
        at Object.Mobs.network (https://airmash.online/assets/engine.js?e2feade811be4b83072a:1:763286)
        at E (https://airmash.online/assets/engine.js?e2feade811be4b83072a:1:769859)
        at WebSocket.l.onmessage (https://airmash.online/assets/engine.js?e2feade811be4b83072a:1:772563)

Looks like at this point there was a Mob missing the speed property:

this.speed.x = msg.speedX;

Help me understand Textures.init()

This one

I get the concept here but I don't understand the comma propOverrides and when it applies.

Is this saying:

  1. Only process the for propOverrides if screencenter" === cloned.position
  2. Or it doesn't matter and process the propOverrides in any case?

It's hard because I am not used to statement assignment and that comma makes the difference between a working game and not a working game and I am far from a working game but everything boils down to texture processing.

if ('screencenter' === cloned.position){
    cloned.position = [game.halfScreenX, game.halfScreenY];       
    // Process propOverrides here?
}
// Process propOverrides anyway?

Hide inactive players and bots in the scoreboard

Hi, could a switch added that allows to hide bots and inactive players in the scoreboard?

The reason for this is that sometimes when I want to check and review the current balance situation in order to balance the game by myself, it's not very effortless because there is lots of information I don't need, such as inactives and bots. I want to be able to see a list of active human players only, quickly and effortlessly.

(Had some discussion about this in the server repo: wight-airmash/ab-server#83)

Also, the scoreboard could also be extended some way because the readability is not good when one needs to scroll it down a lot in order to see all the players. In the picture there are only 17 players but at peak times there could be 30.

Näyttökuva (108)

Here is a reference picture about "hide bots" button, that could also of course hide inactive players as well. (Though I don't understand what's the point to list inactives anyway.)

"Game configuration" file

Creating a ticket here to track all the pieces needed to add a new mob or plane. Since server needs these pieces too, propose moving them all into a single new file the server exports. (Actually I didn't propose this, Steam and Wight and probably more have :).

Goals:

  • Configurable plane speed
  • Configurable plane/mob graphics
  • Configurable plane/mob sounds
  • Additional planes / missile types
  • Configurable map layout / fixtures ? Adding new features like impossible chokepoints to stash ups in etc

Gotchas:

  • Many pieces of hard-wired logic based on plane/mob type ID / name.

Related:

  • ~/src/airmash/ab-server/src/constants/ships.ts

Started padding out some kind of combined schema in https://github.com/airmash-refugees/airmash-frontend/wiki/Proposed-Game-Config-File-Format

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.