martinbwg / Pixel-Tanks

1 stars 3 forks source link

HTMLify chat and login system #630

Closed cs6413110 closed 2 months ago

cs6413110 commented 3 months ago

Make it so you can easily copy and paste stuff, get auto login via browser. Copy and paste chat messages directly, etc.

LostKing73 commented 3 months ago

when done

cs6413110 commented 3 months ago

This will take a while

cs6413110 commented 3 months ago

Progress: Login nearly finished

cs6413110 commented 3 months ago

Need a new pause menu,

cs6413110 commented 3 months ago

cringes in lack of effort

cs6413110 commented 3 months ago

Just have to htmlify chat and do some minor touch ups on the inventory menu

cs6413110 commented 2 months ago

@BreadSpam I could use help with the css math for this.

cs6413110 commented 2 months ago

thinking something like...

<div id='messages'>
   <div id='message' style='background-color: black; opacity: .2;'><span style='color: ${color}'></span></div>
</div>

we need to make a demo first because it will literally explode the game UI if we try to directly add it

cs6413110 commented 2 months ago

Tryna decide how we're going to do caching and culling.

cs6413110 commented 2 months ago

just do /gpt Explain this concept in a simple, clear, concise way:

cs6413110 commented 2 months ago
<body>
  <div id='viewport'>
    <div id='messages'>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
      <div id='message'>
        asdfasdf
      </div>
    </div>
    <div id='spacer'>
      <input id='input' type='text' />
    </div>
  </div>
</body>
<style>
body {
  background-color: orange;
  padding: 0;
  margin: 0;
}
#viewport {
  border: 1px solid black;
  width: 500px; /* window.innerHeight/1000*aspect_ratio */
  position: absolute;
  max-height: 100%;
}
#spacer {
  border: 1px solid gray;
  height: 200px;
}
#messages {
  height: calc(100vh - 200px);
  overflow-y: scroll;
}
#message {
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;
  color: green;
  background-color: rgba(0, 0, 0, .2);
  display: table;
}
#input {
  background-color: rgba(0, 0, 0, .2);
  border: none;
  outline: none;
  color: white;
  width: 100%;
}
::-webkit-scrollbar {
  display: none;
}
</style>
cs6413110 commented 2 months ago

done