From fe0ec3a2c7364e319dfd60453dc495222edb37d4 Mon Sep 17 00:00:00 2001 From: Stephen Jianu Date: Mon, 12 Sep 2022 23:58:44 -0500 Subject: [PATCH 1/4] Strip out Electron and NodeJS-specific functions to get the game working on a basic level --- README.md | 16 ++++++++++++++++ sources/index.html | 5 ----- sources/scripts/card.js | 1 - sources/scripts/lib/controller.js | 8 -------- 4 files changed, 16 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 9edb616..b64c04f 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,18 @@ # DonsolJavascript Javascript version of Donsol + +### Original authors +The original Javascript+Electron version of Donsol was created by Hundred Rabbits. + +### About this branch +This branch ("web") will be used for development on the web-based version of Donsol, which in turn is heavily based on the main branch, stripping out parts related to Electron and NodeJS. +None of this is official; it's a passion project, so please do not contact Hundred Rabbits regarding issues with this web version of the game. + +### Limitations +In the project's current state, you can play the base game of Donsol, with some limitations. +The following do not currently work: +* Card faces do not render properly, as these were previously loaded with NodeJS functions that aren't available to use in a pure browser-based application (as far as I'm aware). I have an idea on how to accomplish this. +* Aspects of the game that relied on being selected from a menu in the Electron version currently have no way of being toggled. These include things like difficulty selection and themeing support. + +### Contributing +If you wish to contribute to the project, please follow the standard practice of forking this repository and submitting a pull request. diff --git a/sources/index.html b/sources/index.html index 9560a1e..93bb5b4 100644 --- a/sources/index.html +++ b/sources/index.html @@ -44,9 +44,6 @@ diff --git a/sources/scripts/card.js b/sources/scripts/card.js index a2d325e..c253ea5 100644 --- a/sources/scripts/card.js +++ b/sources/scripts/card.js @@ -26,7 +26,6 @@ function Card (sym, value, type, name = 'Unknown') { const graphic = document.createElement('div') graphic.className = 'graphic' - graphic.innerHTML = require('fs').readFileSync(`${__dirname}/media/${this.type}/${this.value}.svg`) face.appendChild(graphic) // Name diff --git a/sources/scripts/lib/controller.js b/sources/scripts/lib/controller.js index 365c368..99c3e5f 100644 --- a/sources/scripts/lib/controller.js +++ b/sources/scripts/lib/controller.js @@ -4,8 +4,6 @@ function Controller () { this.menu = { default: {} } this.mode = 'default' - this.app = require('electron').remote.app - this.start = function () { } @@ -45,10 +43,6 @@ function Controller () { return f } - this.commit = function () { - this.app.inject_menu(this.format()) - } - this.docs = function () { console.log('Generating docs..') const svg = this.generate_svg(this.format()) @@ -181,5 +175,3 @@ function Controller () { { x: 540, y: 240, width: 90, height: 60, name: 'alt' } ] } - -module.exports = new Controller() From ff787f7e64d67119c0da34b9c9f15c72f2d6955c Mon Sep 17 00:00:00 2001 From: Stephen Jianu Date: Wed, 21 Sep 2022 20:15:40 -0500 Subject: [PATCH 2/4] Place SVG in card definitions and load from those --- sources/scripts/card.js | 4 +- sources/scripts/card.monster.js | 4 +- sources/scripts/card.potion.js | 4 +- sources/scripts/card.shield.js | 4 +- sources/scripts/deck.js | 108 ++++++++++++++++---------------- 5 files changed, 63 insertions(+), 61 deletions(-) diff --git a/sources/scripts/card.js b/sources/scripts/card.js index c253ea5..51f12e9 100644 --- a/sources/scripts/card.js +++ b/sources/scripts/card.js @@ -1,10 +1,11 @@ 'use strict' -function Card (sym, value, type, name = 'Unknown') { +function Card (sym, value, type, name = 'Unknown', svg = '') { this.symbol = sym this.value = value this.type = type this.name = name + this.svg = svg this.element = null this.is_flipped = false @@ -26,6 +27,7 @@ function Card (sym, value, type, name = 'Unknown') { const graphic = document.createElement('div') graphic.className = 'graphic' + graphic.innerHTML = this.svg face.appendChild(graphic) // Name diff --git a/sources/scripts/card.monster.js b/sources/scripts/card.monster.js index 2644db7..8382a45 100644 --- a/sources/scripts/card.monster.js +++ b/sources/scripts/card.monster.js @@ -1,7 +1,7 @@ 'use strict' -function Card_Monster (sym, value, type, name = 'Unknown') { - Card.call(this, sym, value, type, name) +function Card_Monster (sym, value, type, name = 'Unknown', svg = '') { + Card.call(this, sym, value, type, name, svg) this.touch = function () { if (this.is_flipped) { console.log('Card is already flipped'); return } diff --git a/sources/scripts/card.potion.js b/sources/scripts/card.potion.js index aa3d600..259f3af 100644 --- a/sources/scripts/card.potion.js +++ b/sources/scripts/card.potion.js @@ -1,7 +1,7 @@ 'use strict' -function Card_Potion (sym, value, type, name = 'Unknown') { - Card.call(this, sym, value, type, name) +function Card_Potion (sym, value, type, name = 'Unknown', svg = '') { + Card.call(this, sym, value, type, name, svg) this.touch = function () { if (this.is_flipped) { console.log('Card is already flipped'); return } diff --git a/sources/scripts/card.shield.js b/sources/scripts/card.shield.js index 19cd345..283ed10 100644 --- a/sources/scripts/card.shield.js +++ b/sources/scripts/card.shield.js @@ -1,7 +1,7 @@ 'use strict' -function Card_Shield (sym, value, type, name = 'Unknown') { - Card.call(this, sym, value, type, name) +function Card_Shield (sym, value, type, name = 'Unknown', svg = '') { + Card.call(this, sym, value, type, name, svg) this.touch = function () { if (this.is_flipped == true) { console.log('Card is already flipped'); return } diff --git a/sources/scripts/deck.js b/sources/scripts/deck.js index acf974e..502ee19 100644 --- a/sources/scripts/deck.js +++ b/sources/scripts/deck.js @@ -2,60 +2,60 @@ function Deck () { this.cards = [ - new Card_Potion('A', 11, HEART, 'White Mage'), - new Card_Potion('2', 2, HEART, 'Small Potion'), - new Card_Potion('3', 3, HEART, 'Small Potion'), - new Card_Potion('4', 4, HEART, 'Medium Potion'), - new Card_Potion('5', 5, HEART, 'Medium Potion'), - new Card_Potion('6', 6, HEART, 'Medium Potion'), - new Card_Potion('7', 7, HEART, 'Medium Potion'), - new Card_Potion('8', 8, HEART, 'Medium Potion'), - new Card_Potion('9', 9, HEART, 'Large Potion'), - new Card_Potion('10', 10, HEART, 'Large Potion'), - new Card_Potion('V', 11, HEART, 'White Mage'), - new Card_Potion('Q', 11, HEART, 'White Mage'), - new Card_Potion('K', 11, HEART, 'White Mage'), - new Card_Shield('A', 11, DIAMOND, 'Red Mage'), - new Card_Shield('2', 2, DIAMOND, 'Buckler'), - new Card_Shield('3', 3, DIAMOND, 'Buckler'), - new Card_Shield('4', 4, DIAMOND, 'Shield'), - new Card_Shield('5', 5, DIAMOND, 'Shield'), - new Card_Shield('6', 6, DIAMOND, 'Shield'), - new Card_Shield('7', 7, DIAMOND, 'Shield'), - new Card_Shield('8', 8, DIAMOND, 'Shield'), - new Card_Shield('9', 9, DIAMOND, 'Large Shield'), - new Card_Shield('10', 10, DIAMOND, 'Large Shield'), - new Card_Shield('V', 11, DIAMOND, 'Red Mage'), - new Card_Shield('Q', 11, DIAMOND, 'Red Mage'), - new Card_Shield('K', 11, DIAMOND, 'Red Mage'), - new Card_Monster('A', 17, CLOVE, 'Empress'), - new Card_Monster('2', 2, CLOVE, 'Rat'), - new Card_Monster('3', 3, CLOVE, 'Bat'), - new Card_Monster('4', 4, CLOVE, 'Imp'), - new Card_Monster('5', 5, CLOVE, 'Goblin'), - new Card_Monster('6', 6, CLOVE, 'Orc'), - new Card_Monster('7', 7, CLOVE, 'Ogre'), - new Card_Monster('8', 8, CLOVE, 'Beholder'), - new Card_Monster('9', 9, CLOVE, 'Medusa'), - new Card_Monster('10', 10, CLOVE, 'Demon'), - new Card_Monster('V', 11, CLOVE, 'Consort'), - new Card_Monster('Q', 13, CLOVE, 'Queen'), - new Card_Monster('K', 15, CLOVE, 'Regnant'), - new Card_Monster('A', 17, SPADE, 'Empress'), - new Card_Monster('2', 2, SPADE, 'Slime'), - new Card_Monster('3', 3, SPADE, 'Tunneler'), - new Card_Monster('4', 4, SPADE, 'Fiend'), - new Card_Monster('5', 5, SPADE, 'Drake'), - new Card_Monster('6', 6, SPADE, 'Specter'), - new Card_Monster('7', 7, SPADE, 'Ghost'), - new Card_Monster('8', 8, SPADE, 'Elemental'), - new Card_Monster('9', 9, SPADE, 'Witch'), - new Card_Monster('10', 10, SPADE, 'Familiar'), - new Card_Monster('V', 11, SPADE, 'Consort'), - new Card_Monster('Q', 13, SPADE, 'Queen'), - new Card_Monster('K', 15, SPADE, 'Regnant'), - new Card_Monster('J', 21, JOKER, 'First Donsol'), - new Card_Monster('J', 21, JOKER, 'Second Donsol') + new Card_Potion('A', 11, HEART, 'White Mage', ''), + new Card_Potion('2', 2, HEART, 'Small Potion', ''), + new Card_Potion('3', 3, HEART, 'Small Potion', ''), + new Card_Potion('4', 4, HEART, 'Medium Potion', ''), + new Card_Potion('5', 5, HEART, 'Medium Potion', ''), + new Card_Potion('6', 6, HEART, 'Medium Potion', ''), + new Card_Potion('7', 7, HEART, 'Medium Potion', ''), + new Card_Potion('8', 8, HEART, 'Medium Potion', ''), + new Card_Potion('9', 9, HEART, 'Large Potion', ''), + new Card_Potion('10', 10, HEART, 'Large Potion', ''), + new Card_Potion('V', 11, HEART, 'White Mage', ''), + new Card_Potion('Q', 11, HEART, 'White Mage', ''), + new Card_Potion('K', 11, HEART, 'White Mage', ''), + new Card_Shield('A', 11, DIAMOND, 'Red Mage', ''), + new Card_Shield('2', 2, DIAMOND, 'Buckler', ''), + new Card_Shield('3', 3, DIAMOND, 'Buckler', ''), + new Card_Shield('4', 4, DIAMOND, 'Shield', ''), + new Card_Shield('5', 5, DIAMOND, 'Shield', ''), + new Card_Shield('6', 6, DIAMOND, 'Shield', ''), + new Card_Shield('7', 7, DIAMOND, 'Shield', ''), + new Card_Shield('8', 8, DIAMOND, 'Shield', ''), + new Card_Shield('9', 9, DIAMOND, 'Large Shield', ''), + new Card_Shield('10', 10, DIAMOND, 'Large Shield', ''), + new Card_Shield('V', 11, DIAMOND, 'Red Mage', ''), + new Card_Shield('Q', 11, DIAMOND, 'Red Mage', ''), + new Card_Shield('K', 11, DIAMOND, 'Red Mage', ''), + new Card_Monster('A', 17, CLOVE, 'Empress', ''), + new Card_Monster('2', 2, CLOVE, 'Rat', ''), + new Card_Monster('3', 3, CLOVE, 'Bat', ''), + new Card_Monster('4', 4, CLOVE, 'Imp', ''), + new Card_Monster('5', 5, CLOVE, 'Goblin', ''), + new Card_Monster('6', 6, CLOVE, 'Orc', ''), + new Card_Monster('7', 7, CLOVE, 'Ogre', ''), + new Card_Monster('8', 8, CLOVE, 'Beholder', ''), + new Card_Monster('9', 9, CLOVE, 'Medusa', ''), + new Card_Monster('10', 10, CLOVE, 'Demon', ''), + new Card_Monster('V', 11, CLOVE, 'Consort', ''), + new Card_Monster('Q', 13, CLOVE, 'Queen', ''), + new Card_Monster('K', 15, CLOVE, 'Regnant', ''), + new Card_Monster('A', 17, SPADE, 'Empress', ''), + new Card_Monster('2', 2, SPADE, 'Slime', ''), + new Card_Monster('3', 3, SPADE, 'Tunneler', ''), + new Card_Monster('4', 4, SPADE, 'Fiend', ''), + new Card_Monster('5', 5, SPADE, 'Drake', ''), + new Card_Monster('6', 6, SPADE, 'Specter', ''), + new Card_Monster('7', 7, SPADE, 'Ghost', ''), + new Card_Monster('8', 8, SPADE, 'Elemental', ''), + new Card_Monster('9', 9, SPADE, 'Witch', ''), + new Card_Monster('10', 10, SPADE, 'Familiar', ''), + new Card_Monster('V', 11, SPADE, 'Consort', ''), + new Card_Monster('Q', 13, SPADE, 'Queen', ''), + new Card_Monster('K', 15, SPADE, 'Regnant', ''), + new Card_Monster('J', 21, JOKER, 'First Donsol', ''), + new Card_Monster('J', 21, JOKER, 'Second Donsol', '') ] let draw_pile = [] From 08ca381a9fef271073860185a709643d72fd2257 Mon Sep 17 00:00:00 2001 From: Stephen Jianu Date: Wed, 21 Sep 2022 20:31:54 -0500 Subject: [PATCH 3/4] Mention that the card face rendering issue has been fixed --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b64c04f..fb62911 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ None of this is official; it's a passion project, so please do not contact Hundr ### Limitations In the project's current state, you can play the base game of Donsol, with some limitations. The following do not currently work: -* Card faces do not render properly, as these were previously loaded with NodeJS functions that aren't available to use in a pure browser-based application (as far as I'm aware). I have an idea on how to accomplish this. +* ~~Card faces do not render properly, as these were previously loaded with NodeJS functions that aren't available to use in a pure browser-based application (as far as I'm aware). I have an idea on how to accomplish this.~~ Fixed in commit ff787f7 * Aspects of the game that relied on being selected from a menu in the Electron version currently have no way of being toggled. These include things like difficulty selection and themeing support. ### Contributing From ee3990b35022bc385a49b21c0dc3ca97a7c42e41 Mon Sep 17 00:00:00 2001 From: Stephen Jianu Date: Sun, 26 Nov 2023 18:24:06 -0600 Subject: [PATCH 4/4] Tweak CSS to allow cards to reflow --- sources/links/main.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/sources/links/main.css b/sources/links/main.css index b127901..6160f66 100644 --- a/sources/links/main.css +++ b/sources/links/main.css @@ -1,6 +1,6 @@ -body { background:black; font-family: 'input_mono_regular',monospace; min-width:750px; overflow-y: hidden; user-select: none; cursor: default; -webkit-app-region: drag; padding:30px;} +body { background:black; font-family: 'input_mono_regular',monospace; overflow-y: hidden; user-select: none; cursor: default; -webkit-app-region: drag; padding:30px;} -#wrapper { display: block;max-width: 900px; height: calc(25vw * 1.25 + 90px);max-height:400px;margin:0px auto;position: relative;width:100%; -webkit-app-region: drag;} +#wrapper { display: block;max-width: 900px; height: calc(25vw * 1.25 + 90px);max-height:400px;margin:0px auto;position: relative;width:100%; min-width: 430px; -webkit-app-region: drag;} #player { display: block; font-size:12px; height:30px; line-height:20px; max-width:890px; -webkit-user-select: none;-webkit-app-region: drag; position: fixed; bottom:30px; width:calc(100% - 60px);} #player > * { vertical-align: top } @@ -17,7 +17,7 @@ body { background:black; font-family: 'input_mono_regular',monospace; min-width: #player.locked a.escape { display:none;} #board, #table { display:block; position: absolute; width: calc(100% + 15px)} -#board card, #table card { display: inline-block !important;height: calc(25vw * 1.25);max-height:300px;max-width:200px;width: calc(25% - 15px);margin-right: 15px;border-radius: 7px; position:relative; overflow:hidden;min-height: 300px;} +#board card, #table card { display: inline-block !important;height: calc(25vw * 1.25);max-height:300px;max-width:200px;width: calc(25% - 15px);margin-right: 15px;border-radius: 7px; position:relative; overflow:hidden;min-height: 300px; min-width:200px;} #board card { top:10px; opacity:0.01; z-index:900; transition: opacity 250ms, top 150ms } #board card:hover { cursor:pointer; top:5px !important;} #board card .face { display:block;width: 100%;height: calc(100% - 5px);border-radius: 7px;} @@ -30,8 +30,8 @@ body { background:black; font-family: 'input_mono_regular',monospace; min-width: #table card { } #table card .shortcut { position:absolute; right:20px; bottom:15px; color:#555;} -#board card:nth-child(2), #table card:nth-child(2) { position:absolute; left:25%;} -#board card:nth-child(3), #table card:nth-child(3) { position:absolute; left:50%;} -#board card:nth-child(4), #table card:nth-child(4) { position:absolute; left:75%;} +#board card:nth-child(2), #table card:nth-child(2) { position:relative;} +#board card:nth-child(3), #table card:nth-child(3) { position:relative;} +#board card:nth-child(4), #table card:nth-child(4) { position:relative;} -#difficulty:hover { text-decoration: underline; cursor: pointer; } \ No newline at end of file +#difficulty:hover { text-decoration: underline; cursor: pointer; }