-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.pug
142 lines (133 loc) · 6.26 KB
/
index.pug
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
//- pug index.pug -w
- const blocks = ["air", "stone", "grass", "dirt", "log", "wood", "leaves", "glass"];
- const layers = 9;
- const rows = 9;
- const columns = 9;
<html lang="en" style="--layers: #{layers}; --rows: #{rows}; --columns: #{columns}">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="A Minecraft clone made with pure HTML & CSS – no JavaScript." />
<link rel="code-repository" href="https://github.com/BenjaminAster/CSS-Minecraft" />
<title>CSS Minecraft</title>
<link rel="icon" href="./assets/icon.png" />
<link rel="stylesheet" href="./icons.css" />
<link rel="stylesheet" href="./main.css" />
<link rel="preload" as="image" href="./assets/azalea_leaves.png" />
<link rel="preload" as="image" href="./assets/dirt.png" />
<link rel="preload" as="image" href="./assets/glass.png" />
<link rel="preload" as="image" href="./assets/grass_carried.png" />
<link rel="preload" as="image" href="./assets/grass_side_carried.png" />
<link rel="preload" as="image" href="./assets/log_oak.png" />
<link rel="preload" as="image" href="./assets/pickaxe.png" />
<link rel="preload" as="image" href="./assets/stone.png" />
<style>
- const sourceMap = { version: 3, sources: ["./index.pug"], mappings: "" };
| /*# sourceMappingURL=data:application/json;charset=utf-8,#{encodeURIComponent(JSON.stringify(sourceMap))} */
</style>
<section class="info">
<div class="text">
<h1>CSS Minecraft</h1>
<p>
| <strong>There is no JavaScript on this page.</strong> All the logic is made 100% with pure HTML & CSS. For the best performance, please close other tabs and running programs.<br />
| View on <a href="https://github.com/BenjaminAster/CSS-Minecraft">GitHub</a>, <a href="https://codepen.io/Benjamin_Aster/pen/gOKwpOd">CodePen</a>, <a href="https://benjaminaster.com/css-minecraft/">benjaminaster.com</a>
</p>
<p class="not-supported">
| ⚠︎ Your browser does not support the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has">CSS <code>:has()</code> pseudo-class</a>, which is needed for this site to work.
| Please update it: Chromium version ≥ 105, Safari version ≥ 15.4 or Firefox version ≥ 121 is required.
</p>
</div>
<label class="close" title="close">
<input type="checkbox" />
</label>
</section>
<section class="controls">
<div class="block-chooser">
<span class="label">Block type</span>
each block in blocks
<label class="#{block}" title="#{block}">
<input type="radio" name="block-type" !{block === "stone" ? "checked" : ""} />
</label>
//- /each
</div>
<div class="move-buttons">
<div class="move-button-pair">
<span class="label">Vertical</span>
<button class="up icon:arrow-circle-up" title="Move upwards"></button>
<button class="down icon:arrow-circle-down" title="Move downwards"></button>
</div>
<div class="move-button-pair">
<span class="label">Horizontal</span>
<button class="forwards icon:arrow-upward" title="Move forwards"></button>
<button class="backwards icon:arrow-downward" title="Move backwards"></button>
</div>
<div class="move-button-pair">
<span class="label">Rotation</span>
<button class="clockwise icon:rotate-right" title="Rotate clockwise"></button>
<button class="counterclockwise icon:rotate-left" title="Rotate counterclockwise"></button>
</div>
<div class="move-button-pair">
<span class="label">View</span>
<button class="look-up icon:keyboard-arrow-up" title="Look up"></button>
<button class="look-down icon:keyboard-arrow-down" title="Look down"></button>
</div>
</div>
</section>
<main>
<div class="content">
<div class="look-up">
<div class="look-down">
<div class="initial-camera-position">
<div class="up">
<div class="down">
<div class="forwards">
<div class="backwards">
<div class="clockwise">
<div class="counterclockwise">
<div class="blocks">
for _, layer in Array(layers)
for _, row in Array(rows)
for _, column in Array(columns)
<div class="cubes-container" style="--layer: #{layer}; --row: #{row}; --column: #{column}">
- const selectedBlock = layer === layers - 1 ? "grass" : "air";
- const name = `cube-layer-${layer}-row-${row}-column-${column}`;
<div class="cube #{blocks[0]}">
- const id = `${name}-${blocks[0]}`;
<input type="radio" name="#{name}" id="#{id}" !{selectedBlock === blocks[0] ? "checked" : ""} />
<label for="#{id}" class="front"></label>
<label for="#{id}" class="back"></label>
<label for="#{id}" class="left"></label>
<label for="#{id}" class="right"></label>
<label for="#{id}" class="top"></label>
<label for="#{id}" class="bottom"></label>
</div>
each block, index in blocks.slice(1)
- const id = `${name}-${block}`;
- const checked = index === 0;
<div class="cube #{block}">
<input type="radio" name="#{name}" id="#{id}" !{selectedBlock === block ? "checked" : ""} />
<label for="cube-layer-#{layer}-row-#{row + 1}-column-#{column}-#{block}" class="front"></label>
<label for="cube-layer-#{layer}-row-#{row - 1}-column-#{column}-#{block}" class="back"></label>
<label for="cube-layer-#{layer}-row-#{row}-column-#{column + 1}-#{block}" class="left"></label>
<label for="cube-layer-#{layer}-row-#{row}-column-#{column - 1}-#{block}" class="right"></label>
<label for="cube-layer-#{layer - 1}-row-#{row}-column-#{column}-#{block}" class="top"></label>
<label for="cube-layer-#{layer + 1}-row-#{row}-column-#{column}-#{block}" class="bottom"></label>
</div>
//- /each
</div>
//- /for
//- /for
//- /for
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</html>