initial commit

.gitignore

@@ -0,0 +1,29 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# System Files
+.DS_Store
+Thumbs.db
+
+# Misc
+/src/save for later
+/dist/save for later

dist/model/item.js

@@ -0,0 +1 @@
+export {};

dist/model/paragraph.js

@@ -0,0 +1 @@
+export {};

dist/model/player.js

@@ -0,0 +1 @@
+export {};

dist/paragraphs/allParagraphs.js

@@ -0,0 +1,69 @@
+import { capitalise } from "../tools/formatting.js";
+export function getParagraph(player) {
+    const paragraphs = [
+        //Array starts at 0
+        {
+            id: 0,
+            name: "p1",
+            content: `This is the first paragraph. <u><b>Welcome to a game!<\/b><\/u> This game is a multi choice Interactive fiction. Different choices will lead to different outcomes. Rejoice! Enjoy your time playing here!`,
+            choices: [
+                { choiceCont: "Alright then, lead me to the next paragraph", nextid: 1 },
+            ],
+        },
+        {
+            id: 1,
+            name: "p2",
+            content: `You are walking into the woods and there's no one around. Or so you thought. Your senses tells you that there's something out there, but your conscious mind tries to convince otherwise. After all, there's no reason for anyone to be out at this hour. <br>Or is it?<br>
+        Tell us a bit about yourself: 
+        `,
+            choices: [
+                { choiceCont: "Ooooh! Next!!!!!", nextid: 2 },
+                { choiceCont: `I'm scared. Let's go back to the first one!`, nextid: 0 }
+            ],
+            item: [
+                { itemName: 'sword', itemQty: 1, description: "An old, rusty sword you found on the ground." },
+            ],
+            variable: "valor:1",
+            preId: 0
+        },
+        {
+            id: 2,
+            name: "p3",
+            content: `This is the third paragraph. A guy whoops in and said: "This is ${player?.playerName}! ${capitalise(player?.pronouns.is)} finally here!" Oh well, this is the end. Bye ${player?.playerName}!`,
+            choices: [
+                { choiceCont: "Last one!", nextid: 3 }
+            ],
+            preId: 1,
+        },
+        {
+            id: 3,
+            name: "bruh",
+            content: `You found a key lying on the ground.<br> Just a heads-up. The next paragraph uses update style "append".`,
+            choices: [
+                { choiceCont: "Move along", nextid: 4, style: "append" }
+            ],
+            item: [{ itemName: 'key', itemQty: 1, description: "A small key. You wonder what it's for." }],
+            preId: 2
+        },
+        {
+            id: 4,
+            name: "bruh",
+            content: `There's a bear behind you! AAAAAAAAAAAAAAAAAAAAA`,
+            choices: [
+                { choiceCont: "Let's go back from the beginning", nextid: 0, precondition: "key = 1" },
+                { choiceCont: "Or go on?", nextid: 5 }
+            ],
+            preId: 3
+        },
+        {
+            id: 5,
+            name: "oh? you're still here?",
+            content: ``,
+            choices: [
+                { choiceCont: "This is truly the end. There's nothing else. Let's just go back", nextid: 0 },
+                { choiceCont: "Trust me on this one my friend.", nextid: 0 }
+            ]
+        }
+    ];
+    return paragraphs;
+}

dist/paragraphs/paragraphFunctions.js

