Skip to content

Commit

Permalink
Merge pull request #9 from OpenUpSA/feature/bonus-scenario-page
Browse files Browse the repository at this point in the history 
Feature/bonus scenario page
  • Loading branch information
@paulmwatson
paulmwatson authored Sep 4, 2024
2 parents 2d894c9 + e6f99b0 commit 20ec59c
Show file tree
Hide file tree
Showing 13 changed files with 332 additions and 60 deletions.
8 changes: 8 additions & 0 deletions app/[locale]/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,4 +120,12 @@ body {
.ff-krub-bold {
font-family: Krub-Bold, sans-serif;
}

.ff-new-title-regular {
font-family: NewTitle-Regular, sans-serif;
}

.ff-new-title-bold {
font-family: NewTitle-Bold, sans-serif;
}
}
10 changes: 5 additions & 5 deletions app/[locale]/how-does-it-work/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function Page({
width={950}
height={839}
sizes="(max-width: 479px) 457.5625px, (max-width: 767px) 100vw, (max-width: 991px) 93vw, 900px"
className="display-block max-w-lg"
className="display-block max-w-lg mx-auto"
/>
{tP("your-role.content")}
</p>
Expand All @@ -44,7 +44,7 @@ export default function Page({
width={950}
height={135}
sizes="(max-width: 479px) 457.5625px, (max-width: 767px) 100vw, (max-width: 991px) 93vw, 900px"
className="display-block max-w-lg"
className="display-block max-w-lg mx-auto"
/>
{tP("step-1.content")}
</p>
Expand All @@ -58,7 +58,7 @@ export default function Page({
width={950}
height={135}
sizes="(max-width: 479px) 457.5625px, (max-width: 767px) 100vw, (max-width: 991px) 93vw, 900px"
className="display-block max-w-lg"
className="display-block max-w-lg mx-auto"
/>
{tP("step-2.content")}
</p>
Expand All @@ -72,7 +72,7 @@ export default function Page({
width={950}
height={135}
sizes="(max-width: 479px) 457.5625px, (max-width: 767px) 100vw, (max-width: 991px) 93vw, 900px"
className="display-block max-w-lg"
className="display-block max-w-lg mx-auto"
/>
{tP("step-3.content")}
</p>
Expand All @@ -86,7 +86,7 @@ export default function Page({
width={950}
height={135}
sizes="(max-width: 479px) 457.5625px, (max-width: 767px) 100vw, (max-width: 991px) 93vw, 900px"
className="display-block max-w-lg"
className="display-block max-w-lg mx-auto"
/>
{tP("step-4.content")}
</p>
Expand Down
4 changes: 2 additions & 2 deletions app/[locale]/scenarios/[slug]/[answer]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,14 @@ export default function Page({
href={`/scenarios/${nextScenario.slug}`}
className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
>
Next Scenario
{t("next-scenario")}
</Link>
) : (
<Link
href={`/debrief`}
className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
>
Finish!
{t("finish")}
</Link>
)}
</>
Expand Down
102 changes: 69 additions & 33 deletions app/[locale]/scenarios/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,30 @@
import { useTranslations } from "next-intl";
import { redirect } from "next/navigation";
import { Link } from "app/[locale]/navigation";
import Image from "next/image";

import {
AwaitedReactNode,
JSXElementConstructor,
Key,
ReactElement,
ReactNode,
ReactPortal,
useEffect,
useState,
} from "react";
import { Key } from "react";

export default function Page({ params }: { params: { slug: string } }) {
export default function Page({
params,
}: {
params: { locale: string; slug: string };
}) {
const { locale, slug } = params;
const t = useTranslations("global");
const scenarios = t.raw("scenarios");
const scenario = scenarios.find(
(scenario: { slug: string }) => scenario.slug === params.slug
(scenario: { slug: string }) => scenario.slug === slug
);
const scenarioIndex = scenarios.findIndex(
(s: { slug: string }) => s.slug === params.slug
(s: { slug: string }) => s.slug === slug
);
if (!scenario) {
redirect("/");
}
const nextScenarioIndex =
scenarios.findIndex((s: any) => s.slug === slug) + 1;
const nextScenario = scenarios[nextScenarioIndex];
return (
<>
<div className="grid justify-items-center">
Expand All @@ -36,27 +36,63 @@ export default function Page({ params }: { params: { slug: string } }) {
))}
</ul>
</div>
<h1>{t("title")}</h1>
<p className="text-center ff-new-title-regular text-2xl">
{t("scenario-count")}
{scenarioIndex + 1}
</p>
<h1 className="hidden">{t("title")}</h1>

<h2>{scenario.title}</h2>
<h3>The setup</h3>
<p>{scenario.setup}</p>
<h3>The dilema</h3>
<p>{scenario.dilema}</p>
<h3>Your options</h3>
<ul>
{scenario.options.map(
(option: { goto: string; text: string }, index: Key) => (
<li key={index} className="mb-5">
<Link href={`/scenarios/${scenario.slug}/${option.goto}`}>
<label style={{ display: "flex", alignItems: "center" }}>
<input type="radio" className="mr-5" />
{option.text}
</label>
</Link>
</li>
)
)}
</ul>
{scenario["sub-title"] && (
<h3 className="text-dark-blueish sm:text-2xl sm:mb-2">
{scenario["sub-title"]}
</h3>
)}
{scenario.sections?.map(
(section: { image: string; heading: string; text: string }) => (
<>
{section.image && (
<Image
src={`/images/${locale}/scenarios/${slug}/${section.image}`}
alt={scenario.title}
sizes="(max-width: 479px) 457.5625px, (max-width: 767px) 100vw, (max-width: 991px) 93vw, 900px"
className="display-block max-w-lg mx-auto"
width="479"
height="479"
/>
)}

{section.heading && <h3>{section.heading}</h3>}
{section.text && <p>{section.text}</p>}
</>
)
)}
{scenario.options ? (
<>
<h3>{t("your-options")}</h3>
<ul>
{scenario.options.map(
(option: { goto: string; text: string }, index: Key) => (
<li key={index} className="mb-5">
<Link href={`/scenarios/${scenario.slug}/${option.goto}`}>
<label style={{ display: "flex", alignItems: "center" }}>
<input type="radio" className="mr-5" />
{option.text}
</label>
</Link>
</li>
)
)}
</ul>
</>
) : (
<Link
href={`/scenarios/${nextScenario.slug}`}
className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
>
{t("next-scenario")}
</Link>
)}
</>
);
}
90 changes: 83 additions & 7 deletions messages/af.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,15 +59,34 @@
},
"global": {
"title": "Green Connection's",
"title-name": "Gaslit! (af)",
"title-name": "Gaslit!",
"sub-title": "The game of greed and gas at PetroSA",
"your-options": "Your options",
"scenario-count": "Scenario ",
"next-scenario": "Next scenario",
"finish": "Finish!",
"scenarios": [
{
"format": "normal",
"slug": "getting-started",
"title": "Getting started!",
"setup": "Congratulations! You have just been appointment as CEO of the newly formed SOE, PetroSA. One of your first tasks is to secure a supply of oil for the Strategic Fuel Fund (SFF - aka “the strategic reserve”).",
"dilema": "You have found a potential source for this oil. A politically linked company has a deal via Glencore for getting oil out of sanctioned Iraq, but needs cash up front to do the job.",
"sub-title": "2002 - 2004",
"sections": [
{
"heading": "The set-up",
"text": "Congratulations! You have just been appointment as CEO of the newly formed SOE, PetroSA. One of your first tasks is to secure a supply of oil for the Strategic Fuel Fund (SFF - aka “the strategic reserve”)."
},
{
"image": "finding-the-oil-to-get-started.png"
},
{
"heading": "The dilemma",
"text": "You have found a potential source for this oil. A politically linked company has a deal via Glencore for getting oil out of sanctioned Iraq, but needs cash up front to do the job."
},
{
"image": "start-strong-or-start-to-slip.png"
}
],
"options": [
{
"text": "Refuse the deal and insist on a transparent tender process in line with procurement regulations",
Expand All @@ -93,12 +112,61 @@
}
}
},
{
"format": "bonus",
"slug": "bonus-round",
"title": "Before you continue!",
"sections": [
{
"image": "what-are-stranded-assets.png"
},
{
"heading": "Quick summary",
"text": "Countries which rely on fossil fuel exports to sustain their economies are vulnerable to several unique challenges which make their investments in the sector uneconomic in the long run. Governments may be willing to underwrite loans to gain foreign investment and secure jobs, but end up with useless infrastructure producing oil, gas and coal products based on outdated technology. Not only that, but they will have missed opportunities to invest in renewables."
},
{
"image": "short-term-pain-long-term-gain.png"
},
{
"heading": "The numbers",
"text": "Global Energy Watch estimates that up to $245 billion of investments in gas alone could end up as “stranded assets”, and that “Emerging petrostates are setting up their industries at the worst possible time“. Even worse, the rush to secure natural gas following the invasion of Ukraine and introduction of sanctions against Russia has led to an oversupply in the market.  By effectively subsidising the production of fossil fuels, governments are increasing the chances that they will end up in a debt trap. The spot price of gas today is 80% less than it was two years ago."
},
{
"image": "investing-at-the-wrong-time.png"
},
{
"heading": "A new strategy",
"text": "The International Renewable Energy Agency (IRENA) estimates that a strategy of investing in renewable energy, energy efficiency and related fields such as climate smart agriculture, rather than pursuing current energy goals, could result in significantly more jobs and GDP growth."
},
{
"image": "climate-smart-is-economy-smart.png"
}
],
"answers": {
"correct": {
"title": "You handed over the cash, well done!",
"description": "PetroSA seemingly handed over several early payments to Imvume Management, a company which was later accused by an independent inquiry of illicit dealing under the oil-for-food programme in Iraq - and it did so, apparently, with the government&apos;s blessing. At least R11m of the money paid from PetroSA was alleged to have ended up going back to the ANC to fund its 2004 election campaign. Here&apos;s the real kicker - most of the Iraqi oil never actually came to SA, and you ended up buying from Russia instead! Start as you mean to go on."
},
"incorrect": {
"title": "Are you sure you are cut out for this business?",
"description": "PetroSA seemingly handed over several early payments to Imvume Management, a company which was later accused by an independent inquiry of illicit dealing under the oil-for-food programme in Iraq - and it did so, apparently, with the government&apos;s blessing. At least R11m of the money paid from PetroSA was alleged to have ended up going back to the ANC to fund its 2004 election campaign. Here&apos;s the real kicker - most of the Iraqi oil never actually came to SA, and you ended up buying from Russia instead! Start as you mean to go on."
}
}
},
{
"format": "normal",
"slug": "lorem-ipsum-doler",
"title": "Lorem ipsum doler",
"setup": "Lorem ipsum doler sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"dilema": "Ipsum doler sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"sections": [
{
"heading": "The set-up",
"text": "Lorem ipsum doler sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"heading": "The dilemma",
"text": "Ipsum doler sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}
],
"options": [
{
"text": "Lorem ipsum 1",
Expand Down Expand Up @@ -128,8 +196,16 @@
"format": "no-correct-incorrect",
"slug": "lorem-ipsum-doler-2",
"title": "Lorem ipsum doler 2",
"setup": "Lorem ipsum doler sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"dilema": "Ipsum doler sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"sections": [
{
"heading": "The set-up",
"text": "Lorem ipsum doler sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"heading": "The dilemma",
"text": "Ipsum doler sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}
],
"options": [
{
"text": "Lorem ipsum 1",
Expand Down
Loading

0 comments on commit 20ec59c

Please sign in to comment.