w13

2025-05-19 09:11:10 +09:00 · 2025-05-19 09:11:10 +09:00 · 9fe4365d59
commit 9fe4365d59
parent 8a67292ac0
8 changed files with 16681 additions and 0 deletions
--- a/w13_firebase/.firebase/hosting.ZGlzdA.cache
+++ b/w13_firebase/.firebase/hosting.ZGlzdA.cache
@ -0,0 +1,4 @@
+index.html,1747613059305,cc4b6ef916ee98cd175f3bfe36b35a9e2bb9348ee08e9bf8885c91df7729eaa1
+assets/main.23bf3ee4.js,1747613059305,2c61ec232d037baae2d721b632ea8c2481a463f0bdbc7fe024c0c940ad09ae3d
+assets/main.82a2fd3b.css,1747613059305,3dcddbe644cbbe4da8e014795584b4fd3b2d4eb17df667193fd3fd3b40d18624
+404.html,1747613052427,b6abfbdc894d37c260154e281499dc6415bb6ad76b32f01ef94dee93aa897ac4
--- a/w13_firebase/.gitignore
+++ b/w13_firebase/.gitignore
@ -0,0 +1,6 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+public
+*.local
--- a/w13_firebase/css/style.css
+++ b/w13_firebase/css/style.css
@ -0,0 +1,10 @@
+html,
+body {
+  margin: 0;
+  padding: 0px;
+  align-items: center;
+  text-align: center;
+}
+canvas {
+  display: block;
+}
--- a/w13_firebase/index.html
+++ b/w13_firebase/index.html
@ -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>
--- a/w13_firebase/package-lock.json
+++ b/w13_firebase/package-lock.json
--- a/w13_firebase/package.json
+++ b/w13_firebase/package.json
@ -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"
+  }
+}
--- a/w13_firebase/src/index.js
+++ b/w13_firebase/src/index.js
@ -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;
--- a/w13_firebase/vite.config.js
+++ b/w13_firebase/vite.config.js
@ -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'),
+      },
+    },
+  },
+});