github/wasm-pong
1
0
Fork 0
mirror of https://github.com/thilo-behnke/wasm-pong.git synced 2026-07-11 02:29:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

network session button

Browse Source
This commit is contained in:
Thilo Behnke
2022-06-01 21:11:12 +02:00
parent 9aca924037
commit bfbbfe854b
3 changed files with 56 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
server/src/http.rs
View File

@@ -146,7 +146,7 @@ async fn handle_session_create(session_manager: &Arc<Mutex<CachingSessionManager
return Ok(Response::builder().status(StatusCode::INTERNAL_SERVER_ERROR).body(Body::from(e)).unwrap());
}
let serialized = json!(session_create_res.unwrap());
return Ok(Response::new(Body::from(serialized.to_string())))
return build_success_res(&serialized.to_string());
}
async fn handle_session_join(session_manager: &Arc<Mutex<CachingSessionManager>>, mut req: Request<Body>, addr: SocketAddr) -> Result<Response<Body>, Infallible> {
@@ -215,7 +215,11 @@ async fn handle_event_read(session_manager: &Arc<Mutex<CachingSessionManager>>,
pub fn build_success_res(value: &str) -> Result<Response<Body>, Infallible> {
let json = format!("{{\"data\": {}}}", value);
return Ok(Response::new(Body::from(json)));
let mut res = Response::new(Body::from(json));
let headers = res.headers_mut();
headers.insert("Content-Type", "application/json".parse().unwrap());
headers.insert("Access-Control-Allow-Origin", "http://localhost:8080".parse().unwrap());
Ok(res)
}
pub fn build_error_res(error: &str, status: StatusCode) -> Result<Response<Body>, Infallible> {

6
www/index.html
View File

@@ -20,7 +20,11 @@
</head>
<body>
<noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
<div>
<div id="network_session" style="display: none; margin-bottom: 20px"></div>
<div style="display: flex; align-items: center">
<button id="online-btn" onclick="WASM_PONG.createOnlineSession()">
Create Online Game
</button>
<button id="pause-btn" onclick="WASM_PONG.pauseGame()">
Pause
</button>

48
www/index.js
View File

@@ -1,10 +1,8 @@
import * as wasm from "wasm-app";
import { FieldWrapper, GameObject } from "wasm-app";
import { memory } from "wasm-app/rust_wasm_bg";
const GRID_COLOR = "#CCCCCC";
const field = FieldWrapper.new();
let field = FieldWrapper.new();
const width = field.width();
const height = field.height();
@@ -15,11 +13,20 @@ canvas.width = width
const ctx = canvas.getContext('2d');
let paused = false;
let resetRequested = false;
let debug = false;
let keysDown = new Set();
let actions = [];
let networkSession = null;
let websocket = null;
const renderLoop = () => {
if (resetRequested) {
resetRequested = false;
reset();
return;
}
actions = getInputActions();
if (paused) {
requestAnimationFrame(renderLoop);
@@ -39,10 +46,45 @@ const render = () => {
drawObjects();
}
const reset = () => {
paused = false;
keysDown = new Set();
actions = [];
field = FieldWrapper.new();
networkSession = null;
if (websocket) {
websocket.close();
}
websocket = null;
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
}
window.WASM_PONG = {}
window.WASM_PONG.width = width
window.WASM_PONG.height = height
window.WASM_PONG.createOnlineSession = () => {
resetRequested = true;
fetch("http://localhost:4000/create_session", {method: 'POST'}).then(res => res.json()).then(session => {
console.log("Created session:")
console.log(session)
networkSession = session
const session_display_tag = document.getElementById("network_session");
session_display_tag.style.display = 'block';
session_display_tag.innerHTML = JSON.stringify(session)
websocket = new WebSocket("ws://localhost:4000")
websocket.onmessage = (event) => {
console.log(event)
}
}).catch(err => {
console.error(`Failed to create session: ${err}`)
})
}
window.WASM_PONG.pauseGame = () => {
paused = true;
document.getElementById("pause-btn").disabled = true;