mirror of
https://github.com/Xevion/rust-sdl2-emscripten.git
synced 2025-12-06 01:16:14 -06:00
Add tailwindcss, revamp index with details
This commit is contained in:
15
.github/workflows/deploy.yaml
vendored
15
.github/workflows/deploy.yaml
vendored
@@ -1,15 +1,20 @@
|
||||
name: Github Pages
|
||||
name: WebAssembly (GitHub Pages)
|
||||
|
||||
on: [push]
|
||||
|
||||
permissions:
|
||||
contents: write
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
permissions:
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- uses: mymindstorm/setup-emsdk@v11
|
||||
with:
|
||||
@@ -24,6 +29,12 @@ jobs:
|
||||
- name: Rust Cache
|
||||
uses: Swatinem/rust-cache@v2
|
||||
|
||||
- uses: pnpm/action-setup@v3
|
||||
name: Install pnpm
|
||||
with:
|
||||
version: 8
|
||||
run_install: true
|
||||
|
||||
- name: Build # build
|
||||
run: ./scripts/build.sh -er # release, skip emsdk
|
||||
|
||||
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -2,3 +2,5 @@
|
||||
/dist
|
||||
.idea
|
||||
*.dll
|
||||
node_modules
|
||||
assets/build.css
|
||||
@@ -1,27 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #000;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
background: #000;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="canvas"></canvas>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="/build.css" />
|
||||
</head>
|
||||
<body class="m-0 p-0 bg-black text-white">
|
||||
<div class="max-w-screen-md mx-auto mt-10">
|
||||
<h1 class="text-xl lowercase my-1">
|
||||
<span class="px-1 rounded font-mono bg-zinc-900 border border-zinc-700"
|
||||
>rust-sdl2-emscripten</span
|
||||
>
|
||||
</h1>
|
||||
<p class="ml-5">
|
||||
This is a demo of a simple program written in Rust using the SDL2
|
||||
library and compiled to WebAssembly using Emscripten. The game loop is
|
||||
implemented directly in Rust and uses Emscripten's Asyncify feature, as
|
||||
well as hooks to
|
||||
</p>
|
||||
<canvas id="canvas" class="rounded border border-white/25 my-4"></canvas>
|
||||
<div class="mt-2 mx-3">
|
||||
<div class="mt-2 mx-3">
|
||||
<h2 class="text-xl font-mono lowercase">Notes</h2>
|
||||
<p class="ml-5">
|
||||
This demo uses all four SDL2 extensions; Image, Mixer, TTF, and GFX.
|
||||
</p>
|
||||
<h2 class="text-xl font-mono mt-1 lowercase">Controls</h2>
|
||||
<ul class="ml-5 *:my-1">
|
||||
<li>
|
||||
<span class="code">← ↑ → ↓</span>
|
||||
Move Sprite
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">space</span>
|
||||
Change Sprite
|
||||
</li>
|
||||
<li>
|
||||
<span class="code">shift + ↑↓</span>
|
||||
Change Volume
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var Module = {
|
||||
'canvas': document.getElementById('canvas'),
|
||||
canvas: document.getElementById("canvas"),
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="pacman.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
21
assets/styles.scss
Normal file
21
assets/styles.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@font-face {
|
||||
font-family: "Liberation Mono";
|
||||
src:
|
||||
url("LiberationMono.woff2") format("woff2"),
|
||||
url("LiberationMono.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
canvas {
|
||||
@apply w-full h-full block mx-auto bg-black;
|
||||
}
|
||||
|
||||
.code {
|
||||
@apply px-1 rounded font-mono bg-zinc-900 border border-zinc-700
|
||||
}
|
||||
14
package.json
Normal file
14
package.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.19",
|
||||
"postcss": "^8.4.38",
|
||||
"tailwindcss": "^3.4.3"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tailwindcss -o ./assets/build.css"
|
||||
},
|
||||
"dependencies": {
|
||||
"cssnano": "^6.1.2",
|
||||
"postcss-cli": "^11.0.0"
|
||||
}
|
||||
}
|
||||
1424
pnpm-lock.yaml
generated
Normal file
1424
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
7
postcss.config.js
Normal file
7
postcss.config.js
Normal file
@@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
cssnano: {},
|
||||
},
|
||||
}
|
||||
@@ -51,10 +51,17 @@ else
|
||||
cargo build --target=wasm32-unknown-emscripten
|
||||
fi
|
||||
|
||||
echo "Generating CSS"
|
||||
pnpx postcss-cli ./assets/styles.scss -o ./assets/build.css
|
||||
|
||||
echo "Copying WASM files"
|
||||
mkdir -p dist
|
||||
output_folder="target/wasm32-unknown-emscripten/$build_type"
|
||||
cp assets/index.html dist
|
||||
|
||||
cp assets/*.woff* dist
|
||||
cp assets/build.css dist
|
||||
cp assets/favicon.ico dist
|
||||
cp $output_folder/pacman.wasm dist
|
||||
cp $output_folder/pacman.js dist
|
||||
# only if .data file exists
|
||||
|
||||
12
tailwind.config.js
Normal file
12
tailwind.config.js
Normal file
@@ -0,0 +1,12 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./**/*.{html,js,rs}"],
|
||||
theme: {
|
||||
fontFamily: {
|
||||
'mono': ['"Liberation Mono"', 'monospace'],
|
||||
},
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user