Conceptual layout

./index.html

Master html page.
We could try and setup a container in the center of the page that is dynamically painted from javascript rather than different html pages

./styles.css

Master css page.

./index.js

Imports various modules and is the master file that controles the game
It should mostly call functions from modules and should not contain much logic

./modules

/storyLines.js

This module contains an array that containes multiple objects. Each object is a storyline. This section would also conatin the logic to choose a story for the game instance

exampleStory{
title: "the dark night"
weapon: "fists"
location: "gotham"
name: "bruce"
weaponHint: "capow, not bang"
locationHint: "worse than new york"
nameHint: "wayne enterprises CEO"
game: 1 // if you wanted to have different games for different stories
cheatOn() =>{
// some code that affects the gameplay to enable some typle of cheat code... no idea how this would be implimneted
}
}

/mainGameLogic.js

This section will have all the game playing logic and will return whether the user wins or loses we will set up an object that is the users play of the game.
For example
userPlay{
userWeapon: "knife"
userName: "Tim"
userLocation: "Detroit"
}

/gameWinDom.js

this module will contain the DOM manipulation for onscreen modification based on the outcome of the game

/miniGame.js

This module contains everything associated with the mini game For example this will cover the logic of the game and all DOM manipulation code necessary to impliment and play the game

/domManipulation.js

I wonder if it would make sense to have a module dedicated to making changes in the DOM.