storytold/storyteller-bevy
2
0
Fork 0
mirror of https://github.com/storytold/storyteller-bevy.git synced 2026-10-17 00:13:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Single-object viewer POC (#14)

Browse Source 
This commit implements a Sketchfab-style single-object viewer as a minimal
proof-of-concept.

### `@storyteller/studio-web`
This is a new package to house web components for interfacing with the
`@storyteller/studio` WASM library. It currently includes a single component,
`<sts-viewer />`, which is exported from `@storyteller/studio-web/viewer`.

### `react-frontend`
This is a new application intended as a proof-of-concept and testbed for React
interop with `@storyteller/studio-web`.

Web components are currently a little bit fiddly to use in a React application.
`react-frontend/src/app/studio-viewer.tsx` demonstrates how a React-idiomatic
component can be written as a thin wrapper around a web component, and
`react-frontend/src/app/app.tsx` demonstrates that wrapper component in use.
This commit is contained in:
Danny McGee
2023-12-07 15:46:32 -05:00
committed by GitHub
parent 155272a5ba
commit cba70a62ae
70 changed files with 71793 additions and 1157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react-frontend/src/app/app.module.scss
+46
View File
@@ -0,0 +1,46 @@
.root {
position: relative;
}
.controls {
position: absolute;
top: 16px;
left: 16px;
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
border-radius: 8px;
background: #2222227F;
backdrop-filter: blur(16px);
}
.control {
display: flex;
align-items: center;
gap: 8px;
}
.label {
display: block;
font-weight: 500;
}
.input {
height: 32px;
font: unset {
family: inherit;
size: 16px;
}
}
.loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: #222;
pointer-events: none;
transition: opacity 66.666ms linear;
}