scratchfoundation/scratch-tech-explorations
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-tech-explorations.git synced 2025-08-28 21:38:45 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: build VERY rough overall layout

Browse source
This commit is contained in:
Christopher Willis-Ford 2022-12-03 22:09:51 -08:00
parent 8ec82047de
commit 5d999c4152
3 changed files with 40 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

7
.editorconfig
View file

@ -3,8 +3,13 @@ root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 4
indent_style = space
insert_final_newline = true
max_line_length = 118 # 118 is the max that displays well in a GitHub diff
trim_trailing_whitespace = true
[*.tsx?]
indent_size = 2 # match Tauri
[*.rs]
indent_size = 4

8
package.json
View file

@ -10,17 +10,17 @@
"tauri": "tauri"
},
"dependencies": {
"@tauri-apps/api": "^1.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"@tauri-apps/api": "^1.1.0"
"react-dom": "^18.2.0"
},
"devDependencies": {
"@tauri-apps/cli": "^1.1.0",
"@types/node": "^18.7.10",
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"@vitejs/plugin-react": "^2.0.0",
"typescript": "^4.6.4",
"vite": "^3.0.2",
"@tauri-apps/cli": "^1.1.0"
"vite": "^3.0.2"
}
}

58
src/App.tsx
View file

@ -1,6 +1,6 @@
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import { invoke } from "@tauri-apps/api/tauri";
import "./App.css";
function App() {
@ -13,36 +13,38 @@ function App() {
}
return (
<div className="container">
<h1>Welcome to Tauri!</h1>
<div className="row">
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" className="logo vite" alt="Vite logo" />
</a>
<a href="https://tauri.app" target="_blank">
<img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
</a>
<a href="https://reactjs.org" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
<div id="gui" style={{position: "absolute", top: 0, right: 0, bottom: 0, left: 0}}>
<div id="menu-bar" style={{display: "flex", flexDirection:"row"}}>
<button>File</button>
<button>Edit</button>
<button>Things</button>
<button>Stuff</button>
</div>
<p>Click on the Tauri, Vite, and React logos to learn more.</p>
<div className="row">
<div>
<input
id="greet-input"
onChange={(e) => setName(e.currentTarget.value)}
placeholder="Enter a name..."
/>
<button type="button" onClick={() => greet()}>
Greet
</button>
<div id="body" style={{display: "flex", flexDirection: "row", height: "100%"}}>
<div id="editor-wrapper" style={{flexGrow: "1"}}>
<div id="tabs" style={{ display: "flex", flexDirection: "column", height: "100%" }}>
<ul id="tablist" style={{ display: "flex", flexDirection: "row" }}>
<button>Code</button>
<button>Costumes</button>
<button>Sounds</button>
</ul>
<div id="code-tab" style={{ height: "100%", border: "1px solid black" }}>
Blockly goes here
</div>
</div>
</div>
<div id="stage-and-targets">
<div id="stage-controls" style={{ display: "flex", flexDirection: "row" }}>
<button style={{color: "green"}}>⚑</button>
</div>
<div id="stage-wrapper" style={{border: "1px solid black"}}>
<canvas width={480} height={360}></canvas>
</div>
<div id="targets-wrapper" style={{ height: "100%", border: "1px solid black" }}>
Sprites and the Stage
</div>
</div>
</div>
<p>{greetMsg}</p>
</div>
);
}