Szopen_Interactif/minesweeper.xdc
3
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add documentation, initial UI redesign

Browse Source
This commit is contained in:
emil
2024-10-01 18:21:00 +02:00
parent 3ca565f674
commit d3a318b5a5
5 changed files with 38 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
doc/gameplay_notes.md
+12
View File
@@ -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.
doc/ui_sketch_main_mobile.xcf
BIN
View File
Binary file not shown.
index.html
+5 -10
View File
@@ -5,17 +5,12 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>minesweeper.xdc</h1>
</header>
<main>
<div id="minefield">
</div>
</main>
<footer>
<div id="top-bar">
<p id="result"></p>
<button id="newgame" onclick="location.reload()" style="display: none;">Play again</button>
</footer>
<button id="newgame" onclick="location.reload()" style="display:none;">New game</button>
</div>
<div id="minefield">
</div>
<script src="main.js"></script>
</body>
</html>
main.js
-9
View File
@@ -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);
style.css
+21 -21
View File
@@ -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; }