Progress

README.md

@@ -47,11 +47,13 @@ For my future reference, below is the way to build the program.
 1. [ThreeJS](https://threejs.org/) 3D Rendering engine used for the game
 1. [React](https://react.dev/) Front end web library for UI
 1. [React Three Fiber](https://docs.pmnd.rs/react-three-fiber) Integration of ThreeJS into React
+1. [TweenJS](https://tweenjs.github.io/tween.js/) Animation or tweening
 1. [TailwindCSS](https://tailwindcss.com/) CSS framework for easy styling
 1. [Vite](https://vitejs.dev/) Build tool for the web
 1. [TypeScript](https://www.typescriptlang.org/) Type safety JavaScript transpiler
 1. [NodeJS](https://nodejs.org/en/) Runtime JavaScript used for building the app
 1. [npm](https://www.npmjs.com/) Package manager for NodeJS
-1. [Nosutaru dot](https://free-fonts.jp/nosutaru-dot/) Pixel-art fonts
+1. [Silkscreen](https://fonts.google.com/specimen/Silkscreen) Pixel-art fonts
+1. [Misaki](https://littlelimit.net/misaki.htm) Pixel-art fonts
 1. [PICO-8 Secret Palette](https://lospec.com/palette-list/pico-8-secret-palette) All PICO-8 palettes and its hidden colours
 1. [Visual Studio Code](https://code.visualstudio.com/) Text editor (IDE) I used for development

package.json

@@ -11,9 +11,11 @@
     "format": "prettier . --write"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.18",
     "@react-three/drei": "^9.93.1",
     "@react-three/fiber": "^8.15.14",
     "@types/three": "^0.160.0",
+    "clsx": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "three": "^0.160.0",

public/models/dice.gltf

@@ -0,0 +1 @@
+{"asset":{"version":"2.0","generator":"Blockbench 4.9.4 glTF exporter"},"scenes":[{"nodes":[2],"name":"blockbench_export"}],"scene":0,"nodes":[{"rotation":[0,-0.7071067811865475,0,0.7071067811865476],"translation":[0,-0.375,0],"name":"Dice","mesh":0},{"translation":[0,0.375,0],"name":"Dice","children":[0]},{"children":[1]}],"bufferViews":[{"buffer":0,"byteOffset":0,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":288,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":576,"byteLength":192,"target":34962,"byteStride":8},{"buffer":0,"byteOffset":768,"byteLength":72,"target":34963},{"buffer":0,"byteOffset":840,"byteLength":24},{"buffer":0,"byteOffset":864,"byteLength":96},{"buffer":0,"byteOffset":960,"byteLength":16},{"buffer":0,"byteOffset":976,"byteLength":48},{"buffer":0,"byteOffset":1024,"byteLength":24},{"buffer":0,"byteOffset":1048,"byteLength":96},{"buffer":0,"byteOffset":1144,"byteLength":16},{"buffer":0,"byteOffset":1160,"byteLength":48},{"buffer":0,"byteOffset":1208,"byteLength":24},{"buffer":0,"byteOffset":1232,"byteLength":96},{"buffer":0,"byteOffset":1328,"byteLength":16},{"buffer":0,"byteOffset":1344,"byteLength":48},{"buffer":0,"byteOffset":1392,"byteLength":24},{"buffer":0,"byteOffset":1416,"byteLength":96},{"buffer":0,"byteOffset":1512,"byteLength":16},{"buffer":0,"byteOffset":1528,"byteLength":48},{"buffer":0,"byteOffset":1576,"byteLength":24},{"buffer":0,"byteOffset":1600,"byteLength":96},{"buffer":0,"byteOffset":1696,"byteLength":16},{"buffer":0,"byteOffset":1712,"byteLength":48},{"buffer":0,"byteOffset":1760,"byteLength":24},{"buffer":0,"byteOffset":1784,"byteLength":96},{"buffer":0,"byteOffset":1880,"byteLength":16},{"buffer":0,"byteOffset":1896,"byteLength":48}],"buffers":[{"byteLength":1944,"uri":"data:application/octet-stream;base64,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"}],"accessors":[{"bufferView":0,"componentType":5126,"count":24,"max":[0.375,0.75,0.375],"min":[-0.375,0,-0.375],"type":"VEC3"},{"bufferView":1,"componentType":5126,"count":24,"max":[1,1,1],"min":[-1,-1,-1],"type":"VEC3"},{"bufferView":2,"componentType":5126,"count":24,"max":[0.5625,0.5625],"min":[0,0],"type":"VEC2"},{"bufferView":3,"componentType":5123,"count":36,"max":[23],"min":[0],"type":"SCALAR"},{"bufferView":4,"componentType":5126,"count":6,"max":[1],"min":[0],"type":"SCALAR"},{"bufferView":5,"componentType":5126,"count":6,"max":[0.7071067690849304,0.6407288908958435,0.4619397521018982,1],"min":[-0.4619397521018982,-0.22499404847621918,-0.7071067690849304,-0.7463110089302063],"type":"VEC4"},{"bufferView":6,"componentType":5126,"count":4,"max":[1],"min":[0],"type":"SCALAR"},{"bufferView":7,"componentType":5126,"count":4,"max":[0,1.875,1.5],"min":[0,0.375,0],"type":"VEC3"},{"bufferView":8,"componentType":5126,"count":6,"max":[1],"min":[0],"type":"SCALAR"},{"bufferView":9,"componentType":5126,"count":6,"max":[0.5,0.5027791857719421,0.5431836843490601,0.7786785364151001],"min":[-0.5431836843490601,-0.7071067690849304,-0.5,-0.8446232080459595],"type":"VEC4"},{"bufferView":10,"componentType":5126,"count":4,"max":[1],"min":[0],"type":"SCALAR"},{"bufferView":11,"componentType":5126,"count":4,"max":[0,1.875,1.5],"min":[0,0.375,0],"type":"VEC3"},{"bufferView":12,"componentType":5126,"count":6,"max":[1],"min":[0],"type":"SCALAR"},{"bufferView":13,"componentType":5126,"count":6,"max":[0.5,0.5,0.5431836843490601,0.7786785364151001],"min":[-0.7071067690849304,-0.4619397521018982,-0.5,-0.8446232080459595],"type":"VEC4"},{"bufferView":14,"componentType":5126,"count":4,"max":[1],"min":[0],"type":"SCALAR"},{"bufferView":15,"componentType":5126,"count":4,"max":[0,1.875,1.5],"min":[0,0.375,0],"type":"VEC3"},{"bufferView":16,"componentType":5126,"count":6,"max":[1],"min":[0],"type":"SCALAR"},{"bufferView":17,"componentType":5126,"count":6,"max":[0.7786785364151001,0.5431836843490601,0.4619397521018982,0.7071067690849304],"min":[-0.8446232080459595,-0.5,-0.5,-0.5],"type":"VEC4"},{"bufferView":18,"componentType":5126,"count":4,"max":[1],"min":[0],"type":"SCALAR"},{"bufferView":19,"componentType":5126,"count":4,"max":[0,1.875,1.5],"min":[0,0.375,0],"type":"VEC3"},{"bufferView":20,"componentType":5126,"count":6,"max":[1],"min":[0],"type":"SCALAR"},{"bufferView":21,"componentType":5126,"count":6,"max":[0.5,0.7382740378379822,0.4619397521018982,0.7071067690849304],"min":[-0.4619397521018982,-0.8209688067436218,-0.5,-0.5],"type":"VEC4"},{"bufferView":22,"componentType":5126,"count":4,"max":[1],"min":[0],"type":"SCALAR"},{"bufferView":23,"componentType":5126,"count":4,"max":[0,1.875,1.5],"min":[0,0.375,0],"type":"VEC3"},{"bufferView":24,"componentType":5126,"count":6,"max":[1],"min":[0],"type":"SCALAR"},{"bufferView":25,"componentType":5126,"count":6,"max":[0.22499404847621918,0.9360311627388,0.6407288908958435,0.7071067690849304],"min":[-0.6407288908958435,-1,-0.22499404847621918,-0.4619397521018982],"type":"VEC4"},{"bufferView":26,"componentType":5126,"count":4,"max":[1],"min":[0],"type":"SCALAR"},{"bufferView":27,"componentType":5126,"count":4,"max":[0,1.875,1.5],"min":[0,0.375,0],"type":"VEC3"}],"materials":[{"pbrMetallicRoughness":{"metallicFactor":0,"roughnessFactor":1,"baseColorTexture":{"index":0}},"alphaMode":"MASK","alphaCutoff":0.05,"doubleSided":true}],"textures":[{"sampler":0,"source":0}],"samplers":[{"magFilter":9728,"minFilter":9728,"wrapS":33071,"wrapT":33071}],"images":[{"mimeType":"image/png","uri":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAAA8xJREFUeF7tnctxwzAQQ6MKfHWDqSoN5uoKnLHHOuRnarVcCKRfriEFEHgjUrIzWa6Xz+sbP/8msJzOy8zxLADwvF4AmBn/DWsDgA0hzTwEAAraXU7n+1Wvl8+Cq8cv+cwPAMTzfDpjDXsddDQELT8AAAA8BXRm4I0toHei+6+3/THw9P5d5fKxX3WgmWwBt7J+lr8W+AIQAMB/5RdA4LY13JYIACIAWqfxo3YNAACAF38KEAHwuN1avSBiC1jvuxwCj9qBynV5DGxEzBmgnMG2QPTpIDr+mQMAaPdTOiL6dBAd3zIPAK2Ein8fLTQ6vmUfAFoJCX4fvaVHx7MFCEocVYI7wKjNdfINAJ2CHPUyADBqc518A0CnIKsuM3tBVbmt193+JrDayc7rA8DO4B7TACCX3/CzAWD4CnML+BOA6IuUI8ezBXQGIPoq9ejxAAAAU39jJ1dvezZbQDujqUdwCJy63vbiAKCd0dQjDtkCeibKITCX5i8Aqk/1Obu/ZwNALlEAyOU3/Gy2gOErzC2AQ2Auv+FnA8DwFeYWcMgW0POzAw6BnQGofgrofX0AAAA+C0gwwBaQCG+GqRwCZ2gxsQYASIQ3w1QAmKHFxBoAIBHeDFPLAeAxzRsTAPDup9wdAJRH7C0AAN79lLsrfxHEGaC8w5RA+RdCACDVT/lkACiP2FuALcC7n3J3HALLI/YWAADvfsrdhQCIfpPn5p5DYHmHKYHNAES/ybO6AoBUP+WTAaA8Ym+BzQA8buf31UT+1x93gIkA2LMUANiTmm5O6A6wxxYA7ElNN4cXQbqsLZV4FWxZi84UAOiytlRiC7CsRWeKQ6Aua0slALCsRWcKAHRZWyoBgGUtOlP8Za0ua0slALCsRWcKAHRZWyoBgGUtOlMAoMvaUgkALGvRmQIAXdaWSgBgWYvOFADosrZUAgDLWnSmAECXtaUSAFjWojMFALqsLZUAwLIWnSkA0GVtqQQAlrXoTAGALmtLJQCwrEVnCgB0WVsqAYBlLTpTAKDL2lIJACxr0ZkCAF3WlkoAYFmLzhQA6LK2VAIAy1p0pgBAl7WlEgBY1qIzBQC6rC2VAMCyFp0pANBlbakEAJa16EwBgC5rSyUAsKxFZwoAdFlbKgGAZS06UwCgy9pSCQAsa9GZAgBd1pZKAGBZi84UAOiytlQCAMtadKYAQJe1pRIAWNaiMwUAuqwtlQDAshadKQDQZW2pBACWtehMAYAua0slALCsRWcKAHRZWyoBgGUtOlMAoMvaUgkALGvRmQIAXdaWSgBgWYvO1Bd21iCfHddHCQAAAABJRU5ErkJggg=="}],"meshes":[{"primitives":[{"mode":4,"attributes":{"POSITION":0,"NORMAL":1,"TEXCOORD_0":2},"indices":3,"material":0}]}],"animations":[{"name":"1","samplers":[{"input":4,"output":5,"interpolation":"LINEAR"},{"input":6,"output":7,"interpolation":"LINEAR"}],"channels":[{"sampler":0,"target":{"node":1,"path":"rotation"}},{"sampler":1,"target":{"node":1,"path":"translation"}}]},{"name":"2","samplers":[{"input":8,"output":9,"interpolation":"LINEAR"},{"input":10,"output":11,"interpolation":"LINEAR"}],"channels":[{"sampler":0,"target":{"node":1,"path":"rotation"}},{"sampler":1,"target":{"node":1,"path":"translation"}}]},{"name":"3","samplers":[{"input":12,"output":13,"interpolation":"LINEAR"},{"input":14,"output":15,"interpolation":"LINEAR"}],"channels":[{"sampler":0,"target":{"node":1,"path":"rotation"}},{"sampler":1,"target":{"node":1,"path":"translation"}}]},{"name":"4","samplers":[{"input":16,"output":17,"interpolation":"LINEAR"},{"input":18,"output":19,"interpolation":"LINEAR"}],"channels":[{"sampler":0,"target":{"node":1,"path":"rotation"}},{"sampler":1,"target":{"node":1,"path":"translation"}}]},{"name":"5","samplers":[{"input":20,"output":21,"interpolation":"LINEAR"},{"input":22,"output":23,"interpolation":"LINEAR"}],"channels":[{"sampler":0,"target":{"node":1,"path":"rotation"}},{"sampler":1,"target":{"node":1,"path":"translation"}}]},{"name":"6","samplers":[{"input":24,"output":25,"interpolation":"LINEAR"},{"input":26,"output":27,"interpolation":"LINEAR"}],"channels":[{"sampler":0,"target":{"node":1,"path":"rotation"}},{"sampler":1,"target":{"node":1,"path":"translation"}}]}]}

src/App.tsx

@@ -1,16 +1,7 @@
 import BraveChickyDiceAdventure from '@/BraveChickyDiceAdventure';
 
-import Screen from '@/components/Screen';
-import Scene from '@/components/Scene';
-
 const App = () => {
-  return (
-    <Screen>
-      <Scene>
-        <BraveChickyDiceAdventure />
-      </Scene>
-    </Screen>
-  );
+  return <BraveChickyDiceAdventure />;
 };
 
 export default App;