Init
This commit is contained in:
commit
f31906224a
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
/node_modules/
|
||||
/public/build/
|
||||
|
||||
.DS_Store
|
||||
1704
package-lock.json
generated
Normal file
1704
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
27
package.json
Normal file
27
package.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"name": "svelte-app",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "rollup -c",
|
||||
"dev": "rollup -c -w",
|
||||
"start": "sirv public --no-clear"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^24.0.0",
|
||||
"@rollup/plugin-node-resolve": "^15.0.0",
|
||||
"@rollup/plugin-terser": "^0.4.0",
|
||||
"rollup": "^3.15.0",
|
||||
"rollup-plugin-css-only": "^4.3.0",
|
||||
"rollup-plugin-livereload": "^2.0.0",
|
||||
"rollup-plugin-svelte": "^7.1.2",
|
||||
"svelte": "^3.55.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"p5": "^1.6.0",
|
||||
"p5-svelte": "^3.1.2",
|
||||
"p5play": "^3.8.14",
|
||||
"sirv-cli": "^2.0.0"
|
||||
}
|
||||
}
|
||||
BIN
public/assets/monster.png
Normal file
BIN
public/assets/monster.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
15
public/global.css
Normal file
15
public/global.css
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
html,
|
||||
body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
25
public/index.html
Normal file
25
public/index.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
||||
|
||||
<title>Svelte app</title>
|
||||
|
||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
||||
<link rel='stylesheet' href='/global.css'>
|
||||
<link rel='stylesheet' href='/build/bundle.css'>
|
||||
|
||||
<!-- p5 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/p5@1/lib/addons/p5.sound.min.js"></script>
|
||||
<!-- p5play -->
|
||||
<script src="https://p5play.org/v3/planck.min.js"></script>
|
||||
<script src="https://p5play.org/v3/p5play.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script defer src='/build/bundle.js'></script>
|
||||
</body </html>
|
||||
79
rollup.config.js
Normal file
79
rollup.config.js
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import { spawn } from 'child_process';
|
||||
import svelte from 'rollup-plugin-svelte';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import terser from '@rollup/plugin-terser';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import livereload from 'rollup-plugin-livereload';
|
||||
import css from 'rollup-plugin-css-only';
|
||||
|
||||
const production = !process.env.ROLLUP_WATCH;
|
||||
|
||||
function serve() {
|
||||
let server;
|
||||
|
||||
function toExit() {
|
||||
if (server) server.kill(0);
|
||||
}
|
||||
|
||||
return {
|
||||
writeBundle() {
|
||||
if (server) return;
|
||||
server = spawn('npm', ['run', 'start', '--', '--dev'], {
|
||||
stdio: ['ignore', 'inherit', 'inherit'],
|
||||
shell: true,
|
||||
});
|
||||
|
||||
process.on('SIGTERM', toExit);
|
||||
process.on('exit', toExit);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
input: 'src/main.js',
|
||||
output: {
|
||||
sourcemap: true,
|
||||
format: 'iife',
|
||||
name: 'app',
|
||||
file: 'public/build/bundle.js',
|
||||
inlineDynamicImports: true,
|
||||
},
|
||||
plugins: [
|
||||
svelte({
|
||||
compilerOptions: {
|
||||
// enable run-time checks when not in production
|
||||
dev: !production,
|
||||
},
|
||||
}),
|
||||
// we'll extract any component CSS out into
|
||||
// a separate file - better for performance
|
||||
css({ output: 'bundle.css' }),
|
||||
|
||||
// If you have external dependencies installed from
|
||||
// npm, you'll most likely need these plugins. In
|
||||
// some cases you'll need additional configuration -
|
||||
// consult the documentation for details:
|
||||
// https://github.com/rollup/plugins/tree/master/packages/commonjs
|
||||
resolve({
|
||||
browser: true,
|
||||
dedupe: ['svelte'],
|
||||
exportConditions: ['svelte'],
|
||||
}),
|
||||
commonjs(),
|
||||
|
||||
// In dev mode, call `npm run start` once
|
||||
// the bundle has been generated
|
||||
!production && serve(),
|
||||
|
||||
// Watch the `public` directory and refresh the
|
||||
// browser on changes when not in production
|
||||
!production && livereload('public'),
|
||||
|
||||
// If we're building for production (npm run build
|
||||
// instead of npm run dev), minify
|
||||
production && terser(),
|
||||
],
|
||||
watch: {
|
||||
clearScreen: false,
|
||||
},
|
||||
};
|
||||
30
src/App.svelte
Normal file
30
src/App.svelte
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let id; // the div in the HTML
|
||||
let sprite;
|
||||
|
||||
const sketch = (p5) => {
|
||||
p5.setup = async () => {
|
||||
p5.createCanvas(400, 300);
|
||||
sprite = new p5.Sprite();
|
||||
sprite.img = '/assets/monster.png';
|
||||
sprite.diameter = 100;
|
||||
sprite.scale = 0.5;
|
||||
};
|
||||
|
||||
p5.draw = () => {
|
||||
p5.clear();
|
||||
p5.fill(100);
|
||||
p5.ellipse(p5.mouseX, p5.mouseY, 20, 20);
|
||||
sprite.debug = p5.mouse.pressing();
|
||||
};
|
||||
};
|
||||
|
||||
// On startup
|
||||
onMount(function () {
|
||||
let myp5 = new p5(sketch, id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div {id} />
|
||||
8
src/main.js
Normal file
8
src/main.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import App from './App.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.body,
|
||||
props: {},
|
||||
});
|
||||
|
||||
export default app;
|
||||
Loading…
Reference in New Issue
Block a user