public/game.html

   1 <!doctype html>
   2 <html>
   3
   4 <head>
   5     <title>Antares</title>
   6     <meta charset="utf-8">
   7     <link rel="preconnect" href="https://fonts.googleapis.com">
   8     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   9     <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap"
  10         rel="stylesheet">
  11     <script src="https://unpkg.com/htmx.org@1.7.0"
  12         integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo" crossorigin="anonymous"
  13         defer></script>
  14     <script src="/socket.io/socket.io.js"></script>
  15     <link rel="stylesheet" type="text/css" href="https://unpkg.com/augmented-ui@2/augmented-ui.min.css">
  16     <link rel="stylesheet" href="/scifi.css">
  17     <link rel="stylesheet" href="/stylesheet.css">
  18
  19 </head>
  20
  21 <body>
  22     <div class="row">
  23         <div class="col">
  24             <div class="pane" id="topbar" data-augmented-ui="br-clip bl-clip border">
  25                 <div class="row">
  26                     <div class="col" id="nav">
  27                         <ul>
  28                             <li>
  29                                 <a href="#" hx-target="#main" hx-get="/poll/overview" hx-trigger="load, click">Home</a>
  30                             </li>
  31                             <li>
  32                                 <a href="#" hx-target="#main" hx-get="/poll/construction" hx-trigger="click">Construction</a>
  33                             </li>
  34                             <li>
  35                                 <a href="#" hx-target="#main" hx-get="/poll/unit-training" hx-trigger="click">Unit Training</a>
  36                             </li>
  37                             <li>
  38                                 <a href="#" hx-target="#main" hx-post="/poll/map" hx-trigger="click">Map</a>
  39                             </li>
  40                             <li>
  41                                 <a href="#" hx-target="#main" hx-get="/poll/mailroom" hx-trigger="click">Mail</a>
  42                             </li>
  43                         </ul>
  44                     </div>
  45                 </div>
  46                 <div class="row">
  47                     <div class="col" id="info-bar">
  48                         <span><b>Credits:</b> 10,000,0000</span>
  49                         <span><b>Alloys:</b> 10,000,000</span>
  50                         <span><b>Food:</b> 10,000,0000</span>
  51                         <span><b>Energy:</b> 10,000,0000</span>
  52                     </div>
  53                 </div>
  54             </div>
  55         </div>
  56     </div>
  57     <div class="row">
  58         <div class="col">
  59             <div id="notifications"></div>
  60             <div id="main" data-augmented-ui="tl-clip tr-clip br-clip-x bl-clip border">
  61
  62             </div>
  63             <div id="chat" data-augmented-ui="tl-2-clip-y tr-clip-x border">
  64               <div id="chat-messages"></div>
  65               <form id="chat-form" hx-post="/chat" class="row">
  66                 <input type="text" name="message" id="chat-input" class="col">
  67                 <button type="submit" class="col">Send</button>
  68               </form>
  69             </div>
  70         </div>
  71     </div>
  72     <footer>
  73         A project by <a href="https://xangelo.ca">xangelo</a>
  74     </footer>
  75     <script>
  76       const ws= io();
  77       ws.on('/chat-message', msg => {
  78               document.querySelector('#chat-form').reset();
  79               const $el = document.querySelector('#chat-messages');
  80               $el.innerHTML = msg + $el.innerHTML;
  81             });
  82     </script>
  83 </body>
  84 </html>