Merge pull request #188 from MYDRY/develop

Develop

app/assets/stylesheets/words.scss

@@ -14,3 +14,116 @@
   .word-form {
   }
 }
+
+/* modal window */
+.modal_popUp,
+input[name="modal_switch"],
+#modal_open + label ~ label {
+  display: none;
+}
+/* HAND MARK */
+#modal_open + label{
+  position: relative;
+  top: -85px;
+  left: 350px;
+  margin-right:100px;
+  margin-top:10px;
+  color:#006e6f;
+  font-size:20px;
+  cursor: pointer;
+}
+#modal_close-button + label {
+  margin-right:100px;
+  margin-top:10px;
+  color:#006e6f;
+  font-size:20px;
+  cursor: pointer;
+}
+
+.modal_popUp {
+  animation: fadeIn 1s ease 0s 1 normal;
+}
+#modal_open:checked ~ #modal_close-button + label{
+  animation: fadeIn 2s ease 0s 1 normal;
+}
+@keyframes fadeIn {
+  0% {opacity: 0;}
+  100% {opacity: 1;}
+}
+
+#modal_open:checked + label ~ .modal_popUp {
+  background: #fff;
+  display: block;
+  width: 1350px;
+  height: 80%;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  z-index: 998;
+}
+
+#modal_open:checked + label ~ .modal_popUp > .modal_popUp-content {
+  width: calc(100% - 40px);
+  height: calc(100% - 20px - 44px );
+  padding: 10px 20px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling:touch;
+}
+
+#modal_open:checked + label + #modal_close-overlay + label {
+  background: rgba(0, 0, 0, 0.70);
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-indent: 100%;
+  z-index: 997;
+}
+
+/* CLOSE BTN */
+#modal_open:checked ~ #modal_close-button + label {
+  display: block;
+  margin-left: 20%;
+  background: #fff;
+  text-align: center;
+  font-size: 25px;
+  line-height: 44px;
+  width: 50%;
+  height: 44px;
+  position: fixed;
+  bottom: 10%;
+  left: 5%;
+  z-index: 999;
+}
+
+#modal_open:checked ~ #modal_close-button + label::before {
+  content: '×';
+}
+#modal_open:checked ~ #modal_close-button + label::after {
+  content: 'CLOSE';
+  margin-left: 5px;
+  font-size: 80%;
+}
+
+/* CONTENT */
+.contents{
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  margin-top: 30px;
+  //float: left;
+  .mandal-img{
+    width: 50%;
+    img{
+      width: 90%;
+    }
+  }
+  .modal-contents{
+    width: 50%;
+  }
+}

app/controllers/ideas_controller.rb

@@ -23,6 +23,7 @@ def create
     @idea = topic.ideas.build(idea_params)
     @idea.user_id = current_user.id
     if @idea.save
+      @idea.user.change_point 5
       flash[:success] = "アイデアを投稿しました"
       view_context.spawn_new_idea_notice(topic)
       redirect_to topic_path(topic)
@@ -49,6 +50,7 @@ def update
   def destroy
     @idea = Idea.find(params[:id])
     @idea.destroy
+    @idea.user.change_point -5
     flash[:success] = "アイデアを削除しました"
     redirect_back fallback_location: topics_path
   end

app/controllers/likes_controller.rb

@@ -6,6 +6,7 @@ def create
     @idea = Idea.find(params[:idea_id])
     like = current_user.likes.build(idea_id: @idea.id)
     like.save
+    @idea.user.change_point 10
     view_context.spawn_like_notice(@idea)
 #    flash[:success] = "いいねしました"
     @idea.reload
@@ -15,6 +16,7 @@ def destroy
     @idea = Idea.find(params[:id])
     like = Like.find_by(idea_id: @idea.id, user_id: current_user.id)
     like.destroy
+    @idea.user.change_point -10
 #    flash[:success] = "いいねを取り消しました"
     @idea.reload
   end

