Canon Divergence TEST

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<<fadein 2s>><span class="logo"> <img src="Icon.png" class="logo-dark" style="max-width:100%; height:auto;"> <img src="Icon-light.png" class="logo-light" style="max-width:100%; height:auto;"> </span><</fadein>> <<timed 1s t8n>><span class="game-start-timed" style="position: relative; top: -50px;"> <b><span class="start-highlight">@sunchaserinteractive</span></b> </span><</timed>> <<cont>><<goto 'start-menu'>><</cont>>

<<fadein 1s>> <div id="start-title">Canon Divergence</div> <div id="start-subtitle">THE SEVERED VERSE SERIES</div> <<nobr>><div id="start-menu"> <<nobr>><<if Save.autosave.ok() and Save.autosave.has()>><<button "Resume Game">><<run Save.autosave.load()>><</button>><</if>><</nobr>> <<button "New Game" "p_00">><<set $chapter to "Prologue.">><</button>> <<button "Load Game">><<run UI.saves();>><</button>> <<button "Settings">><<run UI.settings();>><</button>> <<button "Credits">> <<script>> Dialog.setup("credits","credits"); Dialog.wiki(Story.get("credits").processText()); Dialog.open(); <</script>> <</button>> </div><</nobr>> <</fadein>>

<h2>Game Template</h2> <li>A SugarCube Template - <a href="https://losingface.itch.io/a-sugarcube-template/">Here</a></li> <h2>Twine + Sugarcube</h2> <li>Twine by Chris Klimas - <a href="https://twinery.org/cookbook/" target="_blank">Twine Cookbook</a></li> <li>Sugarcube by Thomas Michael Edwards - <a href="https://www.motoslave.net/sugarcube/2/docs/" target="_blank">Sugarcube 2 Documentation</a></li> <li>Custom Macros - <a href="https://github.com/ChapelR/custom-macros-for-sugarcube-2" target="_blank">ChapelR Custom Macros Collection</a></li> <h2>Resources</h2> <li>Icons - <a href="https://fontawesome.com/" target="_blank"> Font Awesome Icons</a></li> <li>Fonts - <a href="https://fonts.google.com/" target="_blank">Google Fonts</a>, <a href="https://opendyslexic.org/" target="_blank">Open Dyslexic</a></li> <li>CSS + HTML Tutorials - <a href="https://www.w3schools.com/">W3Schools</a></li> <h2>Graphics</h2> <li>Logo - Made by Me, in PaintTool Sai </li> <li>Sub/Title Graphics - Created in Canva </li>

<<nobr>> <<fadein 3s>> <div style="text-align: center;"> <h3><i>This is just a test...</i></h3> </div> <</fadein>> <<timed 2s>> <<fadein 3s>> <div style="text-align: center;"> <<link "<h4><i>This is too...</i></h4>">> <</link>> </div> <</fadein>> <</timed>> <</nobr>>

<<if settings.notifs>><<if tags().includes('autosave')>><<notify 3.5s>>Saving...<</notify>><</if>><</if>> /* autosaving -- the autosave notif needs to be 'present' at all times so is stored in the passageheader, only popping up when you add the [autosave] tag onto one of your passages. this is mainly for aesthetics as the autosave function is currently set up to save on EVERY passage. this can be changed in the javascript settings, e.g. you could configure it to only autosave on passages with the [autosave] tag notify is also a ChapelR macro, not a default sugarcube macro, so make sure to familiarise yourself with the documentation!*/ <script> var myDiv = document.getElementById('passages'); myDiv.scrollTop = 0; </script> /* scroll top -- this script makes the page scroll back to the top every time you move on to the next passage -- do not delete it! */

