andrea/exercises
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

w13

Browse Source
This commit is contained in:
Andrea Bianchi 2025-05-19 09:11:10 +09:00
parent 8a67292ac0
commit 9fe4365d59
8 changed files with 16681 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
w13_firebase/.firebase/hosting.ZGlzdA.cache Normal file
View File

@ -0,0 +1,4 @@
index.html,1747613059305,cc4b6ef916ee98cd175f3bfe36b35a9e2bb9348ee08e9bf8885c91df7729eaa1
assets/main.23bf3ee4.js,1747613059305,2c61ec232d037baae2d721b632ea8c2481a463f0bdbc7fe024c0c940ad09ae3d
assets/main.82a2fd3b.css,1747613059305,3dcddbe644cbbe4da8e014795584b4fd3b2d4eb17df667193fd3fd3b40d18624
404.html,1747613052427,b6abfbdc894d37c260154e281499dc6415bb6ad76b32f01ef94dee93aa897ac4

6
w13_firebase/.gitignore vendored Normal file
View File

@ -0,0 +1,6 @@
node_modules
.DS_Store
dist
dist-ssr
public
*.local

10
w13_firebase/css/style.css Normal file
View File

@ -0,0 +1,10 @@
html,
body {
margin: 0;
padding: 0px;
align-items: center;
text-align: center;
}
canvas {
display: block;
}

13
w13_firebase/index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Single sketch</title>
</head>
<body>
<script type="module" src="/src/index.js"></script>
</body>
</html>

16477
w13_firebase/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

16
w13_firebase/package.json Normal file
View File

@ -0,0 +1,16 @@
{
"name": "p5js-vite",
"version": "0.1.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"vite": "^2.7.2"
},
"dependencies": {
"firebase": "^9.21.0",
"p5js-wrapper": "^1.2.3"
}
}

142
w13_firebase/src/index.js Normal file
View File

@ -0,0 +1,142 @@
import '../css/style.css';
import { sketch } from 'p5js-wrapper';
// https://firebase.google.com/docs/database/web/start
// Firebase import
// import { initializeApp } from 'firebase/app';
// Auth import
// import {
// getAuth,
// signInWithPopup,
// GoogleAuthProvider,
// signOut,
// onAuthStateChanged,
// } from 'firebase/auth';
// DB imports
// import {
// ref,
// child,
// get,
// set,
// getDatabase,
// onValue,
// push,
// } from 'firebase/database';
async function setup() {
createCanvas(400, 300);
// GUI
createButton('Login').position(0, 0).size(60).mousePressed(googleLogin);
createButton('Logout').position(0, 25).size(60).mousePressed(signout);
const x = 90;
const sel = createSelect()
.position(x, 50)
.size(200)
.changed(function () {
const name = this.value();
loadDataForUser(name);
});
const nameInput = createInput('Name').position(x, 75).size(200);
const emailInput = createInput('Email').position(x, 100).size(200);
const ageLabel = createP(`Age: 0`)
.style('font-size', '16px')
.position(x, 110);
const ageSlider = createSlider(0, 150, 0)
.position(x + 70, 125)
.style('width', '80px')
.changed(function () {
ageLabel.html(`Age: ${this.value()}`);
});
createP('Hobby').style('font-size', '16px').position(x, 140);
const hobbyRadio = createRadio().position(x, 175);
hobbyRadio.option('Javascript');
hobbyRadio.option('Firebase');
hobbyRadio.option('Node');
hobbyRadio.selected('Javascript');
createButton('submit')
.position(x, 220)
.mousePressed(() => {
saveUser(
nameInput.value(),
emailInput.value(),
ageSlider.value(),
hobbyRadio.value()
);
});
// DATABASE
// initFirebaseApp();
// On state change
onAuthStateChanged(/*...*/);
const db = getDatabase();
const dbRef = ref(db, `users`);
// loading from DB
/*
onValue(
dbRef,
(snapshot) => {
sel.html(''); // reset drop
sel.option('');
snapshot.forEach((childSnapshot) => {
const childKey = childSnapshot.key;
const { name } = childSnapshot.val();
});
},
{
onlyOnce: true,
}
);
*/
}
function draw() {
background(200);
}
function initFirebaseApp() {
// const firebaseConfig = {};
// Initialize Firebase
const firebaseConfig = {
//... apikey
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
}
function googleLogin() {}
function signout() {}
function saveUser(name, email, age, hobby) {
// ...
}
/**
* Here another method to read the users only once
*/
function loadDataForUser(name) {
const dbRef = ref(getDatabase());
//...
}
sketch.setup = setup;
sketch.draw = draw;

13
w13_firebase/vite.config.js Normal file
View File

@ -0,0 +1,13 @@
// vite.config.js
const { resolve } = require('path');
const { defineConfig } = require('vite');
module.exports = defineConfig({
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
},
},
},
});