Skip to content

Commit

Permalink
[#194] Add option for assigning stats randomly
Browse files Browse the repository at this point in the history
  • Loading branch information
@noahko96
noahko96 committed May 23, 2022
1 parent 8fce077 commit 94aee6f
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 27 deletions.
4 changes: 3 additions & 1 deletion app/javascript/src/Store.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,9 @@ export interface ItemChange {
export interface StatChange {
name: string
value: number
action: '+' | '-' | '='
action: '+' | '-' | '=' | '?'
min?: number
max?: number
}

const applicationState: ApplicationState = {
Expand Down
18 changes: 17 additions & 1 deletion app/javascript/src/components/Player.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -654,9 +654,20 @@ class Player extends React.Component<PlayerProps, PlayerState> {

// Need to add it to the list of stats
if (indexOfStat === -1) {
let startValue: number
if (change.action === '-') {
startValue = change.value * -1
} else if (change.action === '?') {
const min = change.min ? change.min : 1
const max = change.max ? change.max : 10

startValue = Math.floor(Math.random() * (max - min + 1) + min);
} else {
startValue = change.value
}
let curStat: Stat = {
name: change.name,
value: change.action === '-' ? change.value * -1 : change.value
value: startValue,
}
newStats.push(curStat)
} else {
Expand All @@ -671,6 +682,11 @@ class Player extends React.Component<PlayerProps, PlayerState> {
} else if (change.action === '=') {
// Subtract it from the total
newStats[indexOfStat].value = Number(change.value)
} else if (change.action === '?') {
const min = change.min ? Number(change.min) : 1
const max = change.max ? Number(change.max) : 10

newStats[indexOfStat].value = Math.floor(Math.random() * (max - min + 1) + min);
}
}
})
Expand Down
96 changes: 77 additions & 19 deletions app/javascript/src/components/PortEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,25 +232,69 @@ class PortEditor extends React.Component<
<option key="=" value="=">
=
</option>
<option key="?" value="?">
?
</option>
</select>
</div>
<div>
<label
className="sr-only"
htmlFor={`stat-value-${statChange.name}`}
>
Number Value (#)
</label>
<input
id={`stat-value-${statChange.name}`}
onBlur={this.setStatValue.bind(this, i)}
defaultValue={
statChange.value
? statChange.value.toString()
: ''
}
/>
</div>
{statChange.action !== '?' ? (
<div>
<label
className="sr-only"
htmlFor={`stat-value-${statChange.name}`}
>
Number Value (#)
</label>
<input
id={`stat-value-${statChange.name}`}
onBlur={this.setStatValue.bind(this, i)}
defaultValue={
statChange.value
? statChange.value.toString()
: ''
}
/>
</div>
) : (
<div>
<div>
<label
className="sr-only"
htmlFor={`stat-min-${statChange.name}`}
>
Random Number Min (#)
</label>
<input
id={`stat-min-${statChange.name}`}
onBlur={this.setStatMin.bind(this, i)}
placeholder="Min"
defaultValue={
statChange.min
? statChange.min.toString()
: ''
}
/>
</div>
<div>
<label
className="sr-only"
htmlFor={`stat-max-${statChange.name}`}
>
Random Number Max (#)
</label>
<input
id={`stat-max-${statChange.name}`}
onBlur={this.setStatMax.bind(this, i)}
placeholder="Max"
defaultValue={
statChange.max
? statChange.max.toString()
: ''
}
/>
</div>
</div>
)}
<PortEditorRemoveButton
onClick={this.removeStatChanges.bind(this, i)}
/>
Expand Down Expand Up @@ -646,7 +690,7 @@ class PortEditor extends React.Component<
e.preventDefault()

let newStatChanges = clone(this.state.thisPortMeta.statChanges || [])
newStatChanges.push({ name: '', value: 0, action: '+' })
newStatChanges.push({ name: '', value: 0, action: '+', min: 0, max: 0 })

this.state.thisPortMeta.statChanges = newStatChanges
this.savePortMeta()
Expand Down Expand Up @@ -675,13 +719,27 @@ class PortEditor extends React.Component<
this.state.thisPortMeta.statChanges = newStatChanges
this.savePortMeta()
}
setStatMin = (index: number, e: React.FocusEvent<HTMLInputElement>) => {
let newStatChanges = clone(this.state.thisPortMeta.statChanges || [])
newStatChanges[index].min = parseInt(e.target.value, 0)

this.state.thisPortMeta.statChanges = newStatChanges
this.savePortMeta()
}
setStatMax = (index: number, e: React.FocusEvent<HTMLInputElement>) => {
let newStatChanges = clone(this.state.thisPortMeta.statChanges || [])
newStatChanges[index].max = parseInt(e.target.value, 0)

this.state.thisPortMeta.statChanges = newStatChanges
this.savePortMeta()
}

toggleStatChanges = (
index: number,
e: React.ChangeEvent<HTMLSelectElement>
) => {
e.preventDefault()
if (e.target.value !== '+' && e.target.value !== '-' && e.target.value !== '=') return
if (e.target.value !== '+' && e.target.value !== '-' && e.target.value !== '=' && e.target.value !== '?') return

let newStatChanges = clone(this.state.thisPortMeta.statChanges || [])
newStatChanges[index].action = e.target.value
Expand Down
20 changes: 14 additions & 6 deletions app/javascript/src/components/TutorialPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,22 +88,30 @@ const pages: TutorialPageContent[] = [
link: 'Try our demo story!'
},
{
title: '#9 - Advanced - Using Conditions',
title: '#9 - Advanced - Using Random Stats',
text: [
'Random stats can make for different experiences each time you play.',
'For example, the first time you play, you might be assigned enough \'Speed\' to run away from the monster, but the second time it catches and eats you.',
],
image: require('../images/tutorial/using_random_stats.gif')
},
{
title: '#10 - Advanced - Using Conditions',
text: [
'Using conditions allows you to show a choice only if the conditions are met.',
'Conditions can be used interchangeably with items and stats.',
],
image: require('../images/tutorial/using_conditions.gif')
},
{
title: '#10 - Advanced - Using Timers',
title: '#11 - Advanced - Using Timers',
text: [
"Using timers allows you to automatically send players to the next scene if they do not choose an option within a certain amount of time."
],
image: require('../images/tutorial/timers.gif')
},
{
title: '#11 - Advanced - Using Formatting',
title: '#12 - Advanced - Using Formatting',
text: [
'Formatting allows you to customize the scene content depending on your items and stats.',
'When someone is playing the game created by the below example, we will show the player their \'Energy\' and \'Speed\' values and then will tell them that they have the \'Key\' if the \'Key\' is present.'
Expand All @@ -113,19 +121,19 @@ const pages: TutorialPageContent[] = [
link: 'Get additional help.'
},
{
title: "#12 - Advanced - Copying and Pasting",
title: "#13 - Advanced - Copying and Pasting",
text: [
'If you want certain sections of your story to also be in another one of your stories, you can easily copy and paste that section of the story with either our \'Copy\' and \'Paste\' buttons or your typical keyboard shortcuts.',
'In order to select the section of your story to copy, you have several options. You can just click on a singular scene you want to copy, you can hold the Shift key and drag your mouse over the seciton you want to copy, or you can hold the Shift key while clicking the scenes you wish to copy.'
],
image: require('../images/tutorial/copy-paste.gif')
},
{
title: '#13 - Time to Play!',
title: '#14 - Time to Play!',
text: ['Press “Play” to read your story and get a shareable link.']
},
{
title: '#14 - Disclaimer',
title: '#15 - Disclaimer',
text: [
"This project was primarily built in a weekend, so you may encounter some quirks along the way. If something doesn't look right, saving your story and refreshing the page might do the trick. If saving isn't working, you can try copying and pasting your story into a new story as a last resort.",
'And of course, feel free to drop us a note in our feedback form (available from the footer on the homepage).',
Expand Down
Binary file added app/javascript/src/images/tutorial/using_random_stats.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 94aee6f

Please sign in to comment.