Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@adbenitez
adbenitez committed Jun 13, 2022
0 parents commit 3da4809
Show file tree
Hide file tree
Showing 11 changed files with 496 additions and 0 deletions.
11 changes: 11 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
pnpm-debug.log*
pnpm-lock.yaml

node_modules
dist

# Editor directories and files
.vscode/*
.idea
.DS_Store
*~
21 changes: 21 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2022

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
27 changes: 27 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# webxdc-scores

An utility library to facilitate the process of creating score-based webxdc games.

## Usage

Copy the `webxdc-scores.js` file to your project's floder, then include it (together with `webxdc.js`) in your `index.html`:

```html
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<script src="webxdc.js"></script>
<script src="./webxdc-scores.js"></script>
</head>
<body>
...
</body>
</html>
```

Then you will have an scores API via `window.webxdc_scores` object, check `webxdc-scores.d.ts` file for documentation of the available API.

> **⚠️ NOTE:** If you use `window.webxdc_scores.getScoreboard()` you need to include `webxdc-scores.css` in your `index.html`, edit it to adapt the scoreboard style to your app.
For a full example check the `index.html` file included in this repository.
62 changes: 62 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<script src="webxdc.js"></script>
<script src="./webxdc-scores.js"></script>
<link rel="stylesheet" href="./webxdc-scores.css"/>
<style>
html,body {
background: #A0E1F0;
height: 100%;
font-family:Verdana,sans-serif;
font-weight: bold;
}
.label {
background: #eee;
display: inline-block;
padding: 0.4em;
border-radius: 0.4em;
}
.btn {
display:inline-block;
color: #fff;
background: #ff9800;
padding: 1em;
border-radius: 1em;
margin-right: 1em;
text-decoration: none;
margin-bottom: 2em;
margin-top: 1em;
}
</style>
</head>
<body>
<h3 class="label">Score: <span id="self-score">0</span></h3>
<p style="text-align: center;">
<a class="btn" href="#" onclick="incScore(); return false;">CLICK ME!</a>
</p>
<div id="scoreboard"></div>
<script>
function updateScore() {
document.getElementById("self-score").innerHTML = window.webxdc_scores.getScore();
}

function updateScoreboard() {
document.getElementById('scoreboard').innerHTML = window.webxdc_scores.getScoreboard();
}

function incScore() {
window.webxdc_scores.setScore(window.webxdc_scores.getScore() + 1);
updateScore();
updateScoreboard();
}

window.webxdc_scores.init("Test Game").then(() => {
updateScore();
updateScoreboard();
});
</script>
</body>
</html>
18 changes: 18 additions & 0 deletions jszip.config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"compressionLevel": 9,
"dereferenceLinks": true,
"entries": [
"dist/assets",
"dist/index.html",
"webxdc-scores.js",
"manifest.toml"
],
"force": true,
"ignoreEntries": [
"*.map"
],
"mode": "add",
"outputEntry": "dist/app.xdc",
"quiet": false,
"verbose": false
}
2 changes: 2 additions & 0 deletions manifest.toml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
name = "Test Game"
source_code_url = "https://github.com/webxdc/webxdc-scores"
13 changes: 13 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"private": true,
"packageManager": "[email protected]",
"scripts": {
"dev": "vite --host --open",
"build": "vite build && jszip-cli -c jszip.config.json",
"preview": "vite preview"
},
"devDependencies": {
"@ffflorian/jszip-cli": "^3.1.6",
"vite": "^2.9.9"
}
}
30 changes: 30 additions & 0 deletions webxdc-scores.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
.score-row {
font-size: 120%;
color: #000;
text-align: left;
padding: 1% 4%;
margin: 1% 6%;
border-radius: 0.3em;
}

.score-row.you {
background: #eee;
}

.row-pos {
float: left;
color: #4D4D4D;
}

.row-score {
float: right;
display: inline-block;
}

.row-name {
text-overflow: ellipsis;
display: inline-block;
width: 65%;
overflow: hidden;
white-space: nowrap;
}
59 changes: 59 additions & 0 deletions webxdc-scores.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
//@ts-check

type Player = {
/** the player's name */
name: string;
/** the player's position in the scoreboard */
pos: string;
/** the player's high score */
score: number;
/** true if this player is the current/self player, false otherwise. */
current: boolean;
};

