diff --git a/Weaverdice/CHANGELOG-Weaverdice.md b/Weaverdice/CHANGELOG-Weaverdice.md index 262b7de775..130903f854 100644 --- a/Weaverdice/CHANGELOG-Weaverdice.md +++ b/Weaverdice/CHANGELOG-Weaverdice.md @@ -1,3 +1,10 @@ +### Version 2.00(2019-10-15): + +- sheet code refactored to use CSS Flexbox and CSS Grid(previously the sheet used > +`` for layout) + +- adjusted layout to more closely resemble latest Gdocs version of the character sheet + ### Version 1.41(2018-9-25): - crit fails/successes add back to skill rolls(roll of highest/lowest shows red/green) diff --git a/Weaverdice/README.md b/Weaverdice/README.md index cdf21d0e2b..51a9af68c9 100644 --- a/Weaverdice/README.md +++ b/Weaverdice/README.md @@ -15,18 +15,17 @@ Any improvements to the sheet are welcome. - create power-generation and luck tables so character creation can be made quicker in Roll20 -- make the layout more flexible to resizing, it's still quite crude atm ## WeaverDice Resources & Community Links Resources | Link ------ | --------------- **Rulebook:** | https://docs.google.com/document/d/1e-H--GkPrbJq4WRNYndBnjjLjE7-2kOZkjwltkP1Ong/ -**Online charsheet:** | https://docs.google.com/document/d/15peMSA3fdp9EK9urwvYps4Q0z06EQ6iJdVggD81a2bg/ +**Online charsheet:** | https://docs.google.com/document/d/1TBYprvESCqI7rt13h85FWsTobcoQ7AuMh1-L8T5fMq8/ **Getting Started:** | https://docs.google.com/document/d/1Py-zQBE94hm8Iu0Oqoy_p_svALXYkKVpTiq-i7PwCwE/ **Character Creation Guide** | https://docs.google.com/document/d/1Eo7AZpjm-mIQBVxXpjvxgNoHMpSBa9M0onzhYaX-HDU/ Community | Link ------- | --------------- -**IRC-channel** | https://kiwiirc.com/client/irc.parahumans.net/#weaverdice +**Discord** | https://discord.gg/TYsRHpG **Worm Web serial:** | https://parahumans.wordpress.com/ **Subreddit:** | https://www.reddit.com/r/Weaverdice/ \ No newline at end of file diff --git a/Weaverdice/Weaverdice.css b/Weaverdice/Weaverdice.css index b79272676d..4a905ffdce 100644 --- a/Weaverdice/Weaverdice.css +++ b/Weaverdice/Weaverdice.css @@ -1,232 +1,405 @@ -/*@import url('https://themes.googleusercontent.com/fonts/css?kit=fpjTOVmNbO4Lz34iLyptLUXza5VhXqVC6o75Eld_V98');*/ + +/* Sheet Version */ +.charsheet .sheet-version::after { + content: 'Sheet Version 2.00'; +} + +/* ----------------------- */ +/* new css */ +/* ----------------------- */ + +/* --------- General Styling ------- */ + +span{ + padding:2px 4px 2px 4px; +} + +*{ /* Defines a CSS variable */ + + --gray: #d9d9d9; +} .charsheet { background-color: white; -} - -.charsheet .sheet-version::after { - content: 'Sheet Version 1.41'; } -.charsheet .sheet-bg-gray { - background-color: #d9d9d9; -} -.charsheet .sheet-bg-black { - background-color: #000000; -} -.charsheet .sheet-bg-white { - background-color: #ffffff +textarea{ + width: 98%; + height: 110px; } -.charsheet .sheet-def-txt { - font-size: 11pt; - font-family: "Calibri"; - font-weight: 700; +div.sheet-main{ + width: 750px; + padding: 15px; } -.charsheet .sheet-tab-collps { + +div.sheet-section{ + display: flex; + flex-direction: column; + margin: 0em 0em 1em 0em; + border: 2px solid var(--gray); +} + +div.sheet-title, +div.sheet-sub-title{ + background-color: var(--gray); + text-align: center; + width: 100%; +} +div.sheet-title span, +div.sheet-sub-title span, +span.sheet-sub-title{ + font-weight: 600; +} + + + +/* ---- Section specific ------ */ + +/* Header */ +div.sheet-header{ + flex-flow: row wrap; + align-items: center; + background-image: url(https://parahumans.files.wordpress.com/2011/06/cityscape2.jpg); + background-size: 750px 110px; + background-repeat: no-repeat; + text-shadow:-2px 0 #000000,0 2px #000000,2px 0 #000000,0 -2px #000000; + color: white; +} + +div.sheet-header span.sheet-title{ + font-size: 300%; + width: 250px; +} + +div.sheet-header span.sheet-version{ + font-size: small; +} + +div.sheet-header{ + display: flex; + justify-content: center; +} + +div.sheet-header input{ + width: 350px; + font-size: 28px; + margin-bottom: 20px; +} + + + +/* Main info */ +div.sheet-main-info{ + display: flex; + flex-flow: row wrap; +} + +div.sheet-main-info div{ + display: flex; + flex-flow: row nowrap; + width: 50%; +} + +div.sheet-main-info span{ + background-color: var(--gray); + font-weight: 600; + width: 100px; +} + +div.sheet-main-info input{ + width: 255px; + margin: 0px 0px 4px 2px; + padding-bottom: 1px; + border-style: none none solid none; + border-width: 1px; + border-color: black; + border-radius: 0px; +} + + +/* WOUNDS */ +div.sheet-wounds{ + display:grid; + grid-template-columns: 5.5em repeat(8, 1fr); + grid-template-rows: 0.5fr repeat(3, 1fr); + height: 125px; +} + +div.sheet-wounds div.sheet-title{ + grid-column: span 9; + grid-row: 1; + display: flex; + align-items: center; + justify-content: center; +} +div.sheet-wounds div.sheet-title span{ + padding: 1px; +} + +div.sheet-wounds input[type="text"]{ + width: 80px; + margin-left: 2px; +} + +div.sheet-wounds div{ + border: 1px solid var(--gray); +} + + + +/* Stats & Gear */ + +div.sheet-stats-inventory{ + display: flex; +} + +/* Stats */ +div.sheet-stats{ + display: grid; + grid-auto-flow: column; + grid-template-rows: 0.2fr 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-auto-flow: column; + height:520px; + width: 46%; +} + +div.sheet-stats div{ + border: 1px solid var(--gray); +} + +div.sheet-stats div.sheet-title{ + grid-column: span 4; + grid-row: 1; + display: flex; + justify-content: center; +} +div.sheet-stats div:not(.sheet-title){ + display: flex; + flex-flow: column; + justify-content: center; +} + +div.sheet-stats div.sheet-img-size{ + background-size: 75px 75px; + background-repeat: no-repeat; + align-items: center; + justify-content: flex-end; +} + +div.sheet-stats div.sheet-img-size span{ + font-weight: 600; +} + +div.sheet-stats div.sheet-info span{ + display: flex; + flex-flow: column; + align-items: center; +} + + +div.sheet-stats div.sheet-brawn-img{ + background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Weaverdice/images/brawn.png); +} +div.sheet-stats div.sheet-athletics-img{ + background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Weaverdice/images/athletics.png); +} +div.sheet-stats div.sheet-dexterity-img{ + background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Weaverdice/images/dexterity.png); +} +div.sheet-stats div.sheet-wits-img{ + background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Weaverdice/images/wits.png); +} +div.sheet-stats div.sheet-social-img{ + background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Weaverdice/images/social.png); +} +div.sheet-stats div.sheet-knowledge-img{ + background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Weaverdice/images/knowledge.png); +} +div.sheet-stats div.sheet-guts-img{ + background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Weaverdice/images/guts.png); +} + + +/* Inventory */ +div.sheet-inventory{ + display: flex; + flex-direction: column; + align-items: center; + width: 53%; + margin-left: 1em; +} + +div.sheet-inventory div.sheet-title{ + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + width: 100%; +} + +div.sheet-inventory span{ + text-align: center; +} +div.sheet-inventory input[name="attr_gearname"]{ + width: 120px; +} +div.sheet-inventory input[name="attr_gearnotes"]{ + width: 225px; +} +div.sheet-inventory input[type="number"]{ + width: 32px; +} + + + +/* Skills */ +div.sheet-skill{ + display: flex; + flex-flow: row nowrap; +} +div.sheet-skill .sheet-name{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + width: 115px; +} +div.sheet-skill .sheet-name input[type="text"]{ + width: 110px; + margin-top: 5px; +} +div.sheet-skill .sheet-info{ + display: flex; + flex-direction: column; + width: 600px; +} + +div.sheet-skill .sheet-dice-row{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + padding: 4px 5px 4px 5px; +} +div.sheet-skill select.sheet-dice{ + width: 40px; + margin-bottom: 0px; +} +div.sheet-skill select.sheet-stat{ + width: 90px; + margin-bottom: 0px; +} +div.sheet-skill .sheet-dice-row input[type="text"]{ + width: 90px; +} +div.sheet-skill textarea{ + width: 102%; + margin-left: 3px; +} + +/* territory, allies */ +p { + margin-bottom: 0px; +} +table{ border-collapse: collapse; margin-right: auto; + margin-bottom: 1em; } - -.sheet-n { - display:inline; +table .sheet-section { + width: 345px; } - -.charsheet .sheet-left { - text-align: left; -} -.charsheet .sheet-center { - text-align: center; -} - -.charsheet .sheet-gap { - height: 7pt; -} - -.charsheet .sheet-gap2 { - height: 13pt; -} - -.charsheet .sheet-ability-img { - overflow: hidden; - display: inline-block; - margin: 0.00px 0.00px; - border: 0.00px solid #000000; - transform: rotate(0.00rad) translateZ(0px); - -webkit-transform: rotate(0.00rad) translateZ(0px); - width: 96.00px; - height: 96.00px; - } - - .charsheet .sheet-ability-img-2 { - width: 96.00px; - height: 96.00px; - margin-left: 0.00px; - margin-top: 0.00px; - transform: rotate(0.00rad) translateZ(0px); - -webkit-transform: rotate(0.00rad) translateZ(0px); - } - -.charsheet .sheet-gray-border { - border-right-style: solid; - padding: 2pt 2pt 2pt 2pt; - border-bottom-color: #d9d9d9; - border-top-width: 1pt; - border-right-width: 1pt; - border-left-color: #d9d9d9; - vertical-align: top; - border-right-color: #d9d9d9; - border-left-width: 1pt; - border-top-style: solid; - border-left-style: solid; - border-bottom-width: 1pt; - border-top-color: #d9d9d9; - border-bottom-style: solid; -} - -.charsheet .sheet-c56 { - width: 24pt; -} - -.charsheet .sheet-c11 { - width: 64pt; -} - -.charsheet .sheet-c4 { - width: 82pt; -} -.charsheet .sheet-c45 { +table .sheet-name { width: 88pt; } - -.charsheet .sheet-c52 { - width: 98pt; -} - -.charsheet .sheet-c64 { - width: 155pt; -} -.charsheet .sheet-c53 { - width: 165pt; -} -.charsheet .sheet-c15 { +table .sheet-notes { width: 196pt; } -.charsheet .sheet-c3 { - width: 207pt; -} - -.charsheet .sheet-c35 { - width: 277pt; -} -.charsheet .sheet-c22 { - width: 286pt; -} -.charsheet .sheet-c10 { - width: 575pt; -} -.charsheet .sheet-c29 { - width: 575pt; - height: 140px; -} - -.charsheet .sheet-c43 { - width: 483pt; -} - -.charsheet .sheet-c17 { - line-height: 1.0; - orphans: 2; - widows: 2; - text-align: left; - height: 7pt; -} -.charsheet .sheet-graysides { +table .sheet-gray-border { border-right-style: solid; - padding: 2pt 2pt 2pt 2pt; - border-bottom-color: #ffffff; - border-top-width: 1pt; - border-right-width: 1pt; - border-left-color: #d9d9d9; + padding: 2pt; vertical-align: top; - border-right-color: #d9d9d9; - border-left-width: 1pt; - border-top-style: solid; - border-left-style: solid; - border-bottom-width: 1pt; - width: 18pt; - border-top-color: #ffffff; - border-bottom-style: solid; + border: 1pt solid #d9d9d9; } -.charsheet .sheet-l-font { - font-weight: 400; - font-size: 24pt; - font-family: "Times New Roman"; +table .sheet-bg-gray { + background-color: #d9d9d9; +} +table .sheet-graysides { + padding: 2pt; + vertical-align: top; + border-width: 1pt; + border-color: white var(--gray); + border-style: solid; +} +p.sheet-gap { + height: 4pt; + width: 1em; +} +table .sheet-center{ + display: flex; + justify-content: center; } -.charsheet .sheet-title { - padding-top: 12pt; - color: #000000; - font-weight: 700; - font-size: 16pt; - padding-bottom: 3pt; - font-family: "Arial"; - line-height: 1.0; - orphans: 2; - widows: 2; + +/* Appearance */ +div.sheet-appearance{ + display: flex; + flex-direction: row; +} + +div.sheet-appearance div.sheet-section{ + display: flex; + flex-direction: column; + width: 49%; +} +div.sheet-appearance div.sheet-section:last-child{ + margin-left: 1em; +} + +div.sheet-appearance span{ + background-color: var(--gray); text-align: center; -} -.charsheet .sheet-subtitle { - color: #000000; - font-size: 12pt; - padding-bottom: 3pt; - font-family: "Arial"; - line-height: 1.0; - orphans: 2; - widows: 2; + font-weight: 600; +} + +div.sheet-appearance textarea{ + width: 97%; +} + +/* footer */ +p.sheet-footer{ text-align: center; -} -.charsheet button[type=roll].sheet-d6-dice::before { /*new die changes die roller to d6*/ + font-size:10px; +} + +/* ------------------ Old CSS ------------------- */ + + +/* changes die button icon to d6*/ +.charsheet button[type=roll].sheet-d6-dice::before { font-family: 'dicefontd6',arial; content: 'F '; color: red; } -.charsheet .sheet-header-container { - position: relative; - text-align: center; - color: white; - font-size: 450%; - text-shadow:-2px 0 #000000,0 2px #000000,2px 0 #000000,0 -2px #000000; -} -.charsheet .sheet-header-upper-centered { - position: absolute; - top: 30%; - left: 50%; - transform: translate(-50%, -50%); -} -.charsheet .sheet-header-lower-centered { - position: absolute; - top: 60%; - left: 50%; - transform: translate(-50%, -50%); -} + +/* Change wounds tracker into hearts */ -/* Hide actual radio */ +/* 1 - Hide actual radio */ .charsheet input[type="radio"]{ opacity: 0; - width: 16px; - height: 16px; + width: 20px; + height: 20px; position: relative; - top: 5px; - left: 6px; + left: 45px; margin: -10px; cursor: pointer; z-index: 1; } -/* Fake radio */ +/* 2 - Fake radio */ .charsheet input[type="radio"] + span::before{ - margin-right: 4px; + margin-left: 30px; border: solid 1px #a8a8a8; line-height: 14px; text-align: center; @@ -248,7 +421,7 @@ color: red; width: 12px; height: 12px; - font-size: 28px; + font-size: 35px; -moz-border-radius: 50%; -webkit-border-radius: 50%; @@ -259,6 +432,7 @@ .charsheet input[type="radio"]:checked ~ input[type="radio"] + span::before { content: ""; } + /*-------------------------------------------*/ /*------------- Roll Templates---------------*/ diff --git a/Weaverdice/Weaverdice.html b/Weaverdice/Weaverdice.html index b43821e78c..a48d5cbcff 100644 --- a/Weaverdice/Weaverdice.html +++ b/Weaverdice/Weaverdice.html @@ -1,699 +1,623 @@ -
- - -
Weaver Dice
-
-
-
- - - - - - - - - - - - - - - - - - -
-

