Put dist contents in docs for GitHub Pages

AlexBuz · Dec 15, 2023 · 3b6d0f3 · 3b6d0f3
1 parent e9fcdda
commit 3b6d0f3
Show file tree

Hide file tree

Showing 7 changed files with 1,024 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Mindsweeper — a principled take on minesweeper
 
-To play, visit https://alexbuz.github.io/minesweeper/. Once the page loads, no further internet connection is required.
+To play, visit https://alexbuz.github.io/mindsweeper/. Once the page loads, no further internet connection is required.
 
 ## Background
 
@@ -35,4 +35,6 @@ cd mindsweeper
 trunk build
 ```
 
-The built files will be placed in the `dist`, the contents of which is served by GitHub Pages when you visit https://alexbuz.github.io/minesweeper/ to play the game.
+The built files will be placed in the `dist` directory, the contents of which must be placed in `docs` to be served by GitHub Pages.
+
+For development, instead of `trunk build`, you can run `trunk serve --public-url=/ --open` to start a local server that automatically rebuilds the project when you make changes.
diff --git a/docs/favicon-243584e0eb10e903.svg b/docs/favicon-243584e0eb10e903.svg
diff --git a/docs/favicon-46b4b2a00dd13992.png b/docs/favicon-46b4b2a00dd13992.png
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html><html lang="en" oncontextmenu="return false"><head>
+        <meta charset="utf-8">
+        <title>Mindsweeper</title>
+        <link rel="icon" href="./favicon-46b4b2a00dd13992.png">
+        <link rel="icon" href="./favicon-243584e0eb10e903.svg">
+        <link rel="stylesheet" href="./main-610f006d6bf581a5.css">
+
+<link rel="preload" href="./mindsweeper-c3849c404b610118_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
+<link rel="modulepreload" href="./mindsweeper-c3849c404b610118.js"></head>
+<body><script type="module">import init from './mindsweeper-c3849c404b610118.js';init('./mindsweeper-c3849c404b610118_bg.wasm');</script></body></html>
diff --git a/docs/main-610f006d6bf581a5.css b/docs/main-610f006d6bf581a5.css
@@ -0,0 +1,168 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+h2 {
+    margin-bottom: 0;
+    padding-right: 30px;
+}
+
+dialog :not(h2) {
+    line-height: 1.25;
+}
+
+li {
+    margin-top: 5px;
+}
+
+li li {
+    font-size: 85%;
+}
+
+dialog {
+    border: none;
+    box-shadow: 0 0 16px gray;
+    border-radius: 20px;
+    max-width: calc(min(80ch, 90vw));
+    max-height: 90vh;
+    padding: 0;
+}
+
+dialog>div {
+    padding: 0 20px 5px 20px;
+}
+
+dialog::backdrop {
+    background: rgba(0, 0, 0, 0.2);
+}
+
+label {
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+button#close-dialog {
+    position: absolute;
+    width: 28px;
+    height: 28px;
+    top: 15px;
+    right: 15px;
+}
+
+table {
+    margin: auto;
+    border-collapse: collapse;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: default;
+}
+
+thead td>div {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+thead td {
+    height: 30px;
+    font-size: 16px;
+}
+
+.timer {
+    padding: 1px 3px;
+    border-radius: 3px;
+}
+
+tbody:not(.punish-guessing) {
+    --shadow-red: 128;
+}
+
+tbody.autopilot {
+    --shadow-green: 128;
+}
+
+tbody.mindless {
+    --shadow-blue: 128;
+}
+
+tbody {
+    box-shadow: 8px 8px 8px rgba(var(--shadow-red, 0), var(--shadow-green, 0), var(--shadow-blue, 0), 0.2);
+}
+
+.tile {
+    height: 36px;
+    width: 36px;
+    text-align: center;
+    border: 1px solid black;
+    font-size: 24px;
+    font-weight: bold;
+    font-family: 'Courier New', Courier, monospace;
+    background-color: #eee;
+}
+
+.hidden {
+    display: none;
+}
+
+.bg-red {
+    background-color: pink;
+}
+
+.bg-green {
+    background-color: lightgreen;
+}
+
+.bg-blue {
+    background-color: lightblue;
+}
+
+.bg-orange {
+    background-color: #ffcc99;
+}
+
+.bg-yellow {
+    background-color: #ffff99;
+}
+
+.text-faded {
+    color: rgba(0, 0, 0, 0.5);
+}
+
+.text-red {
+    color: red;
+}
+
+.revealed {
+    background-color: #ccc;
+}
+
+.number-1 {
+    color: blue;
+}
+
+.number-2 {
+    color: green;
+}
+
+.number-3 {
+    color: red;
+}
+
+.number-4 {
+    color: purple;
+}
+
+.number-5 {
+    color: maroon;
+}
+
+.number-6 {
+    color: teal;
+}
+
+.number-7 {
+    color: black;
+}
+
+.number-8 {
+    color: gray;
+}