JeuWeb Créez votre jeu par navigateur !

Viciousity · 03-08-2011, 10:03 AM

Voilà une l'interface de connexion-inscription que je suis en train de réaliser pour un futur jeu de stratégie du type heroic fantasy.

http://www.youtube.com/watch?v=XJKYGZg2p7M

Si vous avez des remarques, je suis preneur.

Akira777 · 03-08-2011, 10:51 AM

Pas particulièrement de remarque, mais je trouve ça rudement sympa !

**Sephi-Chan** · 03-08-2011, 11:41 AM

La fenêtre du navigateur aurait suffit. Même Quicktime sur Lion permet de le faire ! :p

Côté design, c'est agréable à l'œil, même si je ne suis pas fan des textes énormes dans les formulaires.
D'ailleurs, quelle tronche ont les messages d'erreur des formulaires ?

Good job !

Hideaki · 03-08-2011, 03:07 PM

J'aime bien le design mais l'enregistrement je trouve cela dommage de devoir jouer de la molette.

@Sephi-chan: je pense que le message d'erreur doit-être encore plus gros XD

Viciousity · 03-08-2011, 06:08 PM

Voila pour toi Sephi.
http://www.youtube.com/watch?v=cohkAKpwfs0

Au programme :
- revisite des input.
- ajout des messages d'erreurs.

**Sephi-Chan** · 03-08-2011, 06:43 PM

Impec ! C'est bien mieux sans le gros Dock, quand même ! Smile

Akira777 · 03-08-2011, 07:47 PM

Et mais c'est super ça ! Tu voudrais pas filer le code source Tongue

Viciousity · (Modification du message : 03-08-2011, 08:50 PM par Viciousity.)

Bah sa me dérange pas du tout de vous filer le code source hein Smile

A condition de vous en inspirer mais pas de le copier ;P

Je vous poste sa ce soir Smile

Pour ce qui est du css :





