Skip to content

Commit

Permalink
ubg stats, icons, badges, camera selection in scanner
Browse files Browse the repository at this point in the history 
SQUASHED: AUTO-COMMIT-demos-stefan-untitled-board-game-ubg-cards-exporter.js,AUTO-COMMIT-puttest1390349471.html,AUTO-COMMIT-puttest1534615869.html,AUTO-COMMIT-puttest1759195010.html,AUTO-COMMIT-puttest430470708.html,AUTO-COMMIT-src-components-tools-lively-container.js,AUTO-COMMIT-src-components-tools-lively-editor.js,AUTO-COMMIT-src-components-widgets-lively-iframe.js,AUTO-COMMIT-src-components-widgets-ubg-card.js,AUTO-COMMIT-src-components-widgets-ubg-cards.html,AUTO-COMMIT-src-components-widgets-ubg-cards.js,AUTO-COMMIT-src-components-widgets-ubg-cards-scanner.html,AUTO-COMMIT-src-components-widgets-ubg-cards-scanner.js,
  • Loading branch information
@onsetsu
onsetsu committed Sep 2, 2024
1 parent da64907 commit 5be8560
Show file tree
Hide file tree
Showing 9 changed files with 453 additions and 72 deletions.
5 changes: 4 additions & 1 deletion demos/stefan/untitled-board-game/ubg-cards-exporter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,10 @@ export default class CardExporter {
}
document.title = `cards-${moment().format('YYYY-MM-DD-HH-mm-ss')}`