PLAYER NAME

- 		-

- 		-

CIVILIAN NAME

- 		-

-
-

ALIGNMENT

- 		-

- 		-

FACTION

- 		-

-
-

AGE

- 		-

- 		-

GENDER

- 		-

-
-

- - - - - - - - - - - -
-

APPEARANCE, COSTUMED

- 		-

- 		-

APPEARANCE, CIVILIAN

-
- - -

- 		- -
-

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

WOUNDS

-
- HEALTH - -

-          -          -          -          -          -          -          - -

-
- STATUS - - - - - - - - - - - - - - - - -
- DEBUFFS - - - - - - - - - - - - - - - - -
-

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

STATS

-
-

-

BRAWN

- 		-

-

ATHLETICS

- 		-

-

DEXTERITY

- 		-

-

WITS

- 		-

-

SOCIAL

- 		-

-

KNOWLEDGE

- 		-

-

GUTS

-
-

Stat

- 		-

Stat

- 		-

Stat

- 		-

Stat

- 		-

Stat

- 		-

Stat

- 		-

Stat

-
-

Modifier

- 		-

Modifier

- 		-

Modifier

- 		-

Modifier

- 		-

Modifier

- 		-

Modifier

- 		-

Modifier

-
-

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

SKILLS

-
-

- -   - Rank -       - -

