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-04-28 20:03:02 +01:00
parent 94f67dd4a2
commit 74bb659528
3 changed files with 56 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
demo/public/party.css
View File

@ -40,10 +40,14 @@ body {
color: white;
border: none;
border-radius: 5px;
display: inline;
}
#reset-button:hover {
background-color: #45a049;
}
#reset-wrapper {
text-align: center;
}
#party-container {
position: absolute;
top: 0;
@ -116,7 +120,7 @@ body {
}
#victor {
margin: 3rem;
font-size: 5rem;
font-size: 3.5rem;
text-align: center;
vertical-align: center;
}

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

@ -1,3 +1,7 @@
<link rel="stylesheet" href="/party.css" />
<div id="party-container"></div>
<div id="results-wrapper">
<span class="trophy">&#127942;</span>
<div id="results">
@ -11,14 +15,13 @@
<span class="trophy">&#127942;</span>
</div>
<div id="party-container"></div>
<div class="board" id="board">
@for (0..9) |index| {
<div
class="cell"
jetzig-connect="$.cells.{{index}}"
jetzig-transform="cell"
jetzig-transform="{ player: '&#9992;&#65039;', cpu: '&#129422;', tie: '&#129309;' }[value] || ''"
jetzig-click="move"
id="tic-tac-toe-cell-{{index}}"
data-cell="{{index}}"
@ -27,47 +30,35 @@
}
</div>
<button jetzig-click="reset" id="reset-button">Reset Game</button>
<div id="reset-wrapper">
<button jetzig-click="reset" id="reset-button">Reset Game</button>
</div>
<div id="victor"></div>
<script src="/party.js"></script>
<link rel="stylesheet" href="/party.css" />
<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>
<script>
jetzig.channel.onStateChanged(state => {
if (!state.victor) {
const element = document.querySelector("#victor");
element.style.visibility = 'hidden';
}
});
jetzig.channel.onMessage(message => {
if (message.err) {
console.log(message.err);
}
});
jetzig.channel.receive("victor", (data) => {
const element = document.querySelector("#victor");
const emoji = {
player: "&#9992;&#65039;",
cpu: "&#129422;",
tie: "&#129309;"
}[data.params.type] || "";
element.innerHTML = `&#127942; ${emoji} &#127942;`;
element.style.visibility = 'visible';
triggerPartyAnimation();
});
jetzig.channel.receive("game_over", (data) => {
const element = document.querySelector("#board");
element.classList.remove('flash-animation');
void element.offsetWidth;
element.classList.add('flash-animation');
});
jetzig.channel.transform("cell", (value) => (
{ player: "&#9992;&#65039;", cpu: "&#129422;" }[value] || ""
));
@// jetzig.channel.onStateChanged(state => {
@// });
@//
@// jetzig.channel.onMessage(data => {
@// });
@//
@// jetzig.channel.receive("victor", data => {
@// triggerPartyAnimation();
@// });
@//
@// jetzig.channel.receive("game_over", data => {
@// const element = document.querySelector("#board");
@// element.classList.remove('flash-animation');
@// void element.offsetWidth;
@// element.classList.add('flash-animation');
@// });
@//
</script>

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

@ -4,10 +4,9 @@ jetzig = window.jetzig;
(() => {
const transform = (value, state, element) => {
const id = element.getAttribute('jetzig-id');
const key = id && jetzig.channel.transformerMap[id];
const transformers = key && jetzig.channel.transformers[key];
if (transformers) {
return transformers.reduce((acc, val) => val(acc), value);
const transformer = id && jetzig.channel.transformers[id];
if (transformer) {
return transformer(value, state, element);
} else {
return value === undefined || value == null ? '' : `${value}`
}
@ -21,7 +20,6 @@ jetzig = window.jetzig;
messageCallbacks: [],
invokeCallbacks: {},
elementMap: {},
transformerMap: {},
transformers: {},
onStateChanged: function(callback) { this.stateChangedCallbacks.push(callback); },
onMessage: function(callback) { this.messageCallbacks.push(callback); },
@ -139,7 +137,21 @@ jetzig = window.jetzig;
const id = `jetzig-${crypto.randomUUID()}`;
element.setAttribute('jetzig-id', id);
this.elementMap[ref].push(element);
this.transformerMap[id] = element.getAttribute('jetzig-transform');
const transformer = element.getAttribute('jetzig-transform');
if (transformer) {
this.transformers[id] = new Function("value", "$", "element", `return ${transformer};`);
}
});
const styled_elements = document.querySelectorAll('[jetzig-style]');
this.onStateChanged(state => {
styled_elements.forEach(element => {
const func = new Function("$", `return ${element.getAttribute('jetzig-style')};`)
const styles = func(state);
Object.entries(styles).forEach(([key, value]) => {
element.style.setProperty(key, value);
});
});
});
// this.websocket.addEventListener("open", (event) => {
@ -147,13 +159,6 @@ jetzig = window.jetzig;
// this.publish("websockets", {});
// });
},
transform: function(ref, callback) {
if (Object.hasOwn(this.transformers, ref)) {
this.transformers[ref].push(callback);
} else {
this.transformers[ref] = [callback];
}
},
receive: function(ref, callback) {
if (Object.hasOwn(this.invokeCallbacks, ref)) {
this.invokeCallbacks[ref].push(callback);