return window.print()
await lively.sleep(1000)
window.print()
await lively.sleep(1000)
return
} finally {
document.body.innerHTML = ""
document.body.style = bodyCSS
Expand Down
2 changes: 1 addition & 1 deletion src/components/tools/lively-container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2393,7 +2393,7 @@ export default class Container extends Morph {
}

async updateOtherContainers(url="" + this.getURL()) {
console.warn('updateOtherContainers')
// console.warn('updateOtherContainers')

await lively.sleep(100) // save is async...

Expand Down
3 changes: 1 addition & 2 deletions src/components/tools/lively-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export default class Editor extends Morph {
}

updateOtherEditors() {
console.warn('updateEditors')
// console.warn('updateEditors')
const url = this.getURL().toString();
updateEditors(url, [this]);
}
Expand Down Expand Up @@ -1092,7 +1092,6 @@ export default class Editor extends Morph {
}

async livelyMigrate(obj) {
debugger
if (obj.versionControl) obj.versionControl.remove();
var oldText = obj.getText()
this.setURL(obj.getURL());
Expand Down
1 change: 1 addition & 0 deletions src/components/widgets/lively-iframe.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export default class LivelyIFrame extends Morph {
const frame = this.frame;
let canJustReload = false
try {
// no cross origin (throws) and same url
canJustReload = frame.contentWindow?.location?.toString?.() === url
} catch (e) {}
if (canJustReload) {
Expand Down
50 changes: 42 additions & 8 deletions src/components/widgets/ubg-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -631,6 +631,8 @@ ${SVG.elementSymbol(others[2], lively.pt(12.5, 8.5), 1.5)}`, lively.rect(0, 0, 1
printedRules = printedRules.replace(/start of turn,?/gmi, '<span><i class="fa-regular fa-clock-desk"></i></span>');
printedRules = printedRules.replace(/ignition/gmi, '<span><i class="fa-regular fa-clock-desk"></i></span>');
printedRules = printedRules.replace(/\btrain\b/gmi, '<i class="fa-solid fa-car-side"></i>');
printedRules = printedRules.replace(/\bdaybreak\b/gmi, '<i class="fas fa-sun"></i>');
printedRules = printedRules.replace(/\bnightfall\b/gmi, '<i class="fa-solid fa-moon"></i>');

// <cardname>
printedRules = printedRules.replace(/\bcardname(?::(\d+))?/gmi, (match, cardId, offset, string, groups) => {
Expand All @@ -654,8 +656,9 @@ ${SVG.elementSymbol(others[2], lively.pt(12.5, 8.5), 1.5)}`, lively.rect(0, 0, 1


printedRules = printedRules.replace(/actionFree/gmi, () => this.chip('free'));
printedRules = printedRules.replace(/actionOnce/gmi, () => this.chip('once'));
printedRules = printedRules.replace(/actionMulti/gmi, () => this.chip('multi'));
printedRules = this.renderXPerTurnOrGame(printedRules, cardEditor, cardDesc);

printedRules = printedRules.replace(/actionMain:?/gmi, () => {
return '<i class="fa-solid fa-right"></i>'
});
Expand All @@ -675,10 +678,41 @@ ${SVG.elementSymbol(others[2], lively.pt(12.5, 8.5), 1.5)}`, lively.rect(0, 0, 1
printedRules = this.renderKeywords(printedRules)
printedRules = this.renderHedronIcon(printedRules)
printedRules = this.renderTapIcon(printedRules)
printedRules = printedRules.replace(/\bgear\b/gmi, '<i class="fa-solid fa-gear"></i>');

this.renderToDoc(cardEditor, outsideBorder, ruleBox, printedRules, options)
}

static renderXPerTurnOrGame(printedRules, cardEditor, cardDesc) {
return printedRules.replace(/\b((?:\d+)?(?:hedron)?)\/(game|turn)\b/gmi, (match, times, type, string, groups) => {
let color = 'black';
if (type === 'turn') {
const perTurnColors = [
// https://materialui.co/colors
'black',
'#283593',
'#303F9F',
'#3949AB',
'#3F51B5',
]

color = perTurnColors[times] || perTurnColors.last
}
if (type === 'game') {
const perGameColors = [
'black',
'#4A148C',
'#6A1B9A',
'#7B1FA2',
'#8E24AA',
]

color = perGameColors[1]
}
return `<span style="color: ${'white'}; background: ${color}; border-radius: 3px; padding-left: .3em; padding-right: .3em; display: inline-block; transform: skewX(-0.02turn);">${times}/${type}</span>`
})
}

static renderReminderText(printedRules, cardEditor, cardDesc) {
function italic(text) {
return `<span style="font-family: '${CSS_FONT_FAMILY_UNIVERS_45_LIGHT_ITALIC}';">${text}</span>`
Expand Down Expand Up @@ -776,9 +810,9 @@ ${SVG.elementSymbol(others[2], lively.pt(12.5, 8.5), 1.5)}`, lively.rect(0, 0, 1
}

if (cost) {
return `Passive As a free action, you may pay (${cost}) and trash ${whoToPrint} to play a card of equal or lower cost.`
return `gear Pay (${cost}) and trash ${whoToPrint} to play a card of equal or lower cost.`
}
return `Passive As a free action, you may trash ${whoToPrint} to play a card of equal or lower cost.`
return `gear Trash ${whoToPrint} to play a card of equal or lower cost.`
},

dash: (cost, who) => {
Expand Down Expand Up @@ -824,12 +858,12 @@ ${SVG.elementSymbol(others[2], lively.pt(12.5, 8.5), 1.5)}`, lively.rect(0, 0, 1

evoke: (cost, who) => {
if (who === 'all') {
return `As a free action, pay the cost and trash a card from hand to exec its blitz effects.`
return `gear Pay the cost and discard a card to exec its blitz effects.`
}
if (who === 'one') {
return `As a free action, pay the cost and trash that card from hand to exec its blitz effects.`
return `gear Pay the cost and discard that card to exec its blitz effects.`
}
return `As a free action, pay (${cost}) and trash this from hand to exec its blitz effects.`
return `gear Pay (${cost}) and discard this to exec its blitz effects.`
},

flashback: (who) => {
Expand Down Expand Up @@ -948,7 +982,7 @@ ${SVG.elementSymbol(others[2], lively.pt(12.5, 8.5), 1.5)}`, lively.rect(0, 0, 1
whoText = 'a card'
}

return `Passive Once per turn as a free action, you may trash ${whoText} from hand to draw a card.`
return `gear 1/turn Trash ${whoText} from hand to draw a card.`
},

upgrade: (diff, who) => {
Expand Down Expand Up @@ -1019,7 +1053,7 @@ ${SVG.elementSymbol(others[2], lively.pt(12.5, 8.5), 1.5)}`, lively.rect(0, 0, 1
highlightKeyword(/delirium:?\b/gmi, C_DARKGRAY);
highlightKeyword(/discover\b/gmi, C_DARKGRAY, '<i class="fa-regular fa-cards-blank"></i> ');
highlightKeyword(/manaburst\b:?/gmi, C_VIOLET, '<i class="fa-sharp fa-regular fa-burst"></i> ');
highlightKeyword(/\b(un)?meld(ed)?\b/gmi, C_BLUE_VIOLET);
highlightKeyword(/\b(un)?meld(ed|s)?\b/gmi, C_BLUE_VIOLET);
highlightKeyword(/potion\b/gmi, C_BLUE_VIOLET, '<i class="fa-regular fa-flask"></i> ');
highlightKeyword(/quickcast\b/gmi, C_DARKGRAY);
highlightKeyword(/resonance\b/gmi, C_GREEN);
Expand Down
18 changes: 12 additions & 6 deletions src/components/widgets/ubg-cards-scanner.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,12 @@

text-indent: 10px;
}
.button-group {
.center-groups {
position: absolute;
top: 3px;
left: 50%;
transform: translate(-50%);
text-align: center;
}
#log {
position: absolute;
Expand All @@ -36,11 +37,16 @@
<video id='videoInput' autoplay style='border: blue 1px solid;position: relative; display: inline-block;'></video>
<canvas id="output" width='320' height='240' style='border: red 1px solid;'></canvas>
<ul id='list'></ul>
<div class="button-group">
<button id="startButton"><i class="fa fa-play icon" aria-hidden="true"></i> START</button>
<button id="stopButton"><i class="fa fa-stop icon" aria-hidden="true"></i> STOP</button>
<button id="transferButton"><i class="fa fa-exchange icon" aria-hidden="true"></i> TRANSFER</button>
<button id="clearButton"><i class="fa fa-trash icon" aria-hidden="true"></i> Clear</button>
<div class='center-groups'>
<div class="button-group">
<button id="startButton"><i class="fa fa-play icon" aria-hidden="true"></i> START</button>
<button id="stopButton"><i class="fa fa-stop icon" aria-hidden="true"></i> STOP</button>
<button id="transferButton"><i class="fa fa-exchange icon" aria-hidden="true"></i> TRANSFER</button>
<button id="clearButton"><i class="fa fa-trash icon" aria-hidden="true"></i> Clear</button>
</div>
<div class="camera-group">
</div>

</div>
<div id='log'>starting</div>
</template>
57 changes: 48 additions & 9 deletions src/components/widgets/ubg-cards-scanner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,35 @@ export default class UbgCardsScanner extends Morph {
this.applyToUBGCards()

this.init()
this.setupCameraList()
}

setupCameraList() {
navigator.mediaDevices.ondevicechange = async () => {
lively.warn('Media devices have changed');
this.listCameras();
};

this.listCameras();
}

async listCameras() {
const cameras = this.get('.camera-group');

const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter(device => device.kind === 'videoinput');

cameras.innerHTML = ''
cameras.append(...videoDevices.map((device, index) => {
return <button click={e => {
lively.warn(device.label)
this.stopCapture()
this.captureVideo(device.deviceId);
}}>{device.label}</button>
}))

}

async init() {
await this.captureVideo()

Expand Down Expand Up @@ -94,11 +121,11 @@ export default class UbgCardsScanner extends Morph {

this.videoFrameToCanvas()

this.stopVideo()
// this.stopVideo()

await this.askOpenAI()

this.captureVideo()
// this.captureVideo()
} finally {
this.takingSnapshot = false
}
Expand Down Expand Up @@ -214,13 +241,21 @@ export default class UbgCardsScanner extends Morph {
}))
}

async captureVideo() {
const videoAccess = navigator.mediaDevices.getUserMedia({
video: {
facingMode: {
ideal: "environment"
async captureVideo(forcedId) {
let videoConfig = {
facingMode: {
ideal: "user"
}
}
if (forcedId) {
videoConfig = {
deviceId: {
exact: forcedId
}
},
}
}
const videoAccess = navigator.mediaDevices.getUserMedia({
video: videoConfig,
audio: false
})
.then((s) => {
Expand Down Expand Up @@ -270,12 +305,16 @@ export default class UbgCardsScanner extends Morph {
this.list.innerHTML = ''
}

stopVideo() {
stopCapture() {
if (this.stream) {
const tracks = this.stream.getTracks();
tracks.forEach(track => track.stop());
this.stream = null;
}
}

stopVideo() {
this.stopCapture()

this.video.pause()
this.video.srcObject = null;
Expand Down
33 changes: 32 additions & 1 deletion src/components/widgets/ubg-cards.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@

#layout {
display: grid;
grid-template-columns: auto 200px;
grid-template-columns: auto 400px;
grid-template-rows: auto 1fr 3.5in;
grid-template-areas:
"header header"
Expand Down Expand Up @@ -123,6 +123,37 @@
input#rangeStart, input#rangeEnd {
width: 4ex;
}
.line {
fill: none;
stroke-width: 2px;
stroke: steelblue;
}
.deck1 {
stroke: steelblue;
}
.deck2 {
stroke: crimson;
}
.deck3 {
stroke: darkgreen;
}
.legend {
font-family: sans-serif;
font-size: 10px;
}
.bubble {
fill: steelblue;
stroke: #000;
stroke-width: 1px;
opacity: 0.8;
}
.legend-bubble.bubble {
fill: transparent;
}
.axis-label {
font-size: 12px;
text-anchor: middle;
}
</style>
<div id='layout'>
<div id="buttons">
Expand Down
Loading

0 comments on commit 5be8560

Please sign in to comment.