app/controllers/topics_controller.rb

@@ -25,6 +25,7 @@ def new
   def create
     @topic = current_user.topics.build(topic_params)
     if @topic.save
+      @topic.user.change_point 5
       flash[:success] = "トピックを投稿しました"
       redirect_to @topic
     else
@@ -49,6 +50,7 @@ def update
   def destroy
     @topic = Topic.find(params[:id])
     @topic.destroy
+    @topic.user.change_point -5
     flash[:success] = "トピックを削除しました"
     redirect_back fallback_location: topics_path
   end

app/models/user.rb

@@ -18,4 +18,9 @@ class User < ApplicationRecord
   has_many :simple_mandals, dependent: :destroy
 
   mount_uploader :image, ProfileImageUploader
+
+  def change_point(amount)
+    self.point += amount
+    self.save!
+  end
 end

app/views/users/_user.html.erb

@@ -11,6 +11,7 @@
             <li><%= link_to_unless_current user.name, user_path(id: user) %></li>
             <!--<li><%= user.email %></li>-->
           </div>
+          <%= user.point %> points <!--!!!!!!!!!!!!!!!!!!!  EDIT HERE !!!!!!!!!!!!!!!!!!!-->
           <% if user == current_user %>
            <li> <%= link_to edit_user_path(id: user) do %>
               <div style="float: right;"><span class="fa fa-edit fa-2x "></span> 編集</div>

app/views/words/index.html.erb

@@ -2,6 +2,38 @@
   <div class="container">
     <div class="random-words">
       <h1>ランダムワード</h1>
+      <!-- modal window explain random word -->
+      <div>
+        <input id="modal_open" type="radio" name="modal_switch" />
+        <label for="modal_open"><i class="fa fa-question-circle" style="font-size:48px;color:#627295"></i></label>
+        <input id="modal_close-overlay" type="radio" name="modal_switch" />
+        <label for="modal_close-overlay">窓の外を触ると閉じるんだよっ</label>
+        <input id="modal_close-button" type="radio" name="modal_switch" />
+        <label for="modal_close-button"></label>
+        <div class="modal_popUp">
+        <div class="modal_popUp-content"> 
+        <!-- CONTENT -->
+        <div class="contents">
+          <div class="mandal-img"><%= image_tag('random1.png') %></div>
+          <div class="modal-contents">
+            <h2>ランダムワードはアナタの発想力を刺激します！</h2>
+            <h4>たくさんのユーザーが登録した単語からランダムに２単語を出力します。<br>関係性のないものが並んだ時に斬新なアイデアが思い浮かぶことがあります。<br>このランダムツールではその種を提供します</h4>
+          </div>
+        </div>
+          <hr>
+        <div class="contents">
+          <div class="mandal-img"><%= image_tag('random2') %></div>
+          <div class="modal-contents">
+            <h2>使い方</h2>
+            <p>1.「単語追加」から新しい単語を登録し、全ユーザーで共有できます</p>
+            <p>2.「もう一度」を押すとランダムに２単語を再出力します</p>
+          </div>
+        </div>
+        <!-- CONTENT END-->
+        </div>
+       </div>
+      </div>
+      <!-- end modal window -->
       <div class="random-tool">
         <%= @word1.word %>×<%= @word2.word %><br>
         <%= link_to "もう一度", words_path %><br>

db/migrate/20181213071630_add_point_to_user.rb

@@ -0,0 +1,5 @@
+class AddPointToUser < ActiveRecord::Migration[5.2]
+  def change
+    add_column :users, :point, :integer, default: 100
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2018_11_14_001505) do
+ActiveRecord::Schema.define(version: 2018_12_13_071630) do
 
   create_table "comments", force: :cascade do |t|
     t.text "body"
@@ -193,6 +193,7 @@
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.boolean "admin", default: false
+    t.integer "point", default: 100
   end
 
   create_table "words", force: :cascade do |t|