changeset 3289:6de44651905f

smart.css
author Minoru Konno <c113069@e.koeki-u.ac.jp>
date Fri, 29 Jul 2016 13:09:15 +0900
parents cc756d7aae11
children b017014cee7e
files event/oasis2016/attack.css event/oasis2016/don/ckgame.rb event/oasis2016/sea/ckgame.rb event/oasis2016/smart.css event/oasis2016/tori/ckgame.rb
diffstat 5 files changed, 185 insertions(+), 49 deletions(-) [+]
line wrap: on
line diff
--- a/event/oasis2016/attack.css	Thu Jul 28 22:16:36 2016 +0900
+++ b/event/oasis2016/attack.css	Fri Jul 29 13:09:15 2016 +0900
@@ -41,3 +41,30 @@
 
 
 .jyama{color:#f9f5a9;}
+
+
+
+
+.rogo{
+width: 900px; 
+height: 100px
+}
+.umi{
+width:800px; 
+height:600px;
+}
+.jyama{color:#f9f5a9;}
+
+.don{
+ width:200px; 
+height:200px;
+}
+.sea{
+ width:450px; 
+height:150px;
+}
+.tori{
+ width:150px; 
+height=:225px;
+}
+
--- a/event/oasis2016/don/ckgame.rb	Thu Jul 28 22:16:36 2016 +0900
+++ b/event/oasis2016/don/ckgame.rb	Fri Jul 29 13:09:15 2016 +0900
@@ -38,17 +38,17 @@
   if form_name > ""             # formからの名前設定がもしあれば
     info[id]["name"] = form_name # それをユーザ情報に記録
     info[id]["bingo"] = Hash.new # 正解した単語保存用のハッシュも作成
-  if form_kwd > ""
+    if form_kwd > ""
      index = bingoword.index(form_kwd) # 配列から入力単語(form_kwd)を探索
       if index
         # 見付かった! その単語をハッシュのキーとして適当に値(true)を入れておく
         info[id]["bingo"][bingoword[index]] = true
       end
-   end
+    end
   end
   point = 0# 開始直後は0点
   if !info[id]["name"]      # もしユーザのプレイ名が未設定なら
-    umi = '<img src="umi.png" width="800px" height="600px">'
+    umi = '<img src="umi.png" class="umi">'
     title = "ようこそ!"
     hello = "まちがいさがしスタート"
     guide = "あなたのプレイ名を決めます"
@@ -58,14 +58,16 @@
     reset = '<input type="reset" value="リセット">'
   else                          # プレイ名設定済みならキーワード入力
     title = sprintf("%s さんのホーム", info[id]["name"])
-    setumei = "QRコードを読みこんでパネルを埋めよう!"
-    setumei2 = "完成した海戦丼の絵から違いを見つけよう!!"
-    guide = "間違っている絵のパネルは全部で9個あるよ♪"
-    seikai = '<img src="kaisendon.jpg" width="600px" height="600px">'
+    setumei = "QRコードを読みこんでパネルを埋めよう!(難易度☆☆☆)"
+    setumei2 = "この絵のパネルは全部で9枚!"
+    setumei3 = "元の絵との間違いは全部で3個あるよ♪"
+    seikai = '<img src="kaisendon.jpg" class="seikai">'
+    sea = '<a href="http://skip.koeki-prj.org/event/oasis2016/sea/ckgame.rb">難易度☆はこちら</a>'
+    tori = '<a href="http://skip.koeki-prj.org/event/oasis2016/tori/ckgame.rb">難易度☆☆はこちら</a>'
     # プレイ名設定済みで、さらにキーワードが入力されていたら
     if form_kwd > ""
       index = bingoword.index(form_kwd) # 配列から入力単語(form_kwd)を探索
-      #hello = sprintf("現在のポイントは %dpt です。", 25*point)
+     # hello = sprintf("現在のポイントは %dpt です。", 25*point)
       if index
         # 見付かった! その単語をハッシュのキーとして適当に値(true)を入れておく
         info[id]["bingo"][bingoword[index]] = true
@@ -78,23 +80,23 @@
     kaisen = ""; kaisen2 = ""; kaisen3 = ""; kaisen4 = ""; kaisen5 = ""; kaisen6 = ""; kaisen7 = ""; kaisen8 = ""; kaisen9 = ""
     info[id]["bingo"].keys.each do |f|
       if /きゅうり/ =~ f
-        kaisen = '<img src="kaisendon2-0.jpg" width="200px" height="200px">'
+        kaisen = '<img src="kaisendon2-0.jpg" class=don>'
       elsif /えび/ =~ f
-        kaisen2 = '<img src="kaisendon2-1.jpg" width="200px" height="200px">'
+        kaisen2 = '<img src="kaisendon2-1.jpg" class=don>'
       elsif /どんぶり/ =~ f
-        kaisen3 = '<img src="kaisendon2-2.jpg" width="200px" height="200px">'
+        kaisen3 = '<img src="kaisendon2-2.jpg" class=don>'
       elsif /さーもん/ =~ f
-        kaisen4 = '<img src="kaisendon2-3.jpg" width="200px" height="200px">'
+        kaisen4 = '<img src="kaisendon2-3.jpg" class=don>'
       elsif /まぐろ/ =~ f
-        kaisen5 = '<img src="kaisendon2-4.jpg" width="200px" height="200px">'
+        kaisen5 = '<img src="kaisendon2-4.jpg"  class=don>'
       elsif /ほし/ =~ f
-        kaisen6 = '<img src="kaisendon2-5.jpg" width="200px" height="200px">'
+        kaisen6 = '<img src="kaisendon2-5.jpg" class=don>'
       elsif /わさび/ =~ f
-        kaisen7 = '<img src="kaisendon2-6.jpg" width="200px" height="200px">'
+        kaisen7 = '<img src="kaisendon2-6.jpg" class=don>'
       elsif /たまご/ =~ f
-        kaisen8 = '<img src="kaisendon2-7.jpg" width="200px" height="200px">'
+        kaisen8 = '<img src="kaisendon2-7.jpg" class=don>'
       elsif /まる/ =~ f
-        kaisen9 = '<img src="kaisendon2-8.jpg" width="200px" height="200px">'
+        kaisen9 = '<img src="kaisendon2-8.jpg" class=don>'
       end
     end
   end
@@ -102,20 +104,31 @@
 <!DOCTYPE html>
 <html lang="ja">
 <head>
+
+<meta name="viewport"
+content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+<meta name="format-detection" content="telephone=no">
+<link media="only screen and (max-device-width:480px)"
+href="../smart.css" type="text/css" rel="stylesheet" />
+
+<link media="screen and (min-device-width:481px)" 
+href="../attack.css"type="text/css" rel="stylesheet" />
+
 <title>まちがいみつけでみっちゃ</title>
-<link rel="stylesheet" type="text/css" href="../attack.css">
 </head>
 
 <body>
-<img src="../img/logo.png" width="900px" height="100px">
+<img src="../img/logo.png" class="logo">
 <p>%s</p>
 <h1>%s</h1>
 <h2>%s</h2>
 <h2>%s</h2>
+<h2>%s</h2>
 <p>%s</p>
-<p>開けたパネル(%d/%d)</p>
+<p>%s %s</p>
+<p>開けたパネル(%d/18)</p>
 <form action="?" method="GET">
-<p>%s %s</p>
+<p>%s %s<p>
 <p>%s %s</p>
 <p>%s</p>
 </form>
@@ -132,5 +145,5 @@
 <div>%s</div></div>
 </body></html>
 EOF
-         umi, title, setumei, setumei2, hello, point, bingoword.length, guide, input, submit, reset, hidden, seikai, kaisen, kaisen4, kaisen7, kaisen2, kaisen5, kaisen8, kaisen3, kaisen6, kaisen9,)
+         umi, title, setumei, setumei2, setumei3, hello, sea, tori, point, guide, input, submit, reset, hidden, seikai, kaisen, kaisen4, kaisen7, kaisen2, kaisen5, kaisen8, kaisen3, kaisen6, kaisen9,)
 end