- 		- Dice: - - Roll Mod: - - Bonus: - - -
-
-

- -   - Rank - -

- 		- Dice: - - Roll Mod: - - Bonus: - - -
-
-

- -   - Rank - -

- 		- Dice: - - Roll Mod: - - Bonus: - - -
-
-

- -   - Rank - -

- 		- Dice: - - Roll Mod: - - Bonus: - - -
-
-

- -   - Rank - -

- 		- Dice: - - Roll Mod: - - Bonus: - - -
-

- - - - - - - -
-

POWER

-
- -
-

- - - - - - - - -
-

PERKS, FLAWS

-
- -
-

- - - - - - - - - - - - - - - - - - - - -
-

EQUIPMENT

- 		-

- 		-

GEAR

-
- EQUIPMENT - - NOTES - - WT - -

- 		- GEAR - - NOTES - - WT -
-
- -
-
-
- 		-

- 		-
- -
-
-
-
-

- - - - - - - -
-

REPUTATION

-
- -
-

- - - - - - - -
-

TRIGGER EVENT

-
- -
-

- - - - - - - -
-

HISTORY

-
- -
-

- - - - - - - -
-

PERSONALITY

-
- -
-

- - - - - - - -
-

ACHIEVEMENTS

-
- -
-

- - - - - - - -
-

