diff --git a/doc/gameplay_notes.md b/doc/gameplay_notes.md new file mode 100644 index 0000000..b6090a1 --- /dev/null +++ b/doc/gameplay_notes.md @@ -0,0 +1,12 @@ +# Gravedigger.xdc gameplay notes +## Levels, scores, leaderboards +All levels are randomly generated, all the time, so "Level 1" for +every player will only have one thing in common: size. That's how +levels differ as well, level one has eight rows, level two has nine +rows, etc. Perhaps it should also be so that the higher the level, the +more mine-dense the level becomes, up to a certain maximum. + +This makes it so leaderboards are more-or-less fair, and a mesaure of +a player's skill (and a bit of luck). If the levels were not randomly +generated, then a player could simply take a picture of a solved +minefield and do it in a very quick manner. diff --git a/doc/ui_sketch_main_mobile.xcf b/doc/ui_sketch_main_mobile.xcf new file mode 100644 index 0000000..101a925 Binary files /dev/null and b/doc/ui_sketch_main_mobile.xcf differ diff --git a/index.html b/index.html index 2de6c98..cd228bd 100644 --- a/index.html +++ b/index.html @@ -5,17 +5,12 @@ -
-

minesweeper.xdc

-
-
-
-
-
- + + +
+
diff --git a/main.js b/main.js index baad54f..27f4195 100644 --- a/main.js +++ b/main.js @@ -48,15 +48,6 @@ function minefield_initialize() { cell.y = j; cell.classList.add("unknown"); - let r = Math.random(); - if (r < 0.33) { - cell.classList.add("unknown-type-1"); - } else if (r < 0.66) { - cell.classList.add("unknown-type-2"); - } else { - cell.classList.add("unknown-type-3"); - } - cell.onclick = cell_onclick.bind(cell); cell.oncontextmenu = cell_oncontextmenu.bind(cell); $("#minefield").appendChild(cell); diff --git a/style.css b/style.css index 963b771..25c4f9c 100644 --- a/style.css +++ b/style.css @@ -1,38 +1,42 @@ :root { - --cell-size: 5vh; - --border-size: 3px; + --top-bar-height: 10vh; +} + +@media (orientation: landscape) { + #minefield { + width: 35% !important;; + } } body { - display: flex; - flex-flow: column; - align-items: center; margin: 0; - width: 100vw; image-rendering: crisp-edges; image-rendering: pixelated; - /* background-image: url("./bg.png"); */ - background-size: 10%; background: gray; + display: flex; + justify-content: center; } -header, main, footer { - padding: 1em; +#top-bar { + position: fixed; + width: 100vw; + height: var(--top-bar-height); + background: rgba(0, 0, 0, 0.5); } -h1 { margin: 0; } -button { width: 10em; height: 3em; } - #minefield { + width: 100%; display: grid; user-select: none; - grid-template-columns: var(--cell-size) var(--cell-size) var(--cell-size) var(--cell-size) var(--cell-size) var(--cell-size) var(--cell-size) var(--cell-size); - padding: 1em; + grid-template-columns: repeat(8, 12.5%); + padding: 2em; +/* Padding for the top info bar. */ + padding-top: calc(var(--top-bar-height) + 2em); } /* Cells. */ #minefield > div { - height: var(--cell-size); + aspect-ratio: 1/1; font-weight: bold; text-shadow: 0 -2px white; -webkit-text-stroke: 1px white; @@ -41,10 +45,7 @@ button { width: 10em; height: 3em; } } .unknown, .known { background-size: cover; } - -.unknown-type-1 { background-image: url("./res/gravedigger/unknown-1.png"); } -.unknown-type-2 { background-image: url("./res/gravedigger/unknown-1.png"); } -.unknown-type-3 { background-image: url("./res/gravedigger/unknown-1.png"); } +.unknown { background-image: url("./res/gravedigger/unknown-1.png"); } .known { background-image: url("./res/gravedigger/known.png"); } .flagged { background-image: url("./res/gravedigger/flagged.png"); } .exploded { background-image: url("./res/gravedigger/explosion.png"); } @@ -58,4 +59,3 @@ button { width: 10em; height: 3em; } .n6 { color: cyan; } .n7 { color: pink; } .n8 { color: teal; } -