First Commit
This commit is contained in:
167
src/App.tsx
Normal file
167
src/App.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import { useEffect, useRef } from "react"
|
||||
import { Hammer } from "./classes/Hammer";
|
||||
|
||||
function App() {
|
||||
|
||||
// ? elements
|
||||
// * Canvas
|
||||
const canvas = useRef(null);
|
||||
|
||||
// * Buttons
|
||||
const button_set_tilesheet = useRef(null);
|
||||
const button_import_map = useRef(null);
|
||||
|
||||
// * Divs
|
||||
const div_progress_bar = useRef(null);
|
||||
const div_progress = useRef(null);
|
||||
const div_view_tiles = useRef(null);
|
||||
|
||||
// * Input (a part)
|
||||
const inputFileTilesheet = useRef<HTMLInputElement>(null);
|
||||
const inputFileMap = useRef<HTMLInputElement>(null);
|
||||
|
||||
// ? hammer
|
||||
const hammerRef = useRef<Hammer | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
hammerRef.current = new Hammer();
|
||||
hammerRef.current.helements.setElement("canvas", canvas.current);
|
||||
hammerRef.current.helements.setElement("button_set_tilesheet", button_set_tilesheet.current);
|
||||
hammerRef.current.helements.setElement("button_import_map", button_import_map.current);
|
||||
hammerRef.current.helements.setElement("div_progress_bar", div_progress_bar.current);
|
||||
hammerRef.current.helements.setElement("div_progress", div_progress.current);
|
||||
hammerRef.current.helements.setElement("div_view_tiles", div_view_tiles.current);
|
||||
return () => {
|
||||
hammerRef.current?.hevent.destroy();
|
||||
}
|
||||
}, []);
|
||||
|
||||
// ? functions
|
||||
const handleLoadTilesheet = () => {
|
||||
if (hammerRef.current != null) {
|
||||
const files = inputFileTilesheet.current?.files;
|
||||
if (files && files?.length > 0) {
|
||||
hammerRef.current.loadTileSheet(files[0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
const handleLoadMap = async () => {
|
||||
if (hammerRef.current != null) {
|
||||
const files = inputFileMap.current?.files;
|
||||
if (files && files.length > 0) {
|
||||
hammerRef.current.hconsole.push("Importing the current map...");
|
||||
// ? Verif du format
|
||||
let filenameSplit = files[0].name.split(".");
|
||||
if (!["tmpx"].includes(filenameSplit[filenameSplit.length - 1])) {
|
||||
return hammerRef.current.hconsole.push("File format invalid !", "ERROR")
|
||||
};
|
||||
try {
|
||||
let reader = new FileReader();
|
||||
reader.readAsText(files[0], "UTF-8");
|
||||
reader.onload = (evt) => {
|
||||
if (evt.target) {
|
||||
const data = JSON.parse(evt.target.result as string);
|
||||
if (hammerRef.current) {
|
||||
const tl = new Image();
|
||||
tl.src = data.tilesheet;
|
||||
tl.onload = () => {
|
||||
if (hammerRef.current) {
|
||||
hammerRef.current.setTileSheet(tl);
|
||||
hammerRef.current.tileMap = data.map;
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
hammerRef.current.hconsole.push("Error importing map.", "ERROR");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div ref={div_progress_bar} className="progress-bar nodisplay">
|
||||
<div ref={div_progress} className="progress"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="div-hammer-container">
|
||||
<div className="tools">
|
||||
|
||||
<button onClick={() => inputFileMap.current?.click()} ref={button_import_map}><img src="/src/assets/images/import.png" alt="import" />
|
||||
<span>Import Map (I)</span>
|
||||
<input type="file" id="inputFileMap" ref={inputFileMap} onChange={handleLoadMap} className="nodisplay" accept=".tmpx" />
|
||||
</button>
|
||||
|
||||
<button onClick={() => { hammerRef.current && hammerRef.current.mapToJson() }}>
|
||||
<img src="/src/assets/images/save.png" alt="save" />
|
||||
<span>Save local copy (ctrl + s)</span>
|
||||
</button>
|
||||
|
||||
<hr />
|
||||
|
||||
<button onClick={() => inputFileTilesheet.current?.click()} ref={button_set_tilesheet}>
|
||||
<img src="/src/assets/images/palet.png" alt="palet" />
|
||||
<span>Upload Tilesheet (U)</span>
|
||||
<input type="file" id="inputFileTS" ref={inputFileTilesheet} onChange={handleLoadTilesheet} className="nodisplay" accept="image/png, image/jpg, image/jpeg" />
|
||||
</button>
|
||||
|
||||
<button onClick={() => { if (hammerRef.current) { hammerRef.current.tool = "draw"; } }}>
|
||||
<img src="/src/assets/images/pen.png" alt="pen" />
|
||||
<span>Draw (D)</span>
|
||||
</button>
|
||||
|
||||
<button onClick={() => { if (hammerRef.current) { hammerRef.current.tool = "eraser"; } }}>
|
||||
<img src="/src/assets/images/erase.png" alt="erase" />
|
||||
<span>Erase (E)</span>
|
||||
</button>
|
||||
|
||||
<button>
|
||||
<img src="/src/assets/images/bucket.png" alt="bucket" />
|
||||
<span>Bucket (B)</span>
|
||||
</button>
|
||||
|
||||
<button>
|
||||
<img src="/src/assets/images/rect.png" alt="rect" />
|
||||
<span>Rectangle (R)</span>
|
||||
</button>
|
||||
|
||||
<button>
|
||||
<img src="/src/assets/images/measure.png" alt="measure" />
|
||||
<span>Measure (M)</span>
|
||||
</button>
|
||||
|
||||
<hr />
|
||||
|
||||
<button>
|
||||
<img src="/src/assets/images/center.png" alt="center" onClick={() => hammerRef.current && hammerRef.current.centerView()} />
|
||||
<span>Center view (C)</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<div className="div-container-map">
|
||||
<div className="container-tiles">
|
||||
<div ref={div_view_tiles} className="div-scroll-tiles">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="div-container-view">
|
||||
<div className="div-canvas-container">
|
||||
<canvas ref={canvas} id="canvasHammer"></canvas>
|
||||
</div>
|
||||
|
||||
<div className="div-console" contentEditable="true">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
Reference in New Issue
Block a user