CURRENT GOALS

-
- -
-

- - - - - - - - - - - - - - - - - - -
-

ASSETS

- 		-

- 		-

ALLIES, UNDERLINGS

-
- ASSET - -

NOTES

- 		-

- 		- ALLY - -

NOTES

-
-
- -
-
- 		-

- 		-
- -
-
-
-

- +
+ + + +
+ Weaver Dice + +
+ +
+
+ + + +
+
+ PLAYER NAME + +
+
+ CIVILIAN NAME + +
+
+ AFFILIATION + +
+
+ FACTION + +
+
+ AGE + +
+
+ GENDER + +
+
+ + +
+ +
+ WOUNDS +
+ +
+ STATUS +
+ +
+
+
+
+
+
+
+
+ +
+ EFFECTS +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ DEBUFFS +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ + + + +
+ + +
+ +
+ STATS +
+ +
+ BRAWN + +
+
+ DEXTERITY + +
+ +
+ GUTS + + +
+ +
+ Stat: + Modifier: + +
+ +
+ Stat: + Modifier: + +
+ + + +
+ Stat: + Modifier: + +
+ + +
+ ATHLETICS + +
+
+ WITS + +
+
+ KNOWLEDGE + +
+
+ +
+ Stat: + Modifier: + +
+ +
+ Stat: + Modifier: + +
+ +
+ Stat: + Modifier: +
+ +
+ +
+ + + +
+
+ GEAR + NOTES + WEIGHT +
+
+ + + +
+
+ +
+ + + + +
+
+ + +
+
+
+ + Dice: + + + + Roll Mod: + + + + Bonus: + + +
+ +
+
+ + +
+ +
+ + +
+
+
+ + Dice: + + + + Roll Mod: + + + + Bonus: + + +
+ +
+
+ + +
+
+ + +
+
+
+ + Dice: + + + + Roll Mod: + + + + Bonus: + + +
+ +
+
+ + +
+
+ + +
+
+
+ + Dice: + + + + Roll Mod: + + + + Bonus: + + +
+ +
+
+ + +
+
+ + +
+
+
+ + Dice: + + + + Roll Mod: + + + + Bonus: + + +
+ +
+
+ + + +
+
+ POWER +
+ +
+ + +
+
+ PERKS, FLAWS +
+ +
+ + +
+
+ REPUTATION +
+ +
+ + + +
- - - - - - - - - + + + +
-

