yuzucchii/jetzig
1
0
Fork 0
mirror of https://github.com/jetzig-framework/jetzig.git synced 2025-05-14 22:16:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Bob Farrell 2025-05-03 16:55:28 +01:00
parent d3113d12fe
commit 8074f8a221
2 changed files with 45 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
demo/src/app/views/websockets/index.zmpl
View File

@ -1,4 +1,5 @@
<link rel="stylesheet" href="/party.css" />
<script src="/party.js"></script>
<div id="party-container"></div>
@ -7,11 +8,11 @@
<span class="trophy">&#127942;</span>
<div id="results">
<div>Player</div>
<div id="player-wins" jetzig-scope="game" jetzig-connect="$.results.player"></div>
<div id="player-wins" jetzig-connect="$.results.player"></div>
<div>CPU</div>
<div id="cpu-wins" jetzig-scope="game" jetzig-connect="$.results.cpu"></div>
<div id="cpu-wins" jetzig-connect="$.results.cpu"></div>
<div>Tie</div>
<div id="ties" jetzig-scope="game" jetzig-connect="$.results.tie"></div>
<div id="ties" jetzig-connect="$.results.tie"></div>
</div>
<span class="trophy">&#127942;</span>
</div>
@ -22,7 +23,6 @@
class="cell"
jetzig-connect="$.cells.{{index}}"
jetzig-transform="{ player: '&#9992;&#65039;', cpu: '&#129422;', tie: '&#129309;' }[value] || ''"
jetzig-scope="game"
jetzig-click="move"
id="tic-tac-toe-cell-{{index}}"
data-cell="{{index}}"
@ -30,33 +30,31 @@
</div>
}
</div>
<div id="reset-wrapper">
<button jetzig-click="reset" id="reset-button">Reset Game</button>
</div>
<div jetzig-style="{ visibility: $.victor === null ? 'hidden' : 'visible' }" id="victor">
<span>&#127942;</span>
<span
jetzig-connect="$.victor"
jetzig-transform="{ player: '&#9992;&#65039;', cpu: '&#129422;', tie: '&#129309;' }[value] || ''"
></span>
<span>&#127942;</span>
</div>
</jetzig-scope>
<div id="reset-wrapper">
<button jetzig-click="reset" id="reset-button">Reset Game</button>
</div>
<div jetzig-style="{ visibility: $.victor === null ? 'hidden' : 'visible' }" id="victor">
<span>&#127942;</span>
<span
jetzig-connect="$.victor"
jetzig-scope="game"
jetzig-transform="{ player: '&#9992;&#65039;', cpu: '&#129422;', tie: '&#129309;' }[value] || ''"
></span>
<span>&#127942;</span>
</div>
<script>
Jetzig.channel.receive("victor", data => {
triggerPartyAnimation();
});
@// Jetzig.channel.onStateChanged((scope, state) => {
@// });
@//
@// Jetzig.channel.onMessage(data => {
@// });
@//
@// Jetzig.channel.receive("victor", data => {
@// triggerPartyAnimation();
@// });
@//
@// Jetzig.channel.receive("game_over", data => {
@// const element = document.querySelector("#board");

37
src/jetzig/middleware/channels/channels.js
View File

@ -101,29 +101,40 @@ const Jetzig = window.Jetzig;
const ref = element.getAttribute('jetzig-click');
const action = channel.action_specs[ref];
if (action) {
element.addEventListener('click', () => {
const args = [];
action.spec.params.forEach(param => {
const arg = element.dataset[param.name];
if (arg === undefined) {
throw new Error(`Expected 'data-${param.name}' attribute for '${action.name}' click handler.`);
} else {
args.push(element.dataset[param.name]);
}
element.addEventListener('click', () => {
const args = [];
action.spec.params.forEach(param => {
const arg = element.dataset[param.name];
if (arg === undefined) {
throw new Error(`Expected 'data-${param.name}' attribute for '${action.name}' click handler.`);
} else {
args.push(element.dataset[param.name]);
}
});
action.callback(...args);
});
action.callback(...args);
});
} else {
throw new Error(`Unknown click handler: '${ref}'`);
throw new Error(`Unknown click handler: '${ref}'`);
}
});
};
const initScopes = (channel) => {
document.querySelectorAll('jetzig-scope').forEach(element => {
channel.scopeWrappers.push(element);
});
};
const initElementConnections = (channel) => {
document.querySelectorAll('[jetzig-connect]').forEach(element => {
const ref = element.getAttribute('jetzig-connect');
const id = `jetzig-${crypto.randomUUID()}`;
element.setAttribute('jetzig-id', id);
channel.scopeWrappers.forEach(wrapper => {
if (wrapper.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_CONTAINED_BY) {
if (!element.getAttribute('jetzig-scope')) element.setAttribute('jetzig-scope', wrapper.getAttribute('name'));
}
});
const scope = element.getAttribute('jetzig-scope') || '__root__';
if (!channel.elementMap[scope]) channel.elementMap[scope] = {};
if (!channel.elementMap[scope][ref]) channel.elementMap[scope][ref] = [];
@ -182,7 +193,9 @@ const Jetzig = window.Jetzig;
onStateChanged: function(callback) { this.stateChangedCallbacks.push(callback); },
onMessage: function(callback) { this.messageCallbacks.push(callback); },
scopedElements: function(scope) { return this.elementMap[scope] || {}; },
scopeWrappers: [],
init: function(host, path) {
initScopes(this);
initWebsocket(this, host, path);
initElementConnections(this);
initStyledElements(this);