Deploying to gh-pages from @ 169976e 🚀

Molmin · Jun 6, 2024 · 4388859 · 4388859
1 parent 2e9f840
commit 4388859
Show file tree

Hide file tree

Showing 10 changed files with 404 additions and 0 deletions.
diff --git a/game_replay.html b/game_replay.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <link rel="icon" type="image/png" href="/generals/favicon.png">
+  <link rel="stylesheet" href="/generals/ui.css">
+  <script>
+    window.site_prefix = '/generals'
+  </script>
+  <script type="text/javascript" src="/generals/jquery.min.js"></script>
+  <script type="text/javascript" src="/generals/ui.js"></script>
+  <title>Generals.io | GengeN 日上杯</title>
+</head>
+
+<body>
+  <div class="page page--home">
+    <div class="create-game admin">
+      <h2>创建一局游戏</h2>
+      <p>
+        <input class="player1" type="number" placeholder="参赛者 A">
+        <input class="player2" type="number" placeholder="参赛者 B">
+        <input class="startAt" type="number" placeholder="几分钟后开始">
+        <input class="note" type="text" placeholder="备注">
+        <button class="submit">确定</button>
+      </p>
+    </div>
+    <div class="list">
+      <h2>游戏列表</h2>
+      <table>
+        <thead>
+          <tr>
+            <td>编号</td>
+            <td>玩家 A</td>
+            <td>玩家 B</td>
+            <td>开始时间</td>
+            <td>获胜玩家</td>
+            <td>操作</td>
+            <td>备注</td>
+          </tr>
+        </thead>
+        <tbody>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <div class="page page--login">
+    <h2>请复制下面的内容，并在 <a href="https://www.luogu.com.cn/paste">洛谷云剪贴板</a> 创建一条只包含该信息的剪贴板，把剪贴板 ID 输入在下方：</h2>
+    <p class="token"></p>
+    <p><input type="text" placeholder="请输入云剪贴板 ID（8 个字符）" class="paste-id"><button class="submit">确认</button></p>
+  </div>
+  <div class="page page--game_play page--game_replay">
+    <div class="turn-counter">Turn 1</div>
+    <div class="game-table-container">
+      <table class="game">
+        <tbody class="game-table"></tbody>
+      </table>
+    </div>
+    <table class="game-leaderboard">
+      <tbody></tbody>
+    </table>
+    <div class="alert hidden">
+      <center>
+        <h1 class="alert-title"></h1>
+        <p class="alert-description" style="text-align: center; color: black;"></p>
+      </center>
+    </div>
+    <div class="hidden">
+      <div class="chat-messages-container">
+        <p class="chat-message server-chat-message">
+          <span class="announcement-spacer"></span>
+          <span class="inline-color-block red"></span>USERNAME joined the custom lobby.
+        </p>
+      </div>
+      <input id="chatroom-input" class="" type="text" placeholder="Press [Enter] to chat." value="">
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/public/Quicksand-Bold.otf b/public/Quicksand-Bold.otf
diff --git a/public/Quicksand-Light.otf b/public/Quicksand-Light.otf
diff --git a/public/Quicksand-Regular.otf b/public/Quicksand-Regular.otf
diff --git a/public/city.png b/public/city.png
diff --git a/public/general.png b/public/general.png
diff --git a/public/mountain.png b/public/mountain.png
diff --git a/public/obstacle.png b/public/obstacle.png
diff --git a/ui.css b/ui.css
@@ -0,0 +1,287 @@
+.page:not(.active),
+.hidden {
+    display: none;
+}
+
+@font-face {
+    font-family: Quicksand;
+    src: url('/generals/public/Quicksand-Regular.otf')
+}
+
+@font-face {
+    font-family: Quicksand-Light;
+    src: url('/generals/public/Quicksand-Light.otf')
+}
+
+@font-face {
+    font-family: Quicksand-Bold;
+    src: url('/generals/public/Quicksand-Bold.otf')
+}
+
+* {
+    font-family: Quicksand, Arial, sans-serif;
+}
+
+body,
+html {
+    background-color: #222;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+}
+
+.page.page--login,
+.page.page--home {
+    color: white
+}
+
+body:not(.isadmin) .admin {
+    display: none;
+}
+
+body {
+    --player-color-1: red;
+    --player-color-2: #4363d8;
+    --player-color-3: maroon;
+    --player-color-4: green;
+    --player-color-5: purple;
+    --player-color-6: teal;
+    --player-color-7: #f58231;
+    --player-color-8: blue;
+    --player-color-9: #b09f30;
+    --player-color-10: #f032e6;
+    --player-color-11: #9a6324;
+    --player-color-12: #7ab78c;
+    --player-color-13: #483d8b;
+}
+
+.page--game_play {
+    height: 100%;
+    overflow: hidden;
+}
+
+.turn-counter {
+    position: fixed;
+    top: 0;
+    left: 0;
+    padding: 5px;
+    font-size: 16px;
+    background: white;
+    color: black;
+    border-right: 2px solid teal;
+    border-bottom: 2px solid teal;
+    text-align: center;
+    min-width: 84px;
+    z-index: 40;
+}
+
+table.game {
+    border-collapse: separate;
+    border-spacing: 0.5px;
+}
+
+.game-table-container {
+    position: relative;
+}
+
+.game-table td {
+    position: relative;
+    width: var(--cell-size);
+    height: var(--cell-size);
+    min-width: var(--cell-size);
+    min-height: var(--cell-size);
+    max-width: var(--cell-size);
+    max-height: var(--cell-size);
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    font-size: var(--number-size);
+    white-space: nowrap;
+    color: #dcdcdc;
+    box-sizing: border-box;
+    border: 1px solid black;
+    border-collapse: collapse;
+    padding: 0;
+    background-color: #dcdcdc;
+    text-shadow: 0 0 2px black;
+}
+
+.game-table td,
+.disable-select {
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+}
+
+.game-table td.attackable {
+    opacity: .4;
+}
+
+.game-table td.attackable:hover {
+    cursor: pointer;
+}
+
+.game-table td.selectable {
+    z-index: 20;
+}
+
+.game-table td.selectable:hover {
+    cursor: pointer;
+}
+
+.game-table td.selected {
+    border: 1px solid white;
+    z-index: 30;
+}
+
+.game-table td:not(.type--empty) {
+    background-size: var(--bg-size);
+    background-repeat: no-repeat;
+    background-position-x: 50%;
+    background-position-y: 50%;
+}
+
+.game-table .type--general {
+    background-image: url(/generals/public/general.png);
+}
+
+.game-table .type--city {
+    background-image: url(/generals/public/city.png);
+    background-color: rgb(128, 128, 128);
+}
+
+.game-table .type--mountain {
+    background-image: url(/generals/public/mountain.png);
+    background-color: rgb(187, 187, 187);
+}
+
+.game-table .type--unknown {
+    border: 0 solid transparent;
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.game-table .type--obstacle {
+    border: 0 solid transparent;
+    background-color: rgba(255, 255, 255, 0.1);
+    background-image: url(/generals/public/obstacle.png);
+}
+
+.game-table .center-vertical {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.game-table .center-horizontal {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.game-leaderboard {
+    border-collapse: separate;
+    border-spacing: 2px;
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 40;
+    background: black;
+}
+
+.game-leaderboard td {
+    background: white;
+    padding: 5px;
+    color: black;
+    text-align: center;
+    font-size: 16px;
+}
+
+.game-table td.owner--1,
+.game-leaderboard td.owner--1 {
+    background-color: var(--player-color-1);
+    color: white;
+}
+
+.game-table td.owner--2,
+.game-leaderboard td.owner--2 {
+    background-color: var(--player-color-2);
+    color: white;
+}
+
+.game-leaderboard tr.surrendered {
+    opacity: .7;
+    background-color: red;
+}
+
+.game-leaderboard tr.dead {
+    opacity: .4;
+}
+
+@media screen and (max-width: 450px) {
+    .alert {
+        padding: 15px;
+    }
+}
+
+.alert {
+    background: #f9f9f9;
+    box-shadow: 2px 2px teal;
+    padding: 20px;
+    z-index: 50;
+    min-width: 200px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateY(-50%) translateX(-50%);
+}
+
+.alert h1.alert-title {
+    margin: 15px 0px 5px;
+    text-align: center;
+    color: black;
+    font-family: Quicksand-Bold;
+    white-space: nowrap;
+}
+
+button {
+    background-color: white;
+    box-shadow: 2px 2px teal;
+    color: teal;
+    cursor: pointer;
+    padding: 10px 30px;
+    margin: 5px;
+    font-size: 24px;
+    border: 0;
+    border-width: 0 !important;
+    outline: none !important;
+    transition: all .2s ease-in-out;
+    white-space: nowrap;
+    border-radius: 0;
+}
+
+button.small {
+    padding: 8px 20px;
+    font-size: 18px;
+}
+
+button.inverted {
+    background-color: teal;
+    box-shadow: 2px 2px black;
+    color: white;
+}
+
+button:hover {
+    cursor: pointer;
+    background-color: #bbb;
+    box-shadow: 3px 3px teal;
+}
+
+button.inverted:hover {
+    background-color: #006e6e;
+    box-shadow: 3px 3px black;
+}
+
+span.bold {
+    font-family: Quicksand-Bold, Arial, sans-serif;
+}
diff --git a/ui.js b/ui.js