--- a/event/oasis2016/sea/ckgame.rb	Thu Jul 28 22:16:36 2016 +0900
+++ b/event/oasis2016/sea/ckgame.rb	Fri Jul 29 13:09:15 2016 +0900
@@ -38,7 +38,7 @@
   if form_name > ""             # formからの名前設定がもしあれば
     info[id]["name"] = form_name # それをユーザ情報に記録
     info[id]["bingo"] = Hash.new # 正解した単語保存用のハッシュも作成
-   if form_kwd > ""
+    if form_kwd > ""
      index = bingoword.index(form_kwd) # 配列から入力単語(form_kwd)を探索
       if index
         # 見付かった! その単語をハッシュのキーとして適当に値(true)を入れておく
@@ -48,7 +48,7 @@
   end
   point = 0# 開始直後は0点
   if !info[id]["name"]      # もしユーザのプレイ名が未設定なら
-    umi = '<img src="umi.png" width="800px" height="600px">'
+    umi = '<img src="umi.png" class=umi>'
     title = "ようこそ!"
     hello = "まちがいさがしスタート"
     guide = "あなたのプレイ名を決めます"
@@ -58,10 +58,12 @@
     reset = '<input type="reset" value="リセット">'
   else                          # プレイ名設定済みならキーワード入力
     title = sprintf("%s さんのホーム", info[id]["name"])
