ca21engineer / realtimequiz Goto Github PK

View Code? Open in Web Editor NEW

12.0 1.0 1.0 2.61 MB

Webブラウザだけで遊べるクイズ大会アプリ

License: MIT License

Scala 30.86% Shell 6.30% JavaScript 2.66% Dockerfile 2.02% TypeScript 48.42% SCSS 9.74%

realtimequiz's Introduction

RealtimeQuiz

RealtimeQuizはWebブラウザで動作するクイズ大会アプリケーションです。

Zoomなどの会議通話アプリと一緒に利用することで、数人から数十人のクイズ大会をオンライン上で開催することができます。

試してみる

使い方

部屋の作成と参加

主催者は部屋を作成してください。部屋名は任意です。

参加者は作成した部屋に入室してください。

入室後、ニックネームを入力して準備完了です。

観戦するをクリックすると、プレイヤーではなく観戦者として入室することができます。
主催者は自分のURLを共有することで、他の人と集計を行うことができます。

問題の出題と解答

参加者がある程度集まったら、主催者は問題を出題してください。リアルタイムクイズでは途中参加も可能です。

出題するをクリックすると、参加者の画面に解答画面が表示されます。

参加者は主催者が解答を締め切る前に解答してください。

解答の集計と締め切り

参加者が解答するボタンを押すと、主催者の画面にリアルタイムで解答が表示されます。

この時点から解答にポイント(⭐️)をつけることが可能になります。

解答が集まったら解答を締め切るをクリックしてください。その時点で参加者は回答することができなくなります。

解答を一斉にオープンを押すと、参加者側の画面で他の人の解答をみることができるようになります。

主催者は集計が完了したら、結果発表ボタンを押して集計を確定してください。

星が0以下だった人は青色、星が1以上だった人は赤色で表示されます。

結果発表が終わったら、次の問題へボタンを押して次の問題を出題してください。星の数は持ち越されます。

License

MIT

realtimequiz's People

Contributors

Stargazers

Watchers

Forkers

ogaoga

realtimequiz's Issues

答え機能の実装

仕様書の命名考察

命名案

WaitingQuestion: 出題待ち
- SetQuestion
WaitingAnswer: 回答待ち
- CloseApplications
CLOSED_ANSWER: 締め切り後
- OpenAnswers
AnswerPublished: 回答公開
- AnnounceTheCorrectAnswer
ResultAnnouncement: 結果発表
- GoToNextQuestion

フロントの初期をVanilla JSのみで開発するにあたって確認したいこと

こうしたい

動くのは正義だがstrict modeは欲しい
基本的な考え方として，HTMLをベタがきしてJSでのDOM操作は値を流し込むだけ
明らかにコンポーネント化した方が良いものが出てきたらHTMLで頑張らず、尚且つPureJSにこだわらない

例えば汎用的に使い回したいbuttonに

  // @param {String} mountTargetStr
  function generateGeneralButton(mountTargetStr){
    const mountTarget = document.getElementById(mountTarget);
    const buttonElement = document.createElement("button");
    buttonElement.addEventListener("click" ...

    mountTarget.appendChild(buttonElement);
  }

みたいなコードが必要になったら多分ReactかVue突っ込んだ方が早いと思う

いけるタイミングでTS化する

上記のすべての意見にこだわりないです

ソフトウェアは動くことが正義だと思うので，それ以外の全てを一緒に開発してくれている人たちに合わせたいと考えて生きてます．TSよりJSの方がスピード開発できる人も多いので，その全てを皆さんに合わせます:teishisei:

ローカルで開発しやすい環境を整えたい

星の仕様がわからへん

こうしたい

待機ルームでは，星の数と前回の星との増減値を表示する

例：　⭐️8 （＋1）

回答の評価中には星を表示しない

右上の星をなくす

理由：　忖度してると回答に星つけるのに時間かかりすぎる説

Admin pageが複数が複数に分割されている問題を修正したい

現状だと、Adminが3つのページコンポーネントに分かれており、いろいろ都合がわるいので改修したい

READMEの画像直す

チャット機能実装する？

.envに置き換え

概要

https://github.com/CA21engineer/RealtimeQuiz/blob/master/front/src/configurations/Config.ts

のようなファイルがあるが、urlを切り替える時などを考慮してjsらしく..envに切り替えたい

すべてのViewを創造する

画面使用書：　https://docs.google.com/spreadsheets/d/1IuXTVr6AzpTODuo94Qqxd1PI4JCaH5rZ2M6G89Y5gIo/edit#gid=0

EntranceView
MainGameView
ResultView

名前変更の型ミス

現状

仕様

{
    'type': 'ChangeName',

    'data': {
        'accountName': string
    }
}

やること

typeの先頭は大文字
data型を直す

CIにビルドを追加

Context

#46

効果音再生できる機能を追加する

SBTのテストフロー修正

全般的にリファクタリングしたい

next導入 & デプロイ & docker-composeやるまで寝れま10

Contextを分割したい

現状、絶対不必要なレンダー走ってるので分けたい感。memoしてもいいかも

srcディレクトリ配下をきれいに

~/R/R/front ❯❯❯ tree src -L 1                                                                                                                                                                  master ⬇ ✭ ✚
src
├── components
├── configurations
├── connections
├── constants
├── container
├── controllers
├── interfaces
├── libraries
├── pages
├── store
├── stories
├── style
├── templates
└── utils

@kznrluk が作成してくれたws周りはwsディレクトリにまとめたいかも？