diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..ba49e3c --- /dev/null +++ b/.editorconfig @@ -0,0 +1,5 @@ +root = true + +[*] +indent_style = tab +indent_size = 4 diff --git a/base.css b/base.css index 2def7bb..58f5926 100644 --- a/base.css +++ b/base.css @@ -1,62 +1,169 @@ -h1, h2 { - font-size:1em; - font-style:italic; - margin: 0 1em; - text-align:center; - text-transform:uppercase; +/* + General styles + + some practically general ones will be in the + Board styling section + +*/ + +abbr { + cursor:help; } -iframe { - height:15em; - margin:2px; - width:31em; +body { + margin:0; + padding:1em; } img { height:100%; /* resize to fill their container */ width:100%; /* resize to fill their container */ - vertical-align: bottom; + vertical-align:bottom; } -table #windows { - border-spacing:0.5em; +/* - - - - - - - - - - - - - - + Board styling + + See readme.txt for a layout diagram + with IDs and classes labeled + */ + +main#board { + display:grid; + grid-gap:2px; + grid-template-columns:32em 32em; + grid-template-rows:auto; + grid-template-areas: + "perp view" + "msg view"; +} +main#board section.window { + background-color:lightgray; + border:2px outset lightgrey; + padding:2px; } -td { - vertical-align:top; /* doing this removes space under images */ +main#board h1, +main#board h2 { + border:2px groove lightgray; + display:inline-block; + font-size:1em; + margin:0; + margin-bottom:2px; + padding:0 1em; + text-transform:uppercase; } +main#board h1 { + text-align:center; +} +main#board h2 {} -td:not(.window) { +/* - - - - - - - - - - - - - - +*/ + +main#board section#view { + grid-area:view; + text-align:center; +} +main#board section#view section#map { + display:grid; + grid-gap:2px; + grid-template-columns:1fr 1fr 1fr 1fr 1fr; + grid-template-rows:1fr 1fr 1fr 1fr 1fr; +} +main#board section#view section#map section.cell { + background-size:6em 6em; + border:1px inset lightgray; height:6em; padding:0; width:6em; } -td .window, .heading { - border-style:groove; +/* - - - - - - - - - - - - - - +*/ + +main#board section#perception { + grid-area:perp; +} +main#board section#perception section#senses { + display:grid; + grid-gap:2px; + grid-template-columns:1fr 1fr 1fr 1fr 1fr; + grid-template-rows:1fr 1fr; } -td .senses { +main#board section#perception section#senses section.icon { border:1px outset lightgray; } -td .sensed { +main#board section#perception section#senses section.description { border:1px inset lightgray; color:black; } -#splashimage { - border:0; /* Removes border from cell */ - padding:1em; +/* - - - - - - - - - - - - - - +*/ + +main#board section#message { + grid-area:msg; +} +main#board iframe { + border:1px inset lightgray; + height:15em; + margin:0; + padding:0; + width:31.4em; +} + +/* - - - - - - - - - - - - - - + Title screen styling +*/ + +main#titlescreen { + margin:0; + padding:0; + width:32em; +} + +main#titlescreen h1, +main#titlescreen h2 { + font-size:1em; + margin:0 1em; + text-align:center; + text-transform:uppercase; +} +main#titlescreen h1 { + font-style:italic; +} +main#titlescreen h2 {} +main#titlescreen h3 { + margin:0; +} + +main#titlescreen header, +main#titlescreen hr, +main#titlescreen section { + margin:2px 0; + padding:0; +} + +main#titlescreen hr { + height:3px; +} + +main#titlescreen section#credit {} + +main#titlescreen section#notes ul { + margin:0; +} + +main#titlescreen section#splash { + padding:0; text-align:center; } -.title { - margin-left: auto; - margin-right: auto; -} - -/* Some generic manipulation classes +/* - - - - - - - - - - - - - - + Some generic manipulation classes Use these to easily rotate, flip, etc., images */ diff --git a/boards/room_01.html b/boards/room_01.html index 9bb30d0..66791b9 100644 --- a/boards/room_01.html +++ b/boards/room_01.html @@ -10,134 +10,91 @@ /* You may wish to relocate some of these to 'base.css' if they will be consistant / mostly consistant throughout your game. + Anything placed here will override things + already set in 'base.css' + Have fun with it! */ a { - /* Hyperlink colour */ - color:white + color:white /* Hyperlink colour */ } body { - /* main bg colour */ - background-color:lightgray; - /* main bg image */ - background-image:url("../images/background.jpg"); - /* main text colour */ - color:blue; + background-color:lightgray; /* main bg colour */ + background-image:url("../images/background.jpg"); /* main bg image */ + color:blue; /* main text colour */ } - iframe { - /* message border style */ - border:1px inset lightgray; - } - td { - /* panel background colour */ - background-color:lightgray; - /* panel border style */ - border:2px outset lightgray; - } - #board td { - /* board cells bg colour */ - background-color:lightgray; - /* board cells bg image */ - background-image:url("../images/floor.gif"); - background-size:6em 6em; - /* board cells border style */ - border:1px inset lightgray; + section#view section#map section.cell { + background-color:lightgray; /* board cells bg colour */ + background-image:url("../images/floor.gif"); /* board cells bg image */ } - - - - - - - - +
+ + +
+

example game

+
+ + +
a damp stone wall
+
a damp stone wall
+
a damp stone wall
+
a damp stone wall
+
a damp stone wall
+ +
a damp stone wall
+
+
+
+
a damp stone wall
+ +
a damp stone wall
+
+
+
a brighly coloured hight-heeled roller-skate, with blurred laser-blue wheels and a decorative orange sparkle on the toe.
+
a damp stone wall
+ +
a damp stone wall
+
Ҩ ̡⁐̤ᕐᐷ
+
+
+
+ +
a damp stone wall
+
a damp stone wall
+
a damp stone wall
+
a damp stone wall
+
a damp stone wall
+
+
+ + +
+

perception

+
+ +
a blinking, looking eye
+
a smelling dog nose
+
alistening ear
+
a tongue curling
+
a gloved hand pointing
+ +
MOUSE,
EXIT
+
MUSK, OFFAL
+
CHURNING
+
WET
+
. . .
+
+
+ -
- -
- - - - -
-

perception

-
- - - - - - - - - - - - - - - -
MOUSE,
EXIT		MUSK, OFFALCHURNINGWET. . .
- 		- - - - -
-

example game

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ҩ ̡⁐̤ᕐᐷ
-
- - - - - -
-

message

- 		- ↸ -
- -
+
+

message

+ ↸ + +
+ + diff --git a/index.html b/index.html index 5d1500f..a87b8ac 100644 --- a/index.html +++ b/index.html @@ -6,50 +6,46 @@ - + - - - - - - - - - - - - - - - - -
-

EXAMPLE GAME :)

-
-

A Game by Blueberry Soft.

-
A cartoonish image of a splash. Click to continue.
-

Notes:

+
+ +
+

Example Game :)