@@ -0,0 +1,69 @@
+import { player } from "../player/playerInfo.js";
+import { getParagraph } from "./allParagraphs.js";
+var currentParagraph;
+/**Get nextid, then show the paragraph with that id.
+  * @param {number} nextid next paragraph's id.
+  * @param {string} style optional. Update paragraph style. Leave blank for default: clear previous paragraph then show the next one.
+*/
+export function updateParagraph(nextid, style) {
+    let allParagraphs = getParagraph();
+    const choiceContainer = document.getElementById("choices");
+    const paragraphContainer = document.getElementById("paragraph");
+    let choices;
+    allParagraphs = getParagraph(player);
+    switch (style) {
+        case "append":
+            currentParagraph = currentParagraph + " " + allParagraphs[nextid].content;
+            paragraphContainer.innerHTML = currentParagraph;
+            choiceContainer.innerHTML = null;
+            choices = allParagraphs[nextid].choices;
+            if (choices) {
+                for (var i = 0; i < choices.length; i++) {
+                    var currentChoice = choices[i];
+                    var nextid = currentChoice.nextid;
+                    let choice = `<a href="#" 
+                    class="choices" id="n${nextid}" >
+                    ${currentChoice.choiceCont} 
+                    </a><br>`;
+                    choiceContainer.innerHTML += choice;
+                }
+                for (var i = 0; i < choices.length; i++) {
+                    let currentChoice = choices[i];
+                    console.log("currentChoice.nextid" + currentChoice.nextid);
+                    let nextid = currentChoice.nextid;
+                    let style = choices[i].style;
+                    console.log("nextid: " + nextid);
+                    let choiceHTML = choiceContainer.querySelector("#n" + nextid);
+                    choiceHTML.addEventListener('click', function () { updateParagraph(nextid, style); });
+                }
+            }
+            break;
+        default:
+            paragraphContainer.innerHTML = null;
+            choiceContainer.innerHTML = null;
+            currentParagraph = allParagraphs[nextid].content;
+            paragraphContainer.innerHTML = currentParagraph;
+            choices = allParagraphs[nextid].choices;
+            if (choices) {
+                for (var i = 0; i < choices.length; i++) {
+                    var currentChoice = choices[i];
+                    var nextid = currentChoice.nextid;
+                    let choice = `<a href="#" 
+                    class="choices" id="n${nextid}" >
+                    ${currentChoice.choiceCont} 
+                    </a><br>`;
+                    choiceContainer.innerHTML += choice;
+                }
+                for (var i = 0; i < choices.length; i++) {
+                    let currentChoice = choices[i];
+                    let nextid = currentChoice.nextid;
+                    let choiceHTML = choiceContainer.querySelector("#n" + nextid);
+                    let style = choices[i].style;
+                    choiceHTML.addEventListener('click', function () { updateParagraph(nextid, style); });
+                }
+            }
+            break;
+    }
+}
+//TODO: known problems: when there's two options that redirect the user to the same paragraph,
+//only the first option will work.

dist/player/playerInfo.js

@@ -0,0 +1,28 @@
+export const player = {
+    id: 0,
+    playerName: "",
+    pronouns: {
+        Category: "",
+        subjectPro: "",
+        objectPro: "",
+        possAdj: "",
+        possessivePro: "",
+        reflex: "",
+        is: "" //he's, she's, they're
+    },
+};
+export function setName(inputName) {
+    player.playerName = inputName;
+}
+export function getName() {
+    var playerName = document.getElementById("playerName").value;
+    console.log(`Player Name is: ${playerName}`);
+    const container = document.getElementById("yourName");
+    if (container) {
+        container.innerHTML = null;
+        let output = `Your name is: ${playerName} `;
+        container.innerHTML += output;
+    }
+    setName(playerName);
+    console.log(player);
+}

dist/player/pronouns.js

@@ -0,0 +1,68 @@
+import { player } from "./playerInfo.js";
+/** List of pronouns. Add, edit or remove accordingly to author's needs.
+ * To change structure i.e adding more field like title: "Mr"... refer to src/model/player.ts
+ */
+export const pronouns = [
+    {
+        Category: "He/Him",
+        subjectPro: "he",
+        objectPro: "him",
+        possAdj: "his",
+        is: "he's",
+        possessivePro: "his",
+        reflex: "himself"
+    },
+    {
+        Category: "She/Her",
+        subjectPro: "she",
+        objectPro: "her",
+        possAdj: "her",
+        possessivePro: "hers",
+        reflex: "herself",
+        is: "she's",
+    },
+    {
+        Category: "They/Them",
+        subjectPro: "they",
+        objectPro: "them",
+        possAdj: "their",
+        is: "they're",
+        possessivePro: "theirs",
+        reflex: "themselves"
+    }
+];
+/**
+ * Show radio group with pronouns option for players to choose from.
+ * Append radio buttons to pronounsContainer.
+ * @param pronounsContainer
+ */
+export function showPronounDialogue(pronounsContainer) {
+    let pronounsLength = pronouns.length;
+    for (var i = 0; i < pronounsLength; i++) {
+        let pronounEntry = `
+            <input type="radio" id="${pronouns[i].subjectPro}" name="pronouns" value="${pronouns[i].Category}">
+            <label for="${pronouns[i].subjectPro}">${pronouns[i].Category}</label><br>`;
+        pronounsContainer.innerHTML += pronounEntry;
+        console.log(pronouns[i]);
+    }
+}
+/**
+ * Get Pronouns value from radio button
+ */
+export function getPronouns() {
+    var selectedPronoun = document.querySelector('input[name="pronouns"]:checked')?.value;
+    var found = pronouns.find(element => element.Category == selectedPronoun);
+    if (found) {
+        setPronouns(found);
+    }
+    ;
+    console.log(selectedPronoun);
+    // console.log(found);
+}
+/**
+ * Save player's selected pronoun
+ * @param pronouns
+ */
+export function setPronouns(pronouns) {
+    player.pronouns = pronouns;
+}