<<nobr>> <img src="TheAuthor.png" style="max-width:100%; height:auto;"> <<if $inputplayerName>> Your name is <<print $inputplayerName.toUpperFirst()>>. <</if>> <<if $pronouns is true>> and <<$plural is true>> You go by $they/$them. <</if>> <<if $pronouns is true>> and <<$plural is false>> You go by $heshe/$himher. <</if>> <<if $birthday is "today">> Today's your 30th birthday. <</if>> <<if $birthday is "over">> You're 30 years old. <</if>> <p></p> <p></p> <<if $traumaReveal is true>> You survived <<if $history3 is "fire">> a house fire<</if>> <<if $history3 is "attack">> an armed attack<</if>> as a child, but not unscathed; you have <<if $history3 is "fire">> scars<</if>> <<if $history3 is "attack">> a scar<</if>> on your <<if $scar is "neck">> neck<</if>> <<if $scar is "face">> face<</if>> <<if $scar is "chest">> chest<</if>> <<if $scar is "handsarms">> hands and arms<</if>> <<if $scar is "legsback">> legs and back<</if>> <<if $scar is "chestneckface">> chest, neck, and face<</if>> that <<if $scarOpinion is "negative" and $history3 is "fire">> make<</if>> <<if $scarOpinion is "negative" and $history3 is "attack">> makes<</if>> <<if $scarOpinion is "negative">> you self-conscious,<</if>> <<if $scarOpinion is "positive">> you wear with confidence,<</if>> <<if $scarOpinion is "neutral">> you consider to be just another part of you,<</if>> and you have an intense fear of <<if $fear is "bladesbloodpain">> blades, blood, and pain,<</if>> <<if $fear is "firedarkpain">> fire, darkness, and pain,<</if>> <<if $fear is "claustro">> suffocation and being trapped,<</if>> which makes you <<if $response is "touchaverse">> touch-averse.<</if>> <<if $response is "vigilantinsomnia">> a hypervigilant insomniac.<</if>> <<if $response is "panic">> prone to panic attacks.<</if>><</if>> <</nobr>> <div id="stat-title"> <span>Friendly ($friendly%)</span> <span>Stoic (<<print 100 - $friendly>>%)</span> </div> <<showmeter 'Friendly' `$friendly/ $max_friendly`>> <div id="stat-title"> <span>Strength ($strength%)</span> <span>Weakness (<<print 100 - $strength>>%)</span> </div> <<showmeter 'Strength' `$strength/ $max_strength`>>

/* comment -- this is where to set up your variables -- you can delete the examples below. note that $chapter is used to change the chapter title in the title bar. you can either delete this, change the variable name, or change the variable(s) used entirely note that $chapter and $name are also used for the autoname save function. you can either delete this, change the variable name, or change the variable(s) used entirely (in the Javascript file) */ <<set $chapter to "">> <<set $name to "New Save">> <<set $textbox to "textbox">> <<set $listbox to "listbox">> <<set $cycle to "cycle">> /* ChapelR Meter Macro set up */ /* these stat meter set ups are purely examples and do not need to be used */ <<set $friendly = 50>> <<set $max_friendly = 100>> <<newmeter 'Friendly' $friendly>> <<colors '#777' '#777' '#333'>> <<sizing '100%' '1.2em'>> <</newmeter>> <<set $strength = 50>> <<set $max_strength = 100>> <<newmeter 'Strength' $strength>> <<colors '#777' '#777' '#333'>> <<sizing '100%' '1.2em'>> <</newmeter>> /* -----------------Here Be Dragons----------------- */ /* Player */ <<set $playerName to "">> <<set $traumaReveal to false>> <<set $birthday to "">> <<set $history1 to "">> <<set $history2 to "">> <<set $history3 to "">> <<set $scar to "">> <<set $scars to "">> <<set $scarOpinion to "">> <<set $fear to "">> <<set $response to "">> /* Companions */ <<set $metEmilivar to false>> <<set $metEadyth to false>> <<set $metGranger to false>> <<set $metTalitha to false>> /* PLURAL TESTING */ <<set $gender to "">> <<set $person to "">> <<set $child to "">> <<set $sibling to "">> <<set $heshe to "">> <<set $himher to "">> <<set $hisher to "">> <<set $they to "">> <<set $them to "">> <<set $their to "">> <<set $plural to false>>

<div id="title-container"> <span class="title-item">CANON DIVERGENCE</span> <span class="chapter-item">$chapter</span> </div>