+
+ +
+ +
+

A Game by Blueberry Soft.

+
+ +
+ An animated, growing spiral. Click to continue. +
+ +
+

Notes:

    -
  • Example game for OBSHAGCE.
    • +
  • Example game for OBSHAGCE.
  • Click on things to play.
  • All included media is free to use!
-
+ + + diff --git a/messages/room_001_skates_spiders.html b/messages/room_001_skates_spiders.html index c1e8309..5c790fd 100644 --- a/messages/room_001_skates_spiders.html +++ b/messages/room_001_skates_spiders.html @@ -7,6 +7,6 @@ - + the rollerscate turned upside-down, with the text 'tap! tap! tap!' diff --git a/readme.txt b/readme.txt index 1034fa4..d227231 100644 --- a/readme.txt +++ b/readme.txt @@ -33,7 +33,7 @@ Goals ----------- ----------- ----------- ----------- ----------- - - Easy to read markup (with comments). + - Easy to read markup (semantic, and with comments). - Be a useful earning tool for HTML and CSS. - No Java Script (but feel free to fork if you're into that). @@ -68,7 +68,7 @@ You make a title/intro screen in index.html This points to HTML files in 'boards' These files have graphics and text and things you can - click on in the cells on the right (what I call the board) + click on in the cells on the right (what I call the map) and these open text, or HTML, or sounds, or whatever in the message widow in the lower left. You can also add some stuff to describe what is 'seen', @@ -81,32 +81,74 @@ Trying to explain the purpose / use of the IDs and classes used. + Most of the CSS is in base.css, but some is kept in the + HTML files so you can easily tweak things per-board, the + colours, for example. + +----------- ----------- ----------- ----------- ----------- + + Here's a diagram to show which section IDs and classes + are effecting on the board pages. + + # signifies an ID + . signifies a class + + ┌───────────────────────────────────────────────────────┐ + │ #board │ + │ │ + │ ┌────────────────────────┐ ┌────────────────────────┐ │ + │ │ #perception .window │ │ #view .window │ │ + │ │ │ │ │ │ + │ │┌──────────────────────┐│ │┌──────────────────────┐│ │ + │ ││ #senses ││ ││ #map ││ │ + │ ││ ││ ││ ││ │ + │ ││┌───┬───┬───┬───┬───┐ ││ ││┌───┬───┬───┬───┬───┐ ││ │ + │ │││ │ .icon │ │ ││ │││ │ │ │ │ │ ││ │ + │ ││├───┼───┼───┼───┼───┤ ││ ││├───┼───┼───┼───┼───┤ ││ │ + │ │││ .description │ ││ │││ │ │ │ │ │ ││ │ + │ ││└───┴───┴───┴───┴───┘ ││ ││├───┼───┼───┼───┼───┤ ││ │ + │ │└──────────────────────┘│ │││ │ .cell │ │ ││ │ + │ └────────────────────────┘ ││├───┼───┼───┼───┼───┤ ││ │ + │ ┌────────────────────────┐ │││ │ │ │ │ │ ││ │ + │ │ #message .window │ ││├───┼───┼───┼───┼───┤ ││ │ + │ │ │ │││ │ │ │ │ │ ││ │ + │ │ │ ││└───┴───┴───┴───┴───┘ ││ │ + │ │ │ │└──────────────────────┘│ │ + │ └────────────────────────┘ └────────────────────────┘ │ + └───────────────────────────────────────────────────────┘ ----------- ----------- ----------- ----------- ----------- IDs: - 'splashimage' For title screen images. You may or may + 'board' For all elements on the game boards. + 'titlescreen' For all elements on the titlescreen. + + 'view' The window containing the map. + 'map' The actual map grid. + + 'perception' The window containing sense information. + 'senses' The grid containing the icons and + descriptions for the senses. + + 'message' The window where messages appear. + + 'credit' For credits on the titlescreen. + 'notes' For the notes section on the titlescreen. + 'splash' For titlescreen images. You may or may not want the border. - 'windows' Contains all the game windows - - 'message' The window where messages appear - - 'person' The window containing sense information - ----------- ----------- ----------- ----------- ----------- Classes: - 'board' References the main game board. + 'cell' The individual cells that contain map + content. - 'heading' Headings for all the windows + 'icon' The cells that contain the sense icons. - 'senses' The cells that contain the sense icons - - 'sensed' The cells that contain the sense - descriptions + 'description' The cells that contain the sense + descriptions. 'title' Title above game board. Game title or - board title or ??? + board title or ???. 'window' References elements that make up the main three windows, but exludes their contents. @@ -130,7 +172,7 @@ 'flip_*' Flips the element on the vertical or horizonal axis. - 'shape_*' Changes elements shape. + 'shape_*' Changes elements' shape. And some classes for animated effects :)