From 5db79dfa4b491bdc50e1075a42362b27e10963ef Mon Sep 17 00:00:00 2001 From: Jennie Robinson Faber Date: Tue, 14 Nov 2023 14:03:23 -0500 Subject: [PATCH] Implement player planet panel --- css/main.css | 32 +- package-lock.json | 1 + package.json | 1 + postcss.config.js | 3 +- tailwind.config.js | 9 +- twine_src/css/output.css | 850 +++--------------------------------- twine_src/scripts/2.init.js | 92 +++- twine_src/setup.twee | 4 +- twine_src/story.twee | 4 +- 9 files changed, 171 insertions(+), 825 deletions(-) diff --git a/css/main.css b/css/main.css index 5f8ac37..339c7ac 100644 --- a/css/main.css +++ b/css/main.css @@ -43,7 +43,11 @@ html { #planet-info { @apply flex flex-row self-end flex-grow z-20 justify-end h-1/3 mx-6; } - +.player-screen { + #planet-info { + @apply h-2/3; + } +} #rep { @apply flex flex-col self-start z-30 mr-6 w-64; } @@ -61,7 +65,7 @@ html { } .passage-choices span { - @apply block font-bold cursor-pointer hover:text-neutral-950 text-neutral-800 border-b-2 border-b-neutral-800; + @apply block font-bold cursor-pointer hover:text-neutral-950 text-neutral-800; } .active-turn img { @@ -102,6 +106,30 @@ body.crisis #weekPreamble { @apply content-end justify-end mr-6 flex-col p-6 overflow-y-auto bg-neutral-100 bg-opacity-75 rounded-t-2xl h-full w-full; } +#hud.player-screen #passageContainer { + @apply mr-0 flex-col p-6 overflow-y-auto bg-neutral-900 bg-opacity-75 rounded-2xl h-full w-full text-neutral-200; +} + +#hud.player-screen #passageContainer > * { + @apply mb-4 text-neutral-200; +} + +#hud.player-screen #passageContainer #passage h2 { + @apply text-2xl font-bold text-neutral-50 mb-4; +} + +#hud.player-screen #passageContainer #passage p { + @apply text-base text-neutral-200 mb-4; +} + +#hud.player-screen #passageContainer #passage pre { + @apply font-mono text-base text-neutral-200; +} + +#hud.player-screen #rep { + @apply hidden; +} + body.map { padding: 0; overflow: hidden; diff --git a/package-lock.json b/package-lock.json index 204cf57..0100e87 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "autoprefixer": "^10.4.16", "postcss": "^8.4.31", "postcss-import": "^15.1.0", + "postcss-nested": "^6.0.1", "postcss-nesting": "^12.0.1", "tailwindcss": "^3.3.5" } diff --git a/package.json b/package.json index 270daf9..0951620 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "autoprefixer": "^10.4.16", "postcss": "^8.4.31", "postcss-import": "^15.1.0", + "postcss-nested": "^6.0.1", "postcss-nesting": "^12.0.1", "tailwindcss": "^3.3.5" }, diff --git a/postcss.config.js b/postcss.config.js index 379f4bb..6887c82 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,7 +1,8 @@ -// postcss.config.js module.exports = { plugins: { "postcss-import": {}, "tailwindcss/nesting": {}, + tailwindcss: {}, + autoprefixer: {}, }, }; diff --git a/tailwind.config.js b/tailwind.config.js index 3d042a5..5421de3 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,16 +1,15 @@ -/** @type {import('tailwindcss').Config} */ +/* @type {import('tailwindcss').Config} */ module.exports = { - content: [ - "./twine_src/**/*.{html,js,twee}", - ], + content: ["./twine_src/**/*.{html,js,twee}"], theme: { extend: { fontFamily: { body: "Helvetica", display: "Handjet", sans: "Helvetica", + mono: "Courier New", }, }, }, - plugins: [require("@tailwindcss/typography"), require('@tailwindcss/forms')], + plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")], }; diff --git a/twine_src/css/output.css b/twine_src/css/output.css index abb7b05..c813687 100644 --- a/twine_src/css/output.css +++ b/twine_src/css/output.css @@ -131,7 +131,7 @@ code, kbd, samp, pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: Courier New; /* 1 */ font-size: 1em; /* 2 */ @@ -741,794 +741,6 @@ select{ } } -.prose{ - color: var(--tw-prose-body); - max-width: 65ch; -} - -.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 1.25em; - margin-bottom: 1.25em; -} - -.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: var(--tw-prose-lead); - font-size: 1.25em; - line-height: 1.6; - margin-top: 1.2em; - margin-bottom: 1.2em; -} - -.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: var(--tw-prose-links); - text-decoration: underline; - font-weight: 500; -} - -.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: var(--tw-prose-bold); - font-weight: 600; -} - -.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: inherit; -} - -.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: inherit; -} - -.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: inherit; -} - -.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - list-style-type: decimal; - margin-top: 1.25em; - margin-bottom: 1.25em; - padding-left: 1.625em; -} - -.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - list-style-type: upper-alpha; -} - -.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - list-style-type: lower-alpha; -} - -.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - list-style-type: upper-alpha; -} - -.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - list-style-type: lower-alpha; -} - -.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - list-style-type: upper-roman; -} - -.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - list-style-type: lower-roman; -} - -.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - list-style-type: upper-roman; -} - -.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - list-style-type: lower-roman; -} - -.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - list-style-type: decimal; -} - -.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - list-style-type: disc; - margin-top: 1.25em; - margin-bottom: 1.25em; - padding-left: 1.625em; -} - -.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{ - font-weight: 400; - color: var(--tw-prose-counters); -} - -.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{ - color: var(--tw-prose-bullets); -} - -.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: var(--tw-prose-headings); - font-weight: 600; - margin-top: 1.25em; -} - -.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - border-color: var(--tw-prose-hr); - border-top-width: 1px; - margin-top: 3em; - margin-bottom: 3em; -} - -.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - font-weight: 500; - font-style: italic; - color: var(--tw-prose-quotes); - border-left-width: 0.25rem; - border-left-color: var(--tw-prose-quote-borders); - quotes: "\201C""\201D""\2018""\2019"; - margin-top: 1.6em; - margin-bottom: 1.6em; - padding-left: 1em; -} - -.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{ - content: open-quote; -} - -.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{ - content: close-quote; -} - -.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: var(--tw-prose-headings); - font-weight: 800; - font-size: 2.25em; - margin-top: 0; - margin-bottom: 0.8888889em; - line-height: 1.1111111; -} - -.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - font-weight: 900; - color: inherit; -} - -.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: var(--tw-prose-headings); - font-weight: 700; - font-size: 1.5em; - margin-top: 2em; - margin-bottom: 1em; - line-height: 1.3333333; -} - -.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - font-weight: 800; - color: inherit; -} - -.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: var(--tw-prose-headings); - font-weight: 600; - font-size: 1.25em; - margin-top: 1.6em; - margin-bottom: 0.6em; - line-height: 1.6; -} - -.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - font-weight: 700; - color: inherit; -} - -.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: var(--tw-prose-headings); - font-weight: 600; - margin-top: 1.5em; - margin-bottom: 0.5em; - line-height: 1.5; -} - -.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - font-weight: 700; - color: inherit; -} - -.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 2em; - margin-bottom: 2em; -} - -.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - display: block; - margin-top: 2em; - margin-bottom: 2em; -} - -.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - font-weight: 500; - font-family: inherit; - color: var(--tw-prose-kbd); - box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%); - font-size: 0.875em; - border-radius: 0.3125rem; - padding-top: 0.1875em; - padding-right: 0.375em; - padding-bottom: 0.1875em; - padding-left: 0.375em; -} - -.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: var(--tw-prose-code); - font-weight: 600; - font-size: 0.875em; -} - -.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{ - content: "`"; -} - -.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{ - content: "`"; -} - -.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: inherit; -} - -.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: inherit; -} - -.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: inherit; - font-size: 0.875em; -} - -.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: inherit; - font-size: 0.9em; -} - -.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: inherit; -} - -.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: inherit; -} - -.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: inherit; -} - -.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: var(--tw-prose-pre-code); - background-color: var(--tw-prose-pre-bg); - overflow-x: auto; - font-weight: 400; - font-size: 0.875em; - line-height: 1.7142857; - margin-top: 1.7142857em; - margin-bottom: 1.7142857em; - border-radius: 0.375rem; - padding-top: 0.8571429em; - padding-right: 1.1428571em; - padding-bottom: 0.8571429em; - padding-left: 1.1428571em; -} - -.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - background-color: transparent; - border-width: 0; - border-radius: 0; - padding: 0; - font-weight: inherit; - color: inherit; - font-size: inherit; - font-family: inherit; - line-height: inherit; -} - -.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{ - content: none; -} - -.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{ - content: none; -} - -.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - width: 100%; - table-layout: auto; - text-align: left; - margin-top: 2em; - margin-bottom: 2em; - font-size: 0.875em; - line-height: 1.7142857; -} - -.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - border-bottom-width: 1px; - border-bottom-color: var(--tw-prose-th-borders); -} - -.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: var(--tw-prose-headings); - font-weight: 600; - vertical-align: bottom; - padding-right: 0.5714286em; - padding-bottom: 0.5714286em; - padding-left: 0.5714286em; -} - -.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - border-bottom-width: 1px; - border-bottom-color: var(--tw-prose-td-borders); -} - -.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - border-bottom-width: 0; -} - -.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - vertical-align: baseline; -} - -.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - border-top-width: 1px; - border-top-color: var(--tw-prose-th-borders); -} - -.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - vertical-align: top; -} - -.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0; - margin-bottom: 0; -} - -.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - color: var(--tw-prose-captions); - font-size: 0.875em; - line-height: 1.4285714; - margin-top: 0.8571429em; -} - -.prose{ - --tw-prose-body: #374151; - --tw-prose-headings: #111827; - --tw-prose-lead: #4b5563; - --tw-prose-links: #111827; - --tw-prose-bold: #111827; - --tw-prose-counters: #6b7280; - --tw-prose-bullets: #d1d5db; - --tw-prose-hr: #e5e7eb; - --tw-prose-quotes: #111827; - --tw-prose-quote-borders: #e5e7eb; - --tw-prose-captions: #6b7280; - --tw-prose-kbd: #111827; - --tw-prose-kbd-shadows: 17 24 39; - --tw-prose-code: #111827; - --tw-prose-pre-code: #e5e7eb; - --tw-prose-pre-bg: #1f2937; - --tw-prose-th-borders: #d1d5db; - --tw-prose-td-borders: #e5e7eb; - --tw-prose-invert-body: #d1d5db; - --tw-prose-invert-headings: #fff; - --tw-prose-invert-lead: #9ca3af; - --tw-prose-invert-links: #fff; - --tw-prose-invert-bold: #fff; - --tw-prose-invert-counters: #9ca3af; - --tw-prose-invert-bullets: #4b5563; - --tw-prose-invert-hr: #374151; - --tw-prose-invert-quotes: #f3f4f6; - --tw-prose-invert-quote-borders: #374151; - --tw-prose-invert-captions: #9ca3af; - --tw-prose-invert-kbd: #fff; - --tw-prose-invert-kbd-shadows: 255 255 255; - --tw-prose-invert-code: #fff; - --tw-prose-invert-pre-code: #d1d5db; - --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); - --tw-prose-invert-th-borders: #4b5563; - --tw-prose-invert-td-borders: #374151; - font-size: 1rem; - line-height: 1.75; -} - -.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0; - margin-bottom: 0; -} - -.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 2em; - margin-bottom: 2em; -} - -.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0.5em; - margin-bottom: 0.5em; -} - -.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - padding-left: 0.375em; -} - -.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - padding-left: 0.375em; -} - -.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0.75em; - margin-bottom: 0.75em; -} - -.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 1.25em; -} - -.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-bottom: 1.25em; -} - -.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 1.25em; -} - -.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-bottom: 1.25em; -} - -.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0.75em; - margin-bottom: 0.75em; -} - -.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 1.25em; - margin-bottom: 1.25em; -} - -.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0.5em; - padding-left: 1.625em; -} - -.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0; -} - -.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0; -} - -.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0; -} - -.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0; -} - -.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - padding-left: 0; -} - -.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - padding-right: 0; -} - -.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - padding-top: 0.5714286em; - padding-right: 0.5714286em; - padding-bottom: 0.5714286em; - padding-left: 0.5714286em; -} - -.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - padding-left: 0; -} - -.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - padding-right: 0; -} - -.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 2em; - margin-bottom: 2em; -} - -.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0; -} - -.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-bottom: 0; -} - -.prose-2xl{ - font-size: 1.5rem; - line-height: 1.6666667; -} - -.prose-2xl :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 1.3333333em; - margin-bottom: 1.3333333em; -} - -.prose-2xl :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - font-size: 1.25em; - line-height: 1.4666667; - margin-top: 1.0666667em; - margin-bottom: 1.0666667em; -} - -.prose-2xl :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 1.7777778em; - margin-bottom: 1.7777778em; - padding-left: 1.1111111em; -} - -.prose-2xl :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - font-size: 2.6666667em; - margin-top: 0; - margin-bottom: 0.875em; - line-height: 1; -} - -.prose-2xl :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - font-size: 2em; - margin-top: 1.5em; - margin-bottom: 0.8333333em; - line-height: 1.0833333; -} - -.prose-2xl :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - font-size: 1.5em; - margin-top: 1.5555556em; - margin-bottom: 0.6666667em; - line-height: 1.2222222; -} - -.prose-2xl :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 1.6666667em; - margin-bottom: 0.6666667em; - line-height: 1.5; -} - -.prose-2xl :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 2em; - margin-bottom: 2em; -} - -.prose-2xl :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 2em; - margin-bottom: 2em; -} - -.prose-2xl :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0; - margin-bottom: 0; -} - -.prose-2xl :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 2em; - margin-bottom: 2em; -} - -.prose-2xl :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - font-size: 0.8333333em; - border-radius: 0.375rem; - padding-top: 0.25em; - padding-right: 0.3333333em; - padding-bottom: 0.25em; - padding-left: 0.3333333em; -} - -.prose-2xl :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - font-size: 0.8333333em; -} - -.prose-2xl :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - font-size: 0.875em; -} - -.prose-2xl :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - font-size: 0.8888889em; -} - -.prose-2xl :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - font-size: 0.8333333em; - line-height: 1.8; - margin-top: 2em; - margin-bottom: 2em; - border-radius: 0.5rem; - padding-top: 1.2em; - padding-right: 1.6em; - padding-bottom: 1.2em; - padding-left: 1.6em; -} - -.prose-2xl :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 1.3333333em; - margin-bottom: 1.3333333em; - padding-left: 1.5833333em; -} - -.prose-2xl :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 1.3333333em; - margin-bottom: 1.3333333em; - padding-left: 1.5833333em; -} - -.prose-2xl :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0.5em; - margin-bottom: 0.5em; -} - -.prose-2xl :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - padding-left: 0.4166667em; -} - -.prose-2xl :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - padding-left: 0.4166667em; -} - -.prose-2xl :where(.prose-2xl > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0.8333333em; - margin-bottom: 0.8333333em; -} - -.prose-2xl :where(.prose-2xl > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 1.3333333em; -} - -.prose-2xl :where(.prose-2xl > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-bottom: 1.3333333em; -} - -.prose-2xl :where(.prose-2xl > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 1.3333333em; -} - -.prose-2xl :where(.prose-2xl > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-bottom: 1.3333333em; -} - -.prose-2xl :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0.6666667em; - margin-bottom: 0.6666667em; -} - -.prose-2xl :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 1.3333333em; - margin-bottom: 1.3333333em; -} - -.prose-2xl :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 1.3333333em; -} - -.prose-2xl :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0.5em; - padding-left: 1.5833333em; -} - -.prose-2xl :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 3em; - margin-bottom: 3em; -} - -.prose-2xl :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0; -} - -.prose-2xl :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0; -} - -.prose-2xl :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0; -} - -.prose-2xl :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0; -} - -.prose-2xl :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - font-size: 0.8333333em; - line-height: 1.4; -} - -.prose-2xl :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - padding-right: 0.6em; - padding-bottom: 0.8em; - padding-left: 0.6em; -} - -.prose-2xl :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - padding-left: 0; -} - -.prose-2xl :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - padding-right: 0; -} - -.prose-2xl :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - padding-top: 0.8em; - padding-right: 0.6em; - padding-bottom: 0.8em; - padding-left: 0.6em; -} - -.prose-2xl :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - padding-left: 0; -} - -.prose-2xl :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - padding-right: 0; -} - -.prose-2xl :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 2em; - margin-bottom: 2em; -} - -.prose-2xl :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0; - margin-bottom: 0; -} - -.prose-2xl :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - font-size: 0.8333333em; - line-height: 1.6; - margin-top: 1em; -} - -.prose-2xl :where(.prose-2xl > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-top: 0; -} - -.prose-2xl :where(.prose-2xl > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ - margin-bottom: 0; -} - -.prose-neutral{ - --tw-prose-body: #404040; - --tw-prose-headings: #171717; - --tw-prose-lead: #525252; - --tw-prose-links: #171717; - --tw-prose-bold: #171717; - --tw-prose-counters: #737373; - --tw-prose-bullets: #d4d4d4; - --tw-prose-hr: #e5e5e5; - --tw-prose-quotes: #171717; - --tw-prose-quote-borders: #e5e5e5; - --tw-prose-captions: #737373; - --tw-prose-kbd: #171717; - --tw-prose-kbd-shadows: 23 23 23; - --tw-prose-code: #171717; - --tw-prose-pre-code: #e5e5e5; - --tw-prose-pre-bg: #262626; - --tw-prose-th-borders: #d4d4d4; - --tw-prose-td-borders: #e5e5e5; - --tw-prose-invert-body: #d4d4d4; - --tw-prose-invert-headings: #fff; - --tw-prose-invert-lead: #a3a3a3; - --tw-prose-invert-links: #fff; - --tw-prose-invert-bold: #fff; - --tw-prose-invert-counters: #a3a3a3; - --tw-prose-invert-bullets: #525252; - --tw-prose-invert-hr: #404040; - --tw-prose-invert-quotes: #f5f5f5; - --tw-prose-invert-quote-borders: #404040; - --tw-prose-invert-captions: #a3a3a3; - --tw-prose-invert-kbd: #fff; - --tw-prose-invert-kbd-shadows: 255 255 255; - --tw-prose-invert-code: #fff; - --tw-prose-invert-pre-code: #d4d4d4; - --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); - --tw-prose-invert-th-borders: #525252; - --tw-prose-invert-td-borders: #404040; -} - .visible{ visibility: visible; } @@ -1809,6 +1021,12 @@ html { align-self: flex-end; } +.player-screen { + #planet-info{ + height: 66.666667%; + } +} + #rep{ z-index: 30; margin-right: 1.5rem; @@ -1842,9 +1060,6 @@ html { .passage-choices span{ display: block; cursor: pointer; - border-bottom-width: 2px; - --tw-border-opacity: 1; - border-bottom-color: rgb(38 38 38 / var(--tw-border-opacity)); font-weight: 700; --tw-text-opacity: 1; color: rgb(38 38 38 / var(--tw-text-opacity)); @@ -1925,6 +1140,55 @@ body.crisis #weekPreamble{ padding: 1.5rem; } +#hud.player-screen #passageContainer{ + margin-right: 0px; + height: 100%; + width: 100%; + flex-direction: column; + overflow-y: auto; + border-radius: 1rem; + background-color: rgb(23 23 23 / var(--tw-bg-opacity)); + --tw-bg-opacity: 0.75; + padding: 1.5rem; + --tw-text-opacity: 1; + color: rgb(229 229 229 / var(--tw-text-opacity)); +} + +#hud.player-screen #passageContainer > *{ + margin-bottom: 1rem; + --tw-text-opacity: 1; + color: rgb(229 229 229 / var(--tw-text-opacity)); +} + +#hud.player-screen #passageContainer #passage h2{ + margin-bottom: 1rem; + font-size: 1.5rem; + line-height: 2rem; + font-weight: 700; + --tw-text-opacity: 1; + color: rgb(250 250 250 / var(--tw-text-opacity)); +} + +#hud.player-screen #passageContainer #passage p{ + margin-bottom: 1rem; + font-size: 1rem; + line-height: 1.5rem; + --tw-text-opacity: 1; + color: rgb(229 229 229 / var(--tw-text-opacity)); +} + +#hud.player-screen #passageContainer #passage pre{ + font-family: Courier New; + font-size: 1rem; + line-height: 1.5rem; + --tw-text-opacity: 1; + color: rgb(229 229 229 / var(--tw-text-opacity)); +} + +#hud.player-screen #rep{ + display: none; +} + body.map { padding: 0; overflow: hidden; @@ -2111,7 +1375,7 @@ div[data-next]:hover{ padding-right: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: Courier New; font-size: 1.125rem; line-height: 1.75rem; --tw-text-opacity: 1; diff --git a/twine_src/scripts/2.init.js b/twine_src/scripts/2.init.js index 06aa500..9779908 100644 --- a/twine_src/scripts/2.init.js +++ b/twine_src/scripts/2.init.js @@ -2,6 +2,7 @@ window.setup = window.setup || {}; $(document).ready(function () { $.getScript("https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"); + // Assuming setup.returnToMap is your function to return to the map setup.game = { planets: [ @@ -163,6 +164,7 @@ $(document).ready(function () { ).value; story.state.playerPlanet = { + id: -1, name: planetName, description: projectDescription, imgSrc: planetImgSrc, @@ -225,6 +227,7 @@ $(document).ready(function () { setup.renderPlanetPassage = function (planetIndex) { setup.startObserving(); + console.log("Rendering passage for planet index:", planetIndex); if (story.state.scenarioCompletedThisTurn) { console.log("A scenario has already been completed this turn."); @@ -305,13 +308,29 @@ $(document).ready(function () { setup.returnToMap = function () { var hud = document.getElementById("hud"); var mapScreen = document.getElementById("mapScreen"); - var passageContainer = document.getElementById("passageContainer"); + var passage = document.getElementById("passage"); + + // Clearing the content of planet-splash and rep + var splashContainer = document.getElementById("planet-splash"); + var repContainer = document.getElementById("rep"); + + if (splashContainer) { + splashContainer.style.backgroundImage = ""; + splashContainer.innerHTML = ""; + } + + if (repContainer) { + repContainer.innerHTML = ""; + } if (hud) hud.style.display = "none"; if (mapScreen) mapScreen.style.display = "grid"; - if (passage) passage.innerHTML = ""; + if (passageContainer) + passageContainer.innerHTML = "
"; story.state.currentPlanet = null; + + if (hud) hud.classList.remove("player-screen"); }; setup.showRandomIncompleteScenario = function () { @@ -400,14 +419,13 @@ $(document).ready(function () { img.className = `planet player-planet`; img.src = playerPlanet.imgSrc; - const clickHandler = setup.handlePlanetClick(-1); - setup.planetClickHandlers[-1] = clickHandler; - img.addEventListener("click", clickHandler); + // const clickHandler = setup.handlePlanetClick(-1); + // img.addEventListener("click", clickHandler); + img.addEventListener("click", setup.handlePlayerPlanetClick); playerPlanetContainer.appendChild(img); setup.appendTooltip(playerPlanet, playerPlanetContainer); mapScreen.appendChild(playerPlanetContainer); - checkAllPlanetsLoaded(++loadedPlanets, totalPlanets); } } }; @@ -418,6 +436,38 @@ $(document).ready(function () { } } + setup.renderPlayerPlanetPassage = function () { + var passage = document.getElementById("passage"); + var passageContent = "

" + story.state.playerName + "'s Project

"; + passageContent += "

" + story.state.playerPlanet.description + "

"; + + passageContent += "

Help Chart

"; + passageContent += "
";
+    setup.game.planets.forEach(function (planet) {
+      var helpedTimes =
+        story.state.helpedPlanets.find((p) => p.planet === planet.id)
+          ?.timesHelped || 0;
+      passageContent += planet.name + ": " + "❤️".repeat(helpedTimes) + "\n";
+    });
+    passageContent += "
"; + + if (passage) { + passage.innerHTML = passageContent; + if (passageContainer) { + passageContainer.style.display = "block"; + } + } + + // Add the player-screen class to HUD when displaying player planet content + var hud = document.getElementById("hud"); + if (hud) hud.classList.add("player-screen"); + document + .getElementById("planet-splash") + .addEventListener("click", function () { + setup.returnToMap(); + }); + }; + setup.checkForIncompleteScenarios = function () { var incompleteScenarios = setup.game.scenarios.filter(function (scenario) { return !scenario.complete; @@ -654,33 +704,32 @@ $(document).ready(function () { } }; - setup.handlePlanetClick = function (planetId) { + setup.handlePlanetClick = function (planetIndex) { return function () { - console.log("Clicked Planet ID:", planetId); - const planet = setup.game.planets.find((p) => p.id === planetId); - console.log("Clicked Planet Data:", planet); - - if (!planet) { - console.error("Planet not found for ID:", planetId); - return; - } - + // if (planetIndex === -1) { + // console.log("Player's planet clicked."); + // setup.renderPlayerPlanetPassage(); + // setup.toggleHUD(true); + // return; + // } + + console.log("Clicked Planet Index:", planetIndex); if (!story.state.scenarioCompletedThisTurn) { if ( story.state.isCrisisTurn && - story.state.crisisOfferingPlanets.includes(planet.id) + story.state.crisisOfferingPlanets.includes(planetIndex) ) { const crisisScenario = either(story.state.crisisScenariosForTurn); if (crisisScenario) { setup.renderCrisisPassage( - planet.id, + planetIndex, crisisScenario.scenarioPassage ); } else { console.error("No crisis scenario available for this turn."); } } else if (!story.state.isCrisisTurn) { - setup.renderPlanetPassage(planet.id); + setup.renderPlanetPassage(planetIndex); } setup.toggleHUD(true); } else { @@ -688,6 +737,11 @@ $(document).ready(function () { } }; }; + setup.handlePlayerPlanetClick = function () { + console.log("Player's planet clicked"); + setup.renderPlayerPlanetPassage(); + setup.toggleHUD(true); + }; setup.attachEventListenersToPlanets = function () { document.querySelectorAll(".planet").forEach((planetElement, index) => { diff --git a/twine_src/setup.twee b/twine_src/setup.twee index e03d25a..d6946d6 100644 --- a/twine_src/setup.twee +++ b/twine_src/setup.twee @@ -65,7 +65,7 @@ Jammy Jam :: Map Screen [scripted] -<% $("body").removeClass("customization").addClass("map") %> + <% $("body").removeClass("customization").addClass("map") %>
@@ -84,7 +84,7 @@ Jammy Jam
-
+
diff --git a/twine_src/story.twee b/twine_src/story.twee index 585c870..ae4afd8 100644 --- a/twine_src/story.twee +++ b/twine_src/story.twee @@ -165,9 +165,7 @@ Time to compose a symphony for the Sun… Move on… - - -:: Week 4 crisis scenario [scenario crisis] +:: Week 4 An Offer of Help [scenario crisis] <%= setup.getPlanet(s.currentPlanet) %> offers to help me find the source of the problem. Let's go!