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

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

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

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