From c72d6bad5582f7c5da3b2190140b7330bee77eab Mon Sep 17 00:00:00 2001 From: Alexander Yakovlev Date: Mon, 15 May 2017 17:28:53 +0700 Subject: [PATCH] Cloak of Darkness WIP in Salet --- .gitignore | 4 + Gulpfile.coffee | 130 ++++++++++++++++++++++++++++ game/begin.coffee | 123 ++++++++++++++++++++++++++ game/dialogue.coffee | 23 +++++ game/phrase.coffee | 26 ++++++ game/story.coffee | 54 ++++++++++++ game/translations/en.cson | 75 ++++++++++++++++ game/translations/ru.cson | 17 ++++ html/en.html | 70 +++++++++++++++ html/index.html | 66 ++++++++++++++ img/compass.png | Bin 0 -> 1364 bytes img/double-face-mask.png | Bin 0 -> 1084 bytes img/light-backpack.png | Bin 0 -> 604 bytes img/white-book.png | Bin 0 -> 1303 bytes package.json | 20 +++++ sass/_variables.scss | 31 +++++++ sass/main.scss | 176 ++++++++++++++++++++++++++++++++++++++ 17 files changed, 815 insertions(+) create mode 100644 .gitignore create mode 100644 Gulpfile.coffee create mode 100644 game/begin.coffee create mode 100644 game/dialogue.coffee create mode 100644 game/phrase.coffee create mode 100644 game/story.coffee create mode 100644 game/translations/en.cson create mode 100644 game/translations/ru.cson create mode 100644 html/en.html create mode 100644 html/index.html create mode 100644 img/compass.png create mode 100644 img/double-face-mask.png create mode 100644 img/light-backpack.png create mode 100644 img/white-book.png create mode 100644 package.json create mode 100644 sass/_variables.scss create mode 100644 sass/main.scss diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ca7298e --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +node_modules +build +dist +dist.zip \ No newline at end of file diff --git a/Gulpfile.coffee b/Gulpfile.coffee new file mode 100644 index 0000000..24288fc --- /dev/null +++ b/Gulpfile.coffee @@ -0,0 +1,130 @@ +browserSync = require('browser-sync') +gulp = require('gulp') +gutil = require('gulp-util') +coffee = require("gulp-coffee") +sass = require('gulp-sass') +uglify = require('gulp-uglify') +zip = require('gulp-zip') +concat = require('gulp-concat') +rename = require('gulp-rename') +fs = require 'fs' +CSON = require 'cson' + +reload = browserSync.reload + +html = (target) -> + return () -> + gulp.src(['html/*.html']) + .pipe(gulp.dest(target)) + gulp.src(['node_modules/salet/lib/index.min.js']) + .pipe(rename('salet.min.js')) + .pipe(gulp.dest(target+"/game")) + +# Images +img = (target) -> + return () -> + return gulp.src(['img/*.png', 'img/*.jpeg', 'img/*.jpg']).pipe(gulp.dest(target)) + +# Audio assets +audio = (target) -> + return () -> + return gulp.src(['audio/*.mp3']).pipe(gulp.dest(target)) + +gulp.task('html', html('./build')) +gulp.task('img', img('./build/img')) +gulp.task('audio', audio('./build/audio')) + +# SCSS styles +gulp.task('sass', () -> + gulp.src('sass/main.scss') + .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) + .pipe(gulp.dest('./build/css')) +) + +gulp.task('concatCoffee', () -> + if !fs.existsSync('./build/game/translations') + fs.mkdirSync('./build/game/translations') + for language in ['ru', 'en'] + data = CSON.parseCSONFile('game/translations/'+language+'.cson') + json = JSON.stringify(data) + '\n' + fs.writeFileSync("./build/game/translations/"+language+".json", json) + + gulp.src([ + ## additional functions + './game/dialogue.coffee', + './game/phrase.coffee', + ## the actual game + './game/begin.coffee', + './game/story.coffee', + ]).pipe(concat('./main.coffee')) + .pipe(gulp.dest('./build/game')) +) + +gulp.task('coffee', ['concatCoffee'], () -> + gulp.src('./build/game/main.coffee') + .pipe(coffee({bare: true})) + .pipe(gulp.dest('./build/game/')) +) + +gulp.task('build', ['html', 'img', 'sass', 'coffee', 'audio']) + +gulp.task('serve', ['build'], () -> + browserSync({ + server: { + baseDir: 'build' + } + online: true + browser: [] + ghostMode: false + }) + + sassListener = () -> + reload('./build/css/main.css') + + gulp.watch(['./html/*.html'], ['html']) + gulp.watch(['./sass/*.scss'], ['sass']) + gulp.watch(['./img/*.png', './img/*.jpeg', './img/*.jpg'], ['img']) + gulp.watch(['./game/*.coffee'], ['coffee']); + + gulp.watch(['./build/css/main.css'], sassListener) + gulp.watch( + ['./build/game/bundle.js', './build/img/*', './build/index.html'], + browserSync.reload) +) + +gulp.task('html-dist', html('./dist')) +gulp.task('img-dist', img('./dist/img')) +gulp.task('audio-dist', audio('./dist/audio')) +gulp.task('legal-dist', () -> + return gulp.src(['LICENSE.txt']) + .pipe(gulp.dest("./dist")) +) + +gulp.task('sass-dist', () -> + return gulp.src('./sass/main.scss') + .pipe(sass({outputStyle: 'compressed'})) + .pipe(gulp.dest('./dist/css')) +) + +gulp.task('coffee-dist', ['concatCoffee'], () -> + gulp.src('./build/game/main.coffee', {sourcemaps: false}) + .pipe(coffee()) + .pipe(uglify()) + .on('error', gutil.log) + .pipe(gulp.dest('./dist/game/')) +) + +gulp.task('dist', [ + 'html-dist', + 'img-dist', + 'sass-dist', + 'coffee-dist', + 'audio-dist', + 'legal-dist' +]) + +gulp.task('zip', ['dist'], () -> + return gulp.src('dist/**') + .pipe(zip('dist.zip')) + .pipe(gulp.dest('.')) +) diff --git a/game/begin.coffee b/game/begin.coffee new file mode 100644 index 0000000..efe6924 --- /dev/null +++ b/game/begin.coffee @@ -0,0 +1,123 @@ +salet.game_id = "8b0c371c-57f4-49b3-ae3c-cba07d1a9733" +salet.game_version = "1.0" +salet.beforeAction = (roomId, actionId) -> + verbRe = /verb\_(?:\w+)\_(?:\w+)/ + match = verbRe.exec(actionId) + if match? and match[1] and match[2] + verb = match[1] + unit = match[2] + salet.view.write(salet.rooms[roomId].units[unit][verb].fcall(salet.rooms[roomId])) + return true # consume the action + return false + +$.holdReady( true ) +$.getJSON('game/translations/'+i18n.lang+'.json', (data) -> + i18n.push(i18n.lang, data) + + $.holdReady( false ) +) + +switchTab = (tabid) -> + $(".tab").removeClass("active") + $("#"+tabid).addClass("active") + +$(document).ready(() -> + window.addEventListener('popstate', (event) -> + salet.goBack() + ) + $("body").on("click", '#night', () -> + if (window.night) + $("body").removeClass("night") + $("#night").removeClass("active") + window.night = false + else + $("body").addClass("night") + $("#night").addClass("active") + window.night = true + ) + $("body").on("click", "#storytab", (event) -> + event.preventDefault() + if not salet.here().canSave + salet.goBack() + return false + ) + $("body").on("click", ".tab", (event) -> + switchTab(event.target.id) + return true + ) + + salet.beginGame() +) + +updateverb = (unit, verb) -> + if unit[verb]? or salet.character.displayAll + $("##{verb}list").append("
  • #{unit.display()}
  • ") + +### +Element helpers. There is no real need to build monsters like a().id("hello") +because you won't use them as is. It does not make sense in context, the +author has Markdown and all utilities to *forget* about the markup. +### +way_to = (content, ref) -> + return "#{content}" +textlink = (content, ref) -> + return "#{content}" +actlink = (content, ref) -> + return "#{content}" + +sysroom = (name, options) -> + options.canSave = false + options.enter = () -> + $("#inventory").hide() + options.exit = () -> + $("#inventory").show() + options.dsc = () -> + return @text.fcall()+"\n\n"+""" +
    + """ + options.actions = { + exit: () -> + return salet.goBack() + } + return room(name, options) + +croom = (name, spec) -> + spec.clear ?= true + spec.optionColor ?= "" + spec.optionText ?= () -> + retval = """ +
    +
    #{spec.title.fcall()}
    + """ + if (spec.subtitle?) + retval += """ +
    #{spec.subtitle.fcall()}
    + """ + retval += '
    ' + spec.enter = () -> + salet.character.update_sidebar() + if @onEnter? + @onEnter() + return room(name, spec) + +sysroom "inventory", + text: () -> + if salet.character.inventory.length == 0 + text = "You are carrying nothing." + else + text = "You are carrying:\n\n" + for thing in salet.character.inventory + text += "* #{salet.character.listinv(thing.name)}\n" + +sysroom "settings", + text: () -> + nightclass = "" + if window.night + nightclass = "active" + return "credits".l() + """ + + + + + + """ diff --git a/game/dialogue.coffee b/game/dialogue.coffee new file mode 100644 index 0000000..1ac529d --- /dev/null +++ b/game/dialogue.coffee @@ -0,0 +1,23 @@ +### +A dialogue shortcut. +Usage: + + dialogue "Point out a thing in her purse (mildly)", "start", "mild", """ + Point out a thing in her purse (mildly) + """, "character.mild = true" +### +dialogue = (title, startTag, endTag, text, effect) -> + retval = room("dialogue_"+Object.keys(salet.rooms).length, { + optionText: title + dsc: text + clear: false # backlog is useful in dialogues + choices: "#"+endTag + }) + if typeof(startTag) == "string" + retval.tags = [startTag] + else if typeof(startTag) == "object" + retval.tags = startTag + if effect? + retval.before = (character, system) -> + eval(effect) + return retval diff --git a/game/phrase.coffee b/game/phrase.coffee new file mode 100644 index 0000000..005f630 --- /dev/null +++ b/game/phrase.coffee @@ -0,0 +1,26 @@ +### +A phrase shortcut. +Usage: + + phrase "Point out a thing in her purse (mildly)", "start", """ + Point out a thing in her purse (mildly) + """, "character.sandbox.mild = true" + +@param title phrase Phrase (question) +@param salet Salet core +@param string tag tag marking viewing condition +@param string text Response +@param string effect an optional parameter, eval'd code +### +phrase = (title, tag, text, effect) -> + retval = room("phrase_"+salet.rooms.length, { + optionText: title + dsc: text + clear: false # backlog is useful in dialogues + choices: "#"+tag + tags: [tag] + }) + if effect? + retval.before = (character, system) -> + eval(effect) + return retval diff --git a/game/story.coffee b/game/story.coffee new file mode 100644 index 0000000..d0f680a --- /dev/null +++ b/game/story.coffee @@ -0,0 +1,54 @@ +salet.init = () -> + @character.displayAll = false + @character.update_sidebar = () -> + $(".objects").empty() + for obj in document.querySelectorAll(".objects") + for u in salet.here().units + updateverb(u, $(obj).data("verb")) + for u in salet.character.inventory + updateverb(u, $(obj).data("verb")) + cloak = unit "cloak", + dsc: () -> "cloak".l() + display: () -> "cloak_disp".l() + drop: () -> + if (salet.currentRoom != 'cloakroom') + return "drop_cloak".l() + return "hang_cloak".l() + wear: () -> + if (salet.here().has('cloak')) + salet.here().drop('cloak') + salet.character.take('cloak') + return "wear_cloak".l() + else # no cloak in the room, maybe in the inventory? + if salet.character.has('cloak') + return "wear_cloak".l() + else + return "no_cloak".l() + @character.take(cloak) + +croom "start", + before: () -> "start".l() + dsc: () -> "foyer".l() + ways: ["entrance", "cloakroom", "bar"] + +croom "foyer", + clear: false + dsc: () -> "foyer".l() + ways: ["entrance", "cloakroom", "bar"] + title: () -> "foyer_title".l() + +croom "cloakroom", + dsc: () -> "cloakroom".l() + title: () -> "cloakroom_title".l() + ways: ["foyer"] + +croom "entrance", + dsc: () -> "entrance".l() + after: () -> + salet.goTo('foyer') + title: () -> "entrance_title".l() + +croom "bar", + dsc: () -> "bar".l() + title: () -> "bar_title".l() + ways: ["foyer"] diff --git a/game/translations/en.cson b/game/translations/en.cson new file mode 100644 index 0000000..d01c6b4 --- /dev/null +++ b/game/translations/en.cson @@ -0,0 +1,75 @@ +foyer_title: "Foyer of the Opera House" +start: """ + Hurrying through the rainswept November night, you're glad to see the bright + lights of the Opera House. + It's surprising that there aren't more people about but, hey, what do you + expect in a cheap demo game...? + + ### Cloak of Darkness + #### A basic IF demonstration + ##### Roger Filth, remade in Salet by Alexander Yakovlev +""" +foyer: """ + You are standing in a spacious hall, splendidly decorated in red + and gold, with glittering chandeliers overhead. + The entrance from the street is to the [north,](north) and there are doorways + [south](south) and [west.](west) +""" +credits: """ + The game uses code licensed by MIT license. + Code contributors: + + * Alexander Yakovlev + * Andrew Plotkin + * Bruno Dias + * David Eyk + * Dmitry Eliseev + * Ian Millington + * Ivan Narozhny + * Juhana Leinonen + * Reactive Sets + * Michael Neal Tenuis + * Selene +""" +entrance: """ + You've only just arrived, and besides, the weather outside seems to be getting worse. +""" +cloakroom: """ + The walls of this small room were clearly once lined with hooks, + though now [only one](./hook) remains. The exit is a door to the [east.](cloakroom) +""" +cloakroom_title: "Cloakroom" +entrance_title: "Street entrance" +bar_title: "Foyer bar" +bar: """ + The bar, much rougher than you'd have guessed after the opulence + of the foyer to the north, is completely empty. +""" +message: """ + There seems to be some sort of {{message}} scrawled in the sawdust on the floor. +""" +message_x: """ + The message, neatly marked in the sawdust, reads... + + ### You have won +""" +message_ruined: """ + The message has been carelessly trampled, making it difficult to read. + You can just distinguish the words... + + ### You have lost +""" +cloak: """ + A handsome cloak, of velvet trimmed with satin, and slightly spattered with raindrops. + Its blackness is so deep that it almost seems to suck light from the room. +""" +cloak_disp: "cloak" +hook: "It's just a small brass hook," +hook_empty: "screwed to the wall." +hook_full: "with {list} hanging on it." +dark: "Blundering around in the dark isn't a good idea!" +drop_cloak: "This isn't the best place to leave a smart cloak lying around." +hang_cloak: "There's a hook here, so you hang the cloak on it." +night: "Night mode" +multiplayer: "Multiplayer mode" +showall: "Filter list of objects" diff --git a/game/translations/ru.cson b/game/translations/ru.cson new file mode 100644 index 0000000..835838c --- /dev/null +++ b/game/translations/ru.cson @@ -0,0 +1,17 @@ +credits: """ + Фоновое изображение: нет + + Игра использует код по лицензии MIT. К коду приложили руку: + + * Alexander Yakovlev + * Andrew Plotkin + * Bruno Dias + * David Eyk + * Dmitry Eliseev + * Ian Millington + * Ivan Narozhny + * Juhana Leinonen + * Reactive Sets + * Michael Neal Tenuis + * Selene +""" diff --git a/html/en.html b/html/en.html new file mode 100644 index 0000000..d4ab2c5 --- /dev/null +++ b/html/en.html @@ -0,0 +1,70 @@ + + + + + Cloak of Darkness + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    + + +
    +
    + +
    +
    + + + + + + + + + + diff --git a/html/index.html b/html/index.html new file mode 100644 index 0000000..2c3dc16 --- /dev/null +++ b/html/index.html @@ -0,0 +1,66 @@ + + + + + Инженер + + + + + +
    +
    + +
    +
    + +
    + + +
    +
    + +
    +
    + + + + + + + + + + diff --git a/img/compass.png b/img/compass.png new file mode 100644 index 0000000000000000000000000000000000000000..7274322be50a6673b433c92c65c3e3946e9f9237 GIT binary patch literal 1364 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 N002ovPDHLkV1kwYXBz+j literal 0 HcmV?d00001 diff --git a/package.json b/package.json new file mode 100644 index 0000000..8f72aab --- /dev/null +++ b/package.json @@ -0,0 +1,20 @@ +{ + "dependencies": { + "salet": "^1.7.5" + }, + "private": true, + "devDependencies": { + "bootstrap": "^4.0.0-alpha.5", + "browser-sync": "^2.18.8", + "coffee-script": "^1.12.6", + "cson": "^4.1.0", + "gulp": "^3.8.11", + "gulp-coffee": "^2.3.4", + "gulp-concat": "^2.6.1", + "gulp-rename": "^1.2.2", + "gulp-sass": "^3.1.0", + "gulp-uglify": "^2.1.2", + "gulp-util": "^3.0.8", + "gulp-zip": "^4.0.0" + } +} diff --git a/sass/_variables.scss b/sass/_variables.scss new file mode 100644 index 0000000..48acfb7 --- /dev/null +++ b/sass/_variables.scss @@ -0,0 +1,31 @@ +$font-family-sans-serif: 'Scada', 'PT Sans', sans-serif; +$font-family-serif: 'PT Serif', serif; +$headings-font-family: $font-family-serif; +//$headings-font-family: "PT Sans Caption",$font-family-sans-serif; +$font-family-base: $font-family-serif; + +$body-bg: #eee; +$body-color: #000; +$link-color: darkviolet; +$btn-bg: grey; +$btn-color: lighten($btn-bg, 50%); +$secondary-bg: #F1EED9; + +$brand-primary: lighten($body-color, 20%); +$brand-danger: darken(#fff, 30%); + +$waycolor: $link-color; +$text_background: transparent; +$animation_duration: 2s; + +$enable-rounded: true; +$enable-shadows: false; +$enable-gradients: false; +$enable-transitions: false; +$enable-hover-media-query: false; +$enable-grid-classes: false; +$enable-print-styles: true; + +$ok-color: $link-color; +$neutral-color: brown; +$warning-color: darkred; diff --git a/sass/main.scss b/sass/main.scss new file mode 100644 index 0000000..ec0d3c4 --- /dev/null +++ b/sass/main.scss @@ -0,0 +1,176 @@ +@import "variables"; +@import "../node_modules/bootstrap/scss/bootstrap.scss"; + +.fixed { + position: fixed; + left: 0; + right: 0; + top: 0; + z-index: 1000; + width: 100%; +} +body { + // background-image: url('../img/background.png'); + background-image: radial-gradient(circle,rgba(0,0,0,.0),rgba(0,0,0,.3)); +} +.container { + @include make-container(); + @include make-container-max-widths(); + border-radius: 5px; + // border-style: solid; + // border-width: 81px 103px 77px 66px; + // border-image: url(../img/border.png) 81 103 77 66 repeat; +} +#ways_wrapper { + @include make-row(); +} +#ways { + @include media-breakpoint-up(md) { + @include make-col(6); + @include make-col-offset(3); + } + text-align: center; + .nav-item { + list-style-type: none; + display: inline-block; + @extend .btn; + @extend .btn-outline-primary; + a { + color: $body-color; + } + &:hover a { + color: #fff; + } + } +} +#content_wrapper { + @include make-row(); + background: $text_background; +} +.sidebar { + @include media-breakpoint-up(md) { + @include make-col(3); + } + .verb { + margin-top: 1em; + text-align: center; + font-size: larger; + text-transform: uppercase; + } + li { + @extend .btn; + @extend .btn-outline-danger; + display: block; + text-align: left; + } +} +.content { + @include make-col(12); + @include media-breakpoint-up(md) { + @include make-col(10); + @include make-col-offset(1); + } + &.narrow { + @include media-breakpoint-up(md) { + @include make-col(9); + margin-left: 0; + } + } + padding: 1em; + ul { + margin: 0; + padding: 0 0 0 1em; + } + ul.options { + padding: 0; + margin-top: 0.5em; + margin-bottom: 0.7em; + list-style-type: none; + li { + display: inline; + } + li a { + display: block; + margin-bottom: 0.5em; + font-family: $headings-font-family; + text-decoration: none; + > div { + border-radius: 5px; + border: 1px solid #000; + padding: 1em; + background-image: linear-gradient( 45deg, #ccc, #fff ); + color: $ok-color; + &:hover { + background-color: rgba(153,136,119,0.2); + background-image: none; + } + } + } + .warning { + background-image: linear-gradient( 45deg, #ddd, #fff ); + color: $warning-color; + } + .neutral { + background-image: linear-gradient( 90deg, #ccc, #fff ); + color: $neutral-color; + } + } + .room-start { + border-top: none; + } + h3, h4, h5 { + text-align: center; + } + blockquote { + font-family: "EB Garamond", serif; + margin: 1em 2em; + line-height: 1.45; + color: #383838; + font-size: $font-size-base* 1.4; + } +} +.cycle { + color: darkgreen; + border-bottom: darkgreen dashed 1px; +} +hr { + width: 50%; + border-color: $body-color; +} +.btn-outline-primary, +.btn-outline-danger { + border: none; + border-color: transparent; +} +.center { + text-align: center; +} +.gothic { + font-family: "Germania One", cursive; +} +.footer { + @include media-breakpoint-up(md) { + @include make-col(6); + @include make-col-offset(3); + } + text-align: center; +} +.tab { + width: 100%; + position: relative; + text-align: left; + display: block; + padding: 14px 21px; + border-radius: 2px 2px 0 0; + font-size: $font-size-base; + font-weight: normal; + top: 4px; + &:hover { + background: lighten($brand-primary, 10); + } + &.active { + top: 0; + padding-top: 17px; + background: darken($body-bg, 15); + } +}