RESOURCES

+ 		+

ASSETS

 +

-

TERRITORY

+ 		+

ALLIES, UNDERLINGS
- RESOURCE + + ASSET -

NOTES

+ 		+

NOTES

 +

- AREA + + ALLY -

RELEVANCE

+ 		+

NOTES
+ +
+ +
+ +
+
+ 		+

+ 		+
+ +
+ +
+
+
+ + + +

+ + + + + + + + + + + + + + + - -
+

RESOURCES

+ 		+

+ 		+

TERRITORY

+
+ RESOURCE + +

NOTES

+ 		+

+ 		+ AREA + +

RELEVANCE

+
- -
+ +
+ +
+

+
- -
+ +
+ +

- - - - - - - -
-

NOTES

-
- -
-

-

Author: Andreas J. | UserID: 1223200 | Weaver Dice

+ + +
+
+ APPEARANCE, COSTUMED + +
+
+ APPEARANCE, CIVILIAN + +
+
+ + + +
+
+ TRIGGER EVENT +
+ +
+ + +
+
+ PERSONALITY +
+ +
+ +
+
+ HISTORY +
+ +
+ + +
+
+ ACHIEVEMENTS +
+ +
+ + +
+
+ CURRENT GOALS +
+ +
+ + +
+
+ NOTES +
+ +
+ + + +

