xevion/rust-sdl2-emscripten
1
0
Fork 0
mirror of https://github.com/Xevion/rust-sdl2-emscripten.git synced 2025-12-06 01:16:14 -06:00
Code Issues Packages Projects Releases 1 Wiki Activity

Add tailwindcss, revamp index with details

Browse Source
This commit is contained in:
Xevion
2024-04-23 19:45:48 -05:00
parent e4334ece7a
commit b00df74158
9 changed files with 1548 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
.github/workflows/deploy.yaml vendored
View File

@@ -1,15 +1,20 @@
name: Github Pages name: WebAssembly (GitHub Pages)
on: [push] on: [push]
permissions: permissions:
contents: write contents: write
jobs: jobs:
deploy: deploy:
runs-on: ubuntu-latest runs-on: ubuntu-latest
permissions: permissions:
pages: write pages: write
id-token: write id-token: write
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v4
- uses: mymindstorm/setup-emsdk@v11 - uses: mymindstorm/setup-emsdk@v11
with: with:
@@ -24,6 +29,12 @@ jobs:
- name: Rust Cache - name: Rust Cache
uses: Swatinem/rust-cache@v2 uses: Swatinem/rust-cache@v2
- uses: pnpm/action-setup@v3
name: Install pnpm
with:
version: 8
run_install: true
- name: Build # build - name: Build # build
run: ./scripts/build.sh -er # release, skip emsdk run: ./scripts/build.sh -er # release, skip emsdk

4
.gitignore vendored
View File

@@ -1,4 +1,6 @@
/target /target
/dist /dist
.idea .idea
*.dll *.dll
node_modules
assets/build.css

69
assets/index.html
View File

@@ -1,27 +1,52 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head> <link rel="stylesheet" href="/build.css" />
<style> </head>
body { <body class="m-0 p-0 bg-black text-white">
margin: 0; <div class="max-w-screen-md mx-auto mt-10">
padding: 0; <h1 class="text-xl lowercase my-1">
background: #000; <span class="px-1 rounded font-mono bg-zinc-900 border border-zinc-700"
} >rust-sdl2-emscripten</span
canvas { >
display: block; </h1>
margin: 0 auto; <p class="ml-5">
background: #000; 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
</style> implemented directly in Rust and uses Emscripten's Asyncify feature, as
<body> well as hooks to
<canvas id="canvas"></canvas> </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">&larr; &uarr; &rarr; &darr;</span>
Move Sprite
</li>
<li>
<span class="code">space</span>
Change Sprite
</li>
<li>
<span class="code">shift + &uarr;&darr;</span>
Change Volume
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript"> <script type="text/javascript">
var Module = { var Module = {
'canvas': document.getElementById('canvas'), canvas: document.getElementById("canvas"),
}; };
</script> </script>
<script type="text/javascript" src="pacman.js"></script> <script type="text/javascript" src="pacman.js"></script>
</body> </body>
</html> </html>

21
assets/styles.scss Normal file
View 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
View 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
View File

File diff suppressed because it is too large Load Diff

7
postcss.config.js Normal file
View File

@@ -0,0 +1,7 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
cssnano: {},
},
}

7
scripts/build.sh
View File

@@ -51,10 +51,17 @@ else
cargo build --target=wasm32-unknown-emscripten cargo build --target=wasm32-unknown-emscripten
fi fi
echo "Generating CSS"
pnpx postcss-cli ./assets/styles.scss -o ./assets/build.css
echo "Copying WASM files" echo "Copying WASM files"
mkdir -p dist mkdir -p dist
output_folder="target/wasm32-unknown-emscripten/$build_type" output_folder="target/wasm32-unknown-emscripten/$build_type"
cp assets/index.html dist 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.wasm dist
cp $output_folder/pacman.js dist cp $output_folder/pacman.js dist
# only if .data file exists # only if .data file exists

12
tailwind.config.js Normal file
View File

@@ -0,0 +1,12 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./**/*.{html,js,rs}"],
theme: {
fontFamily: {
'mono': ['"Liberation Mono"', 'monospace'],
},
extend: {},
},
plugins: [],
}