<<link '<i class="fa-solid fa-floppy-disk" alt="saves"></i>'>><<run UI.saves();>><</link>> <<link '<i class="fa-solid fa-gear" alt="settings"></i>'>><<run UI.settings();>><</link>> <<link '<i class="fa-solid fa-user" alt="profile"></i>'>> <<script>> Dialog.setup("profile","profile"); Dialog.wiki(Story.get("profile").processText()); Dialog.open(); <</script>> <</link>> <<link '<i class="fa-solid fa-handshake" alt="relationships"></i>'>> <<script>> Dialog.setup("relationships","relationships"); Dialog.wiki(Story.get("relationships").processText()); Dialog.open(); <</script>> <</link>> <<link '<i class="fa-solid fa-users" alt="companions"></i>'>> <<script>> Dialog.setup("companions","companions"); Dialog.wiki(Story.get("companions").processText()); Dialog.open(); <</script>> <</link>> <<link '<i class="fa-solid fa-book" alt="codex"></i>'>> <<script>> Dialog.setup("codex","codex"); Dialog.wiki(Story.get("codex").processText()); Dialog.open(); <</script>> <</link>> <<link '<i class="fas fa-hand-point-left" alt="return"></i>'>><<run Engine.backward();>><</link>> <<link '<i class="fa-solid fa-arrow-rotate-left" alt="restart"></i>'>><<run UI.restart();>><</link>>

<<widget "playerName">><<print $inputplayerName.toUpperFirst()>><</widget>> <<widget "sisterName">><<print $inputsisterName.toUpperFirst()>><</widget>> /*Then in the game, you can use <<name>> instead of $name and the player character’s name will automatically capitalized the first letter. */ <<widget "capheshe">><<print $heshe.toUpperFirst()>><</widget>> <<widget "caphimher">><<print $himher.toUpperFirst()>><</widget>> <<widget "caphisher">><<print $hisher.toUpperFirst()>><</widget>> <<widget "caphishers">><<print $hishers.toUpperFirst()>><</widget>> <<widget "caphimherself">><<print $himherself.toUpperFirst()>><</widget>> <<widget "capthey">><<print $they.toUpperFirst()>><</widget>> <<widget "capthem">><<print $them.toUpperFirst()>><</widget>> <<widget "captheir">><<print $their.toUpperFirst()>><</widget>> <<widget "captheirs">><<print $theirs.toUpperFirst()>><</widget>> <<widget "capthemself">><<print $themself.toUpperFirst()>><</widget>>

This is the world

These are your relationships: <div id="stat-title"> <span>Friend ($friendly%)</span> <span>Rival (<<print 100 - $friendly>>%)</span> </div> <<showmeter 'Friendly' `$friendly/ $max_friendly`>> <div id="stat-title"> <span>Strength ($strength%)</span> <span>Weakness (<<print 100 - $strength>>%)</span> </div> <<showmeter 'Strength' `$strength/ $max_strength`>>

<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <<button "Button">><</button>> <<textbox "$textbox" $textbox>> <<listbox "$listbox">> <<option "Listbox 1">> <<option "Listbox 2">> <<option "Listbox 3">> <</listbox>> <<cycle "$cycle">> <<option "Cycling 1">> <<option "Cycling 2">> <<option "Cycling 3">> <</cycle>> <li>List Item</li> <li>List Item</li> <li>List Item</li> <<fadein 3s>> <</fadein>> <<nobr>><div class="choices"> <div class="choice-item">[[Continue|test]]</div> <div class="flirt-choice-item">[[Continue|test]]</div> <div class="special-choice-item">[[Continue|test]]</div> </div><</nobr>>