dist/script/index.js

@@ -0,0 +1,53 @@
+import { getName } from "../player/playerInfo.js";
+import { getParagraph } from "../paragraphs/allParagraphs.js";
+import { getPronouns, showPronounDialogue } from "../player/pronouns.js";
+import { updateParagraph } from "../paragraphs/paragraphFunctions.js";
+///////////////////Initialize game///////////////////
+let allParagraphs = getParagraph();
+let currentParagraph = allParagraphs[0].content;
+const paragraphContainer = document.getElementById("paragraph");
+const choiceContainer = document.getElementById("choices");
+let paragraph = `${currentParagraph}`;
+paragraphContainer.innerHTML += paragraph;
+let choices = allParagraphs[0].choices;
+//render the first paragraph's choice(s).
+if (choices) {
+    for (var i = 0; i < choices.length; i++) {
+        var currentChoice = choices[i];
+        var nextid = currentChoice.nextid;
+        let choice = `<a href="#" 
+        class="choices" id="n${nextid}" >
+        ${currentChoice.choiceCont} 
+        </a><br>`;
+        choiceContainer.innerHTML += choice;
+    }
+    for (var i = 0; i < choices.length; i++) {
+        let currentChoice = choices[i];
+        let nextid = currentChoice.nextid;
+        let choiceHTML = choiceContainer.querySelector("#n" + nextid);
+        let style = choices[i].style;
+        choiceHTML.addEventListener('click', function () { updateParagraph(nextid, style); });
+    }
+}
+const nameInput = document.querySelector("#playerName");
+//console.log(nameInput);
+if (nameInput) {
+    nameInput.addEventListener('keyup', getName);
+}
+////////////////////button!!!!!!!!!!!!/////////////
+const button = document.querySelector("#coolbutton");
+function doThing(thing) {
+    console.log("thing!");
+}
+if (button) {
+    button.addEventListener('click', doThing);
+}
+///////////////////////////////////////////////////
+const pronounsContainer = document.getElementById("pronouns");
+/**
+ * Check if pronounsContainer exits, then show pronouns.
+ */
+if (pronounsContainer) {
+    showPronounDialogue(pronounsContainer);
+    pronounsContainer.addEventListener('click', getPronouns);
+}

dist/tools/formatting.js

@@ -0,0 +1,10 @@
+/////////////////////////////Formatting tools////////////////////////////////////////
+/**
+ *Capitalise the first letter in a string.
+ */
+export function capitalise(word) {
+    if (!word)
+        return word;
+    return word[0].toUpperCase() + word.substr(1).toLowerCase();
+}
+////////////////////////////////////////////////////////////////////////////////////

index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Choosen Demo</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
+        crossorigin="anonymous"></script>
+</head>
+
+<body>
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-2">
+            </div>
+
+            <div class="col-lg-8 col-sm-12">
+                <h1>Probably a game</h1>
+                <div id="paragraph">
+                </div>
+                <div id="choices"></div>
+                <input id="playerName" type="text" placeholder="Enter your name here!" aria-label="playerName">
+                <p id="yourName"></p>
+                <div id="pronouns">
+                </div>
+                <button id="coolbutton">BUTTON!</button>
+            </div>
+
+            <div class="col-lg-2">
+            </div>
+        </div>
+    </div>
+    <script src="dist/script/index.js" type="module"></script>
+</body>
+
+</html>