/*  GENERAL

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

    * {

      margin: 0;

      padding: 0;

    }

    html {

      background-color: #FFF;

      color: #444;

      font: 16px/1.4em Helvetica,sans-serif;

      font-weight: lighter;

    }

    body {

      margin: 0 auto;

      width: 480px;

    }





/*  HEADER

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

    #header {

      margin-top: 40px;

      margin-bottom: 40px;

    }

    #header img a {

      border: none;

    }





/*  NAVIGATION

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

    #nav {

      margin-bottom: 50px;

    }

    #nav a {

      transition: all 0.3s ease;

      -webkit-transition: all 0.3s ease;

      -moz-transition: all 0.3s ease;

      background-repeat: no-repeat;

      background-position: left top;

      display: block;

      width: 480px;

    }

    #nav a:hover {

      background-position: left bottom;

    }

    #nav a.signup.active,

    #nav a.signin.active {

      background-position: left bottom;

    }

    #nav a.signup {

      background-image: url('layout/nav_signup.png');

      height: 85px;

    }

    #nav a.signin {

      background-image: url('layout/nav_signin.png');

      height: 41px;

    }

    

/*  CONTENT

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

    #content {

      margin-bottom: 40px;

    }





/*  FOOTER

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

    #footer {

      background-color: #222;

      color: #AAA;

      font-size: .7em;

      font-weight: normal;

      padding: 8px 16px;

      text-align: right;

      text-transform: uppercase;

      word-spacing: 2px;

    }

    #footer a {

      color: #CCC;

      font-weight: bold;

      text-decoration: none;

    }

    #footer a:hover {

      color: #FFF;

      text-decoration: underline;

    }





/*  GAME DESCRIPTION

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

    #game_desc .img {

      cursor: pointer;

      margin-bottom: 10px;

      position: relative;

    }

    #game_desc .img img {

      border: 10px solid #DDD;

      width: 460px;

      min-height: 100px;

    }

    #game_desc .img span {

      background-color: rgba(0,0,0,0.6);

      color: rgba(255,255,255,0.8);

      font-size: .8em;

      padding: 10px 20px;

      position: absolute;

      bottom: 15px;

      left: 10px;

      width: 420px;

    }





/*  COMMON ELEMENTS

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

    hr {

      border: none;

      border-bottom: 12px solid #E0E0E0;

      margin-bottom: 10px;

      padding-top: 10px;

    }



/*  MESSAGE BOXES

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

    p.message {

      border-radius: 6px;

      background-color: #000;

      background-position: 9px center;

      background-repeat: no-repeat;

      color: rgba(255,255,255,0.9);

      margin-bottom: 10px;

      padding: 12px 8px 12px 50px;

    }

    p.message.notice {

      background-color: #09C;

      background-image: url('layout/icons_notice.png');

    }

    p.message.alert {

      background-color: #C00;

      background-image: url('layout/icons_alert.png');

    }



/*  FORMS

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

    fieldset {

      border: none;

    }

    .field,.check {

      border-bottom: 1px dashed #AAA;

      margin-bottom: 20px;

      padding-bottom: 20px;

    }

    .submit {

      margin-bottom: 10px;

    }

    .field label {

      display: block;

      font-weight: bold;

      margin-bottom: 5px;

    }

    .field label:after {

      content: ' :'

    }

    .field input {

      border-radius: 6px;

      border: 2px solid #BBB;

      color: #AAA;

      font-size: 1.4em;

      font-weight: normal;

      margin-bottom: 10px;

      padding: 8px 13px;

      width: 448px;

    }

    .field input:focus {

      background: url('layout/icons_edit.png') no-repeat 431px center;

      border: 4px solid #888;

      color: #777;

      outline: none;

      padding: 6px 50px 6px 11px;

      width: 409px;

    }

    .submit input {

      border-radius: 6px;

      background-color: #222;

      border: none;

      color: #CCC;

      cursor: pointer;

      font-size: 1.2em;

      padding: 10px 15px;

      text-transform: uppercase;

      width: 480px;

    }

    ul.errors {

      border-radius: 6px;

      background: #C30 url('layout/icons_alert.png') no-repeat 9px center;

      color: rgba(255,255,255,0.9);

      font-size: .9em;

      list-style: none;

      margin-bottom: 10px;

      padding: 7px 18px 7px 50px;

      width: 410px;

    }

    ul.errors li {

      background: url('layout/border.png') repeat-x left bottom;

      padding: 5px 0;

    }

    ul.errors li:last-child {

      background: none;

    }

La page d'accueil :



<!DOCTYPE html>

<html>

  <head>

    <title>Fantasy Slash</title>

    <link href="/assets/application.css" media="screen" rel="stylesheet" type="text/css" />

    <script src="/assets/application.js" type="text/javascript"></script>

  </head>

  <body>

    <div id='header'>

      <a href="/"><img alt="Header_logo" src="/assets/layout/header_logo.png" /></a>

    </div>

    <div id='nav'>

      <a href="/account/inscription" class="signup"></a>

      <hr>

      <a href="/account/connexion" class="signin"></a>

    </div>

    <div id='content'>

      <div id='game_desc'>

        <div class='img'>

          <img alt="01" src="/assets/game_desc/01.jpg" />

          <span>Rentrez dans un univers où magie et technologie cohabitent en harmonie et où seulement les plus braves survivront.</span>

        </div>

        <div class='img'>

          <img alt="02" src="/assets/game_desc/02.jpg" />

          <span>Apprenez de nouvelles compétences, maitrisez de nouvelles armes, battez-vous pour devenir le meilleur.</span>

        </div>

        <div class='img'>

          <img alt="03" src="/assets/game_desc/03.jpg" />

          <span>Prenez part à la communauté pour acheter et revendre vos équipements ou simplement afin de rencontrer de nouveaux alliés.</span>

        </div>

      </div>

    </div>

    <div id='footer'>

      Ce site est développé par <a href="">D2F</a>,

      propulsé par <a href="http://rubyonrails.org/">Ruby on Rails</a>

    </div>

  </body>

</html>

Un formulaire :

<form accept-charset="UTF-8" action="/account/inscription" class="new_player" id="new_player" method="post">

  <fieldset>

    <div class='field'>

      <label for="player_email">Adresse mail</label>

      <input id="player_email" name="player[email]" placeholder="Adresse mail valide." size="30" type="text" value="error" />

      <ul class='errors'>

        <li>Vous devez renseigner une adresse valide.</li>

      </ul>

    </div>

    <div class='field'>

      <label for="player_alias">Nom du Héro</label>

      <input id="player_alias" name="player[alias]" placeholder="2-20 caractères." size="30" type="text" value="" />

      <ul class='errors'>

        <li>Doit commencer par une majuscule suivie de minuscule(s) (Exemple, Exemple-Composé)</li>

        <li>Le nom doit être composé d'au moins 2 caractères.</li>

      </ul>

    </div>

    <div class='field'>

      <label for="player_password">Mot de passe</label>

      <input id="player_password" name="player[password]" placeholder="5-20 caractères." size="30" type="password" />

      <ul class='errors'>

        <li>Votre mot de passe doit être composé d'au moins 5 caractères.</li>

      </ul>

    </div>

    <div class='submit'>

      <input name="commit" type="submit" value="Créer mon compte" />

    </div>

  </fieldset>

</form>

**Sephi-Chan** · 04-08-2011, 08:02 AM

Balance le SCSS et le Haml, ça fera des vocations ! Big Grin

Akira777 · 04-08-2011, 11:03 AM

Oh oui carrément xD