first commit

lightly-toasted · Apr 14, 2024 · 975c7d3 · 975c7d3
commit 975c7d3
Show file tree

Hide file tree

Showing 10 changed files with 239 additions and 0 deletions.
diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png
diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
diff --git a/favicon-16x16.png b/favicon-16x16.png
diff --git a/favicon-32x32.png b/favicon-32x32.png
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>toast</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Jersey+10&display=swap" rel="stylesheet">
+    <script type="importmap">
+        {
+          "imports": {
+            "three": "https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js",
+            "three/addons/": "https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/"
+          }
+        }
+    </script>
+    <style>
+      body {
+        background-color: skyblue;
+      }
+      html, body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+      #message {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        z-index: 100;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: "Jersey 10", sans-serif;
+        font-style: normal;
+        font-size: 64px;
+        top: calc(-150px);
+        color: white;
+        opacity: 0.5;
+        z-index: -1;
+        user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+      }
+      @media (min-width: 768px) {
+        #message {
+          font-size: 128px;
+        }
+      }
+      @media (min-width: 1024px) {
+        #message {
+          font-size: 256px;
+        }
+      }
+      #github {
+        position: absolute;
+        left: 50%;
+        top: 60%;
+        transform: translate(-50%, -50%);
+        z-index: 100;
+        display: flex;
+        font-family: "Jersey 10", sans-serif;
+        font-style: normal;
+        font-size: 32px;
+        user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+
+        color: white;
+        opacity: 0.5;
+      }
+    </style>
+</head>
+<body>
+    <div id="message">hold...</div>
+    <a onclick="return false" ondblclick="location=this.href" id="github" href="https://github.com/lightly-toasted">@lightly-toasted</a>
+    <script src="main.js" type="module"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,150 @@
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+
+document.addEventListener('contextmenu', function(event) {
+    event.preventDefault();
+});
+
+const message = document.getElementById('message');
+
+
+const githubProfile = document.getElementById('github');
+githubProfile.addEventListener('click', () => {
+	githubProfile.textContent = 'double click!'
+	setTimeout(() => {
+		githubProfile.textContent = '@lightly-toasted'
+	}, 1000)
+	return false;
+});
+
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+
+const renderer = new THREE.WebGLRenderer();
+renderer.setSize( window.innerWidth, window.innerHeight );
+
+window.addEventListener('resize', () => {
+    camera.aspect = window.innerWidth / window.innerHeight;
+	camera.updateProjectionMatrix();
+
+	renderer.setSize( window.innerWidth, window.innerHeight );
+});
+
+
+document.body.appendChild( renderer.domElement );
+renderer.setClearColor(0x000000, 0)
+
+const directionalLight = new THREE.AmbientLight(0xffffff, 3.6);
+directionalLight.position.set(1, 1, 1);
+scene.add(directionalLight);
+
+camera.position.z = 5;
+
+var loader = new GLTFLoader();
+
+loader.load('model.glb', function ( gltf )
+{
+    const toaster = gltf.scene;  // sword 3D object is loaded
+    toaster.scale.set(3, 3, 3);
+    toaster.position.y = -.5;
+	toaster.rotation.set(0.4, 37, 0)
+    scene.add(toaster);
+	const burntTexture = toaster.children[0].children[0].children[3]
+    burntTexture.visible = false
+
+	document.body.addEventListener('mousedown', onStart);
+	document.body.addEventListener('mouseup', onEnd);
+	document.body.addEventListener('touchstart', onStart);
+	document.body.addEventListener('touchend', onEnd);
+
+	const mixer = new THREE.AnimationMixer( toaster );
+	const actionStart = mixer.clipAction(gltf.animations[0]);
+    const actionEnd = mixer.clipAction(gltf.animations[1]);
+
+	let time = 0
+	let burntAt = 0
+	let holdInterval;
+
+	const tiers = [
+		{
+			name: 'Eww!',
+			color: 'darkgray',
+			threshold: 200,
+		},
+		{
+			name: 'Yucky',
+			color: 'gray',
+			threshold: 150,
+		},
+		{
+			name: 'Meh.',
+			color: 'darkseagreen',
+			threshold: 100,
+		},
+		{
+			name: 'Hmm...',
+			color: 'darkolivegreen',
+			threshold: 50,
+		},
+		{
+			name: 'Tasty!',
+			color: 'lightblue',
+			threshold: 40,
+		},
+		{
+			name: 'LEGENDARY',
+			color: 'goldenrod',
+			threshold: 2,
+		},
+		{
+			name: 'PERFECT!',
+			color: 'gold',
+			threshold: 0,
+		}
+	]
+
+    function onStart() {
+		burntTexture.visible = false
+		message.style.color = 'white'
+		time = 0
+		burntAt = Math.round(Math.random() * 5) + 5
+
+		holdInterval = setInterval(() => {
+			time++
+			message.textContent = `${time / 100} / ${burntAt}`
+		}, 10)
+        actionEnd.stop();
+        actionStart.play();
+        actionStart.clampWhenFinished = true;
+        actionStart.loop = THREE.LoopOnce;
+    }
+
+    function onEnd() {
+		const diff = burntAt * 100 - time
+		if (time < 100) message.textContent = 'hold...';
+		else if (diff > 0) {
+			const resultTier = tiers.find(tier => diff >= tier.threshold);
+			message.style.color = resultTier.color;
+			message.textContent = `${resultTier.name} (-${diff / 100}s)`;
+		} else {
+			message.textContent = `Burnt! (+${-diff / 100}s)`;
+			message.style.color = 'black';
+			burntTexture.visible = true
+		}
+		clearInterval(holdInterval)
+		actionStart.stop();
+		actionEnd.play();
+		actionEnd.clampWhenFinished = true;
+		actionEnd.loop = THREE.LoopOnce;
+	}
+
+	const clock = new THREE.Clock();
+	function animate() {
+		requestAnimationFrame(animate);
+		const delta = clock.getDelta();
+		mixer.update(delta)
+		renderer.render(scene, camera);
+	}
+
+	animate();
+} );
diff --git a/model.glb b/model.glb
diff --git a/site.webmanifest b/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}