+

Author: Andreas J. | UserID: 1223200 | Weaver Dice

- + + + + diff --git a/Weaverdice/images/image4.png b/Weaverdice/images/athletics.png similarity index 100% rename from Weaverdice/images/image4.png rename to Weaverdice/images/athletics.png diff --git a/Weaverdice/images/image2.png b/Weaverdice/images/brawn.png similarity index 100% rename from Weaverdice/images/image2.png rename to Weaverdice/images/brawn.png diff --git a/Weaverdice/images/image1.png b/Weaverdice/images/dexterity.png similarity index 100% rename from Weaverdice/images/image1.png rename to Weaverdice/images/dexterity.png diff --git a/Weaverdice/images/image7.png b/Weaverdice/images/guts.png similarity index 100% rename from Weaverdice/images/image7.png rename to Weaverdice/images/guts.png diff --git a/Weaverdice/images/image5.png b/Weaverdice/images/knowledge.png similarity index 100% rename from Weaverdice/images/image5.png rename to Weaverdice/images/knowledge.png diff --git a/Weaverdice/images/image6.png b/Weaverdice/images/social.png similarity index 100% rename from Weaverdice/images/image6.png rename to Weaverdice/images/social.png diff --git a/Weaverdice/images/image3.png b/Weaverdice/images/wits.png similarity index 100% rename from Weaverdice/images/image3.png rename to Weaverdice/images/wits.png
{{name}}