Player $playerName $birthday $sisterName $sisterReveal $history1 "alone" (didn't go to party)/ "party" (stayed at party) $history2 "crush" (pics got leaked)/ "friend" (friend joined bullies) $history3 "fire" (house fire)/ "attack" (hostage situation) $scar "neck"/ "face"/ "chest" (attack options) "handsarms"/ "legsback"/ "chestneckface" (fire options) $scarOpinion "ugly" (negative)/ "badass" (positive)/ "old" (neutral) $fear "bladesbloodpain" (attack-only) "firedarkpain" (fire-only) "claustro" (both) $response "touchaverse" (attack-only) "insomnia" (fire-only) "panic" (both) Companions <<set $metEmilivar to false>> <<set $metEadyth to false>> <<set $metGranger to false>> <<set $metTalitha to false>>

<<set $inputplayerName to "martha">> As you look into the mirror, you are greeted by... <<nobr>> <div class="choices"> <div class="special-choice-item">[[The face of a woman.|next][$gender to "female", $child to "girl", $person to "woman", $sibling to "sister", $partner to "girlfriend", $spouse to "wife", $heir to "princess", $heshe to "she", $himher to "her", $hisher to "her", $hishers to "hers", $himherself to "herself", $plural to false]]</div> <div class="special-choice-item">[[The face of a man.|next][$gender to "male", $child to "boy", $person to "man", $sibling to "brother", $partner to "boyfriend", $spouse to "husband", $heir to "prince", $heshe to "he", $himher to "him", $hisher to "his", $hishers to "his", $himherself to "himself", $plural to false]]</div> <div class="special-choice-item">[[The face of a person.|next][$gender to "nonbinary", $child to "child", $person to "person", $sibling to "sibling", $partner to "partner", $spouse to "spouse", $heir to "heir", $they to "they", $them to "them", $their to "their", $theirs to "theirs", $themself to "themself", $plural to true]] </div> <div class="choice-item">[[(I want to customise my gender)|Customise Gender]] </div> <</nobr>>

<i>(PLEASE INPUT EVERYTHING IN <b>lowercase</b>)</i> These would be my gendered nouns: (e.g. male/female/nonbinary) <<textbox "$gender" "">> (e.g. boy/girl/child) <<textbox "$child" "">> (e.g. man/woman/person) <<textbox "$person" "">> (e.g. brother/sister/sibling) <<textbox "$sibling" "">> (e.g. boyfriend/girlfriend/partner) <<textbox "$partner" "">> (e.g. husband/wife/spouse) <<textbox "$spouse" "">> (e.g. prince/princess/heir) <<textbox "$heir" "">> <<nobr>> <b>Are your pronouns singular or plural?</b><p></p> <style> #buttonContainer { display: flex; gap: 1em; margin-bottom: 1em; } #buttonContainer button { background-color: transparent; color: var(--text); border: 1.5px solid var(--text); padding: 0.3em 0.8em; border-radius: 4px; cursor: pointer; font-size: 1em; transition: background-color 0.3s ease, color 0.3s ease; } #buttonContainer button:hover { background-color: var(--text); color: var(--bg1); } .light-theme #buttonContainer button { color: var(--text_light); border-color: var(--text_light); } .light-theme #buttonContainer button:hover { background-color: var(--text_light); color: var(--bg2); } </style> <div id="buttonContainer"> <<button "Singular Pronouns">> <<set $plural to false>> <<replace "#pronounArea">> Subjective: "[she] runs fast"<br> <<textbox "$heshe" "">><p></p> Objective: "I saw [her] today"<br> <<textbox "$himher" "">><p></p> Possessive Adjective: "that's [her] book"<br> <<textbox "$hisher" "">><p></p> Possessive Pronoun: "the coat is [hers]"<br> <<textbox "$hishers" "">><p></p> Reflexive: "she made it [herself]"<br> <<textbox "$himherself" "">><p></p> <</replace>> <</button>> <p></p> <<button "Plural Pronouns">> <<set $plural to true>> <<replace "#pronounArea">> Subjective: "[they] run fast"<br> <<textbox "$they" "">><p></p> Objective: "I saw [them] today"<br> <<textbox "$them" "">><p></p> Possessive Adjective: "that's [their] book"<br> <<textbox "$their" "">><p></p> Possessive Pronoun: "the coat is [theirs]"<br> <<textbox "$theirs" "">><p></p> Reflexive: "they made it [themself]"<br> <<textbox "$themself" "">><p></p> <</replace>> <</button>> </div> <p></p> <div id="pronounArea"></div> <p></p> <div class="choice-item">[[Test and Confirm]] </div> <</nobr>> <p></p> <p></p> <p></p>

<<if $plural is true>> <<capthey>> trust $themself because $their decisions are $their own. People respect $them, knowing the responsibility is $theirs. They often remind $themself of this. <</if>> <<if $plural is false>> <<capheshe>> trusts $himherself because $hisher decisions are $hisher own. People respect $himher, knowing the responsibility is $hishers. <<capheshe>> often reminds $himherself of this. <</if>> <div class="choice-item">[[Continue|next]] </div>