-    setumei = "QRコード読みこんでパネルを埋めて絵を完成させよう!!"
+    setumei = "QRコード読みこんでパネルを埋めて絵を完成させよう!(難易度☆)"
     setumei2 = "完成させた絵と元の絵の違いを探せ!"
-    guide = "間違っている場所は3個あるよ♪"
-    seikai = '<img src="ans.jpg" width="450px" height="450px">'
+    setumei3 = "間違っている場所は3個あるよ♪"
+    tori = '<a href="http://skip.koeki-prj.org/event/oasis2016/tori/ckgame.rb">難易度☆☆はこちら</a>'
+    don = '<a href="http://skip.koeki-prj.org/event/oasis2016/don/ckgame.rb">難易度☆☆☆はこちら</a>'
+    seikai = '<img src="ans.jpg" class=seikai>'
     # プレイ名設定済みで、さらにキーワードが入力されていたら
     if form_kwd > ""
       index = bingoword.index(form_kwd) # 配列から入力単語(form_kwd)を探索
@@ -78,11 +80,11 @@
     boat = ""; boat2 = ""; boat3 = ""
     info[id]["bingo"].keys.each do |f|
       if /かもめ/ =~ f
-        boat = '<img src="boat-0.png" width="450px" height="150px">'
+        boat = '<img src="boat-0.png" class=sea>'
       elsif /とびうお/ =~ f
-        boat2 = '<img src="boat-1.png" width="450px" height="150px">'
+        boat2 = '<img src="boat-1.png" class=sea>'
       elsif /ひとで/ =~ f
-        boat3 = '<img src="boat-2.png" width="450px" height="150px">'
+        boat3 = '<img src="boat-2.png" class=sea>'
       end
     end
   end
@@ -90,21 +92,33 @@
 <!DOCTYPE html>
 <html lang="ja">
 <head>
+
+<meta name="viewport"
+content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+<meta name="format-detection" content="telephone=no">
+<link media="only screen and (max-device-width:480px)"
+href="../smart.css" type="text/css" rel="stylesheet" />
+
+<link media="screen and (min-device-width:481px)" 
+href="../attack.css"type="text/css" rel="stylesheet" />
+
 <title>まちがいみつけでみっちゃ</title>
 <link rel="stylesheet" type="text/css" href="../attack.css">
 </head>
 
 <body>
-<img src="../img/logo.png" width="900px" height="100px">
+<img src="../img/logo.png" class=logo>
 <p>%s</p>
 <h1>%s</h1>
 <h2>%s</h2>
 <h2>%s</h2>
+<h2>%s</h2>
 <p>%s</p>
-<p>開けたパネル(%d/%d)</p>
+<p>%s %s</p>
+<p>開けたパネル(%d/18)</p>
 <form action="?" method="GET">
-<p>%s %s</p>
-<p>%s %s</p>
+<p>%s %s </p>
+</p>%s %s</p>
 <p>%s</p>
 </form>
 <p>%s</p>
@@ -114,5 +128,5 @@
 <div>%s</div></div>
 </body></html>
 EOF
