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