interface WebxdcScores {
/**
* Initialize the scores API.
* @param appName the app's name that will be shown in info-messages.
* @returns promise that resolves when the API is ready to be used.
*/
init(appName: string): Promise<void>;
/**
* Use this method to get the high score of the current player.
* @returns the current player's high score.
*/
getScore(): number;
/**
* Use this method to set the high score of the current player.
* The new score is ignored if it is not greater than the player's high score and
* "force" is False.
* If the new score is not ignored, an info-message will be sent in the form:
* "PlayerName scored newScore in appName"
* @param score the new high score.
* @param force if the new score should override the old score even if it is smaller.
*/
setScore(score: number, force: boolean): void;
/**
* Use this method to get data for high score tables.
* This method will return scores for the current player, plus their closest
* neighbors on each side. Will also return the top three players if the current
* player and their neighbors are not among them.
* @returns an array of Player objects.
*/
getHighScores(): Player[];
/**
* Use this method to get the HTML markup of the scoreboard.
* @returns an string containing the HTML markup of the scoreboard.
*/
getScoreboard(): string;
}

////////// ANCHOR: global
declare global {
interface Window {
webxdc_scores: WebxdcScores<any>;
}
}
////////// ANCHOR_END: global

export { WebxdcScores };
139 changes: 139 additions & 0 deletions webxdc-scores.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
window.webxdc_scores = (() => {
let players = [],
_appName = "";

function h(tag, attributes, ...children) {
const element = document.createElement(tag);
if (attributes) {
Object.entries(attributes).forEach(entry => {
element.setAttribute(entry[0], entry[1]);
});
}
element.append(...children);
return element;
}

function getScore(addr) {
return players[addr] ? players[addr].score : 0;
}

function getHighScores() {
const selfAddr = window.webxdc.selfAddr;
const scoreboard = Object.keys(players).map((addr) => {
return {
current: addr === selfAddr,
...players[addr],
};
}).sort((a, b) => b.score - a.score);

const top = [];
const neighbors = [];
let selfIndex = -1;
for (let i = 0; i < scoreboard.length; i++) {
if (scoreboard[i].current) {
selfIndex = i;
break;
}
}
if (selfIndex === -1 || selfIndex < 4) {
for (let i = 0; i < scoreboard.length; i++) {
if (i > 4) {
break;
}
const player = scoreboard[i];
player.pos = i + 1;
top[i] = player;
}
} else {
let i = 0;
let player;
if (selfIndex - 1 >= 0) {
player = scoreboard[selfIndex - 1];
player.pos = selfIndex;
neighbors[i++] = player;
}

player = scoreboard[selfIndex];
player.pos = selfIndex + 1;
neighbors[i++] = player;

if (selfIndex + 1 < scoreboard.length) {
player = scoreboard[selfIndex + 1];
player.pos = selfIndex + 2;
neighbors[i] = player;
}

for (let i = 0; i < neighbors[0].pos - 1; i++) {
if (i > 2) {
break;
}
const player = scoreboard[i];
player.pos = i + 1;
top[i] = player;
}
}

return top.concat(neighbors);
}

return {
init: (appName) => {
_appName = appName;
return window.webxdc.setUpdateListener((update) => {
const player = update.payload;
if (player.score > getScore(player.addr)) {
players[player.addr] = {name: player.name, score: player.score};
}
}, 0);
},

getScore: () => {
return getScore(window.webxdc.selfAddr);
},

setScore: (score, force) => {
const addr = window.webxdc.selfAddr;
const old_score = getScore(addr);
if (score > old_score) {
const name = window.webxdc.selfName;
let info = name + " scored " + score;
if (_appName) {
info += " in " + _appName;
}
window.webxdc.sendUpdate(
{
payload: {
addr: addr,
name: name,
score: score,
},
info: info,
},
info
);
} else {
console.log("[webxdc-score] Ignoring score: " + score + " < " + old_score);
}
},

getHighScores: getHighScores,

getScoreboard: () => {
let table = getHighScores();
let div = h("div");
for (let i = 0; i < table.length; i++) {
const player = table[i];
const pos = h("span", {class: "row-pos"}, player.pos);
pos.innerHTML += ".&nbsp;&nbsp;";
div.appendChild(
h("div", {class: "score-row" + (player.current ? " you" : "")},
pos,
h("span", {class: "row-name"}, player.name),
h("span", {class: "row-score"}, player.score),
)
);
}
return div.innerHTML;
},
};
})();
Loading

0 comments on commit 3da4809

Please sign in to comment.