-         umi, title, setumei, setumei2, hello, point, bingoword.length, guide, input, submit, reset, hidden, seikai, boat, boat2, boat3,)
+          umi,title, setumei, setumei2, setumei3, hello, tori, don, point, guide, input, submit, reset, hidden, seikai, boat, boat2, boat3,)
 end
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/event/oasis2016/smart.css	Fri Jul 29 13:09:15 2016 +0900
@@ -0,0 +1,66 @@
+body{text-align:center;
+background:#f9f5a9;}
+
+.logo{
+width: 100%;
+}
+.umi{
+width: 100%;
+}
+.seikai{
+width: 300px;
+heighr: 300px;
+}
+
+
+.don{
+width: 100px;
+height: 100px;
+}
+div.don {
+    position: relative; width: 300px; height: 300px;
+    border: 1px solid #f9f5a9; margin: 1em auto;
+}
+div.don div {width: 100px; height: 100px; margin: 0px;}
+div.don div:first-child {left: 0px; top: 0px}
+div.don div:nth-child(2) {position: absolute; left: 100px; top: 0px;}
+div.don div:nth-child(3) {position: absolute; left: 200px; top: 0px;}
+div.don div:nth-child(4) {position: absolute; left: 0px; top: 100px;}
+div.don div:nth-child(5) {position: absolute; left: 100px; top: 100px;}
+div.don div:nth-child(6) {position: absolute; left: 200px; top: 100px;}
+div.don div:nth-child(7) {position: absolute; left: 0px; top: 200px;}
+div.don div:nth-child(8) {position: absolute; left: 100px; top: 100px;}
+div.don div:nth-child(9) {position: absolute; left: 200px; top: 200px;}
+
+
+.sea{
+width: 300px;
+height: 100px;
+}
+div.sea {
+    position: relative; width: 300px; height: 300px;
+    border: 1px solid #f9f5a9; margin: 1em auto;
+}
+div.sea div {width: 300px; height: 150px; margin: 0px;}
+div.sea div:first-child {left: 0px; top: 0px;}
+div.sea div:nth-child(2) {position: absolute; left: 0px; top: 100px;}
+div.sea div:nth-child(3) {position: absolute; left: 0px; top: 200px;}
+
+
+
+.tori{
+width: 100px;
+height: 150px;
+}
+div.tori {
+    position: relative; width: 300px; height: 300px;
+    border: 1px solid #f9f5a9; margin: 1em auto;
+}
+div.tori div {width: 100px; height: 150px; margin: 0px;}
+div.tori div:first-child {left: 0px; top: 0px;}
+div.tori div:nth-child(2) {position: absolute; left: 0px; top: 150px;}
+div.tori div:nth-child(3) {position: absolute; left: 100px; top: 0px;}
+div.tori div:nth-child(4) {position: absolute; left: 200px; top: 0px;;}
+div.tori div:nth-child(5) {position: absolute; left: 100px; top: 150px;}
+div.tori div:nth-child(6) {position: absolute; left: 200px; top: 150px;}
+
--- a/event/oasis2016/tori/ckgame.rb	Thu Jul 28 22:16:36 2016 +0900
+++ b/event/oasis2016/tori/ckgame.rb	Fri Jul 29 13:09:15 2016 +0900
@@ -7,7 +7,7 @@
 c = CGI.new(:accept_charset => "UTF-8")
 
 # 前回のアクセスで既にcookieが定義されていたら取得
-# ブラウザからのcookieは、c.cookies[変数名][0] で受け取る
+# ブラウザからのcookieは、c.cpookies[変数名][0] で受け取る
 cookie_id=c.cookies["id"][0]
 
 # 前回のアクセスで入力された値を取得
@@ -33,11 +33,14 @@
   info = db["info"] = db.fetch("info", Hash.new)
   if !info[id]              # もしそのユーザ情報が未登録(空)なら
     info[id] = Hash.new     # 新規ハッシュを割り当てる
+     if form_kwd = ""
+       else
+     end
   end
   if form_name > ""             # formからの名前設定がもしあれば
     info[id]["name"] = form_name # それをユーザ情報に記録
     info[id]["bingo"] = Hash.new # 正解した単語保存用のハッシュも作成
-    if form_kwd > ""
+   if form_kwd > ""
      index = bingoword.index(form_kwd) # 配列から入力単語(form_kwd)を探索
       if index
         # 見付かった! その単語をハッシュのキーとして適当に値(true)を入れておく
@@ -47,22 +50,25 @@
   end
   point = 0# 開始直後は0点
   if !info[id]["name"]      # もしユーザのプレイ名が未設定なら
-    umi = '<img src="umi.png" width="800px" height="600px">'
+    umi = '<img src="umi.png" class=umi>'
     title = "ようこそ!"
     hello = "まちがいさがしスタート"
     guide = "あなたのプレイ名を決めます"
     input = '<input name="playname">'
+    hidden = "<input type=\"hidden\" name=\"keyword\" value=\"#{form_kwd}\">"
     submit = '<input type="submit" value="送信">'
-    reset = '<input type="reset" value="リセット">'
+    reset = '<input type="reset"  value="リセット">'
   else                          # プレイ名設定済みならキーワード入力
     title = sprintf("%s さんのホーム", info[id]["name"])
     setumei = "QRコードを読みこんでパネルを埋めて間違いを探そう!(難易度☆☆)"
     setumei2 = "この絵のパネルは全部で6枚!"
     setumei3 = "元の絵との間違いは全部で3個あるよ♪"
-    seikai = '<img src="tori.jpg" width="450px" height="450px">'
+    seikai = '<img src="tori.jpg" class=seikai>'
     sea = '<a href="http://skip.koeki-prj.org/event/oasis2016/sea/ckgame.rb">難易度☆はこちら</a>'
     don = '<a href="http://skip.koeki-prj.org/event/oasis2016/don/ckgame.rb">難易度☆☆☆はこちら</a>'
     # プレイ名設定済みで、さらにキーワードが入力されていたら
+   
+
     if form_kwd > ""
       index = bingoword.index(form_kwd) # 配列から入力単語(form_kwd)を探索
      # hello = sprintf("現在のポイントは %dpt です。", 25*point)
@@ -78,17 +84,17 @@
     tori = ""; tori2 = ""; tori3 = ""; tori4 = ""; tori5 = ""; tori6 = ""
     info[id]["bingo"].keys.each do |f|
       if /ざっこしめ/ =~ f
-        tori = '<img src="tori-0.jpg" width="150px" height="225px">'
+        tori = '<img src="tori-0.jpg" class=tori>'
       elsif /とぎ/ =~ f
-        tori2 = '<img src="tori-3.jpg" width="150px" height="225px">'
+        tori2 = '<img src="tori-3.jpg" class=tori>'
       elsif /ただみ/ =~ f
-        tori3 = '<img src="tori-1.jpg" width="150px" height="225px">'
+        tori3 = '<img src="tori-1.jpg" class=tori>'
       elsif /けんこ汁/ =~ f
-        tori4 = '<img src="tori-2.jpg" width="150px" height="225px">'
+        tori4 = '<img src="tori-2.jpg" class=tori >'
       elsif /じき汁/ =~ f
-        tori5 = '<img src="tori-4.jpg" width="150px" height="225px">'
+        tori5 = '<img src="tori-4.jpg" class=tori>'
       elsif /はごめがね/ =~ f
-        tori6 = '<img src="tori-5.jpg" width="150px" height="225px">'
+        tori6 = '<img src="tori-5.jpg" class=tori>'
      end
     end
   end
@@ -96,12 +102,21 @@
 <!DOCTYPE html>
 <html lang="ja">
 <head>
+
+<meta name="viewport"
+content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+<meta name="format-detection" content="telephone=no">
+<link media="only screen and (max-device-width:480px)"
+href="../smart.css" type="text/css" rel="stylesheet" />
+
+<link media="screen and (min-device-width:481px)" 
+href="../attack.css"type="text/css" rel="stylesheet" />
+
 <title>まちがいみつけでみっちゃ</title>
-<link rel="stylesheet" type="text/css" href="../attack.css">
 </head>
 
 <body>
-<img src="../img/logo.png" width="900px" height="100px">
+<img src="../img/logo.png" class=logo>
 <p>%s</p>
 <h1>%s</h1>
 <h2>%s</h2>
@@ -113,6 +128,7 @@
 <form action="?" method="GET">
 <p>%s %s<p>
 <p>%s %s</p>
+<p>%s</p>
 </form>
 <p>%s</p>
 <div class="tori">
@@ -125,5 +141,5 @@
 </div>
 </body></html>
 EOF
-         umi, title, setumei, setumei2, setumei3, hello, sea, don, point, guide, input, submit, reset, seikai, tori, tori2, tori3, tori4, tori5, tori6,)
+         umi, title, setumei, setumei2, setumei3, hello, sea, don, point, guide, input, submit, reset, hidden, seikai, tori, tori2, tori3, tori4, tori5, tori6,)
 end

yatex.org