Skip to content

Commit ac849f8

Browse files
SubZtepSubZtep
committed
🐣 Add
1 parent b361a93 commit ac849f8

15 files changed

+89
-94
lines changed

‎.postcssrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"plugins": {
3+
"postcss-nested": {}
4+
}
5+
}

‎README.md

-1
This file was deleted.

‎dist/assets/index.9abab5fe.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/assets/index.9b93e947.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>CSS Tetris 3D</title>
7+
<script type="module" crossorigin src="/assets/index.9b93e947.js"></script>
8+
<link rel="stylesheet" href="/assets/index.9abab5fe.css">
9+
</head>
10+
<body>
11+
<div class="container"><div class="level"><div class="face back"></div><div class="face right"></div><div class="face left"></div><div class="face top"></div><div class="face bottom"></div></div></div><div class="blocks"><div class="cube"><div class="face back"></div><div class="face right"></div><div class="face left"></div><div class="face top"></div><div class="face bottom"></div></div></div>
12+
13+
</body>
14+
</html>

‎imports.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import "./src/style.css"
2+
import "./src/main"

‎index.html

+3-4
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Vite App</title>
6+
<title>CSS Tetris 3D</title>
77
</head>
88
<body>
9-
<pug>index</pug>
10-
<div id="app"></div>
11-
<script type="module" src="/main.ts"></script>
9+
<pug file="src/index.pug" />
10+
<script type="module" src="imports.ts"></script>
1211
</body>
1312
</html>

‎package-lock.json

+43-21
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"@types/resize-observer-browser": "^0.1.5",
1111
"postcss-nested": "^5.0.3",
1212
"pug": "^3.0.0",
13-
"vite": "^2.0.0-beta.48"
13+
"vite": "^2.0.0-beta.69",
14+
"vite-plugin-pug": "^0.1.0"
1415
}
1516
}

‎postcss.config.js

-5
This file was deleted.

‎index.pug ‎src/index.pug

File renamed without changes.

‎main.ts ‎src/main.ts

+5-25
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
import "./style.css"
2-
3-
document.querySelector("#app" as string).innerHTML = `
4-
<h1>Hello Vite!</h1>
5-
<a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
6-
`
7-
81
const level = {
92
width: 6,
103
height: 5,
@@ -15,9 +8,7 @@ const containerEl: HTMLDivElement = document.querySelector(".container")
158
const levelEl: HTMLDivElement = containerEl.querySelector(".level")
169

1710
const generateLevel = () => {
18-
Object.keys(level).forEach(key =>
19-
levelEl.style.setProperty(`--${key}`, level[key])
20-
)
11+
Object.keys(level).forEach(key => levelEl.style.setProperty(`--${key}`, level[key]))
2112

2213
levelEl.querySelectorAll(".face").forEach(el => {
2314
const rectCount = el.classList.contains("back")
@@ -40,14 +31,8 @@ window.addEventListener("load", () => {
4031
"mousemove",
4132
({ buttons, clientX, clientY }: MouseEvent) => {
4233
const { clientWidth, clientHeight } = containerEl
43-
containerEl.style.setProperty(
44-
"--mouse-x",
45-
100 - Math.floor((clientX / clientWidth) * 100) + "%"
46-
)
47-
containerEl.style.setProperty(
48-
"--mouse-y",
49-
100 - Math.floor((clientY / clientHeight) * 100) + "%"
50-
)
34+
containerEl.style.setProperty("--mouse-x", 100 - Math.floor((clientX / clientWidth) * 100) + "%")
35+
containerEl.style.setProperty("--mouse-y", 100 - Math.floor((clientY / clientHeight) * 100) + "%")
5136
},
5237
false
5338
)
@@ -58,13 +43,8 @@ window.addEventListener("load", () => {
5843
contentRect: { width, height },
5944
},
6045
]) => {
61-
const minWidth = Math.floor(
62-
Math.min(width / level.width, height / level.height)
63-
)
64-
levelEl.style.setProperty(
65-
"--square-length",
66-
Math.floor((minWidth / level.depth) * 1.5) + "px"
67-
)
46+
const minWidth = Math.floor(Math.min(width / level.width, height / level.height))
47+
levelEl.style.setProperty("--square-length", Math.floor((minWidth / level.depth) * 1.5) + "px")
6848
}
6949
).observe(containerEl)
7050
})

‎style.css ‎src/style.css

-13
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,3 @@
1-
#app {
2-
font-family: Avenir, Helvetica, Arial, sans-serif;
3-
-webkit-font-smoothing: antialiased;
4-
-moz-osx-font-smoothing: grayscale;
5-
text-align: center;
6-
color: #2c3e50;
7-
margin-top: 60px;
8-
9-
h1 {
10-
color: red;
11-
}
12-
}
13-
141
* {
152
box-sizing: border-box;
163
}

‎tsconfig.json

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
{
22
"compilerOptions": {
3-
"isolatedModules": true,
3+
"target": "ESNext",
4+
"module": "ESNext",
5+
"lib": ["ESNext", "DOM"],
6+
"esModuleInterop": true,
7+
"skipLibCheck": true,
8+
// "isolatedModules": true,
49
// "types": ["vite/client"]
5-
}
10+
},
11+
"include": [
12+
"imports.ts",
13+
"src/**/*.ts"
14+
]
615
}

‎vite.config.ts

+2-22
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,6 @@
11
import { defineConfig } from "vite"
2-
import { compileFile } from "pug"
2+
import pugPlugin from "vite-plugin-pug"
33

44
export default defineConfig({
5-
plugins: [
6-
{
7-
handleHotUpdate({ file, server }) {
8-
if (file.slice(-4) === ".pug") {
9-
server.ws.send({
10-
type: "full-reload",
11-
})
12-
}
13-
},
14-
name: "PrePug",
15-
transformIndexHtml: {
16-
enforce: "pre",
17-
transform(html) {
18-
return html.replace(/<pug>(.*?)<\/pug>/, (_, pugFileName) => {
19-
const compiler = compileFile(`${pugFileName}.pug`)
20-
return compiler()
21-
})
22-
},
23-
},
24-
},
25-
],
5+
plugins: [pugPlugin()],
266
})

0 commit comments

Comments
 (0)